*{box-sizing:border-box;margin:0;padding:0;}

/* ────────────────────────────────────────────
   DESIGN TOKENS
   - Surfaces use tonal layering (depth via tone, not shadow)
   - Two functional accents: yellow=brand/action, cyan=live/now
   - Type, spacing, radius scales replace ad-hoc magic numbers
──────────────────────────────────────────── */
:root{
  /* Surfaces */
  --bg:           #0a0a0b;
  --surface-1:    #141416;
  --surface-2:    #1c1c20;
  --surface-3:    #26262b;
  --border:       #2a2a31;
  --border-strong:#3a3a44;

  /* Foreground */
  --fg:        #f4f4f6;
  --fg-muted:  #a8a8b0;     /* AA-passing on --bg even at small sizes */
  --fg-dim:    #6a6a72;

  /* Functional accents */
  --accent:        #d4f000;    /* brand / primary action */
  --accent-strong: #bcd900;    /* hover/pressed of accent */
  --accent-2:      #00e5ff;    /* live / now / current */
  --accent-2-dim:  #008fa3;
  --success:       #5DCAA5;
  --warn:          #FFB838;
  --danger:        #FF5563;

  /* Type scale */
  --t-eyebrow: 10px;   /* uppercase section labels */
  --t-xs:      11px;
  --t-sm:      13px;
  --t-md:      15px;
  --t-lg:      18px;
  --t-xl:      24px;
  --t-display: clamp(48px, 12vw, 96px);

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;

  /* Motion — Apple's iOS spring curve, used everywhere transitions aren't overridden */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* Legacy aliases (keep until migration is complete; map to new tokens) */
  --hx-bg: var(--bg);
  --hx-surface: var(--surface-1);
  --hx-surface2: var(--surface-2);
  --hx-border: var(--border);
  --hx-yellow: var(--accent);
  --hx-white: var(--fg);
  --hx-gray: var(--fg-muted);
}

/* Modern font stack — system fonts on every modern OS render San Francisco /
   Segoe UI Variable / Roboto, all of which are excellent for fitness data UIs.
   Tabular-nums keeps numerics aligned in timers, counters, lists. */
body{
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable', 'Segoe UI', Roboto, system-ui, sans-serif;
  font-size: var(--t-md);
  line-height: 1.45;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Global default transition curve */
button, a, input, select, .hx-tab, .edit-btn, .history-row-fg, .murph-counter-fill, .hx-progfill {
  transition-timing-function: var(--ease-spring);
}

/* Improve focus visibility (better than browser defaults on dark themes) */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* View Transitions API: cross-fade between views on supported browsers
   (Chrome/Edge/Safari). Falls back gracefully on unsupported browsers. */
@supports (view-transition-name: none) {
  ::view-transition-old(root) {
    animation: 220ms var(--ease-spring) both fadeOut;
  }
  ::view-transition-new(root) {
    animation: 320ms var(--ease-spring) both fadeIn;
  }
  @keyframes fadeOut { to { opacity: 0; transform: translateY(-4px); } }
}

/* ── LOGIN ── information */
#login-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left));background:radial-gradient(ellipse at top,#1a1a2e 0%,var(--bg) 60%);}
.login-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 24px 60px rgba(0,0,0,0.5);padding:2rem;width:100%;max-width:380px;}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:1.5rem;}
/* CRUX brand mark — bold lime "X" rendered with two CSS pseudo-element
   strokes so it inherits the accent color and animates with logoIn. The
   slight rotation matches the SVG icon's 6° tilt. */
