/* Hybrid Training — Mobile-first app styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0b0d;--surface:#12141a;--surface2:#1a1d26;--text:#f5f6f8;--muted:#8b92a0;
  --accent:#d7ff51;--accent-dim:rgba(215,255,81,.12);--accent2:#00c2ff;--danger:#ff5c5c;--warning:#ffb020;
  --border:#252830;--radius:16px;--nav-h:64px;--safe-b:env(safe-area-inset-bottom,0px);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --glass:rgba(18,20,26,.85);
}
html{font-size:16px;-webkit-tap-highlight-color:transparent}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;min-height:100dvh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:var(--text)}

.app-shell{max-width:480px;margin:0 auto;min-height:100dvh;padding-bottom:calc(var(--nav-h) + var(--safe-b) + 8px)}
.page{padding:16px 16px 24px}

/* Header */
.app-header{padding:20px 16px 12px}
.app-header h1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.app-header p{color:var(--muted);font-size:.875rem;margin-top:4px}
.header-row{display:flex;justify-content:space-between;align-items:flex-start}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px}
.card-accent{border-color:var(--accent);background:linear-gradient(135deg,var(--accent-dim),rgba(0,194,255,.04))}
.card-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;margin-bottom:6px}
.card-title{font-size:1.05rem;font-weight:700;margin-bottom:4px}
.card-meta{font-size:.8rem;color:var(--muted)}

/* Stats row */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.stat-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
.stat-val{font-size:1.25rem;font-weight:800;color:var(--accent)}
.stat-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;margin-top:2px}

