/* SUPs 1.1 — unified navy, ivory and champagne visual system. */
:root {
  --bg:#101b30;
  --panel:#17263e;
  --panel2:#20324d;
  --panel3:#2b4262;
  --line:rgba(160,186,225,.16);
  --text:#f4f5f7;
  --muted:#a8b6ce;
  --accent:#e3c38e;
  --accent-hi:#f1d6aa;
  --accent-soft:#34332f;
  --radius:20px;
  --gold:#e3c38e;
  --blue:#88adf3;
  --ink:#172135;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html {background:var(--bg);}
body {
  background:radial-gradient(ellipse at 13% 0,rgba(64,103,172,.17),transparent 50%),
    radial-gradient(ellipse at 90% 35%,rgba(59,79,125,.12),transparent 42%),#101b30;
  line-height:1.5;
}
button,input,select,textarea,a {touch-action:manipulation;}
button,a,input,select,textarea {transition:background-color .18s,border-color .18s,box-shadow .18s,color .18s;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--gold);outline-offset:3px;
}
input,select,textarea {min-width:0;background:#111f35;border-color:#354660;color:var(--text);border-radius:12px;}
input::placeholder,textarea::placeholder {color:#8e9db6;opacity:1;}
input:focus,select:focus,textarea:focus {border-color:#c2a779;box-shadow:0 0 0 3px #e3c38e12;}
input[type="checkbox"] {accent-color:var(--gold);}
.btn {font-weight:700;letter-spacing:.005em;border-radius:12px;}
.btn.primary {
  color:#152036;background:linear-gradient(110deg,#f0d7b0,#e3c38e 64%,#d9b777);
  border:1px solid #ead0a3;box-shadow:inset 0 1px #ffffff44,0 5px 18px #0002;
}
.btn.primary:hover {filter:none;background:linear-gradient(110deg,#f6e1bf,#e9cd9e);box-shadow:0 5px 24px #e3c38e18;}
.btn.primary:active {transform:translateY(1px);}
.btn.ghost {background:#21324c;color:#dbe4f4;border:1px solid #3a4c69;}
.btn.ghost:hover {border-color:#879dbd;background:#293d59;}
.btn.danger {color:#ffb9c3;background:#301f2b;border-color:#68414f;}
.icon-btn {background:#1d2c44;border-color:var(--line);}
.card,.hero,.stat,.session-row {
  border-color:var(--line);background:linear-gradient(135deg,#1b2c47,#17253c);
  box-shadow:0 8px 28px #060e1a1f,inset 0 1px #ffffff03;
}
.card {padding:20px;}
.hero {padding:24px;border-radius:22px;}
.hero h2 {letter-spacing:-.035em;}
.hero.accent,.today-card {
  background:radial-gradient(ellipse at 100% 0,#4a60822b,transparent 62%),linear-gradient(125deg,#253d60,#192b46);
  border-color:#c4aa7b55;
  box-shadow:inset 3px 0 0 #e3c38e,0 10px 30px #0002;
}
.eyebrow {color:#d0c4ad;font-size:10px;font-weight:700;letter-spacing:.11em;}
.empty {background:#111f34;border-color:#3a4c67;color:#a6b5cd;font-size:13px;}
.section-title h3 {font-size:16px;font-weight:700;letter-spacing:-.02em;}
.section-title a,.progress-snapshot a {color:#e3c38e;font-weight:600;}
.routine-badge {
  background:linear-gradient(145deg,#f0d5a7,#d6b279);color:#152036;
  border:1px solid #efd4a155;box-shadow:none;border-radius:13px;
}
.stat {border-radius:17px;padding:15px;}
.stat span,.stat small {font-size:11px;color:#a8b6ce;}
.stat strong {font-size:26px;font-weight:650;letter-spacing:-.035em;line-height:1.2;margin:8px 0;}
.stat.featured {border-color:#e3c38e55;background:linear-gradient(145deg,#2b3b51,#1b2b43);}
.progress-snapshot {border-left:3px solid #80a5ea;gap:12px;}
.progress-snapshot strong {color:#f2d5a6;font-size:34px;font-weight:650;letter-spacing:-.03em;}
.progress-snapshot span {margin-bottom:4px;}
.routine-card.expanded {border-color:#9eb9e96b;}
.routine-item {border-top-color:var(--line);}
.index,.set-no {background:#233550;border-color:#4657746b;color:#d2def1;}
.note {background:#2b3240;border-color:#6e624c;color:#eddec5;}
.set-row.done input {background:#2b3d46;border-color:#688074;}
.set-row.done .check {color:#152036;background:#e3c38e;border-color:#e3c38e;}
.set-row.done {opacity:1;}
.check {background:#243750;color:#e3c38e;border-color:#4e6386;}
.set-type,.first-session-hint {color:#b6c4da;}
.vi-name {color:#b3c4dd;}
.unit-switch {background:#132138;border-color:#3b5274;}
.unit-switch button {color:#b4c4df;}
.unit-switch button.active {color:#182236;background:#e3c38e;box-shadow:none;}
.workout-add-exercise {background:#223a5a!important;border-color:#5f7ca5!important;color:#e0eaf9!important;}
.workout-head {background:rgba(20,35,57,.97);border-color:#5c729555;box-shadow:0 8px 20px #0004;}
.workout-header-actions .eye-toggle {background:#253853;border-color:#5b7296;color:#dae6f7;}
.workout-header-actions .eye-toggle[aria-pressed="true"] {color:#f0d3a3;border-color:#b69b6c;background:#3c3c39;}
.menu-trigger {background:#233650;border-color:#455d80;color:#dce7f8;}
.menu-trigger[aria-expanded="true"] {background:#3a3b39;border-color:#e3c38e;}
.action-menu {background:#22344f;border-color:#4c6589;}
.menu-option:hover,.menu-option:focus-visible {background:#354a68;}
.cycle-overview {background:#17273f;border-color:#3f5574;}
.cycle-overview span {color:#e3c38e;}
.cycle-overview strong {color:#e0e9f7;}
.cycle-overview small {color:#a8b6ce;}
.segmented {background:#111f34;border-color:var(--line);border-radius:14px;}
.segmented button {font-weight:650;}
.segmented button.active {background:#314463;color:#f1d4a5;}
.cal-cell {background:#14233a;border-color:#314460;}
.cal-cell.trained {color:#f9eedb;background:#3d4244;border-color:#b69e7399;}
.cal-cell.trained i {background:#e3c38e;}
.cal-cell.trained em {color:#172135;background:#e3c38e;}
.chart-card canvas {background:linear-gradient(180deg,#13223a,#101d31);border-color:#304562;}
.progress-row em {color:#e3c38e;}
.modal {background:#18283f;border-color:#53688799;border-radius:22px;}
.modal-head {background:#18283f;}
.modal-actions {background:linear-gradient(transparent,#18283f 18%);}
.modal-head h3 {font-weight:650;letter-spacing:-.02em;}
.advice-disclaimer {border-color:#a88f654f;background:linear-gradient(135deg,#313c4a,#213048);}
.advice-disclaimer strong {color:#ecd1a3;}
.advice-disclaimer p {color:#bfcde0;}
.toast {background:#25364e;border-color:#9e8e6f;box-shadow:0 8px 30px #0006;}
.toast.error {background:#412936;border-color:#a65a6d;}
.finish-summary>strong {color:#e3c38e;}
/* One consistent, borderless wordmark. No cropped blue rectangle or duplicate SUPs text. */
.sups-wordmark {display:block;object-fit:contain;max-width:100%;height:auto;filter:drop-shadow(0 3px 14px #0001);}
.brand-lockup,.app-brand-lockup {position:relative;z-index:1;}
.brand-discipline {
  display:flex;align-items:center;justify-content:center;gap:13px;
  text-transform:uppercase;color:#e7cda3;font-weight:550;font-size:12px;letter-spacing:.19em;line-height:1.4;
}
.brand-discipline span {display:block;width:29px;height:1px;background:linear-gradient(90deg,transparent,#e3c38e8c);}
.brand-discipline span:last-child {transform:rotate(180deg);}
.profile-gate {
  width:100%;max-width:510px;padding:18px 16px calc(25px + env(safe-area-inset-bottom));
  min-height:100svh;margin:0 auto;
}
.brand-panel {
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  border-radius:24px;padding:25px 22px 18px;min-height:0;margin:0 0 14px;
  border:1px solid #647ca14d;
  background:radial-gradient(ellipse at 20% 0,#5b7ead20,transparent 65%),linear-gradient(150deg,#29436c,#1c3152 75%);
  box-shadow:inset 0 1px 0 #ffffff0a,0 12px 40px #040b161c;
}
.brand-panel::before {
  content:"";inset:0;opacity:.45;pointer-events:none;
  background:radial-gradient(ellipse at 0 0,#9ebcf115,transparent 60%);
}
.brand-panel::after {
  inset:0 auto auto 12%;width:76%;height:1px;opacity:.8;
  background:linear-gradient(90deg,transparent,#d7c09699,transparent);
}
.brand-panel .brand-kicker {
  font-size:clamp(11px,3.15vw,14px)!important;letter-spacing:.035em!important;
  font-weight:650;white-space:nowrap!important;line-height:1.4;text-shadow:none;margin:0;max-width:none;
  color:#e4ebf6;
}
.brand-lockup {width:100%;max-width:410px;margin:22px auto 0;}
.brand-lockup .sups-wordmark {width:100%;margin:0 auto 12px;aspect-ratio:647 / 163;}
.brand-location {
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:5px;
  margin-top:17px;font-size:11px;line-height:1.5;font-weight:450;color:#d2def0;
}
.brand-location svg {color:#dbc39e;flex-shrink:0;}
.brand-panel .brand-note {color:#aabbd5!important;font-size:10px;line-height:1.6;margin:6px 0 0!important;}
.author-credit {color:#9caac0;font-size:10px;font-weight:400;letter-spacing:.025em;line-height:1.5;text-align:center;}
.brand-panel .author-credit-login {
  margin:24px auto 0;font-size:9px;line-height:1.5;color:#a9b6cd;position:relative;
}
.author-credit-settings {padding:17px 12px 28px;font-size:10px;color:#a8b6ca;}
.author-credit-settings::before {content:"";display:block;width:42px;height:1px;background:#ad957566;margin:0 auto 14px;}
.auth-card {
  padding:25px 24px 24px;border-radius:24px;margin:0;
  background:linear-gradient(150deg,#1d2d47,#17243b);border-color:#52698755;
  box-shadow:inset 0 1px #ffffff04,0 12px 35px #0001;
}
.auth-eyebrow {font-size:8px;font-weight:600;letter-spacing:.15em;color:#d6ba8e;text-align:center;margin:0 0 6px;}
.auth-card h2 {font-size:24px;line-height:1.3;font-weight:650;letter-spacing:-.035em;margin:0 0 7px;}
.auth-card>.hint {font-size:12px;color:#acbad0;margin:0 0 22px;line-height:1.5;}
.auth-card label {font-size:12px;font-weight:500;line-height:1.5;color:#d2dced;margin-bottom:16px;}
.auth-card input {
  background:#132139;border:1px solid #425775b3;height:49px;border-radius:11px;
  margin-top:7px;padding:11px 14px;box-shadow:inset 0 1px 4px #0001;font-weight:400;
}
.auth-card input:focus {border-color:#d2b98b;box-shadow:0 0 0 3px #e3c38e0e;}
.auth-card .btn.primary {min-height:49px;font-size:14px;margin-top:3px;}
.auth-separator {color:#94a5be;font-size:11px;margin:18px 0;gap:13px;}
.auth-separator::before,.auth-separator::after {background:#495a745e;}
.auth-card .btn.ghost {min-height:45px;font-size:13px;background:#223550;border-color:#4a638588;}
.auth-back {margin-top:11px;}
/* App pages: larger SUPs wordmark, compact secondary text, generous content rhythm. */
.app-shell {max-width:850px;}
.topbar {position:relative;padding:24px 20px 0;background:transparent;}
.system-title {font-size:12px;line-height:1.4;letter-spacing:.055em;font-weight:600;color:#c7d4e7;white-space:nowrap;text-wrap:initial;}
.app-brand-lockup {width:245px;max-width:78%;margin:19px auto 0;}
.app-brand-lockup .sups-wordmark {width:100%;aspect-ratio:647 / 163;margin:0 0 9px;}
.app-brand-lockup .brand-discipline {font-size:9px;letter-spacing:.16em;gap:9px;}
.app-brand-lockup .brand-discipline span {width:21px;}
.app-brand-address {margin-top:11px;color:#a5b7d1;font-size:10px;font-weight:400;}
.page-title {
  text-align:left;border-top:1px solid #7c98c326;margin-top:24px;padding-top:19px;
  font-size:24px;line-height:1.3;font-weight:650;letter-spacing:-.035em;color:#f4f5f7;
}
main {padding:16px 20px calc(112px + env(safe-area-inset-bottom));}
section {margin-bottom:17px;}
.toolbar {gap:8px;align-items:stretch;flex-wrap:wrap;overflow:visible;}
.toolbar .btn {font-size:12px;min-height:42px;padding-inline:12px;}
.bottom-nav {
  max-width:760px;width:calc(100% - 26px);padding:6px;border-radius:19px;gap:3px;
  background:rgba(24,39,63,.96);border:1px solid #657d9e66;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 12px 40px #0006,inset 0 1px #ffffff05;
}
.bottom-nav a {position:relative;border-radius:13px;padding:9px 1px 7px;gap:5px;color:#a6b6d0;font-size:9px;font-weight:500;}
.bottom-nav b {display:flex;align-items:center;justify-content:center;font-size:inherit;line-height:1;}
.bottom-nav a.active {color:#f0d4a3;background:linear-gradient(135deg,#685d453b,#d3b67c14);}
.bottom-nav a.active::after {content:"";position:absolute;bottom:2px;left:calc(50% - 7px);width:14px;height:2px;border-radius:2px;background:#e3c38e;}
.bottom-nav a:hover {color:#f4ddb9;}
.app-shell.in-workout .topbar {padding-bottom:0;}
@media (max-width:560px) {
  .topbar {padding:22px 16px 0;}
  main {padding:14px 16px calc(105px + env(safe-area-inset-bottom));}
  .card {padding:17px;}
  .hero {padding:20px;}
  .hero h2 {font-size:31px;}
  .stat-grid {gap:9px;}
  .stat {padding:13px 11px;}
  .stat strong {font-size:24px;}
  .stat span {font-size:10px;}
  .stat small {font-size:10px;}
  .page-title {font-size:22px;margin-top:21px;padding-top:18px;}
  .progress-snapshot strong {font-size:31px;}
  .progress-snapshot a {font-size:11px;}
  .app-brand-lockup {width:225px;}
  .workout-ex {padding:14px 10px;}
  .workout-ex .exercise-title h3 {font-size:14px;}
}
@media (max-width:370px) {
  .profile-gate {padding:12px 12px 24px;}
  .brand-panel {padding:22px 16px 17px;}
  .brand-panel .brand-kicker {font-size:10.5px!important;letter-spacing:.01em!important;}
  .brand-location {font-size:10px;gap:4px;}
  .brand-panel .brand-note {font-size:9px;}
  .auth-card {padding:23px 19px;}
  .auth-card h2 {font-size:23px;}
  .system-title {font-size:10px;letter-spacing:.025em;}
  .bottom-nav a {font-size:8px;}
  .stat-grid {gap:6px;}
  .stat {padding:11px 9px;}
  .stat strong {font-size:21px;}
  .app-brand-lockup {width:208px;}
}
@media (min-width:900px) {
  .profile-gate {
    display:grid;grid-template-columns:1.08fr 1fr;align-content:center;align-items:stretch;gap:24px;
    max-width:1050px;padding:50px 30px;min-height:100svh;
  }
  .brand-panel {
    justify-content:center;padding:40px 30px 27px;margin:0;border-radius:28px;
    background:radial-gradient(ellipse at 10% 0,#6d94c22d,transparent 68%),linear-gradient(150deg,#2d4b78,#1a3153);
  }
  .brand-panel .brand-kicker {font-size:13px!important;letter-spacing:.02em!important;}
  .brand-lockup {margin-top:40px;margin-bottom:8px;}
  .brand-lockup .sups-wordmark {margin-bottom:18px;}
  .brand-location {margin-top:24px;font-size:11px;}
  .brand-panel .brand-note {margin-top:8px!important;}
  .brand-panel .author-credit-login {margin-top:47px;font-size:9px;}
  .auth-card {padding:37px 32px;border-radius:28px;}
  .auth-eyebrow,.auth-card h2,.auth-card>.hint {text-align:left;}
  .auth-card h2 {font-size:28px;margin-bottom:8px;}
  .auth-card>.hint {margin-bottom:28px;}
  .auth-card input {height:51px;}
  .auth-card label {margin-bottom:19px;}
  .auth-card .btn.primary {min-height:51px;margin-top:5px;}
  .topbar {padding-top:32px;}
  .app-brand-lockup {width:280px;}
  main {padding-top:20px;}
}
@media (prefers-reduced-motion:no-preference) {
  .profile-gate {animation:surface-enter .45s ease-out both;}
  .brand-panel::before {animation:ambient-breathe 10s ease-in-out infinite alternate;}
  .bottom-nav a {transition:color .18s,background-color .18s;}
  @keyframes surface-enter {from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
  @keyframes ambient-breathe {from{opacity:.35}to{opacity:.8}}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;scroll-behavior:auto!important;transition:none!important;}
}

@media(max-width:350px){.workout-head .eyebrow{font-size:8px;letter-spacing:.025em;white-space:nowrap}.profile-card{align-items:flex-start}.profile-card>div{min-width:0;overflow-wrap:anywhere}.profile-card>.btn{flex:none;font-size:11px;padding:10px 9px}}
/* Align backup actions even on narrow phones. */
.file-btn{margin:0;white-space:nowrap}
.card>.row.gap>.btn{font-size:13px;white-space:nowrap;padding-left:11px;padding-right:11px}