.login-mark{width:32px;height:32px;border-radius:8px;background:url(icon-192.png?v=gs1) center/contain no-repeat;box-shadow:0 0 24px rgba(212,240,0,0.35);animation:logoIn 700ms var(--ease-pop) both;}
@keyframes logoIn{0%{transform:rotate(-90deg) scale(0.4);opacity:0;}60%{transform:rotate(8deg) scale(1.06);opacity:1;}100%{transform:rotate(0) scale(1);opacity:1;}}
.hx-logo-mark{animation:logoIn 700ms var(--ease-pop) both;}
.login-brand{font-size:var(--t-xs);font-weight:700;letter-spacing:0.18em;color:var(--accent);text-transform:uppercase;}
.login-title{font-size:22px;font-weight:800;letter-spacing:-0.01em;color:var(--fg);margin-bottom:0.25rem;}
.login-sub{font-size:var(--t-xs);color:var(--fg-muted);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1.75rem;}
.login-label{font-size:var(--t-xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:6px;display:block;}
.login-input{width:100%;background:var(--surface-3);border:1px solid var(--border);color:var(--fg);padding:14px 14px;font-size:var(--t-md);border-radius:var(--r-md);margin-bottom:1rem;transition:border-color var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-spring);min-height:44px;}
.login-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,240,0,0.18);}
.login-btn{width:100%;background:linear-gradient(180deg,#e0ff2e 0%,var(--accent) 100%);color:#0d0d0d;border:none;padding:14px;font-size:var(--t-sm);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;margin-top:0.5rem;border-radius:var(--r-md);min-height:48px;box-shadow:0 4px 12px rgba(212,240,0,0.18);transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur) var(--ease-spring),filter var(--dur) var(--ease-spring);}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(212,240,0,0.28);}
.login-btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(212,240,0,0.18);filter:brightness(0.95);}
.login-btn:disabled{opacity:0.5;cursor:default;transform:none;box-shadow:none;}
.login-pass-wrap{position:relative;}
.login-pass-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--fg-muted);cursor:pointer;font-size:16px;padding:6px;line-height:1;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);}
.login-pass-toggle:hover{color:var(--accent);}
.login-error{font-size:11px;color:#E24B4A;margin-top:0.75rem;text-align:center;min-height:16px;letter-spacing:0.04em;}
.login-link{font-size:11px;color:var(--hx-gray);margin-top:1rem;text-align:center;letter-spacing:0.04em;}
.login-link a{color:var(--hx-yellow);cursor:pointer;text-decoration:none;}
.login-link a:hover{text-decoration:underline;}

/* ── REGISTER SCREEN ── */
#register-screen{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left));}
.reg-success{font-size:11px;color:#5DCAA5;margin-top:0.75rem;text-align:center;letter-spacing:0.04em;}

/* ── APP ── */
#app{display:none;}
/* iOS safe-area insets — keeps content from rendering under the
   notch / status bar (top), the home indicator (bottom), and the
   landscape side cutouts. The page-level container picks up the
   bottom inset (so .hx-wrap content scrolls past the home indicator
   instead of being hidden behind it) and the side insets for
   landscape; the header below picks up the top inset directly so
   the title sits below the time/wifi/battery row. The
   `viewport-fit=cover` meta in index.html is what makes
   env(safe-area-inset-*) actually return non-zero values. */
.hx-wrap{
  background:var(--hx-bg);
  min-height:100vh;
  padding-bottom:calc(3rem + env(safe-area-inset-bottom));
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.hx-header{
  background:var(--bg);
  border-bottom:1px solid var(--border);
  padding:1rem;
  /* Add the iOS status-bar height to the top padding so the
     "<name> Skills Workout Schedule" line never hides under the
     time / wifi / battery indicators on a notched / Dynamic Island
     iPhone. max() so the header still has its 1rem of breathing
     room on devices without a top inset (Mac browsers, older
     Android, etc). */
  padding-top:max(1rem, env(safe-area-inset-top));
}
.hx-logo-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.6rem;}
.hx-logo-inner{display:flex;align-items:center;gap:10px;}
/* Header brand mark — bold lime chevron-X to match the favicon and
   login mark. Drawn with two CSS pseudo-element strokes (no SVG asset
   needed) so the mark inherits the accent colour and stays sharp at
   any zoom level. The slight 6° rotation matches the icon SVG. */
.hx-logo-mark{
  width:30px;height:30px;flex-shrink:0;border-radius:8px;
  background:url(icon-192.png?v=gs1) center/contain no-repeat;
  box-shadow:0 0 18px rgba(212,240,0,0.25);
}
.hx-brand{font-size:var(--t-xs);font-weight:700;letter-spacing:0.18em;color:var(--accent);text-transform:uppercase;}
.logout-btn{font-size:var(--t-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:10px 14px;min-height:44px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--fg-muted);border-radius:var(--r-md);transition:all var(--dur) var(--ease-spring);}
.logout-btn:hover{border-color:var(--danger);color:var(--danger);}
.hx-title{font-size:clamp(15px,4.5vw,22px);font-weight:900;letter-spacing:0.03em;text-transform:uppercase;color:var(--hx-white);line-height:1.1;}
.hx-title span{color:var(--hx-yellow);}
.hx-subtitle{font-size:10px;letter-spacing:0.1em;color:var(--hx-gray);text-transform:uppercase;margin-top:4px;}
/* ── Hero "today" card on dashboard ── */
.hero-card{margin:1rem 1rem 0;padding:1.25rem 1.25rem;background:linear-gradient(135deg,var(--surface-1) 0%,var(--surface-2) 100%);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 14px 40px rgba(0,0,0,0.35);display:flex;align-items:center;gap:1.25rem;}
.hero-ring-wrap{position:relative;width:108px;height:108px;flex-shrink:0;}
.hero-ring{width:108px;height:108px;transform:rotate(-90deg);}
.hero-ring-track{fill:none;stroke:var(--surface-3);stroke-width:8;}
.hero-ring-fill{fill:none;stroke:url(#hero-grad);stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 600ms var(--ease-spring);filter:drop-shadow(0 0 8px rgba(212,240,0,0.4));}
.hero-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.hero-ring-pct{font-size:26px;font-weight:800;color:var(--fg);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;line-height:1;}
.hero-ring-label{font-size:9px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-muted);margin-top:4px;}
.hero-info{flex:1;min-width:0;}
.hero-eyebrow{font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:8px;}
.hero-next-label{font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:4px;}
.hero-next-name{font-size:var(--t-lg);font-weight:700;color:var(--fg);line-height:1.25;letter-spacing:-0.005em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.hero-streak{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:700;color:var(--accent-2);background:rgba(0,229,255,0.1);border:1px solid rgba(0,229,255,0.25);padding:5px 10px;border-radius:999px;margin-top:10px;letter-spacing:0.02em;}
@media(max-width:520px){
  .hero-card{padding:1rem;gap:1rem;}
  .hero-ring-wrap,.hero-ring{width:88px;height:88px;}
  .hero-ring-pct{font-size:22px;}
  .hero-next-name{font-size:var(--t-md);}
}

.hx-prog-section{padding:0.75rem 1rem 0;}
.hx-prog-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;}
.hx-prog-label{font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--hx-gray);}
.hx-prog-val{font-size:12px;font-weight:700;color:var(--hx-yellow);}
.hx-progbar{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;}
.hx-progfill{height:100%;background:linear-gradient(90deg,var(--accent) 0%,#e0ff2e 100%);transition:width var(--dur-slow) var(--ease-spring);border-radius:999px;}
.hx-tabs{display:flex;gap:6px;padding:1rem 1rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.hx-tabs::-webkit-scrollbar{display:none;}
.hx-tab{position:relative;flex-shrink:0;padding:10px 14px;min-height:44px;font-size:var(--t-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;border:1px solid var(--border);background:var(--surface-1);color:var(--fg-muted);transition:all var(--dur) var(--ease-spring);white-space:nowrap;border-radius:var(--r-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.hx-tab:hover:not(.active){border-color:var(--border-strong);color:var(--fg);}
.hx-tab.hyrox-day::after{content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;background:var(--accent-2);border-radius:999px;box-shadow:0 0 6px var(--accent-2);}
.hx-tab.active{background:var(--accent);color:#0d0d0d;border-color:var(--accent);box-shadow:0 4px 14px rgba(212,240,0,0.22);}
.hx-tab.today::before{content:'TODAY';position:absolute;top:-7px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:0.16em;background:var(--accent-2);color:#001216;padding:1px 6px;border-radius:999px;font-weight:800;}
.hx-tab-pct{display:block;font-size:9px;font-weight:600;margin-top:0;letter-spacing:0.04em;color:var(--fg-dim);}
.hx-tab.active .hx-tab-pct{color:rgba(0,0,0,0.7);}
.hx-note{margin:0.75rem 1rem 0;padding:8px 10px;background:rgba(55,138,221,0.1);border-left:3px solid #378ADD;font-size:10px;letter-spacing:0.04em;color:#85B7EB;text-transform:uppercase;line-height:1.5;}
.hx-note strong{color:#fff;}
/* Toolbar = single row of icon chips. Each chip is icon + label, all
   the same weight, mirroring the phone app's tab-bar feel where every
   primary action carries an SF Symbol next to its title. The middle
   "Workouts" chip is highlighted (.util-chip-primary) because it's
   the headline action. The three workout launchers (Murph / Hyrox /
   Quick WOD) live inside the Workouts modal that this chip opens —
   this collapses what used to be 7 buttons into 5 with a clearer
   visual hierarchy. */
.toolbar{display:flex;flex-direction:column;gap:14px;padding:0.875rem 1rem 0;}

.utility-chips{display:flex;flex-wrap:wrap;gap:8px;}
.util-chip{
  font-size:10px;font-weight:700;letter-spacing:0.10em;text-transform:uppercase;
  padding:8px 14px;min-height:36px;
  border:1px solid var(--border);background:transparent;color:var(--fg-muted);
  border-radius:999px;
  cursor:pointer;white-space:nowrap;font-family:inherit;
  transition:all var(--dur) var(--ease-spring);
  display:inline-flex;align-items:center;gap:7px;
}
.util-chip:hover:not(.active){border-color:var(--accent);color:var(--accent);}
.util-chip.active{
  background:var(--accent);color:#0d0d0d;border-color:var(--accent);
  box-shadow:0 4px 14px rgba(212,240,0,0.22);
}
.util-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.chip-icon{
  width:14px;height:14px;flex-shrink:0;
  /* Inherits color from the chip's color, so hover/active states
     change icon colour automatically. */
  color:currentColor;
}
.chip-label{display:inline-block;}
@media(max-width:520px){.chip-label{display:none;} .util-chip{padding:8px;min-width:36px;justify-content:center;}}

/* Workouts chip is the primary CTA — solid lime fill so it's the
   most prominent control on the page (same as the iPhone's "Workouts"
   tab being a peer in the tab bar). */
.util-chip-primary{
  background:var(--accent);color:#0d0d0d;border-color:var(--accent);
  box-shadow:0 4px 14px rgba(212,240,0,0.22);
}
.util-chip-primary:hover{
  background:var(--accent);color:#0d0d0d;border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(212,240,0,0.32);
}

/* Workouts modal — same backdrop pattern as the configure-week modal,
   slightly narrower so the three tiles stack as a focused launcher.
   Tiles use the same heavy lime title + muted detail treatment as
   the iPhone's WorkoutsHubView. */
.workouts-modal{max-width:520px;}
.workouts-modal-grid{display:flex;flex-direction:column;gap:10px;}
.workout-tile{
  display:flex;flex-direction:column;gap:6px;text-align:left;
  background:linear-gradient(135deg,var(--surface-2) 0%,var(--surface-1) 100%);
  border:1px solid var(--border-strong);border-radius:var(--r-lg);
  padding:18px 18px 16px;min-height:88px;cursor:pointer;
  font-family:inherit;color:var(--fg);
  transition:all var(--dur) var(--ease-spring);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 4px 14px rgba(0,0,0,0.25);
}
.workout-tile:hover{
  border-color:var(--accent);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 8px 28px rgba(212,240,0,0.10);
}
.workout-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.workout-tile-name{font-size:24px;font-weight:800;letter-spacing:-0.01em;line-height:1;color:var(--accent);}
.workout-tile-detail{font-size:11px;color:var(--fg-muted);line-height:1.4;}

/* Legacy class kept for any modal/admin-side back buttons that still
   reference .edit-btn — keeps the chip-style treatment without forcing
   a wider rename. */
.edit-btn{font-size:10px;font-weight:600;letter-spacing:0.10em;text-transform:uppercase;padding:8px 14px;min-height:32px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--fg-muted);transition:all var(--dur) var(--ease-spring);white-space:nowrap;border-radius:999px;display:inline-flex;align-items:center;}
.edit-btn.active{background:var(--accent);color:#0d0d0d;border-color:var(--accent);box-shadow:0 4px 14px rgba(212,240,0,0.22);}
.edit-btn:hover:not(.active){border-color:var(--accent);color:var(--accent);}
.hx-table-wrap{margin:0.875rem 1rem 0;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:300px;}
thead tr{border-bottom:1px solid var(--border-strong);background:var(--surface-2);}
thead th{text-align:left;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-muted);}
thead th:last-child{text-align:center;width:52px;}
tbody tr{border-bottom:1px solid var(--border);transition:background var(--dur-fast) var(--ease-spring);}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
tbody tr.section-row{background:var(--surface-2);}
tbody tr.section-row:hover{background:var(--surface-2);}
tbody tr.done{opacity:0.4;}
tbody tr.done .ex-name{text-decoration:line-through;text-decoration-color:var(--fg-dim);}
/* Highlight the next un-completed exercise so user always sees what's up next */
tbody tr.next-up{background:linear-gradient(90deg,rgba(0,229,255,0.08) 0%,transparent 60%);box-shadow:inset 3px 0 0 var(--accent-2);}
td{padding:12px;vertical-align:middle;}
.sec-label{font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);}
.phase-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.06em;padding:3px 9px;text-transform:uppercase;border-radius:999px;white-space:nowrap;border:1px solid transparent;}
.ph-warmup{color:#C2BCFF;background:rgba(83,74,183,0.22);}
.ph-skill{color:#7FE0BB;background:rgba(15,110,86,0.22);}
.ph-rec{color:#C8C7BD;background:rgba(95,94,90,0.18);}
.ex-name{font-size:var(--t-sm);font-weight:700;letter-spacing:0;color:var(--fg);line-height:1.3;display:inline-block;}
.ex-desc{font-size:var(--t-xs);color:var(--fg-muted);margin-top:3px;line-height:1.5;text-transform:none;font-weight:400;}
.ex-sets{font-size:var(--t-sm);font-weight:700;color:var(--fg);white-space:nowrap;}
.rest-tag{display:inline-block;font-size:10px;padding:2px 8px;border-radius:999px;background:var(--surface-3);color:var(--fg-muted);margin-top:5px;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap;}
.check-wrap{display:flex;justify-content:center;align-items:center;}
.check-wrap label{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--r-md);transition:background var(--dur-fast) var(--ease-spring);}
.check-wrap label:hover{background:rgba(212,240,0,0.08);}
input[type=checkbox]{width:22px;height:22px;cursor:pointer;accent-color:var(--accent);flex-shrink:0;}
.del-btn{background:transparent;border:1px solid rgba(226,75,74,0.3);color:var(--danger);font-size:14px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--r-sm);transition:all var(--dur-fast) var(--ease-spring);}
.move-btns{display:flex;flex-direction:column;gap:3px;flex-shrink:0;}
.move-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--fg-muted);font-size:11px;width:28px;height:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;border-radius:4px;}
.move-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.move-btn:disabled{opacity:0.25;cursor:default;}
.del-btn:hover{background:var(--danger);color:#fff;border-color:var(--danger);}
.edit-row-cell{vertical-align:middle;text-align:center;}

/* ── DRAG & DROP ── */
.drag-handle{cursor:grab;color:var(--hx-gray);font-size:14px;padding:0 6px;user-select:none;-webkit-user-select:none;touch-action:none;flex-shrink:0;display:flex;align-items:center;}
.drag-handle:active{cursor:grabbing;}
tr.dragging{opacity:0.4;background:var(--hx-surface2);}
tr.drag-over{border-top:2px solid var(--hx-yellow);}

/* ── HISTORY PAGE ── */
#history-view{padding:0.75rem 1rem;display:none;max-width:720px;margin:0 auto;}
.history-page-header{display:flex;align-items:center;gap:10px;margin-bottom:1.5rem;padding-bottom:0.875rem;border-bottom:1px solid var(--border);}
.history-back-btn{font-size:var(--t-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:10px 14px;min-height:44px;cursor:pointer;border:1px solid var(--border);background:var(--surface-1);color:var(--fg-muted);border-radius:var(--r-md);transition:all var(--dur) var(--ease-spring);display:inline-flex;align-items:center;}
.history-back-btn:hover{border-color:var(--accent);color:var(--accent);}
.history-page-title{font-size:var(--t-lg);font-weight:800;letter-spacing:-0.01em;color:var(--fg);flex:1;}
.history-clear{font-size:var(--t-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:10px 14px;min-height:44px;cursor:pointer;border:1px solid rgba(255,85,99,0.3);background:transparent;color:var(--danger);border-radius:var(--r-md);transition:all var(--dur) var(--ease-spring);}
.history-clear:hover{background:var(--danger);color:#fff;border-color:var(--danger);}
.history-chart-section{margin-bottom:1.5rem;}
.history-chart-label{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:0.625rem;}
.history-chart-wrap{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:0.75rem 1rem;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);}
.history-chart-wrap svg{display:block;width:100%;height:auto;}
.history-chart-empty{font-size:var(--t-sm);color:var(--fg-muted);padding:1.5rem 0;text-align:center;}
.history-empty{font-size:var(--t-sm);color:var(--fg-muted);}
.history-streak{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);font-weight:700;color:var(--accent-2);background:rgba(0,229,255,0.08);border:1px solid rgba(0,229,255,0.25);padding:6px 12px;border-radius:999px;margin-bottom:1rem;letter-spacing:0.02em;}
.history-week{margin-bottom:1.25rem;}
.history-week-label{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.history-entry{display:flex;align-items:center;gap:10px;padding:10px 12px;}
.history-row-wrap{position:relative;overflow:hidden;touch-action:pan-y;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:6px;}
.history-row-bg{position:absolute;inset:0;background:var(--danger);color:#fff;display:flex;align-items:center;justify-content:flex-end;padding:0 20px;font-size:var(--t-xs);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;}
.history-row-fg{position:relative;background:var(--surface-1);transform:translateX(0);transition:transform var(--dur) var(--ease-spring);border-radius:var(--r-md);}
.history-row-fg.swiping{transition:none;}
.history-row-fg.removing{transition:transform var(--dur-slow) var(--ease-spring),opacity var(--dur-slow) var(--ease-spring);opacity:0;}
.history-row-x{position:absolute;right:6px;top:6px;background:none;border:none;color:var(--fg-dim);font-size:18px;line-height:1;cursor:pointer;padding:8px 10px;display:none;border-radius:var(--r-sm);}
.history-row-wrap:hover .history-row-x{display:block;}
.history-row-x:hover{color:var(--danger);background:rgba(255,85,99,0.1);}
.history-day-badge{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--surface-3);color:var(--fg-muted);white-space:nowrap;min-width:42px;text-align:center;}
.history-focus{font-size:var(--t-sm);font-weight:600;color:var(--fg);flex:1;}
.history-pct{font-size:var(--t-sm);font-weight:700;color:var(--accent);min-width:40px;text-align:right;}
.history-date{font-size:var(--t-xs);color:var(--fg-muted);min-width:74px;text-align:right;}
.history-list-title{font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:0.75rem;}

/* ── QUICK WOD ── */
#quick-launch-view{padding:0.875rem 1rem;display:none;max-width:640px;margin:0 auto;}
.quick-section-label{font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-muted);margin:1rem 0 0.625rem;}
.quick-section-label:first-of-type{margin-top:0;}
.quick-kind-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:480px){.quick-kind-grid{grid-template-columns:1fr;}}
.quick-kind-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;text-align:left;cursor:pointer;color:var(--fg);font-family:inherit;display:flex;flex-direction:column;gap:6px;transition:all var(--dur) var(--ease-spring);box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);}
.quick-kind-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 6px 18px rgba(212,240,0,0.15),inset 0 1px 0 rgba(255,255,255,0.04);}
.quick-kind-card.selected{border-color:var(--accent);background:linear-gradient(135deg,rgba(212,240,0,0.12) 0%,var(--surface-1) 70%);}
.quick-kind-name{font-size:var(--t-lg);font-weight:800;letter-spacing:-0.01em;color:var(--fg);}
.quick-kind-desc{font-size:var(--t-xs);color:var(--fg-muted);line-height:1.4;}
.quick-templates{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
@media(max-width:480px){.quick-templates{grid-template-columns:1fr;}}
.quick-template{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;text-align:left;cursor:pointer;color:var(--fg);font-family:inherit;transition:all var(--dur-fast) var(--ease-spring);}
.quick-template:hover{border-color:var(--accent-2);color:var(--accent-2);}
.quick-template-name{font-size:var(--t-sm);font-weight:700;}
.quick-template-meta{font-size:10px;color:var(--fg-muted);margin-top:2px;letter-spacing:0.04em;}
.quick-setup{margin-top:1rem;background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:14px 16px;}
.quick-setup-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.quick-setup-row label{font-size:var(--t-sm);color:var(--fg);flex:1;}
.quick-setup-row .cfg-input{max-width:140px;text-align:right;}
.quick-task-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.quick-task{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:all var(--dur-fast) var(--ease-spring);}
.quick-task.done{opacity:0.45;background:var(--surface-1);}
.quick-task.done .quick-task-name{text-decoration:line-through;text-decoration-color:var(--fg-dim);}
.quick-task.next{border-color:var(--accent-2);box-shadow:inset 3px 0 0 var(--accent-2);}
.quick-task-num{font-size:10px;font-weight:700;letter-spacing:0.08em;color:var(--fg-muted);min-width:22px;}
.quick-task-name{font-size:var(--t-sm);font-weight:600;color:var(--fg);flex:1;}
.quick-task-time{font-size:var(--t-xs);color:var(--fg-muted);font-variant-numeric:tabular-nums;}
.quick-bigstat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 0 10px;}
.quick-bigstat-num{font-size:56px;font-weight:800;color:var(--accent-2);line-height:1;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;}
.quick-bigstat-label{font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--fg-muted);}
.quick-phase-tabata{font-size:var(--t-lg);font-weight:800;letter-spacing:0.16em;text-transform:uppercase;text-align:center;margin-bottom:6px;}
.quick-phase-tabata.work{color:var(--accent);}
.quick-phase-tabata.rest{color:var(--accent-2);}

/* The active quick-view shares the workout-section flex sizing
   so its tap button is anchored at the bottom too. */
#quick-view{padding:0.625rem 1rem 0.625rem;display:none;max-width:640px;margin:0 auto;flex-direction:column;min-height:calc(100dvh - 100px);}

/* ── COMPARE WORKOUTS ── */
#compare-view{padding:0.875rem 1rem;display:none;max-width:720px;margin:0 auto;}
.compare-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:1rem;}
@media(max-width:600px){.compare-controls{grid-template-columns:1fr;}}
.compare-field{display:flex;flex-direction:column;gap:6px;font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-muted);}
.compare-field span:not(.compare-dot){display:inline-flex;align-items:center;gap:6px;}
.compare-field select{font-size:var(--t-sm);font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg);}
.compare-dot{width:10px;height:10px;border-radius:999px;display:inline-block;}
.compare-dot.a{background:var(--accent);box-shadow:0 0 8px rgba(212,240,0,0.4);}
.compare-dot.b{background:var(--accent-2);box-shadow:0 0 8px rgba(0,229,255,0.4);}
.compare-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1rem;}
@media(max-width:600px){.compare-summary{grid-template-columns:1fr;}}
.compare-stat{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);}
.compare-stat-label{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:6px;}
.compare-stat-value{font-size:var(--t-lg);font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}
.compare-stat-value.gain{color:var(--success);}
.compare-stat-value.loss{color:var(--danger);}
.compare-stat-sub{font-size:var(--t-xs);color:var(--fg-muted);margin-top:4px;}
.compare-chart-wrap{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:1rem;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);overflow:hidden;}
.compare-chart-wrap svg{display:block;width:100%;height:auto;max-width:100%;}
.compare-empty{font-size:var(--t-sm);color:var(--fg-muted);background:var(--surface-1);border:1px dashed var(--border);border-radius:var(--r-md);padding:1.5rem;text-align:center;}
.compare-legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:14px;font-size:var(--t-xs);color:var(--fg-muted);}
.compare-legend>span{display:inline-flex;align-items:center;gap:6px;}
.compare-legend-note{flex:1;min-width:200px;}