/* Phase badge */
.phase-badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:700;text-transform:uppercase}
.phase-base{background:rgba(0,194,255,.15);color:var(--accent2)}
.phase-volume{background:var(--accent-dim);color:var(--accent)}
.phase-intensity{background:rgba(255,176,32,.15);color:var(--warning)}
.phase-deload{background:rgba(139,149,165,.15);color:var(--muted)}
.phase-benchmark{background:rgba(255,92,92,.15);color:var(--danger)}
.phase-casa{background:rgba(255,143,199,.18);color:#ff8fc7}

/* Home workout (casa) theme */
.theme-casa{--casa-accent:#ff8fc7;--casa-accent-dim:rgba(255,143,199,.12)}
.theme-casa .block-name{color:var(--casa-accent)}
.theme-casa .stat-val,.theme-casa .nav-item.active{color:var(--casa-accent)}
.theme-casa .casa-btn{background:linear-gradient(135deg,#ff8fc7,#c77dff);color:#1a1020}
.theme-casa .card-casa{border-color:rgba(255,143,199,.35);background:linear-gradient(135deg,var(--casa-accent-dim),rgba(199,125,255,.06))}
.casa-badge{padding:6px 12px;border-radius:999px;font-size:.7rem;font-weight:700;background:var(--casa-accent-dim,rgba(255,143,199,.12));color:var(--casa-accent,#ff8fc7);border:1px solid rgba(255,143,199,.25)}
.casa-hero{border-color:rgba(255,143,199,.2)!important}
.casa-intro{font-size:.82rem;color:var(--muted);margin-top:14px;line-height:1.55}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:14px;font-weight:700;font-size:.95rem;width:100%;transition:.15s}
.btn-primary{background:var(--accent);color:#0a0b0d}
.btn-primary:active{transform:scale(.98);opacity:.9}
.btn-secondary{background:var(--surface2);border:1px solid var(--border);color:var(--text)}
.btn-ghost{color:var(--muted);padding:10px}
.btn-sm{padding:10px 16px;font-size:.85rem;width:auto;border-radius:10px}

/* Bottom nav */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:8px 0 calc(8px + var(--safe-b));z-index:100;max-width:480px;margin:0 auto}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;color:var(--muted);font-size:.65rem;font-weight:600;min-width:56px}
.nav-item.active{color:var(--accent)}
.nav-icon{font-size:1.25rem}

/* Workout */
.workout-hero{background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.workout-hero h2{font-size:1.35rem;font-weight:800;margin-bottom:8px}
.workout-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tag{padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:600;background:var(--surface2);color:var(--muted)}

.block{margin-bottom:20px}
.block-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.block-name{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.block-time{font-size:.75rem;color:var(--muted)}

.exercise{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:8px;transition:.15s}
.exercise.done{border-color:var(--accent);opacity:.7}
.exercise.done .ex-name{text-decoration:line-through;color:var(--muted)}
.ex-top{display:flex;gap:12px;align-items:flex-start}
.ex-check{width:24px;height:24px;border-radius:8px;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px;transition:.15s}
.exercise.done .ex-check{background:var(--accent);border-color:var(--accent);color:#0a0b0d;font-size:.75rem;font-weight:800}
.ex-info{flex:1}
.ex-name{font-weight:700;font-size:.95rem;margin-bottom:4px}
.ex-detail{font-size:.8rem;color:var(--muted)}
.ex-load{font-size:.8rem;color:var(--accent2);font-weight:600;margin-top:4px}
.ex-notes{font-size:.75rem;color:var(--muted);margin-top:6px;font-style:italic}

/* Timer */
.timer-bar{background:var(--surface2);border-radius:12px;padding:16px;text-align:center;margin-bottom:16px;display:none}
.timer-bar.active{display:block}
.timer-display{font-size:2.5rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)}
.timer-label{font-size:.75rem;color:var(--muted);margin-bottom:8px}
.timer-actions{display:flex;gap:8px;margin-top:12px;justify-content:center}

/* Progress bar workout */
.session-progress{height:4px;background:var(--surface2);border-radius:999px;margin-bottom:16px;overflow:hidden}
.session-progress-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .3s}

/* Calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:16px}
.cal-head{text-align:center;font-size:.65rem;color:var(--muted);padding:4px;font-weight:600}
.cal-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;font-size:.8rem;font-weight:600;background:var(--surface);border:1px solid transparent;cursor:pointer;position:relative}
.cal-day.training{border-color:var(--accent2)}
.cal-day.rest{opacity:.5}
.cal-day.done{background:var(--accent-dim);border-color:var(--accent)}
.cal-day.today{box-shadow:0 0 0 2px var(--accent)}
.cal-day.active{box-shadow:0 0 0 2px var(--accent2)}
.cal-day-num{font-size:.85rem}
.cal-day-dot{width:4px;height:4px;border-radius:50%;background:var(--accent);margin-top:2px}

/* Day detail in plan */
.day-list{display:flex;flex-direction:column;gap:8px}
.day-item{display:flex;align-items:center;gap:12px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;cursor:pointer}
.day-item.done{border-color:var(--accent)}
.day-item.rest-day{opacity:.6}
.day-num{width:36px;height:36px;border-radius:10px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex-shrink:0}
.day-item.done .day-num{background:var(--accent);color:#0a0b0d}
.day-info{flex:1}
.day-info h4{font-size:.9rem;font-weight:700}
.day-info p{font-size:.75rem;color:var(--muted)}

/* Progress charts placeholder */
.progress-ring{width:120px;height:120px;margin:0 auto 16px}
.metric-input{display:flex;gap:8px;margin-bottom:12px}
.metric-input input{flex:1;padding:12px;background:var(--surface2);border:1px solid var(--border);border-radius:10px}
.log-list{display:flex;flex-direction:column;gap:8px}
.log-item{display:flex;justify-content:space-between;padding:12px;background:var(--surface2);border-radius:10px;font-size:.85rem}

/* Profile */
.profile-hero{text-align:center;padding:24px 16px}
.profile-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:#0a0b0d;margin:0 auto 12px}
.goal-card{background:var(--surface2);border-radius:12px;padding:14px;margin-top:12px;text-align:left}
.goal-card h4{font-size:.8rem;color:var(--muted);margin-bottom:8px;text-transform:uppercase}

/* Rest day */
.rest-hero{text-align:center;padding:40px 20px}
.rest-icon{font-size:3rem;margin-bottom:16px}

/* Toast */
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:var(--accent);color:#0a0b0d;padding:12px 20px;border-radius:12px;font-weight:600;font-size:.875rem;z-index:200;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* Complete overlay */
.complete-overlay{position:fixed;inset:0;background:rgba(13,15,18,.95);z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
.complete-overlay h2{font-size:1.75rem;font-weight:800;margin:16px 0 8px}
.complete-overlay p{color:var(--muted);margin-bottom:24px}

@media(min-width:481px){
  body{background:#080a0c}
  .app-shell{box-shadow:0 0 0 1px var(--border)}
  .bottom-nav{left:50%;transform:translateX(-50%);width:480px}
}

/* Run 5K */
.run-hero{background:linear-gradient(160deg,rgba(0,194,255,.1),var(--surface));border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.run-type-badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.7rem;font-weight:700;text-transform:uppercase;margin-bottom:10px}
.run-easy{background:rgba(0,194,255,.15);color:var(--accent2)}
.run-steady{background:var(--accent-dim);color:var(--accent)}
.run-tempo{background:rgba(255,176,32,.15);color:var(--warning)}
.run-interval{background:rgba(255,92,92,.15);color:var(--danger)}
.run-recovery{background:rgba(139,149,165,.15);color:var(--muted)}
.run-benchmark{background:rgba(255,92,92,.2);color:var(--danger)}
.pace-display{font-size:1.75rem;font-weight:800;color:var(--accent2);margin:8px 0}
.run-detail{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:8px}
.run-detail h4{font-size:.75rem;color:var(--muted);text-transform:uppercase;margin-bottom:6px;letter-spacing:.05em}
.run-detail p{font-size:.875rem;line-height:1.5}
.gym-sync{font-size:.8rem;color:var(--muted);padding:10px 14px;background:var(--surface2);border-radius:10px;margin-bottom:16px;border-left:3px solid var(--accent)}
.time-input{display:flex;gap:8px;align-items:center;margin-top:12px}
.time-input input{width:70px;padding:12px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;text-align:center;font-size:1.1rem;font-weight:700}
.time-input span{color:var(--muted);font-weight:700;font-size:1.2rem}
.run-week-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:16px;-webkit-overflow-scrolling:touch}
.run-day-pill{flex-shrink:0;padding:10px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--border);font-size:.8rem;font-weight:600;cursor:pointer;text-align:center;min-width:64px}
.run-day-pill.active{border-color:var(--accent2);background:rgba(0,194,255,.1)}
.run-day-pill.done{border-color:var(--accent)}
.run-day-pill .pill-num{font-size:1rem;font-weight:800;display:block}
.run-day-pill .pill-type{font-size:.6rem;color:var(--muted);margin-top:2px}
.day-item-full{flex-direction:column;align-items:stretch}
.day-item-full>a:first-child{display:flex;align-items:center;gap:12px}
.run-plan-link{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;background:var(--surface2);border-radius:10px;font-size:.78rem;color:var(--accent2);text-decoration:none;border:1px solid transparent}
.run-plan-link.done{border-color:var(--accent);color:var(--accent)}
.run-plan-pace{color:var(--muted);font-size:.7rem}
@media(max-width:768px){.nav-item{font-size:.6rem;min-width:48px;padding:6px 4px}}

/* Dashboard greeting */
.greeting-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.greeting-row h1{font-size:1.35rem}
.greeting-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#0a0b0d;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem}
.exercise-preview{display:flex;gap:10px;margin-top:14px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.preview-thumb{flex-shrink:0;width:72px;text-align:center}
.preview-thumb img,.preview-thumb .preview-placeholder{width:72px;height:72px;border-radius:12px;object-fit:contain;background:#111;border:1px solid var(--border)}
.preview-gif{background:#111}
.preview-placeholder{display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.preview-thumb span{font-size:.6rem;color:var(--muted);display:block;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72px}

/* Browse grid */
.search-bar{margin-bottom:12px}
.search-bar input{width:100%;padding:14px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:14px;font-size:.95rem}
.search-bar input:focus{outline:none;border-color:var(--accent)}
.filter-chips{display:flex;gap:8px;margin-bottom:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.filter-chips select{flex-shrink:0;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:999px;font-size:.75rem;font-weight:600}
.browse-count{font-size:.75rem;color:var(--muted);margin-bottom:12px}
.exercise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.exercise-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.15s}
.exercise-card:active{transform:scale(.98)}
.exercise-card-img{aspect-ratio:1;background:var(--surface2) center/cover no-repeat;position:relative}
.exercise-card-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2rem}
.exercise-card-level{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:999px;font-size:.6rem;font-weight:700;background:rgba(0,0,0,.6);color:var(--accent)}
.exercise-card-body{padding:10px 12px 12px}
.exercise-card-body h3{font-size:.82rem;font-weight:700;line-height:1.3;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.exercise-card-body p{font-size:.68rem;color:var(--muted)}
.empty-msg{text-align:center;color:var(--muted);padding:32px 16px;font-size:.9rem}

/* Exercise detail */
.exercise-hero{height:280px;background:var(--surface2) center/cover no-repeat;position:relative}
.exercise-hero-overlay{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(10,11,13,.95));display:flex;flex-direction:column;justify-content:flex-end;padding:20px 16px}
.exercise-hero h1{font-size:1.5rem;font-weight:800;line-height:1.2;margin:8px 0}
.back-btn{position:absolute;top:16px;left:16px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;font-size:1.1rem;z-index:2}
.hero-pills{display:flex;flex-wrap:wrap;gap:6px}
.hero-pill{padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:600;background:var(--surface2);color:var(--muted)}
.exercise-gallery{margin:-12px 16px 12px;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.exercise-gallery img{width:100%;display:block}
.muscle-tags{display:flex;flex-wrap:wrap;gap:6px}
.muscle-tag{padding:6px 12px;border-radius:999px;font-size:.75rem;font-weight:600;background:var(--surface2);color:var(--muted)}
.muscle-tag.primary{background:var(--accent-dim);color:var(--accent)}
.instruction-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.instruction-list li{display:flex;gap:12px;align-items:flex-start}
.step-num{width:24px;height:24px;border-radius:8px;background:var(--accent);color:#0a0b0d;font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.instruction-list p{font-size:.85rem;line-height:1.55;color:var(--muted)}
.exercise-detail-loading{padding:40px;text-align:center;color:var(--muted)}

/* Exercise row with thumb */
.exercise.has-thumb .ex-top{align-items:center}
.ex-thumb{width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--surface2);flex-shrink:0;border:1px solid var(--border);cursor:pointer}
.ex-actions{display:flex;gap:8px;margin-top:10px}
.ex-actions .btn{flex:1}

/* Active exercise overlay */
.active-exercise{position:fixed;inset:0;z-index:400;background:#0a0b0d;display:flex;flex-direction:column}
.exercise-card-img.ex-gif-wrap{display:flex;align-items:center;justify-content:center;background:var(--surface2);aspect-ratio:1;overflow:hidden}
.ex-gif{width:100%;height:100%;object-fit:contain;background:#111}
.ex-gif-hero{width:100%;max-height:320px;object-fit:contain;background:#111;display:block;margin:0 auto}
.exercise-gif-hero{position:relative;background:#111;padding:16px 0}
.ex-gif-active{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0a0b0d;opacity:.85}
.active-exercise-bg{flex:1;position:relative;min-height:0;background:#0a0b0d}
.active-exercise-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(10,11,13,.9))}
.active-exercise-counter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:5rem;font-weight:800;color:rgba(215,255,81,.25);font-variant-numeric:tabular-nums;pointer-events:none}
.active-exercise-info{position:absolute;bottom:0;left:0;right:0;padding:24px 20px}
.active-exercise-info h2{font-size:1.25rem;font-weight:800;margin-bottom:6px}
.active-exercise-info p{font-size:.85rem;color:var(--muted);margin-bottom:4px}
.active-exercise-info .ex-load{color:var(--accent);font-weight:600;font-size:.9rem}
.active-exercise-bar{padding:16px 16px calc(16px + var(--safe-b));background:var(--surface);border-top:1px solid var(--border);display:flex;gap:10px;align-items:center}
.active-exercise-bar .btn{flex:1}
.active-exercise-bar .btn-check{width:56px;flex:0 0 56px;height:56px;border-radius:14px;background:var(--accent);color:#0a0b0d;font-size:1.25rem;font-weight:800}
.active-exercise-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.5);z-index:2;font-size:1rem}
.active-progress{font-size:.75rem;color:var(--muted);text-align:center;padding:8px 0 0}