/* Redesign 2026-10: mobile clarity, stronger hierarchy and honest save status. */
:root{
  --app-bg:#09090b;
  --surface:#141417;
  --surface-raised:#1b1b20;
  --surface-soft:#101013;
  --stroke:#2b2b32;
  --stroke-strong:#3a3a43;
  --text:#f7f7f8;
  --text-soft:#b8b8c2;
  --text-muted:#83838f;
  --accent:#ff3d57;
  --accent-deep:#a90f2b;
  --success:#4dd89b;
  --warning:#ffc968;
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:24px;
}

html{background:var(--app-bg)}
body{
  background:
    radial-gradient(circle at 50% -160px,#3b111c 0,transparent 420px),
    var(--app-bg);
  color:var(--text);
}
.app{width:min(100%,680px);background:transparent;border:0!important}

.topbar{
  min-height:72px;
  padding:10px 16px;
  border-bottom:1px solid #ffffff0d;
  background:#09090be8;
  box-shadow:0 8px 30px #0004;
}
.brand{min-width:0}
.app-logo,.mascot-button{width:46px!important;height:46px!important;border-radius:15px!important}
.app-logo{box-shadow:0 0 0 1px #ff60704d,0 9px 26px #0009}
.brand-copy{min-width:0}
.brand-copy strong{font-size:18px!important;line-height:.9!important;white-space:nowrap}
.brand-copy strong small{color:#8f8f9a!important}
.brand-copy span{color:#777782}
.top-actions{gap:8px}
.help-mode-btn,.week-btn{min-height:44px!important}
.help-mode-btn{width:44px!important;height:44px!important;border-color:var(--stroke-strong)!important;background:#17171b!important}
.week-btn{border-color:var(--stroke-strong);border-radius:12px;background:#17171b;padding:0 13px}

.days{
  gap:5px;
  margin:10px 12px 4px;
  padding:5px;
  border:1px solid #ffffff0d;
  border-radius:18px;
  background:#111114d9;
}
.day-btn{
  min-height:58px;
  border:0;
  border-radius:13px;
  background:transparent;
  color:#777783;
}
.day-btn .short{font-size:16px}
.day-btn .type{margin-top:6px;font-size:10px;letter-spacing:.04em;text-transform:none}
.day-btn.active{
  background:linear-gradient(145deg,#ff4059,#c41436);
  color:#fff;
  box-shadow:inset 0 1px 0 #ffffff55,0 8px 20px #d7143845;
}
.day-btn.has-progress:not(.active){border-bottom:0;box-shadow:inset 0 -3px var(--success)}

main{padding:8px 14px 0}
.cloud-save-indicator{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  width:100%;
  min-height:68px;
  margin:8px 0 2px;
  padding:11px 12px;
  border:1px solid #3a3439;
  border-radius:17px;
  background:linear-gradient(135deg,#18171b,#111114);
  color:var(--text);
  text-align:left;
  box-shadow:0 10px 30px #0003;
}
.cloud-save-icon{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:13px;
  background:#29242a;
  color:#d9cfd4;
}
.cloud-save-icon .ui-icon{width:21px;height:21px}
.cloud-save-copy{min-width:0}
.cloud-save-copy strong,.cloud-save-copy small{display:block}
.cloud-save-copy strong{font-size:14px;line-height:1.2}
.cloud-save-copy small{margin-top:4px;overflow:hidden;color:var(--text-muted);font-size:11px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.cloud-save-action{color:#ff91a1;font-size:11px;font-weight:800;text-transform:uppercase}
.cloud-save-indicator[data-state="synced"]{border-color:#28634d;background:linear-gradient(135deg,#10251d,#111715)}
.cloud-save-indicator[data-state="synced"] .cloud-save-icon{background:#173e2f;color:var(--success)}
.cloud-save-indicator[data-state="synced"] .cloud-save-action{color:var(--success)}
.cloud-save-indicator[data-state="syncing"]{border-color:#6b4f24}
.cloud-save-indicator[data-state="syncing"] .cloud-save-icon{background:#3d2f18;color:var(--warning)}
.cloud-save-indicator[data-state="conflict"],.cloud-save-indicator[data-state="error"]{border-color:#7d2939;background:linear-gradient(135deg,#2c1118,#171114)}
.cloud-save-indicator[data-state="conflict"] .cloud-save-icon,.cloud-save-indicator[data-state="error"] .cloud-save-icon{background:#4a1721;color:#ff7890}

.session-live{
  margin:12px 0;
  padding:17px!important;
  border:1px solid #633041!important;
  border-radius:var(--radius-lg)!important;
  background:
    radial-gradient(circle at 100% 0,#ff3d5720,transparent 45%),
    linear-gradient(145deg,#20151a,#121216)!important;
  box-shadow:0 16px 44px #0005!important;
}
.session-live>div:first-child{min-width:0;flex:1}
.session-live strong{font-size:20px!important;letter-spacing:-.01em}
.session-live small{color:#aaa0a7!important}
.session-live .neon-action{min-width:150px}

.schedule-tabs{margin:12px 0 18px!important;padding:4px!important;border-color:#303037!important;background:#131317!important}
.schedule-tabs button{min-height:48px!important;color:#7e7e89!important}
.schedule-tabs [aria-pressed=true]{background:#292126!important;color:#fff!important;box-shadow:inset 0 0 0 1px #6a3040!important}

.overview{
  margin-bottom:18px;
  padding:18px!important;
  border:1px solid #26262d;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg,#17171b 0,#101013 100%);
  box-shadow:0 18px 55px #0005;
}
.athlete-card{
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  margin:0 0 18px!important;
  padding:0 0 15px!important;
  border:0!important;
  border-bottom:1px solid #2b2b32!important;
  border-radius:0!important;
  background:transparent!important;
}
.athlete-name{font-size:15px!important;color:#e9e9ed}
.athlete-method{font-size:10px!important;color:#777783!important}
.athlete-stats{padding:7px 9px;border:1px solid #35353d;border-radius:10px;background:#1f1f24;font-size:12px!important}
.overview>.eyebrow{margin-top:3px;color:#ff7185}
.overview h1{font-size:clamp(44px,14vw,66px);letter-spacing:-.04em}
.focus{margin-top:9px;color:#92929d;font-size:14px}
.progress-card{
  margin-top:18px;
  padding:15px;
  border:1px solid #32323a!important;
  border-left:1px solid #32323a!important;
  border-radius:16px!important;
  background:#1a1a1f!important;
}
.progress-value{color:#fff;font-size:28px}
.progress-track{height:8px;background:#2b2b32}
.progress-fill{background:linear-gradient(90deg,#ff3d57,#ff7b8e);box-shadow:0 0 16px #ff3d5788}

.catchup-button{
  min-height:48px!important;
  margin:0 0 20px!important;
  border:1px dashed #4a4247!important;
  border-radius:14px!important;
  background:#141417!important;
  color:#9d959a!important;
}
#openReadyMixes{
  margin:0 0 18px!important;
  border-color:#403640!important;
  background:#19171b!important;
  color:#ddd5da!important;
  box-shadow:none!important;
  text-shadow:none!important;
}

.muscle-block{margin-top:22px}
.muscle-head{padding:0 2px 11px}
.muscle-head h2{font-size:23px}
.muscle-actions button{min-height:44px!important;padding:8px 10px!important;border-radius:11px!important}
.exercise-list{gap:10px}
.exercise{
  border-color:#2d2d34!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#17171b,#121215)!important;
  box-shadow:0 8px 24px #0002;
}
.exercise-summary{min-height:78px!important;padding:12px 62px 12px 12px!important}
.exercise-title{font-size:20px!important;letter-spacing:.01em}
.tag{border-radius:7px;padding:5px 7px 4px;background:#24242a;color:#a4a4ae}
.swipe-more{top:17px!important;right:12px!important;width:44px!important;height:44px!important;border-radius:12px!important}
.check{width:40px;height:40px;border-color:#494952;background:#0e0e11}
.exercise.done{border-color:#2d664e!important;background:linear-gradient(145deg,#122019,#111513)!important}
.exercise.done .check{border-color:var(--success);background:var(--success);color:#07150f}

.catalog-cta{border-radius:15px!important}
#browseLibrary{margin-top:24px!important}
#workoutView>.microcopy:last-child{display:none}

.bottom-bar{
  padding:8px 8px calc(8px + var(--safe-bottom));
  border-top:1px solid #ffffff12;
  background:#0d0d10f2;
  box-shadow:0 -18px 50px #0008;
}
.bottom-inner{width:min(100%,650px);gap:3px!important}
.nav-btn{
  min-height:62px!important;
  padding:5px 2px!important;
  border:1px solid transparent!important;
  border-radius:13px!important;
  color:#70707b!important;
  font-family:Inter,system-ui,sans-serif!important;
  font-size:9px!important;
  font-weight:700!important;
}
.nav-btn.active{
  border-color:#663042!important;
  background:#28141b!important;
  color:#fff!important;
  box-shadow:inset 0 0 14px #ff3d5718!important;
}
.nav-icon .ui-icon{width:22px;height:22px}
.timer-btn{width:58px!important;height:58px!important;border:1px solid #ff8091!important;background:linear-gradient(145deg,#ff405a,#c70e35)!important;box-shadow:0 8px 22px #e51e423d!important}

button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#ff8b9c!important}

@media(max-width:420px){
  .topbar{padding-right:12px;padding-left:12px}
  .brand-copy strong{font-size:16px!important}
  .brand-copy span{display:none}
  .help-mode-btn{display:none}
  .week-btn{font-size:14px}
  main{padding-right:12px;padding-left:12px}
  .cloud-save-indicator{grid-template-columns:38px minmax(0,1fr) auto;padding:10px}
  .cloud-save-icon{width:38px;height:38px}
  .cloud-save-copy small{max-width:205px}
  .session-live{align-items:stretch!important}
  .session-live>button,.session-actions{width:100%}
  .session-live>button{min-height:50px}
  .athlete-card{grid-template-columns:minmax(0,1fr) auto!important}
  .athlete-stats{font-size:11px!important}
  .overview{padding:16px!important}
  .muscle-head{align-items:center!important}
  .muscle-actions{align-items:flex-end!important}
}

@media(max-width:360px){
  .brand-copy strong{font-size:14px!important}
  .week-btn{padding:0 8px;font-size:13px}
  .cloud-save-action{display:none}
  .cloud-save-indicator{grid-template-columns:38px minmax(0,1fr)}
  .athlete-card{grid-template-columns:1fr!important}
  .athlete-stats{justify-self:start}
}

@media(prefers-reduced-motion:reduce){
  .progress-fill{transition:none}
}