/* Spider-chart inline classes (used inside the SVG markup) */
.spider-grid{fill:none;stroke:var(--border);stroke-width:1;}
.spider-axis{stroke:var(--border);stroke-width:1;}
.spider-axis-tick{fill:var(--fg-dim);font-size:9px;font-family:inherit;font-weight:600;letter-spacing:0.04em;}
.spider-label{fill:var(--fg);font-size:11px;font-weight:700;font-family:inherit;letter-spacing:0.02em;}
.spider-label-value{fill:var(--fg-muted);font-size:10px;font-family:inherit;font-variant-numeric:tabular-nums;}
.spider-delta-gain{fill:var(--success);font-size:10px;font-weight:700;font-family:inherit;font-variant-numeric:tabular-nums;}
.spider-delta-loss{fill:var(--danger);font-size:10px;font-weight:700;font-family:inherit;font-variant-numeric:tabular-nums;}
.spider-poly-a{fill:rgba(212,240,0,0.2);stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(212,240,0,0.3));}
.spider-poly-b{fill:rgba(0,229,255,0.18);stroke:var(--accent-2);stroke-width:2.5;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(0,229,255,0.3));}
.spider-vertex-a{fill:var(--accent);stroke:#0d0d0d;stroke-width:2;}
.spider-vertex-b{fill:var(--accent-2);stroke:#0d0d0d;stroke-width:2;}

/* ── ADMIN PAGE ── */
#admin-view{padding:0.75rem 1rem;display:none;}
.admin-page-header{display:flex;align-items:center;gap:10px;margin-bottom:1.5rem;padding-bottom:0.875rem;border-bottom:1px solid var(--border);}
.admin-page-title{font-size:var(--t-lg);font-weight:800;letter-spacing:-0.01em;color:var(--fg);flex:1;}
.admin-section-label{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:12px;margin-top:1.5rem;}
.admin-user-row{display:flex;align-items:center;gap:10px;padding:12px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:6px;flex-wrap:wrap;}
.admin-user-name{font-size:var(--t-sm);font-weight:700;color:var(--fg);min-width:100px;}
.admin-user-email{font-size:var(--t-xs);color:var(--fg-muted);flex:1;min-width:140px;}
.status-on{font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:8px 12px;min-height:36px;border-radius:999px;border:none;color:var(--success);background:rgba(93,202,165,0.12);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;transition:all var(--dur-fast) var(--ease-spring);}
.status-on:hover{background:rgba(93,202,165,0.22);}
.status-on::before{content:'●';margin-right:6px;}
.status-off{font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:8px 12px;min-height:36px;border-radius:999px;border:none;color:var(--fg-muted);background:rgba(95,94,90,0.18);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;transition:all var(--dur-fast) var(--ease-spring);}
.status-off:hover{background:rgba(95,94,90,0.32);}
.status-off::before{content:'○';margin-right:6px;}
.del-btn-admin{background:transparent;border:1px solid rgba(255,85,99,0.3);color:var(--danger);font-size:10px;padding:8px 12px;min-height:36px;cursor:pointer;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;border-radius:var(--r-sm);transition:all var(--dur-fast) var(--ease-spring);}
.del-btn-admin:hover{background:var(--danger);color:#fff;border-color:var(--danger);}
.edit-btn-admin{background:transparent;border:1px solid var(--border-strong);color:var(--accent);font-size:10px;padding:8px 12px;min-height:36px;cursor:pointer;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;border-radius:var(--r-sm);transition:all var(--dur-fast) var(--ease-spring);}
.edit-btn-admin:hover{background:var(--accent);color:#0d0d0d;border-color:var(--accent);}
.admin-edit-form{padding:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);margin-top:6px;margin-bottom:6px;}
.admin-edit-actions{display:flex;gap:8px;margin-top:10px;}
.admin-edit-save{flex:1;background:linear-gradient(180deg,#e0ff2e 0%,var(--accent) 100%);color:#0d0d0d;border:none;padding:12px;font-size:var(--t-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;border-radius:var(--r-md);min-height:44px;box-shadow:0 4px 12px rgba(212,240,0,0.15);}
.admin-edit-save:hover{filter:brightness(1.05);}
.admin-edit-save:disabled{opacity:0.5;cursor:default;box-shadow:none;}
.admin-edit-cancel{flex:1;background:transparent;border:1px solid var(--border);color:var(--fg-muted);padding:12px;font-size:var(--t-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;border-radius:var(--r-md);min-height:44px;}
.admin-edit-cancel:hover{color:var(--fg);border-color:var(--fg);}
.admin-create-form{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;margin-top:0.75rem;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);}
.admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
@media(max-width:480px){.admin-form-grid{grid-template-columns:1fr;}}
.admin-input{width:100%;background:var(--surface-3);border:1px solid var(--border);color:var(--fg);padding:12px 14px;font-size:var(--t-sm);font-family:inherit;border-radius:var(--r-md);min-height:44px;transition:border-color var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-spring);}
.admin-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,240,0,0.18);}
.admin-create-btn{width:100%;background:linear-gradient(180deg,#e0ff2e 0%,var(--accent) 100%);color:#0d0d0d;border:none;padding:14px;font-size:var(--t-sm);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;margin-top:10px;border-radius:var(--r-md);min-height:48px;box-shadow:0 4px 12px rgba(212,240,0,0.18);transition:all var(--dur) var(--ease-spring);}
.admin-create-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(212,240,0,0.28);}
.admin-create-btn:active{transform:translateY(0);}
.admin-create-btn:disabled{opacity:0.5;cursor:default;transform:none;box-shadow:none;}
.admin-msg{font-size:var(--t-xs);margin-top:10px;letter-spacing:0.02em;text-align:center;}
.admin-msg.ok{color:var(--success);} .admin-msg.err{color:var(--danger);}
.admin-role-badge{font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:rgba(212,240,0,0.14);color:var(--accent);}

/* ── MURPH ── */
/* Workout views aim to fit the viewport without scrolling so the user
   never has to hunt for the count button mid-set. min-height:100dvh +
   flex-column lets the workout section grow to fill while the count
   button is anchored at the bottom via margin-top:auto. */
#murph-view{padding:0.625rem 1rem 0.625rem;display:none;max-width:640px;margin:0 auto;flex-direction:column;min-height:calc(100dvh - 100px);}
#murph-view.open-flex{display:flex;}
.murph-page-header{display:flex;align-items:center;gap:10px;margin-bottom:0.875rem;padding-bottom:0.625rem;border-bottom:1px solid var(--border);flex-shrink:0;}
.murph-page-title{font-size:var(--t-lg);font-weight:800;letter-spacing:-0.01em;color:var(--fg);flex:1;}
.murph-cfg-btn{background:var(--surface-1);border:1px solid var(--border);color:var(--fg-muted);width:44px;height:44px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);transition:all var(--dur) var(--ease-spring);}
.murph-cfg-btn:hover{border-color:var(--accent);color:var(--accent);}
.murph-section{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);flex-shrink:0;}
/* The section that contains the big count button stretches to fill
   the remaining viewport, and the count button is anchored at the
   bottom so the user never has to scroll mid-workout. */
.murph-section:has(.murph-count-btn){flex:1;display:flex;flex-direction:column;}
.murph-section-label{font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:10px;flex-shrink:0;}
.murph-timer-display{font-size:clamp(40px,12vw,68px);font-weight:800;text-align:center;color:var(--accent-2);letter-spacing:-0.02em;line-height:1;margin:2px 0;font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(0,229,255,0.25);}
.murph-timer-display.countdown{font-size:clamp(72px,20vw,128px);color:var(--fg);text-shadow:0 0 40px rgba(212,240,0,0.35);animation:countdownPulse 1s var(--ease-spring) infinite;}
@keyframes countdownPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
.murph-timer-sub{font-size:var(--t-xs);color:var(--fg-muted);text-align:center;letter-spacing:0.06em;margin:4px 0 12px;}
.murph-timer-actions{display:flex;gap:10px;}
.murph-timer-actions{flex-shrink:0;}

/* ── Heart-rate pill ── */
.hr-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-shrink:0;}
.hr-display{font-size:var(--t-sm);font-weight:700;color:var(--danger);letter-spacing:0.04em;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,85,99,0.1);border:1px solid rgba(255,85,99,0.25);border-radius:999px;}
.hr-display::before{content:'♥';font-size:14px;animation:hrPulse 1s ease-in-out infinite;}
.hr-display.off{color:var(--fg-dim);background:var(--surface-2);border-color:var(--border);}
.hr-display.off::before{animation:none;}
@keyframes hrPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}
.hr-btn{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:6px 12px;cursor:pointer;border:1px solid var(--border);background:var(--surface-2);color:var(--fg-muted);border-radius:999px;min-height:34px;transition:all var(--dur-fast) var(--ease-spring);}
.hr-btn:hover{border-color:var(--accent-2);color:var(--accent-2);}
.murph-btn-primary{flex:1;background:linear-gradient(180deg,#e0ff2e 0%,var(--accent) 100%);color:#0d0d0d;border:none;padding:14px;font-size:var(--t-sm);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;border-radius:var(--r-md);min-height:48px;box-shadow:0 4px 14px rgba(212,240,0,0.2);transition:all var(--dur) var(--ease-spring);}
.murph-btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(212,240,0,0.3);}
.murph-btn-primary:active{transform:translateY(0);box-shadow:0 2px 6px rgba(212,240,0,0.18);}
.murph-btn-primary:disabled{opacity:0.4;cursor:default;transform:none;box-shadow:none;}
.murph-btn-secondary{flex:1;background:var(--surface-2);color:var(--fg);border:1px solid var(--border-strong);padding:14px;font-size:var(--t-sm);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;border-radius:var(--r-md);min-height:48px;transition:all var(--dur) var(--ease-spring);}
.murph-btn-secondary:hover{border-color:var(--accent);color:var(--accent);}
.murph-btn-danger{flex:1;background:var(--danger);color:#fff;border:1px solid var(--danger);padding:14px;font-size:var(--t-sm);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;border-radius:var(--r-md);min-height:48px;box-shadow:0 4px 14px rgba(255,85,99,0.2);transition:all var(--dur) var(--ease-spring);}
.murph-btn-danger:hover{filter:brightness(0.92);}
.murph-phase-list{display:flex;gap:6px;margin-bottom:10px;flex-shrink:0;}
.murph-phase-pill{flex:1;text-align:center;padding:6px 4px;font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;border-radius:999px;background:var(--surface-2);color:var(--fg-muted);transition:all var(--dur) var(--ease-spring);}
.murph-phase-pill.active{color:#0d0d0d;background:var(--accent);box-shadow:0 4px 12px rgba(212,240,0,0.22);}
.murph-phase-pill.done{color:var(--success);background:rgba(93,202,165,0.15);}
.murph-active-counter{position:relative;padding:14px 16px 12px;border:1px solid rgba(212,240,0,0.45);background:radial-gradient(ellipse at top,rgba(212,240,0,0.08) 0%,transparent 70%),var(--surface-2);border-radius:var(--r-lg);margin-bottom:10px;display:none;box-shadow:0 0 30px rgba(212,240,0,0.08);}
.murph-active-counter.on{display:block;}
.murph-counter-name{font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
.murph-counter-val{font-size:42px;font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-0.02em;display:inline-block;transition:transform var(--dur) var(--ease-pop);}
.murph-counter-val.bump{transform:scale(1.08);}
.murph-counter-max{font-size:18px;color:var(--fg-muted);font-weight:500;margin-left:6px;}
.murph-counter-bar{height:6px;background:var(--surface-3);margin-top:12px;overflow:hidden;border-radius:999px;}
.murph-counter-fill{height:100%;background:linear-gradient(90deg,var(--accent) 0%,#e0ff2e 100%);width:0%;transition:width var(--dur-slow) var(--ease-spring);border-radius:999px;}
.murph-counter-set{font-size:var(--t-xs);color:var(--fg-muted);letter-spacing:0.04em;margin-top:10px;}
.murph-run-msg{display:none;padding:18px 16px;border:1px solid var(--accent);background:radial-gradient(ellipse at top,rgba(212,240,0,0.12) 0%,transparent 70%),var(--surface-2);margin-bottom:10px;text-align:center;border-radius:var(--r-lg);box-shadow:0 0 30px rgba(212,240,0,0.1);}
.murph-run-msg.on{display:block;}
.murph-run-msg-title{font-size:28px;font-weight:800;color:var(--accent);letter-spacing:-0.01em;margin-bottom:10px;}
.murph-run-msg-sub{font-size:var(--t-sm);color:var(--fg-muted);}
.murph-cfg-input::-webkit-outer-spin-button,.murph-cfg-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.murph-cfg-input{-moz-appearance:textfield;}
.murph-cfg-range{font-size:10px;color:var(--hx-gray);letter-spacing:0.04em;margin-left:6px;}
.murph-cfg-toggle{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--hx-white);letter-spacing:0.04em;cursor:pointer;padding:4px 0 10px;}
.murph-cfg-toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--hx-yellow);cursor:pointer;}
.murph-vest-badge{font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:rgba(212,240,0,0.14);color:var(--accent);margin-left:8px;white-space:nowrap;}
.history-pr-badge{font-size:9px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--accent-2);color:#001216;margin-left:8px;white-space:nowrap;box-shadow:0 0 10px rgba(0,229,255,0.35);}
.hr-badge{font-size:10px;font-weight:600;letter-spacing:0.04em;padding:3px 9px;border-radius:999px;background:rgba(255,85,99,0.12);color:var(--danger);border:1px solid rgba(255,85,99,0.25);margin-left:8px;white-space:nowrap;font-variant-numeric:tabular-nums;}
/* Per-segment splits row inside a Murph / Hyrox / For-Time / Tabata
   history entry. Mirrors the iPhone's chip layout: each split is a
   self-contained pill with its own background + corner radius, so
   the run/pull/push/squat or per-round labels don't run flush
   against the row edges (which was the user-reported "too close
   to the outer line of the cell"). The padding on the container
   gives the row's first/last chip the same breathing room from
   the cell edge as the title above. */
.murph-history-splits{
  display:flex;flex-wrap:wrap;gap:4px;
  padding:6px 12px 10px;
  border-bottom:1px solid var(--hx-border);
  margin-bottom:0;
}
.murph-history-splits span{
  font-size:10px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:0.02em;
  color:var(--fg-muted);
  background:var(--surface-2);
  padding:3px 7px;
  border-radius:4px;
  white-space:nowrap;
}

/* ── HYROX ── */
#hyrox-view{padding:0.625rem 1rem 0.625rem;display:none;max-width:640px;margin:0 auto;flex-direction:column;min-height:calc(100dvh - 100px);}
.hyrox-rounds-bar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;flex-shrink:0;}
.hyrox-round-pill{flex:1;min-width:32px;text-align:center;padding:8px 2px;font-size:var(--t-xs);font-weight:700;letter-spacing:0.02em;background:var(--surface-2);color:var(--fg-muted);font-variant-numeric:tabular-nums;border-radius:999px;transition:all var(--dur) var(--ease-spring);}
.hyrox-round-pill.active{color:#0d0d0d;background:var(--accent);box-shadow:0 4px 10px rgba(212,240,0,0.2);}
.hyrox-round-pill.done{color:var(--success);background:rgba(93,202,165,0.15);}
.hyrox-current-info{font-size:var(--t-sm);font-weight:700;color:var(--fg);margin-bottom:10px;padding:10px 14px;background:linear-gradient(90deg,rgba(0,229,255,0.08) 0%,transparent 80%);border-left:3px solid var(--accent-2);border-radius:var(--r-md);flex-shrink:0;}
.hyrox-current-info .hyrox-sub{display:block;font-size:var(--t-xs);font-weight:400;color:var(--fg-muted);margin-top:4px;}
.hyrox-preset-row{display:flex;gap:8px;align-items:stretch;}
.hyrox-preset-row select{flex:1;}
.hyrox-preset-note{font-size:var(--t-xs);color:var(--fg-muted);margin-top:8px;line-height:1.5;}
.hyrox-cfg-actions{display:flex;gap:8px;margin-top:12px;}
.hyrox-cfg-add{flex:1;}
.hyrox-cfg-reset{flex:1;background:transparent;border:1px solid var(--border);color:var(--fg-muted);padding:12px;font-size:var(--t-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;border-radius:var(--r-md);min-height:44px;transition:all var(--dur) var(--ease-spring);}
.hyrox-cfg-reset:hover{border-color:var(--accent);color:var(--accent);}
.hyrox-cfg-round{border:1px solid var(--border);background:var(--surface-2);padding:14px 16px;margin-bottom:10px;border-radius:var(--r-md);}
.hyrox-cfg-round-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.hyrox-cfg-round-num{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);}
.hyrox-cfg-round-del{background:transparent;border:1px solid rgba(255,85,99,0.3);color:var(--danger);font-size:10px;padding:8px 12px;min-height:36px;cursor:pointer;letter-spacing:0.06em;text-transform:uppercase;border-radius:var(--r-sm);transition:all var(--dur-fast) var(--ease-spring);}
.hyrox-cfg-round-del:hover{background:var(--danger);color:#fff;border-color:var(--danger);}
.hyrox-cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.hyrox-cfg-grid .hyrox-cfg-full{grid-column:1/-1;}
.hyrox-cfg-grid label{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted);display:block;margin-bottom:4px;}
.hyrox-cfg-grid input,.hyrox-cfg-grid select{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--fg);padding:10px 12px;font-size:var(--t-sm);font-family:inherit;border-radius:var(--r-sm);min-height:40px;transition:border-color var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-spring);}
.hyrox-cfg-grid input:focus,.hyrox-cfg-grid select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,240,0,0.18);}
.hyrox-cfg-grid input::-webkit-outer-spin-button,.hyrox-cfg-grid input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.hyrox-cfg-grid input{-moz-appearance:textfield;}
.hyrox-cfg-empty{font-size:var(--t-sm);color:var(--fg-muted);padding:14px 0;text-align:center;}

/* margin-top:auto pushes the count button to the bottom of the workout
   section so the user's thumb always lands on it without scrolling. */
.murph-count-btn{position:relative;width:100%;margin-top:auto;background:linear-gradient(180deg,#e0ff2e 0%,var(--accent) 100%);color:#0d0d0d;border:none;padding:22px;font-size:var(--t-lg);font-weight:800;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;margin-bottom:8px;border-radius:var(--r-lg);min-height:60px;-webkit-tap-highlight-color:transparent;user-select:none;box-shadow:0 6px 20px rgba(212,240,0,0.25),inset 0 1px 0 rgba(255,255,255,0.2);transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur) var(--ease-spring),filter var(--dur-fast) var(--ease-spring);overflow:hidden;flex-shrink:0;}
.murph-count-btn:hover{filter:brightness(1.04);}
.murph-count-btn:active{transform:scale(0.98);box-shadow:0 2px 6px rgba(212,240,0,0.18);}
.murph-count-btn.flash::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.35);animation:btnFlash 240ms var(--ease-spring) forwards;pointer-events:none;}
@keyframes btnFlash{0%{opacity:0;}30%{opacity:1;}100%{opacity:0;}}
.murph-count-btn:disabled{opacity:0.6;cursor:default;background:var(--success);box-shadow:none;}
.murph-reset-btn{width:100%;background:transparent;border:1px solid var(--border);color:var(--fg-muted);padding:10px;font-size:var(--t-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;border-radius:var(--r-md);min-height:40px;transition:all var(--dur) var(--ease-spring);flex-shrink:0;}
.murph-reset-btn:hover{border-color:var(--danger);color:var(--danger);}
.murph-cfg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.murph-cfg-row label{font-size:var(--t-sm);color:var(--fg);flex:1;}
.murph-cfg-row .cfg-input{max-width:110px;text-align:right;}

/* ── CELEBRATION ── */
#celebrate-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:1000;display:none;}
#celebrate-canvas.on{display:block;}
#celebrate-overlay{position:fixed;inset:0;display:none;z-index:999;background:rgba(0,0,0,0.72);align-items:center;justify-content:center;cursor:pointer;padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));}

/* Pull-to-refresh indicator — iOS PWA only sees this in practice
   (in regular Safari the browser's own pull-to-refresh runs first).
   The container is fixed near the top, hidden offscreen by default;
   JS slides it down based on the user's pull distance and toggles
   `armed` (lime fill) once they cross the trigger threshold. After
   the trigger, `refreshing` spins the icon while loadData runs.
   Position respects the iOS safe-area inset so it doesn't slide
   under the time / Dynamic Island. */
#ptr-indicator{
  position:fixed;
  top:calc(max(8px, env(safe-area-inset-top)));
  left:50%;
  width:44px;height:44px;border-radius:50%;
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  color:var(--fg-muted);
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%, -160%);
  opacity:0;
  z-index:300;
  pointer-events:none;
  transition:transform 280ms var(--ease-spring),
             opacity 200ms ease,
             background 200ms ease,
             color 200ms ease,
             border-color 200ms ease;
  box-shadow:0 6px 18px rgba(0,0,0,0.4);
}
#ptr-indicator.armed{
  background:var(--accent);
  color:#0d0d0d;
  border-color:var(--accent);
  box-shadow:0 8px 24px rgba(212,240,0,0.35);
}
#ptr-indicator.refreshing svg{
  animation:ptr-spin 0.7s linear infinite;
}
@keyframes ptr-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
/* When the user is actively pulling, JS sets the inline transform
   on the indicator itself; we disable the slide transition so the
   indicator follows the finger 1:1, and re-enable it on release for
   the snap-back / refresh animation. */
#ptr-indicator.dragging{transition:none;}
#celebrate-overlay.open{display:flex;}
.celebrate-card{position:relative;text-align:center;max-width:90vw;animation:celebratePop 0.45s cubic-bezier(0.34,1.56,0.64,1);}
.celebrate-title{font-size:11px;font-weight:700;letter-spacing:0.36em;color:var(--accent-2);margin-bottom:16px;text-transform:uppercase;}
.celebrate-msg{font-size:34px;font-weight:800;color:var(--fg);line-height:1.2;margin-bottom:20px;letter-spacing:-0.02em;}
.celebrate-hint{font-size:10px;letter-spacing:0.2em;color:var(--fg-dim);text-transform:uppercase;}
@media(max-width:520px){.celebrate-msg{font-size:24px;} .celebrate-title{font-size:10px;letter-spacing:0.3em;}}
@media(max-width:360px){.celebrate-msg{font-size:20px;}}
@keyframes celebratePop{0%{transform:scale(0.6);opacity:0;}60%{transform:scale(1.04);opacity:1;}100%{transform:scale(1);opacity:1;}}
@media(prefers-reduced-motion:reduce){.celebrate-card{animation:none;}}

/* ── CFG MODAL — desktop modal, mobile bottom-sheet ── */
.cfg-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:200;overflow-y:auto;animation:fadeIn 200ms var(--ease-spring);
  /* Pad inner content so the modal close button + title don't slide
     under the iPhone status bar / home indicator when the modal is
     scrolled to either edge. */
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.cfg-modal-backdrop.open{display:block;}
.cfg-modal{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 24px 60px rgba(0,0,0,0.5);margin:2rem auto;padding:1.5rem;max-width:540px;animation:slideUp 320ms var(--ease-spring);}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideUp{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.cfg-title{font-size:var(--t-lg);font-weight:800;letter-spacing:-0.01em;color:var(--fg);margin-bottom:1rem;text-transform:none;}
.cfg-section{margin-bottom:1.25rem;}
.cfg-section-label{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:10px;}
.cfg-day-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1rem;}
.cfg-day-btn{padding:10px 14px;min-height:40px;font-size:var(--t-xs);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;border:1px solid var(--border);background:var(--surface-2);color:var(--fg-muted);border-radius:999px;transition:all var(--dur) var(--ease-spring);}
.cfg-day-btn.selected{background:var(--accent);color:#0d0d0d;border-color:var(--accent);}
.cfg-day-btn:hover:not(.selected){border-color:var(--accent);color:var(--accent);}
.cfg-focus-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1rem;}
.cfg-focus-btn{padding:10px 12px;min-height:40px;font-size:var(--t-xs);font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--surface-2);color:var(--fg-muted);transition:all var(--dur) var(--ease-spring);text-align:center;border-radius:var(--r-md);}
.cfg-focus-btn.selected{background:var(--accent);color:#0d0d0d;border-color:var(--accent);}
.cfg-focus-btn:hover:not(.selected){border-color:var(--accent);color:var(--accent);}
.cfg-row{display:flex;gap:8px;align-items:center;margin-bottom:10px;}
.cfg-input{background:var(--surface-3);border:1px solid var(--border);color:var(--fg);padding:10px 12px;font-size:var(--t-sm);flex:1;font-family:inherit;border-radius:var(--r-md);min-height:40px;transition:border-color var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-spring);}
.cfg-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,240,0,0.18);}
.cfg-select{background:var(--surface-3);border:1px solid var(--border);color:var(--fg);padding:10px 12px;font-size:var(--t-sm);font-family:inherit;border-radius:var(--r-md);min-height:40px;}
.cfg-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,240,0,0.18);}
.cfg-add-btn{font-size:var(--t-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:10px 16px;min-height:40px;cursor:pointer;border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:var(--r-md);transition:all var(--dur) var(--ease-spring);}
.cfg-add-btn:hover{background:var(--accent);color:#0d0d0d;}
.cfg-save-btn{width:100%;font-size:var(--t-sm);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:14px;cursor:pointer;border:none;background:linear-gradient(180deg,#e0ff2e 0%,var(--accent) 100%);color:#0d0d0d;margin-top:0.5rem;border-radius:var(--r-md);min-height:48px;box-shadow:0 4px 12px rgba(212,240,0,0.18);transition:all var(--dur) var(--ease-spring);}
.cfg-save-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(212,240,0,0.28);}
.cfg-save-btn:active{transform:translateY(0);}
.cfg-close-btn{background:transparent;border:1px solid var(--border);color:var(--fg-muted);width:44px;height:44px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);transition:all var(--dur) var(--ease-spring);}
.cfg-close-btn:hover{border-color:var(--danger);color:var(--danger);}
.divider{height:1px;background:var(--border);margin:1rem 0;}

/* Mobile bottom-sheet treatment for modals */
@media(max-width:520px){
  .cfg-modal-backdrop{display:none;align-items:flex-end;}
  .cfg-modal-backdrop.open{display:flex;}
  .cfg-modal{margin:0 0 0 0;width:100%;max-width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;animation:sheetUp 320ms var(--ease-spring);max-height:92vh;overflow-y:auto;}
  .cfg-modal::before{content:'';display:block;width:40px;height:4px;background:var(--border-strong);border-radius:999px;margin:-4px auto 14px;}
  @keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
  .hx-title{font-size:18px;}
  .ex-name{font-size:var(--t-sm);}
  .ex-desc{font-size:var(--t-xs);}
  .cfg-focus-grid{grid-template-columns:1fr;}
}

/* ── LOADING OVERLAY ── */
#loading-overlay{position:fixed;inset:0;background:var(--bg);z-index:300;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1rem;}
#loading-overlay.visible{display:flex;}
.loading-spinner{width:36px;height:36px;border:3px solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;animation:spin 0.75s linear infinite;}
.loading-text{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-muted);}
.sync-indicator{position:fixed;bottom:14px;right:14px;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted);background:var(--surface-2);border:1px solid var(--border);padding:8px 12px;border-radius:999px;opacity:0;transition:opacity var(--dur) var(--ease-spring);box-shadow:0 4px 12px rgba(0,0,0,0.4);}
.sync-indicator.visible{opacity:1;}
@keyframes spin{to{transform:rotate(360deg);}}