/* ============================================================
   COLORWAYS — shared semantic tokens.
   <html data-colorway="gunmetal|midnight|bone|rose" data-mode="light|dark">
   The same attributes can be placed on any element to scope a preview.
   Every screen uses ONLY these tokens; never hard-code colors in views.
   ============================================================ */
:root {
  /* Data series for multi-series charts: validated colorblind-safe order, shared by all colorways.
     Use in fixed order, never cycled. Single-series charts use --chart-primary. */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948;
  --radius: 18px;
}
[data-mode="dark"] {
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
}

/* 1. Gunmetal: black, charcoal, grey */
:root, [data-colorway="gunmetal"][data-mode="light"] {
  color-scheme: light;
  --bg: #f1f1f2; --card: #ffffff; --ink: #17181a; --muted: #5f6268; --line: #dfe0e3; --track: #e3e4e7;
  --accent: #2b2f35; --accent-ink: #ffffff; --accent-soft: #e6e7ea; --accent-text: #2b2f35; --accent-2: #6a717b;
  --warn: #8a5410; --warn-soft: #f4ead9; --danger: #a12f27; --danger-soft: #f7e4e2;
  --focus: #2b2f35; --scrim: rgba(10, 11, 12, .45); --shadow: 0 1px 2px rgba(0, 0, 0, .08);
  --chart-primary: #2b2f35; --chart-grid: #e6e7ea; --chart-label: #5f6268;
}
[data-colorway="gunmetal"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #111213; --card: #1b1c1e; --ink: #ededee; --muted: #a2a3a8; --line: #2c2d30; --track: #2c2d30;
  --accent: #d3d6db; --accent-ink: #111213; --accent-soft: #2a2c30; --accent-text: #d3d6db; --accent-2: #8f959e;
  --warn: #e3a862; --warn-soft: #2e2418; --danger: #f2a49c; --danger-soft: #3a1f1c;
  --focus: #d3d6db; --scrim: rgba(0, 0, 0, .6); --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --chart-primary: #d3d6db; --chart-grid: #2c2d30; --chart-label: #a2a3a8;
}

/* 2. Midnight Blue: deep navy and slate, restrained electric-blue accent */
[data-colorway="midnight"][data-mode="light"] {
  color-scheme: light;
  --bg: #eef1f6; --card: #ffffff; --ink: #0e1a2f; --muted: #556178; --line: #d9dfe9; --track: #dfe5ee;
  --accent: #1f4fbf; --accent-ink: #ffffff; --accent-soft: #e2e9f8; --accent-text: #1f4fbf; --accent-2: #4b5b78;
  --warn: #8a5410; --warn-soft: #f4ead9; --danger: #a12f27; --danger-soft: #f7e4e2;
  --focus: #1f4fbf; --scrim: rgba(8, 14, 28, .5); --shadow: 0 1px 2px rgba(14, 26, 47, .08);
  --chart-primary: #1f4fbf; --chart-grid: #e2e7ef; --chart-label: #556178;
}
[data-colorway="midnight"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #0a111e; --card: #111a2b; --ink: #e6ebf3; --muted: #93a0b6; --line: #1f2a3e; --track: #1f2a3e;
  --accent: #5b8ff0; --accent-ink: #07101f; --accent-soft: #172748; --accent-text: #7ea6f3; --accent-2: #9db0cc;
  --warn: #e3a862; --warn-soft: #2a2316; --danger: #f2a49c; --danger-soft: #371d22;
  --focus: #7ea6f3; --scrim: rgba(2, 6, 14, .65); --shadow: 0 1px 2px rgba(0, 0, 0, .45);
  --chart-primary: #5b8ff0; --chart-grid: #1f2a3e; --chart-label: #93a0b6;
}

/* 3. Bone & Forest: warm off-white, deep evergreen, muted brass */
[data-colorway="bone"][data-mode="light"] {
  color-scheme: light;
  --bg: #f3efe6; --card: #fbf9f4; --ink: #1b271f; --muted: #5f655c; --line: #e2dccf; --track: #e6e0d3;
  --accent: #1f4a37; --accent-ink: #f8f5ee; --accent-soft: #e2e8df; --accent-text: #1f4a37; --accent-2: #8a6d34;
  --warn: #94501a; --warn-soft: #f4e7d6; --danger: #9b2f28; --danger-soft: #f5e1dc;
  --focus: #1f4a37; --scrim: rgba(20, 28, 22, .45); --shadow: 0 1px 2px rgba(27, 39, 31, .08);
  --chart-primary: #1f4a37; --chart-grid: #e6e0d3; --chart-label: #5f655c;
}
[data-colorway="bone"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #0e1612; --card: #15201a; --ink: #ece6d8; --muted: #a7aa9b; --line: #24322a; --track: #24322a;
  --accent: #8cc0a0; --accent-ink: #0e1612; --accent-soft: #1c3127; --accent-text: #9ccbad; --accent-2: #c8a96a;
  --warn: #e3a862; --warn-soft: #2c2416; --danger: #f2a49c; --danger-soft: #36201c;
  --focus: #9ccbad; --scrim: rgba(3, 8, 5, .62); --shadow: 0 1px 2px rgba(0, 0, 0, .45);
  --chart-primary: #8cc0a0; --chart-grid: #24322a; --chart-label: #a7aa9b;
}

/* 4. Rose Quartz: warm ivory, light blush, dusty rose / muted mauve, charcoal text */
[data-colorway="rose"][data-mode="light"] {
  color-scheme: light;
  --bg: #f7f2ee; --card: #fffdfb; --ink: #2a2527; --muted: #6c6264; --line: #ebe0db; --track: #eee3df;
  --accent: #8c4f5e; --accent-ink: #fffaf8; --accent-soft: #f4e5e4; --accent-text: #864a59; --accent-2: #a7848a;
  --warn: #8a5410; --warn-soft: #f4eadb; --danger: #a33a1f; --danger-soft: #f8e5de;
  --focus: #8c4f5e; --scrim: rgba(30, 22, 25, .45); --shadow: 0 1px 2px rgba(42, 37, 39, .08);
  --chart-primary: #8c4f5e; --chart-grid: #efe5e1; --chart-label: #6c6264;
}
[data-colorway="rose"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #141013; --card: #1f191e; --ink: #f4ecee; --muted: #b3a3a8; --line: #3a2b33; --track: #35272e;
  --accent: #dba4b1; --accent-ink: #1e1015; --accent-soft: #3b252e; --accent-text: #ebb9c4; --accent-2: #f1cdd3;
  --warn: #e3a862; --warn-soft: #2e2418; --danger: #f2a090; --danger-soft: #3a1f1a;
  --focus: #ebb9c4; --scrim: rgba(5, 2, 3, .62); --shadow: 0 1px 2px rgba(0, 0, 0, .45);
  --chart-primary: #dba4b1; --chart-grid: #35272e; --chart-label: #ab9fa1;
}
/* Theme-following decorative tokens for the always-dark hero, art and glow surfaces
   (workout hero, show card, muscle map, tiles). Same in light and dark mode, per colorway.
   --hi: bright accent on dark art · --hi-2: its gradient end · --hi-ink: text on --hi
   --hi-text: soft accent text on dark art · --glow-rgb: glow color as r,g,b
   --hero-a/b/c: hero gradient stops · --art-bg: backdrop behind artwork · --hero-ink: text on hero */
:root, [data-colorway="gunmetal"] {
  --hi: #6fdc9f; --hi-2: #5fd394; --hi-ink: #06110c; --hi-text: #8fe3b8; --glow-rgb: 111,220,159;
  --hero-a: #1d3a30; --hero-b: #0d1512; --hero-c: #0a110f; --art-bg: #0d1412; --hero-ink: #f2f6f4;
}
[data-colorway="midnight"] {
  --hi: #7ea6f3; --hi-2: #4f7fe0; --hi-ink: #050c1a; --hi-text: #a9c4f7; --glow-rgb: 110,155,240;
  --hero-a: #18294a; --hero-b: #0d1628; --hero-c: #0a111e; --art-bg: #0c1424; --hero-ink: #eef3fb;
}
[data-colorway="bone"] {
  --hi: #a7d7b8; --hi-2: #7cb894; --hi-ink: #0b1510; --hi-text: #c3e3cd; --glow-rgb: 150,200,170;
  --hero-a: #24382c; --hero-b: #121c16; --hero-c: #0d1612; --art-bg: #101a14; --hero-ink: #f3efe4;
}
[data-colorway="rose"] {
  --hi: #e7a9b8; --hi-2: #c98598; --hi-ink: #23101a; --hi-text: #f3c6d0; --glow-rgb: 226,160,178;
  --hero-a: #3d2230; --hero-b: #1f141b; --hero-c: #150e13; --art-bg: #1b1218; --hero-ink: #f8eff2;
}


* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.4; min-height: 100vh;
}
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(48px + env(safe-area-inset-bottom)); }

header.top { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 18px; min-height: 34px; gap: 10px; }
.brand { font-weight: 800; letter-spacing: 0.14em; font-size: 15px; color: var(--ink); text-decoration: none; }
.back { font-size: 15px; color: var(--accent-text); text-decoration: none; font-weight: 600; white-space: nowrap; }
.today { color: var(--muted); font-size: 13px; }
.icon-btn { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 11px; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block; }

h1 { font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; }
h2 { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 24px 4px 10px; }
p { margin: 0; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; margin-bottom: 14px; }
.card.tap { cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.card.tap:hover { border-color: var(--accent); }
.card.tap:active { transform: scale(0.99); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.chev { color: var(--muted); font-size: 18px; line-height: 1; }

.big { font-size: 56px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.mid { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.unit { font-size: 15px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.sub { color: var(--muted); font-size: 14px; margin-top: 6px; }
.small { font-size: 12px; }
.title { font-size: 16px; font-weight: 600; margin-top: 14px; }
.ink { color: var(--ink); }

.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.row.two { grid-template-columns: 1fr 1fr; }
.row.four { grid-template-columns: repeat(4, 1fr); }
.stat { background: var(--bg); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.stat .v { font-size: 17px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .k { font-size: 11px; color: var(--muted); margin-top: 2px; }

.bars { display: grid; gap: 12px; margin-top: 16px; }
.bar-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; gap: 8px; }
.bar-top span:last-child { color: var(--muted); }
.track { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
.track.thin { height: 5px; margin-top: 10px; }
.fill { height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .25s ease; }
.fill.over { background: var(--warn); }

.empty { font-size: 13px; color: var(--muted); background: var(--bg); border-radius: 10px; padding: 12px; }
.notice { font-size: 13px; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; background: var(--warn-soft); color: var(--warn); }
.notice.info { background: var(--accent-soft); color: var(--accent-text); }
.notice.danger { background: var(--danger-soft); color: var(--danger); }

.actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.btn { border: none; border-radius: 12px; padding: 11px 14px; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--accent-soft); color: var(--accent-text); text-decoration: none; display: inline-block; text-align: center; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: none; border: 1px solid var(--line); color: var(--ink); }
.btn.danger { background: var(--danger-soft); color: var(--danger); }
.btn.block { display: block; width: 100%; }
.btn.sm { padding: 7px 10px; font-size: 13px; border-radius: 10px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.meals { display: flex; gap: 6px; margin-top: 12px; }
.pip { flex: 1; height: 6px; border-radius: 99px; background: var(--track); }
.pip.done { background: var(--accent); }
.pip.part { background: linear-gradient(90deg, var(--accent) 50%, var(--track) 50%); }

.est { font-size: 12px; color: var(--muted); margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.est b { color: var(--ink); font-weight: 600; }
.tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; padding: 1px 5px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
.tag.raw, .tag.dry { color: var(--accent-text); border-color: var(--accent-text); }
.tag.cooked { color: var(--warn); border-color: var(--warn); }

.list { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.item { padding: 15px 18px; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: none; }
.item.tap { cursor: pointer; }
.item.tap:hover { background: var(--bg); }
.item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.item-name { font-weight: 600; font-size: 15px; min-width: 0; }
.item-kcal { font-weight: 650; font-size: 15px; white-space: nowrap; }
.item-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.macros { display: flex; gap: 12px; font-size: 12px; color: var(--muted); margin-top: 6px; flex-wrap: wrap; }
.macros b { color: var(--ink); font-weight: 600; }
.detail { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.item.open .detail { display: block; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.grid2 b { color: var(--ink); font-weight: 600; }
.logged { font-size: 12px; color: var(--accent-text); margin-top: 6px; }
.xbtn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; }

.tl { position: relative; padding-left: 22px; }
.tl::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 8px 0 14px; }
.tl-item::before { content: ""; position: absolute; left: -21px; top: 12px; width: 12px; height: 12px; border-radius: 99px; background: var(--card); border: 2px solid var(--line); }
.tl-item.past::before { background: var(--accent); border-color: var(--accent); }
.tl-item.now::before { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tl-date { font-size: 12px; color: var(--muted); }
.tl-name { font-weight: 600; }

.seg { display: flex; background: var(--track); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: none; background: none; padding: 8px 6px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.seg button.on, .seg button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

/* forms */
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
.input, select.input, textarea.input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--ink); font-size: 16px; outline: none; appearance: none;
}
.input:focus { border-color: var(--accent); }
textarea.input { min-height: 96px; resize: vertical; }
.inline { display: flex; gap: 8px; align-items: center; }
.inline > * { flex: 1; min-width: 0; }
.check { display: flex; align-items: center; gap: 10px; font-size: 15px; margin-bottom: 12px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.hint { font-size: 12px; color: var(--muted); margin-top: -6px; margin-bottom: 12px; }

/* grocery */
.g-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.g-item:last-child { border-bottom: none; }
.g-check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line); flex: none; display: grid; place-items: center; color: var(--accent-ink); font-size: 13px; cursor: pointer; margin-top: 1px; background: none; }
.g-item.checked .g-check { background: var(--accent); border-color: var(--accent); }
.g-item.checked .g-name { text-decoration: line-through; color: var(--muted); }
.g-name { font-size: 15px; }
.g-qty { font-weight: 650; font-size: 15px; white-space: nowrap; text-align: right; }
.g-flag { font-size: 12px; color: var(--warn); margin-top: 2px; }
.yield { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.yield input { width: 64px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 14px; }

/* modal + toast */
.modal-bg { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; z-index: 50; padding: 16px; }
.modal { background: var(--card); border-radius: 20px; padding: 20px; width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; }
@media (min-width: 600px) { .modal-bg { align-items: center; } }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 60; max-width: calc(100% - 32px); }
.search { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 4px 0 10px; }

/* Focus + links + smooth colorway switch */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.link { color: var(--accent-text); }
body, .card, .list, .btn, .stat, .seg button, .input, .track, .fill { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Colorway picker */
.cw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cw-option { display: flex; flex-direction: column; justify-content: flex-start; border: 2px solid var(--line); border-radius: 16px; padding: 6px; background: var(--card); cursor: pointer; text-align: left; color: var(--ink); width: 100%; }
.cw-option[aria-checked="true"] { border-color: var(--accent-text); }
.cw-name { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; padding: 8px 6px 4px; }
.cw-sel { display: block; font-size: 11px; font-weight: 700; color: var(--accent-text); margin: 0 6px 8px; }
.cw-preview { background: var(--bg); color: var(--ink); border-radius: 12px; padding: 8px; pointer-events: none; overflow: hidden; }
.cw-preview .card { padding: 12px; margin: 0; border-radius: 12px; }
.cw-preview .label { font-size: 9px; }
.cw-preview .mini-big { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.cw-preview .unit { font-size: 11px; margin-left: 4px; }
.cw-preview .bar-top { font-size: 10px; margin: 8px 0 3px; white-space: nowrap; }
.cw-preview .unit { white-space: nowrap; }
.cw-preview .track { height: 5px; }
.cw-preview .btn { padding: 5px 8px; font-size: 10px; border-radius: 8px; margin-top: 8px; }
.cw-swatches { display: flex; gap: 4px; margin-top: 8px; }
.cw-swatches i { flex: 1; height: 6px; border-radius: 3px; }

/* ---------- Onboarding / profile setup (tokens only) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ob { max-width: 560px; margin: 0 auto; }
.ob-progress { margin: 0 2px 14px; }
.ob-progress .bar-top { font-size: 12px; color: var(--muted); }
.ob-progress .bar-top span:first-child { color: var(--ink); font-weight: 600; }
.ob-steps { display: flex; gap: 4px; list-style: none; margin-top: 8px; }
.ob-steps li { flex: 1; height: 3px; border-radius: 2px; background: var(--track); }
.ob-steps li.done { background: var(--accent-2); }
.ob-steps li.now { background: var(--accent); }
.ob-card { padding: 24px 20px; }
@media (min-width: 600px) { .ob-card { padding: 32px 32px 28px; } }
.ob-h { font-size: 24px; outline: none; }
.ob-hero { margin-bottom: 18px; }
.ob-title { font-size: 30px; letter-spacing: -0.025em; margin-top: 10px; line-height: 1.1; }
.ob-lead { color: var(--muted); font-size: 16px; margin-top: 10px; }
.ob-list { list-style: none; display: grid; gap: 10px; }
.ob-list li { display: grid; gap: 2px; padding: 12px 14px; background: var(--bg); border-radius: 12px; }
.ob-list b { font-size: 14px; }
.ob-list span { font-size: 13px; color: var(--muted); }
.ob-import { margin-top: 16px; font-size: 14px; }
.ob-import summary { cursor: pointer; color: var(--accent-text); font-weight: 600; }
.ob-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.ob-actions .btn { min-width: 112px; }
fieldset.field { border: none; padding: 0; margin: 0 0 16px; min-width: 0; }
fieldset.field legend, .field > span { display: block; font-size: 13px; color: var(--ink); margin-bottom: 7px; font-weight: 600; padding: 0; }
.opt { font-weight: 500; color: var(--muted); font-size: 11px; margin-left: 4px; }
.req { font-weight: 600; color: var(--accent-text); font-size: 11px; margin-left: 4px; }
.field-err { color: var(--danger); font-size: 13px; margin-top: 6px; font-weight: 500; }
.field-err::before { content: "⚠ "; }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input:disabled { opacity: .5; }
.input-wrap { position: relative; flex: 1; min-width: 0; }
.input-wrap.has-unit .input { padding-right: 52px; }
.input-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--muted); pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 500; transition: background-color .15s, border-color .15s; }
.chip:hover span { border-color: var(--accent-2); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.chip input:checked + span::before { content: "✓ "; }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.chips.tight .chip span { padding: 9px 12px; min-width: 42px; text-align: center; }
.cw-option { position: relative; }
.cw-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.miss { color: var(--muted); font-weight: 400; font-style: italic; }
.rv { padding: 16px 18px; }
.rv-grid { margin-top: 10px; font-size: 13px; color: var(--muted); gap: 6px 14px; grid-template-columns: minmax(96px, 34%) 1fr; }
.rv-grid b { word-break: break-word; }
.setup-card { border-color: var(--accent-2); }
.todo { list-style: none; }
.todo li a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; }
.todo li:first-child a { border-top: none; }
.todo li a:hover { color: var(--accent-text); }

/* Show card: prep progress */
.prep-prog { margin-top: 16px; }
.prep-prog .bar-top { font-size: 12px; }
.prep-prog .bar-top span:first-child { color: var(--muted); }
.prep-prog .bar-top span:last-child { color: var(--ink); font-weight: 600; }
.prep-prog .track.thin { margin-top: 0; height: 6px; }
.prog-ends { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- Choice cards (training setup, targets, activity) ---------- */
.choice-list { display: grid; gap: 8px; }
.choice { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; }
.choice input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.choice b { font-size: 15px; font-weight: 600; }
.choice:hover { border-color: var(--accent-2); }
.choice.on, .choice:has(input:checked) { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); background: var(--accent-soft); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice-list.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.choice-list.compact .choice { padding: 9px 10px; gap: 8px; }
.choice-list.compact .choice b { font-size: 14px; }

/* ---------- Recommendation stages ---------- */
.calc-card { display: flex; gap: 12px; align-items: flex-start; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.calc-n { flex: none; width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; }
.calc-card .mid { font-size: 26px; }
.calc-card .unit { display: inline; }
.calc-card .est { margin-top: 10px; }
.calc-card .stat { background: var(--card); }
.assump { margin: 12px 0; font-size: 13px; color: var(--muted); }
.assump summary { cursor: pointer; color: var(--accent-text); font-weight: 600; padding: 4px 0; }
.assump ul { margin: 8px 0 0 18px; display: grid; gap: 6px; }
.linkbtn { background: none; border: none; padding: 0; color: var(--accent-text); text-decoration: underline; cursor: pointer; font-size: inherit; }
ul.plain { margin: 6px 0 0 18px; display: grid; gap: 3px; }
.warn-t { color: var(--warn); font-weight: 600; }

/* ---------- Profile menu + athlete chooser ---------- */
.avatar { width: 34px; height: 34px; border-radius: 99px; border: 1px solid var(--line); background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; letter-spacing: .02em; cursor: pointer; display: inline-grid; place-items: center; flex: none; }
.avatar.big-av { width: 42px; height: 42px; font-size: 15px; cursor: default; background: var(--accent); color: var(--accent-ink); }
.menu { position: absolute; right: 0; top: 42px; z-index: 40; min-width: 240px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow), 0 10px 30px rgba(0,0,0,.18); padding: 6px; }
.menu-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu a { display: block; padding: 11px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.menu a:hover, .menu a:focus-visible { background: var(--accent-soft); color: var(--accent-text); }
.menu-foot { font-size: 12px; color: var(--muted); padding: 8px 12px 6px; border-top: 1px solid var(--line); margin-top: 4px; max-width: 260px; }
.athlete-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.athlete-row:last-child { border-bottom: none; }
.athlete-row.current { background: var(--accent-soft); }

/* ---------- Training plans ---------- */
.wk-row { display: flex; gap: 6px; margin-top: 14px; }
.wk { flex: 1; text-align: center; padding: 7px 0; border-radius: 9px; background: var(--track); color: var(--muted); font-size: 12px; }
.wk.on { background: var(--accent); color: var(--accent-ink); }
.route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sched { display: grid; gap: 8px; }
.sched-row { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; }
.sched-row .input { padding: 9px 12px; }
.day.need, .ex.need, .item.need { border-color: var(--warn); }
.ex { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-top: 10px; background: var(--bg); }
.ex .field { margin-bottom: 8px; }
.ex .input { padding: 9px 10px; background: var(--card); }
.ex-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 8px; }
.ex-grid .ex-name { grid-column: 1 / -1; }
.ex-grid .field:nth-child(2) { grid-column: span 2; }
@media (max-width: 420px) { .ex-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ex-grid .field:nth-child(2) { grid-column: 1 / -1; } }
.ex-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.rv-check { margin: 0; font-size: 14px; font-weight: 600; }
.raw { font-size: 12px; color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: 10px; padding: 7px 9px; margin-bottom: 10px; word-break: break-word; }
.chips.mini { gap: 6px; }
.chips.mini .chip span { padding: 6px 10px; font-size: 13px; }
.tbl-wrap { overflow: auto; max-height: 320px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.tbl { border-collapse: collapse; font-size: 13px; width: max-content; min-width: 100%; }
.tbl th, .tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tbl th { position: sticky; top: 0; background: var(--bg); color: var(--ink); font-weight: 600; }
.tbl td:first-child, .tbl th:first-child { color: var(--muted); }
.map { display: grid; gap: 8px; }
.map-row { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 10px; align-items: center; font-size: 14px; }
.map-row .input { padding: 9px 12px; }
.pdf-text { white-space: pre-wrap; font-size: 12px; max-height: 260px; overflow: auto; background: var(--bg); padding: 10px; border-radius: 10px; margin-top: 8px; color: var(--ink); }
.sess { list-style: decimal; margin: 12px 0 4px 20px; display: grid; gap: 8px; }
.sess li > span:first-child { font-weight: 600; margin-right: 8px; }

.sum-hint { margin-top: 8px; min-height: 1.4em; }
.row.four .input { padding-left: 8px; padding-right: 8px; min-width: 0; }

/* ---------- Phase 3: workouts, Hevy, analytics ---------- */
.tnav { display: flex; gap: 8px; margin: 14px 0 0; }
.tnav a { flex: 1; text-align: center; padding: 9px 6px; border-radius: 12px; border: 1px solid var(--line); color: var(--accent-text); text-decoration: none; font-size: 14px; font-weight: 600; background: var(--card); }
.tnav a:hover { border-color: var(--accent-2); }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; }
.suggest span { flex: 1 1 100%; }
.suggest.warn { background: var(--warn-soft); color: var(--warn); }
.steps { margin: 10px 0 14px 20px; display: grid; gap: 8px; font-size: 14px; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; word-break: break-word; }
.wl-head, .wl-set { display: grid; grid-template-columns: 40px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr) 30px; gap: 6px; align-items: center; }
.wl-head { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.wl-set { margin-bottom: 6px; }
.wl-set .input { padding: 9px 8px; text-align: center; }
.wl-type { height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-weight: 700; cursor: pointer; }
.wl-type.w { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-soft); }
.routine-fill { margin-bottom: 10px; }
.routine-fill .input { padding: 9px 10px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis { fill: var(--chart-label); font-size: 10px; }
.chart .val { fill: var(--ink); font-size: 10px; font-weight: 600; }
.chart .bar { fill: var(--chart-primary); }
.chart .bar.partial { fill: none; stroke: var(--chart-primary); stroke-width: 1.5; stroke-dasharray: 3 2; }
.chart g:hover .bar { opacity: .8; }
.chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .ln.s1, .legend .s1 { stroke: var(--series-1); background: var(--series-1); }
.chart .ln.s2, .legend .s2 { stroke: var(--series-2); background: var(--series-2); }
.chart .dot { stroke: var(--card); stroke-width: 2; }
.chart .dot.s1 { fill: var(--series-1); } .chart .dot.s2 { fill: var(--series-2); }
.chart .ln.s2 { stroke-dasharray: 5 3; }
.chart .hit { fill: transparent; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.unc { color: var(--warn); font-size: 11px; font-weight: 600; }
.card.planned { border-style: dashed; }

/* ---------- Saved meals / batches ---------- */
.tag.unconfirmed, .tag.needs { color: var(--warn); border-color: var(--warn); }
.needs-box { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: 13px; }
.needs-box ul { margin: 4px 0 0 18px; display: grid; gap: 3px; }
.partial { color: var(--warn); font-size: 12px; font-weight: 600; }
.ing-row .inline { margin-top: 8px; }

/* ---------- Phone + tablet: main navigation, safe areas, touch (Phase 2, 10/19/26) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
.wrap { padding-top: calc(16px + env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.modal-bg { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.modal { max-height: 88vh; max-height: 88dvh; overscroll-behavior: contain; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; gap: 2px;
  background: var(--card); border-top: 1px solid var(--line);
  padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.tabbar[hidden] { display: none; }
.tabbar a { flex: 1 1 0; max-width: 120px; min-width: 0; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none; border-radius: 12px; white-space: nowrap; }
.tabbar a svg { width: 24px; height: 24px; flex: none; }
.tabbar a[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); }
.tabbar a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
body.has-tabbar .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
body.has-tabbar .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
/* phone on its side: a slimmer bar */
@media (orientation: landscape) and (max-height: 500px) {
  .tabbar { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .tabbar a { flex-direction: row; gap: 6px; min-height: 44px; font-size: 13px; }
  .tabbar a svg { width: 20px; height: 20px; }
  body.has-tabbar .wrap { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.has-tabbar .toast { bottom: calc(66px + env(safe-area-inset-bottom)); }
}
/* laptop / desktop: the same five sections as a bar across the top */
@media (min-width: 900px) and (min-height: 501px) {
  .tabbar { top: 0; bottom: auto; justify-content: center; gap: 6px; border-top: none; border-bottom: 1px solid var(--line); padding: calc(8px + env(safe-area-inset-top)) 16px 8px; }
  .tabbar a { flex: none; max-width: none; flex-direction: row; gap: 8px; min-height: 40px; padding: 0 16px; font-size: 14px; }
  .tabbar a svg { width: 20px; height: 20px; }
  body.has-tabbar .wrap { padding-top: calc(76px + env(safe-area-inset-top)); padding-bottom: 48px; }
  body.has-tabbar .toast { bottom: 24px; }
}
/* touch screens: everything tappable is at least 44 px (Apple's guideline); typing never zooms the page */
@media (pointer: coarse) {
  .btn, .btn.sm, .icon-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn.block { display: flex; }
  .seg button { min-height: 40px; }
  .back { display: inline-flex; align-items: center; min-height: 44px; padding-right: 8px; }
  .avatar { min-width: 44px; min-height: 44px; }
  .menu { top: 52px; }
  .check { min-height: 44px; margin-bottom: 4px; }
  .check input { width: 22px; height: 22px; }
  .g-check { width: 44px; height: 44px; margin: -11px -7px -11px -11px; border: 9px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 2px var(--line); border-radius: 15px; }
  .g-item.checked .g-check { border-color: transparent; box-shadow: none; }
  .xbtn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: -11px -8px -11px 0; }
  .yield input { min-height: 44px; font-size: 16px; }
  .g-item { min-height: 56px; }
  .menu a { min-height: 44px; display: flex; align-items: center; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
}

/* ---------- OCB schedule + flyer show card (10/19/26) ---------- */
.card.flyer { background-color: #141416; background-size: cover; background-position: center 25%; border-color: transparent; color: #fff; }
.card.flyer .label, .card.flyer .chev, .card.flyer .unit, .card.flyer .sub, .card.flyer .k { color: rgba(255,255,255,.86); }
.card.flyer .title, .card.flyer .big, .card.flyer .v { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.card.flyer .stat { background: rgba(255,255,255,.13); backdrop-filter: blur(2px); }
.card.flyer .track { background: rgba(255,255,255,.28); }
.card.flyer:hover { border-color: rgba(255,255,255,.5); }
.show-row { display: flex !important; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.show-thumb { width: 52px; height: 66px; border-radius: 8px; object-fit: cover; flex: none; background: var(--track); }
.show-thumb.none { display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.show-flyer { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 16px; margin-bottom: 14px; background: var(--track); }
.flyer-preview { height: 120px; border-radius: 12px; background-size: cover; background-position: center 25%; margin-bottom: 12px; }
.tag.pro { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.card.flyer .prep-prog .bar-top span:first-child, .card.flyer .prog-ends, .card.flyer .prog-ends span { color: rgba(255,255,255,.86); }
.card.flyer .prep-prog .bar-top span:last-child { color: #fff; }
.card.flyer .fill { background: #fff; }

/* ---------- Workouts: today + start button + week strip + live timer (10/21/26) ---------- */
.today-wo .start-btn { margin-top: 14px; font-size: 17px; min-height: 54px; display: flex; align-items: center; justify-content: center; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; min-height: 72px; min-width: 0; }
.wk-day.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.wk-day.rest .wk-name { color: var(--muted); }
.wk-wd { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wk-n { font-size: 15px; font-weight: 700; color: var(--accent-text); min-height: 18px; }
.wk-name { font-size: 11px; line-height: 1.2; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.wk-day.done { background: var(--accent-soft); }
.live-bar { position: sticky; top: env(safe-area-inset-top); z-index: 5; display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--bg); border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; font-size: 14px; }
.live-bar b { margin-left: auto; font-size: 22px; font-variant-numeric: tabular-nums; }
.live-dot { width: 10px; height: 10px; border-radius: 99px; background: #ff453a; animation: livepulse 1.4s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* live workout bubble above the bottom bar (10/21/26) */
.live-bubble { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 41;
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); min-height: 40px; padding: 8px 16px; border-radius: 999px;
  background: var(--ink); color: var(--bg); text-decoration: none; font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.live-bubble .lb-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.live-bubble b { font-variant-numeric: tabular-nums; }
body.has-tabbar .toast { z-index: 60; }
@media (orientation: landscape) and (max-height: 500px) { .live-bubble { bottom: calc(60px + env(safe-area-inset-bottom)); } }
@media (min-width: 900px) and (min-height: 501px) { .live-bubble { bottom: 24px; } }

/* WILLBOUND brand. Storage ids stay "donez-prep". */
.brand { display: inline-flex; align-items: baseline; gap: 7px; }
.brand-name { font-weight: 800; letter-spacing: 0.14em; }
.brand-by { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: none; color: var(--muted); }
.about-foot { margin: 28px 0 8px; text-align: center; display: grid; gap: 4px; justify-items: center; }
.menu-btn { display: flex; align-items: center; width: 100%; text-align: left; padding: 11px 12px; border-radius: 10px; border: none; background: none; color: var(--accent-text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 44px; }
.menu-btn:hover, .menu-btn:focus-visible { background: var(--accent-soft); }

/* ---------- Workout player (10/21/26). Restrained motion; none with reduced motion. ---------- */
body.session-mode #hdr, body.session-mode #tabbar { display: none !important; }
body.session-mode .wrap { padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.ses { min-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.ses-enter { animation: sesUp .26s cubic-bezier(.2,.8,.2,1); }
@keyframes sesUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
#view.ses-out { opacity: 0; transform: translateX(-12px); transition: opacity .14s ease, transform .14s ease; }
.slide-in { animation: sesIn .22s cubic-bezier(.2,.8,.2,1); }
@keyframes sesIn { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ses-enter, .slide-in { animation: none; } #view.ses-out { transition: none; } }
.ses-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ses-top .ses-title { flex: 1; text-align: center; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ses-x, .ses-top .icon-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.ses-h1 { font-size: 28px; margin-top: 6px; }
.ses-prog { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.ses-prog > div { height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s ease; }
.ses-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin: 6px 2px 14px; font-variant-numeric: tabular-nums; }
.ses-menu { position: absolute; right: 16px; top: calc(60px + env(safe-area-inset-top)); z-index: 30; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow), 0 10px 30px rgba(0,0,0,.18); padding: 6px; display: grid; min-width: 220px; }
.ses-menu button { text-align: left; background: none; border: none; color: var(--ink); font: inherit; font-size: 15px; padding: 12px; border-radius: 10px; min-height: 44px; cursor: pointer; }
.ses-menu button:hover, .ses-menu button:focus-visible { background: var(--accent-soft); }
.ses-bottom { margin-top: auto; padding-top: 18px; display: grid; gap: 10px; justify-items: center; }
.ses-cta { min-height: 56px; font-size: 17px; border-radius: 16px; width: 100%; }
.ov-list { list-style: none; padding: 0; margin: 16px 0 12px; display: grid; gap: 10px; }
.ov-ex { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.ov-row { display: flex; align-items: center; gap: 12px; }
.ov-n { width: 28px; height: 28px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.ov-move { display: flex; gap: 4px; flex: none; }
.ov-move .icon-btn { min-width: 40px; min-height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.ov-move .icon-btn:disabled { opacity: .35; }
.ov-acts { display: flex; gap: 16px; margin: 8px 0 0 40px; }
.ov-ed { margin-top: 10px; }
.linkbtn { background: none; border: none; color: var(--accent-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 0; min-height: 36px; }
.set-card, .rest-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px 18px; display: grid; gap: 14px; }
.set-ex { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.set-no { font-size: 15px; font-weight: 700; color: var(--accent-text); margin-top: -8px; }
.set-plan { font-size: 14px; color: var(--muted); }
.stp { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stp-l { font-size: 14px; font-weight: 600; color: var(--muted); }
.stp-c { display: flex; align-items: center; gap: 8px; }
.stp-b { width: 52px; height: 52px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 26px; font-weight: 500; cursor: pointer; line-height: 1; }
.stp-b:active { transform: scale(.96); }
.stp-v { display: flex; align-items: baseline; gap: 4px; }
.stp-val { width: 76px; text-align: center; font-size: 28px; font-weight: 800; border: none; background: transparent; color: var(--ink); font-variant-numeric: tabular-nums; padding: 4px 0; -moz-appearance: textfield; }
.stp-val::-webkit-outer-spin-button, .stp-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stp-v span { font-size: 13px; color: var(--muted); }
.rest-card { text-align: center; }
.rest-time { font-size: 64px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.rest-bar { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.rest-bar > div { height: 100%; background: var(--accent); transition: width .5s linear; }
@media (prefers-reduced-motion: reduce) { .rest-bar > div, .ses-prog > div { transition: none; } }
.rest-ctl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.watch-btn { margin-top: 14px; background: var(--ink); color: var(--bg); min-height: 50px; }
@media (min-width: 900px) and (min-height: 501px) { .ses { max-width: 520px; margin: 0 auto; } }
.ses-menu[hidden] { display: none; }

/* Training Coach */
.coach .chip-btn, .chip-btn { border: 1px solid var(--line); background: var(--card, transparent); color: inherit; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; min-height: 36px; cursor: pointer; }
.coach .inline .input { flex: 1; }
.style-opt { cursor: pointer; display: block; }
.style-opt.on { outline: 2px solid var(--accent); outline-offset: -2px; }
.style-opt input { accent-color: var(--accent); margin-right: 6px; }
.rir-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.rir-row .field { margin: 0; }
.item.muted { opacity: .7; }
ul.diff li { padding: 4px 0; border-bottom: 1px solid var(--line); }

/* Card food picker + meal cart */
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (min-width: 700px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cat-card { position: relative; text-align: left; border: 1px solid var(--line); background: var(--card); color: inherit; border-radius: 16px; padding: 14px; min-height: 96px; display: flex; flex-direction: column; gap: 4px; font: inherit; cursor: pointer; }
.cat-card:active { transform: scale(.98); }
.cat-card .cat-name { font-weight: 700; font-size: 17px; }
.cat-card .cat-hint { color: var(--muted); font-size: 13px; line-height: 1.3; }
.cat-card .cat-n { position: absolute; top: 12px; right: 12px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cat-card::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--accent-2); margin-bottom: 6px; }
.cat-protein::before { background: #c0504d; } .cat-carbs::before { background: #d39b2a; } .cat-fats::before { background: #7a6bb8; }
.cat-veg::before { background: #3f9a5a; } .cat-fruit::before { background: #d4677f; } .cat-other::before { background: var(--accent-2); }
.cat-add { border-style: dashed; background: transparent; }
.cat-add::before { background: var(--accent); }
.cat-head { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; }
.ing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .ing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ing-card { position: relative; text-align: left; border: 1px solid var(--line); background: var(--card); color: inherit; border-radius: 14px; padding: 12px; min-height: 76px; display: flex; flex-direction: column; gap: 3px; font: inherit; cursor: pointer; }
.ing-card .ing-name { font-weight: 600; line-height: 1.25; padding-right: 18px; }
.ing-card .ing-brand { font-size: 12px; color: var(--muted); }
.ing-card .ing-meta { font-size: 12px; color: var(--muted); margin-top: auto; }
.ing-card .ing-in { position: absolute; top: 10px; right: 10px; color: var(--accent-text); font-weight: 700; }
.ing-card.add-card { border-style: dashed; background: transparent; }
.cart-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 42;
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px 8px 8px; border-radius: 999px; border: none;
  background: var(--accent); color: var(--accent-ink); font: inherit; box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer; max-width: calc(100vw - 32px); }
.cart-bar .cart-n { background: var(--accent-ink); color: var(--accent); border-radius: 999px; min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.cart-bar .cart-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-bar.bump { animation: cartBump .45s ease; }
@keyframes cartBump { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.08); } 100% { transform: translateX(-50%) scale(1); } }
@media (min-width: 900px) and (min-height: 501px) { .cart-bar { bottom: 24px; } }
body:has(#liveBubble) .cart-bar { bottom: calc(132px + env(safe-area-inset-bottom)); }
details.item.combo summary { list-style: none; cursor: pointer; }
details.item.combo summary::-webkit-details-marker { display: none; }
.scan-box { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.scan-box video { width: 100%; height: 100%; object-fit: cover; }
.scan-line { position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: #e5484d; box-shadow: 0 0 8px #e5484d; }
.label-photo { margin: 10px 0; }
.label-photo img { width: 100%; max-height: 50vh; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
@media (prefers-reduced-motion: reduce) { .cart-bar.bump { animation: none; } .cat-card:active { transform: none; } }
body:has(#cartBar) #view { padding-bottom: 84px; }

/* Supplements */
.chk { border-radius: 12px; padding: 12px; margin-top: 12px; border: 1px solid var(--line); }
.chk.prohibited { border-color: var(--danger); background: var(--danger-soft); }
.chk.review { border-color: var(--warn); background: var(--warn-soft); }
.tag.danger-t { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
button.item.cat-row { width: 100%; text-align: left; font: inherit; color: inherit; background: var(--card); border: 0; border-bottom: 1px solid var(--line); }

/* Check-in status: colour + text + icon (colour never carries the meaning alone) */
.ck-st { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); margin: 8px 0; }
.ck-st b { display: block; }
.ck-st .ck-ic { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.ck-overdue { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.ck-overdue .small { color: var(--danger); }
.ck-due { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.ck-due .small { color: var(--warn); }
.ck-done .ck-ic { color: var(--accent-text); }
.ck-up .ck-ic, .ck-setup .ck-ic { color: var(--muted); }
.ck-mini { padding: 6px 10px; font-size: 14px; }
.rate-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; }
.rate-row > span { flex: none; width: 84px; font-size: 14px; }
.rate-row .seg { flex: 1; margin: 0; }
.rate-row .seg button { min-width: 0; padding-left: 0; padding-right: 0; }
.tag.st-adv { color: var(--accent-text); border-color: var(--accent-text); }
.tag.st-red { color: var(--warn); border-color: var(--warn); }
.prop-grid { gap: 2px 10px; margin: 8px 0 4px; grid-template-columns: auto 1fr; }

/* Footer signature: small, centered, muted; sits inside the page padding, so it never meets the tab bar */
.site-foot { text-align: center; color: var(--muted); font-size: 11px; letter-spacing: .14em; font-weight: 600; margin: 28px 0 0; padding: 8px 0 4px; opacity: .8; }
body.session-mode .site-foot { display: none; }
/* No accidental double-tap zoom on controls (pinch-to-zoom stays available) */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
a, button, input, select, textarea, label, summary, [data-go], .card.tap, .item.tap, .seg button, .chip, .tabbar a, .wheel { touch-action: manipulation; }

/* Workout wheels (iOS-style pickers) */
.wheels { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin: 12px 0 6px; }
.wheel-col { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.wheel-l { font-size: 13px; font-weight: 600; text-align: center; min-height: 22px; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.wheel { position: relative; height: 120px; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; border-radius: 12px; background: var(--bg); scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); outline-offset: 2px; }
.wheel::-webkit-scrollbar { display: none; }
.wheel::before { content: ""; position: sticky; display: block; top: 40px; height: 40px; margin-bottom: -40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); pointer-events: none; }
.wheel-pad { height: 40px; }
.wheel-i { height: 40px; line-height: 40px; text-align: center; scroll-snap-align: center; font-size: 18px; color: var(--muted); font-variant-numeric: tabular-nums; cursor: pointer; user-select: none; }

.wheel-i.on { color: var(--ink); font-weight: 800; font-size: 24px; }
.wheel-i.in-range:not(.on) { color: var(--accent-text); }
.wheel-b { min-height: 40px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; font-size: 20px; color: inherit; }
.info-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--muted); background: transparent; color: var(--muted); font: italic 700 12px/1 Georgia, serif; padding: 0; min-height: 0; }
.inc-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.chip-btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.set-last { font-size: 14px; color: var(--muted); margin-top: 4px; }
.watch-strip { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; margin: 6px 0 12px; }
.ws-i { display: inline-flex; align-items: center; gap: 6px; }
.ws-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.rir-t td { padding: 4px 10px 4px 0; font-size: 14px; }
.saved-badge { margin: 8px 0; color: var(--accent-text); font-weight: 700; }
/* Quantity slider */
.qty-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.qty-btn { width: 44px; height: 44px; flex: none; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: inherit; font-size: 22px; }
.qty-slide { flex: 1; accent-color: var(--accent); height: 32px; }
.prof-head { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.prof-head .avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; }
pre.codes { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: 600 15px/1.7 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; white-space: pre-wrap; }
.cx-row { gap: 6px; align-items: center; margin: 6px 0; }
.cx-row .cx { width: 64px; flex: none; }

/* ---------- start screen (create account / sign in) + slimmer setup welcome, 10/25/26 ---------- */
.start { min-height: calc(100dvh - 140px); display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.start-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 28px 22px 24px; color: #f4f5f7;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 60%),
              linear-gradient(160deg, #0c0e11 0%, #1a1e24 55%, #0c0e11 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28); }
.start-hero::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid rgba(255, 255, 255, .05); }
.start-mark { width: 44px; height: 44px; border-radius: 12px; display: block; }
.start-brand { margin-top: 14px; font-size: 12px; font-weight: 800; letter-spacing: .32em; color: rgba(244, 245, 247, .7); }
.start-title { margin: 8px 0 0; font-size: 40px; line-height: 1.02; letter-spacing: -.035em; font-weight: 800; color: #fff; }
.start-lead { margin: 12px 0 0; font-size: 16px; line-height: 1.45; color: rgba(244, 245, 247, .78); max-width: 30ch; }
.start-feats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 22px; }
.start-feats span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 14px; background: rgba(255, 255, 255, .07); font-size: 11.5px; font-weight: 600; color: rgba(244, 245, 247, .9); text-align: center; }
.start-feats svg, .ob-tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.start-actions { display: grid; gap: 10px; }
.btn.block { display: block; width: 100%; }
.start-cta, .start-alt { min-height: 54px; font-size: 17px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.start-alt { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); }
.start-foot { text-align: center; margin: 2px 0 0; }
.ob-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-tile { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-text); }
.ob-tile b { color: var(--ink); font-size: 15px; line-height: 1.2; }
.ob-where { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
@media (min-width: 720px) { .start { max-width: 520px; margin: 0 auto; } .start-title { font-size: 48px; } }

/* ---------- WILLBOUND brand (10/25/26): DON·EZ logo file, role choice, coach setup, workspace switch ---------- */
.site-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.foot-logo { height: 46px; width: auto; opacity: .8; }
.foot-copy { font-size: 10.5px; letter-spacing: .12em; }
:root[data-mode="light"] .foot-logo, :root[data-mode="light"] .about-logo { filter: invert(1); } /* black glyphs on light pages; same file */
.about-logo { display: block; height: 64px; width: auto; margin: 0 auto 8px; }
.start-logo { display: block; height: 128px; width: auto; margin: 4px auto 0; }
.start-hero .start-title { text-align: center; font-size: 44px; letter-spacing: .06em; margin-top: 18px; }
.start-hero .start-lead { text-align: center; margin-left: auto; margin-right: auto; }
.role { display: grid; gap: 14px; }
.role-title { font-size: 30px; line-height: 1.1; letter-spacing: -.02em; margin: 0; }
.role-cards { display: grid; gap: 12px; }
.role-card { display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); color: var(--ink); text-decoration: none; }
.role-card:hover, .role-card:focus-visible { border-color: var(--accent); }
.role-card b { font-size: 19px; }
.role-card span { color: var(--muted); font-size: 14.5px; line-height: 1.4; }
.role-card .role-go { color: var(--accent-text); font-weight: 700; margin-top: 4px; }
.role-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink) !important; }
.role-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.role-note { font-size: 13.5px; color: var(--muted); margin: 0; }
.ws-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--accent-soft); margin: 0 0 14px; }
.ws-switch a { text-align: center; padding: 10px 6px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--accent-text); text-decoration: none; min-height: 24px; }
.ws-switch a[aria-current="page"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
@media (min-width: 720px) { .role-cards { grid-template-columns: 1fr 1fr; } .role { max-width: 760px; margin: 0 auto; } }
.start-point { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 8px; margin: 14px 2px 0; font-size: 13px; line-height: 1.4; color: rgba(244, 245, 247, .72); }
.start-point svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 720px) { .start-point { justify-content: center; text-align: left; max-width: 46ch; margin-left: auto; margin-right: auto; } }
/* WILLBOUND wordmark: a condensed DIN-style face already on the device (DIN Condensed on iPhone/Mac, Bahnschrift on Windows, Roboto Condensed on Android). No font download, works offline. */
:root { --wordmark: "DIN Condensed", "Bahnschrift Condensed", "Bahnschrift", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; }
.brand-name { font-family: var(--wordmark); font-weight: 700; font-stretch: condensed; letter-spacing: .12em; font-size: 20px; text-transform: uppercase; }
.start-hero .start-title { font-family: var(--wordmark); font-weight: 700; font-stretch: condensed; font-size: 64px; line-height: .95; letter-spacing: .04em; margin-top: 6px; }
@media (min-width: 720px) { .start-hero .start-title { font-size: 76px; } }
.foot-logo { height: 38px; }
.start-feats { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.start-feats span { font-size: 11px; line-height: 1.15; padding: 12px 2px 10px; }
@media (max-width: 359px) { .start-feats { grid-template-columns: repeat(3, 1fr); } }
.start-hero .start-title { white-space: nowrap; font-size: min(64px, 15vw); }
@media (min-width: 720px) { .start-hero .start-title { font-size: 76px; } }
.start-feats span { font-size: 10.5px; letter-spacing: -.01em; hyphens: none; overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 379px) { .start-hero .start-title { font-size: 11.5vw; } }
/* show eligibility */
.tag.el-eligible { color: #0f7a3d; border-color: #0f7a3d; }
.tag.el-not-offered { color: var(--muted); }
.tag.el-unverified, .tag.el-masters-only { color: #a3620a; border-color: #a3620a; }
:root[data-mode="dark"] .tag.el-eligible { color: #6fd39a; border-color: #6fd39a; }
:root[data-mode="dark"] .tag.el-unverified, :root[data-mode="dark"] .tag.el-masters-only { color: #f0b860; border-color: #f0b860; }
.el-card.el-eligible { border-left: 4px solid #0f7a3d; }
.el-card.el-unverified, .el-card.el-masters-only { border-left: 4px solid #a3620a; }
.el-card.el-not-offered { border-left: 4px solid var(--muted); }

/* ---------- WILLBOUND brand (10/26/26): Anton wordmark (bundled, OFL — fonts/Anton-OFL.txt), system interface font ---------- */
@font-face { font-family: "Anton"; src: url("../fonts/anton-latin.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
:root { --wordmark: "Anton", "Bahnschrift Condensed", "DIN Condensed", Impact, "Arial Narrow", sans-serif; }
.brand-name { font-family: var(--wordmark); font-weight: 400; font-stretch: normal; letter-spacing: .08em; font-size: 22px; font-synthesis: none; }
.start-hero .start-title { font-family: var(--wordmark); font-weight: 400; font-stretch: normal; letter-spacing: .05em; font-synthesis: none; }
.start-code { display: block; text-align: center; font-size: 14px; font-weight: 600; color: var(--accent-text); padding: 6px; }
.auth { max-width: 520px; margin: 0 auto; }
.code-in { font: 600 24px/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3em; text-align: center; }
.code-big { font: 700 28px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; }
.invite-card { margin-top: 12px; }
.invite-show { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); }
.email-frame { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.notice.warn-n { margin-top: 12px; }
.menu-acct { font-size: 12px; color: var(--muted); padding: 8px 12px 2px; border-top: 1px solid var(--line); margin-top: 4px; }

/* ---------- workout change review (10/26/26): day cards, direction chips ---------- */
.cr { display: grid; gap: 10px; }
.cr-day { border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; }
.cr-day > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: grid; gap: 6px; }
.cr-day > summary::-webkit-details-marker { display: none; }
.cr-day > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cr-name { font-weight: 800; font-size: 16px; }
.cr-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cr-kind { font-size: 12px; font-weight: 700; color: var(--muted); }
.cr-kind.k-deload { color: var(--accent-text); }
.cr-sums { display: grid; gap: 4px; }
.cr-sum { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cr-sum svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cr-sum small { color: var(--muted); font-size: 12px; }
.cr-more { justify-self: start; font-size: 12px; font-weight: 700; color: var(--accent-text); }
.cr-more::after { content: ' ▾'; }
.cr-day[open] .cr-more::after { content: ' ▴'; }
.cr-day[open] > summary { border-bottom: 1px solid var(--line); }
.cr-list { list-style: none; margin: 0; padding: 6px 14px 12px; display: grid; gap: 10px; font-size: 14px; }
.cr-rows { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; margin-top: 4px; font-size: 13px; align-items: center; }
.cr-f { color: var(--muted); }
.cr-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 99px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-chip.up { color: #0b6b35; background: #dcf3e5; }
.cr-chip.down { color: #a3261b; background: #fbe1de; }
.cr-chip.same { color: var(--muted); background: var(--accent-soft); }
.cr-dl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 0 5px; border-radius: 6px; border: 1px solid currentColor; }
:root[data-mode="dark"] .cr-chip.up { color: #7fe0a6; background: #173a26; }
:root[data-mode="dark"] .cr-chip.down { color: #ff9b90; background: #45201c; }
.cr-note { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { .cr-day > summary { transition: background .15s ease; } .cr-day > summary:hover { background: var(--accent-soft); } }

/* ---------- weekly schedule: draggable workout cards ---------- */
.sched2 { padding: 16px; }
.sched-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sc-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 10px; align-items: center; border-radius: 14px; padding: 2px; transition: none; }
.sc-pick { min-width: 0; max-width: 100%; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center; padding: 8px 20px 8px 0; font: inherit; font-weight: 700; font-size: 15px; color: var(--ink); -webkit-text-fill-color: var(--ink); opacity: 1; cursor: pointer; border-radius: 8px; }
.sc-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-rest .sc-pick { color: var(--muted); -webkit-text-fill-color: var(--muted); font-weight: 600; }
.sc-wd { display: grid; line-height: 1.1; font-size: 13px; }
.sc-wd i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.sc-card { min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px 6px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.sc-row.on .sc-card { border-left: 4px solid var(--accent); }
.sc-card.sc-rest { padding-left: 12px; background: transparent; border-style: dashed; color: var(--muted); }
.sc-name { flex: 1; font-weight: 700; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sc-handle { flex: none; width: 36px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 8px; cursor: grab; touch-action: none; }
.sc-handle:hover { background: var(--accent-soft); color: var(--ink); }
.sc-handle:focus-visible, .mv-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-move { flex: none; }
.sc-row.dragging .sc-card { opacity: .35; }
.sc-row.over .sc-card { border-color: var(--accent); background: var(--accent-soft); }
.sc-row.over.swap .sc-card::after { content: '⇄ swap'; font-size: 11px; font-weight: 800; color: var(--accent-text); margin-left: auto; }
.sc-row.over:not(.swap) .sc-card.sc-rest::after { content: 'Move here'; font-size: 11px; font-weight: 800; color: var(--accent-text); margin-left: auto; }
.sc-ghost { position: fixed; z-index: 70; pointer-events: none; box-shadow: 0 12px 28px rgba(0,0,0,.22); transform: rotate(-1deg); }
.mv-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.mv-day { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }
.mv-day span { font-size: 12px; color: var(--muted); }
.mv-day:hover { border-color: var(--accent); }
.toast-act { margin-left: 10px; background: none; border: 1px solid currentColor; color: inherit; border-radius: 8px; padding: 3px 10px; font: inherit; font-weight: 700; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .sc-card, .mv-day, .sc-handle { transition: background .15s ease, border-color .15s ease, opacity .15s ease; }
}

/* ---------- plan editor: calmer exercise cards ---------- */
.card.day { padding: 16px; border-radius: 18px; }
.card.day > .inline .field input[data-df="name"] { font-weight: 800; font-size: 18px; padding: 8px 12px; }
.ex { border-radius: 14px; padding: 12px 12px 8px; background: var(--card); box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.ex + .ex { margin-top: 10px; }
.ex .field > span { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ex .input { background: var(--bg); border-color: transparent; }
.ex .input:focus { border-color: var(--accent); background: var(--card); }
.ex-name .input { font-weight: 700; font-size: 16px; }
.ex-tools { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
.ex-tools .icon-btn { min-width: 36px; min-height: 32px; }
@media (max-width: 420px) { .ex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ex-grid .field:nth-child(2) { grid-column: 1 / -1; } }

.cc-sched { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 6px; }
.cc-sched .field > span { text-transform: capitalize; }
.cc-sched .input { padding: 8px; font-size: 13px; }

/* ---------- Athlete Stats · Beta ---------- */
.st-h1 { display: flex; align-items: center; gap: 10px; }
.st-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.st-bar { display: block; height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; margin: 6px 0 4px; }
.st-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.st-bar.big { height: 12px; }
.st-xp .st-lv { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.st-xp .st-lv b { font-family: var(--wordmark); font-size: 30px; letter-spacing: .03em; text-transform: uppercase; }
.st-xp .st-lv span, .st-week, .st-meta { color: var(--muted); font-size: 13px; }
.st-meta small { font-size: 11px; }
.st-dims { display: grid; gap: 8px; margin-bottom: 12px; }
.st-dim, .st-ch { border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.st-dim > summary, .st-ch > summary { list-style: none; cursor: pointer; padding: 12px 14px; }
.st-dim > summary::-webkit-details-marker, .st-ch > summary::-webkit-details-marker { display: none; }
.st-dim > summary { display: flex; gap: 12px; align-items: center; }
.st-dim > summary:focus-visible, .st-ch > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.st-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; }
.st-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--accent-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-main { flex: 1; min-width: 0; display: grid; }
.st-badge { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.st-badge.s-measured { border-color: var(--accent); color: var(--accent-text); }
.st-badge.s-estimated { border-style: dashed; color: var(--ink); }
.st-na { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 4px; }
.st-dim.na .st-ic { background: transparent; border: 1px dashed var(--line); }
.st-dim.na .st-ic svg { stroke: var(--muted); }
.st-body { padding: 0 14px 12px; }
.st-dim[open] > summary, .st-ch[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.st-body ul.plain li { margin: 0 0 6px; }
.st-ch { margin-bottom: 8px; }
.st-ch.done { border-color: var(--accent); }
.st-dl { display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; margin: 6px 0 10px; }
.st-dl dt { color: var(--muted); font-weight: 700; }
.st-dl dd { margin: 0; }
.st-cmp ul { margin: 6px 0; }
.st-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.st-bdg { display: grid; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--accent); background: var(--accent-soft); }
.st-bdg small { color: var(--muted); }
.st-more { margin-top: 10px; font-size: 13px; }
.st-more summary { cursor: pointer; font-weight: 700; color: var(--accent-text); }
.st-pick { display: grid; gap: 10px; max-height: 60vh; overflow: auto; }
.st-pk { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.chip-btn.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; color: var(--ink); }
.st-fb { margin-top: 14px; text-align: left; }
.st-fb-xp { margin: 6px 0; }
.st-mealbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(140px + env(safe-area-inset-bottom)); z-index: 59; width: min(560px, calc(100% - 32px));
  display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; background: var(--card); color: var(--ink); border: 1px solid var(--accent); border-radius: 14px; padding: 10px 12px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.st-mealbar.st-wbar { display: block; padding: 0; border: 0; background: none; box-shadow: none; bottom: calc(96px + env(safe-area-inset-bottom)); }
.st-mealbar.st-wbar .st-fb { margin: 0; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
@media (prefers-reduced-motion: no-preference) {
  .st-bar > i { transition: width .5s ease; }
  .st-mealbar, .st-fb { animation: st-in .25s ease; }
  @keyframes st-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
  .st-fb { animation-name: st-in2; } @keyframes st-in2 { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- meal rotation + grocery planner ---------- */
.gp-card > summary, .mr-prefs > summary, .mr-day > summary { cursor: pointer; list-style: none; }
.gp-card > summary::-webkit-details-marker, .mr-prefs > summary::-webkit-details-marker, .mr-day > summary::-webkit-details-marker { display: none; }
.gp-card > summary::after, .mr-prefs > summary::after { content: '▾'; float: right; color: var(--muted); }
.gp-card[open] > summary::after, .mr-prefs[open] > summary::after { content: '▴'; }
.gp-item .g-qty { text-align: right; display: grid; gap: 2px; justify-items: end; }
.gp-stores li { margin: 0 0 10px; }
.gp-bk { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 6px; }
.gp-bk details { margin-top: 6px; }
.mr-meal { padding: 10px 0; border-top: 1px solid var(--line); }
.mr-meal:first-of-type { margin-top: 10px; }
.mr-it { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; align-items: center; margin: 8px 0; }
.mr-it > span { min-width: 0; overflow-wrap: anywhere; }
.mr-it small { font-size: 12px; }
.gp-keep { color: var(--ink); }
.mr-it select.input.mr-swap { width: 96px; min-width: 0; max-width: 96px; padding: 7px 8px; font-size: 13px; justify-self: end; }

.td-compact { margin: 12px 0 0; }
.td-compact > summary { cursor: pointer; font-size: 14px; color: var(--accent-text); font-weight: 600; list-style: none; padding: 6px 2px; }
.td-compact > summary::-webkit-details-marker { display: none; }

/* ---------- Badge Vault (Warrior Badges v2) ---------- */
.bv-mig { border: 1px solid var(--accent); background: var(--accent-soft); }
.bv-chain { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.bv-chain i { font-style: normal; margin: 0 4px; opacity: .6; }
.bv-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; }
.bv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bv-fam { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 12px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
.bv-fam.earned { border-color: var(--accent); }
.bv-fam .st-bar { width: 100%; }
.bv-medal { width: 84px; height: 84px; display: block; }
.bv-medal.dim { filter: grayscale(1); opacity: .38; }
.bv-fn { font-weight: 700; font-size: 14px; line-height: 1.2; }
.bv-cat, .bv-next { font-size: 12px; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.bv-pips { display: flex; gap: 4px; } .bv-pips i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--muted); }
.bv-pips i.on { background: var(--accent); border-color: var(--accent); }
.bv-tiers { display: grid; gap: 10px; }
.bv-tier { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; }
.bv-tier .bv-medal { width: 56px; height: 56px; }
.bv-ev { margin-top: 4px; color: var(--accent-text); }
.bv-pc { margin: 0 0 8px; } .bv-pc ul { margin: 2px 0 0; }
.bv-set .bv-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.bv-line { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); }
.bv-reveal { position: fixed; inset: 0; z-index: 80; background: rgba(6, 8, 12, .82); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.bv-rv-in { width: min(560px, 100%); background: var(--card); color: var(--ink); border-radius: 18px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.bv-rv-top { display: flex; justify-content: space-between; align-items: center; }
.bv-rv-h { margin: 6px 0 12px; font-family: Anton, Impact, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.bv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; perspective: 900px; }
.bv-card { position: relative; height: 230px; border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; transform-style: preserve-3d; transition: transform .5s ease;
  animation: bv-unlock .7s cubic-bezier(.2,.8,.3,1) both, bv-turn 1s ease-out both; animation-delay: var(--d), calc(var(--d) + .7s); }
.bv-card.turned { transform: rotateY(180deg); animation: none; }
.bv-face { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 12px; border-radius: 16px; border: 1px solid var(--accent); background: var(--accent-soft); backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; overflow: hidden; }
.bv-face .bv-medal { width: 110px; height: 110px; }
.bv-face small { font-size: 11.5px; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.bv-face.back { transform: rotateY(180deg); align-content: start; justify-items: start; text-align: left; overflow-y: auto; }
.bv-rv-note { margin: 10px 0; }
.bv-rv-act { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@keyframes bv-unlock { from { transform: rotateY(140deg) scale(.65); opacity: .15; } to { transform: none; opacity: 1; } }
@keyframes bv-turn { to { transform: rotateY(360deg); } }
.bv-reveal.still .bv-card { animation: none; }
@media (prefers-reduced-motion: reduce) { .bv-card { animation: none !important; transition: none; } }
.bv-toast { position: fixed; left: 50%; transform: translateX(-50%); top: calc(64px + env(safe-area-inset-top)); z-index: 60; width: min(520px, calc(100% - 32px)); display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px; background: var(--card); color: var(--ink); border: 1px solid var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.bv-toast > span { flex: 1; min-width: 0; display: grid; } .bv-toast small { color: var(--muted); font-size: 12px; }
@media (prefers-reduced-motion: no-preference) { .bv-toast { animation: st-in .25s ease; } }

/* ---------- Meal logging: one tap, swipe/menu edits ---------- */
.ml-sum { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: 10px 0 12px; }
.ml-sum.done { border-color: var(--accent); }
.ml-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .ml-top b { font-size: 26px; } .ml-top span { color: var(--muted); }
.ml-done { margin-left: auto; font-weight: 700; color: var(--accent-text); font-size: 14px; }
.ml-mac { margin-top: 6px; font-size: 13px; color: var(--muted); }
.ml-list { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
.ml-row { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.ml-row:first-child { border-top: 0; }
.ml-acts { position: absolute; top: 0; right: 0; bottom: 0; display: flex; }
.ml-act { border: 0; font: inherit; font-size: 13px; font-weight: 600; padding: 0 12px; min-width: 76px; color: #fff; background: #4b5563; cursor: pointer; }
.ml-act.a-plan, .ml-act.a-restore { background: var(--accent); color: var(--accent-ink); } .ml-act.a-remove { background: #b42318; }
.ml-main { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 14px; background: var(--card); touch-action: pan-y; transition: transform .2s ease; min-height: 56px; }
@media (prefers-reduced-motion: reduce) { .ml-main { transition: none; } }
.ml-chk { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.ml-row.logged .ml-chk { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ml-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ml-name { font-weight: 600; overflow-wrap: anywhere; }
.ml-amt { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; } .ml-note { font-size: 12px; }
.ml-more { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); font-size: 22px; border-radius: 10px; cursor: pointer; }
.ml-more:hover, .ml-more:focus-visible { background: var(--accent-soft); }
.ml-removed { margin: 8px 2px 0; color: var(--muted); }
.ml-cta { display: grid; gap: 8px; margin: 14px 0 6px; }
.ml-hint { margin: 4px 2px 10px; }
.ml-details { margin-top: 6px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; background: var(--card); }
.ml-details summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.ml-di { padding: 10px 0; border-top: 1px solid var(--line); } .ml-di:first-child { border-top: 0; }
.ml-dayrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .ml-dayrow .track { margin: 0; }
.af-h { margin: 12px 0 6px; } .af-list { display: grid; gap: 6px; }
.af-row { display: flex; gap: 6px; align-items: stretch; }
.af-pick { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.af-star { flex: none; width: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--muted); font-size: 18px; cursor: pointer; }
.af-star.on { color: #d9a400; border-color: #d9a400; }

/* ---------- Illustrated badge art (WILLBOUND-80): dark art always on a dark presentation, whole image visible ---------- */
.bv-pic { display: grid; place-items: center; width: 100%; }
.bv-pic.ill { background: #0b1018; border-radius: 12px; padding: 6px; aspect-ratio: 1 / 1; }
.bv-art { display: block; width: 100%; height: 100%; max-height: 150px; object-fit: contain; }
.bv-art.dim { filter: grayscale(.85) brightness(.55); }
.bv-fam .bv-pic.ill { max-width: 150px; }
.bv-tier .bv-art { width: 56px; height: 56px; }
.bv-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.bv-concept { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 8px; border: 1px dashed var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
.bv-card.ill .bv-face { background: #0b1018; border-color: #6b819e; color: #eef3fa; }
.bv-card.ill .bv-face small { color: #b5c3d6; }
.bv-card.ill .bv-face .bv-art { max-height: 120px; }
.bv-toast img.ill { background: #0b1018; border-radius: 8px; object-fit: contain; }
/* showcase dialog (fixed dark palette, like the art) */
dialog.bv-show { margin: auto; inset: 0; width: min(580px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; background: #0c1421; color: #f1f6ff; border: 1px solid #6b819e; border-radius: 18px; padding: 16px; }
dialog.bv-show::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px); }
.bv-show .btn { background: #20334c; color: #eff6ff; border-color: #6f8aa7; } .bv-show .btn.primary { background: #d3d6db; color: #111213; border-color: #d3d6db; }
.bv-sh-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .bv-sh-head h2 { margin: 0; font-size: 20px; color: #fff; text-transform: none; letter-spacing: 0; }
.bv-stage { position: relative; perspective: 1000px; overflow: hidden; isolation: isolate; background: #080c12; border-radius: 12px; margin: 12px 0; display: grid; place-items: center; }
.bv-hero { transform-style: preserve-3d; transform-origin: 50% 55%; width: 100%; display: grid; place-items: center; }
.bv-stage .big { width: 100%; height: min(390px, 48dvh); max-height: none; object-fit: contain; display: block; }
.bv-glow, .bv-sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.bv-glow { background: radial-gradient(ellipse at 50% 55%, transparent 30%, #f6c65755 70%, transparent); }
.bv-sweep { background: linear-gradient(110deg, transparent 35%, #e1f2ff55 50%, transparent 65%); transform: translateX(-120%); }
.bv-stage.playing .bv-sweep { animation: bv-sweep 1.8s ease-in-out both; } .bv-stage.playing .bv-glow { animation: bv-glowk 2s ease-out both; }
.bv-stage.playing .bv-hero { animation: bv-coin 1.4s cubic-bezier(.2,.7,.3,1) both; }
.bv-stage.playing.fx-rubicon .bv-hero { animation: bv-cross 2s ease-out both; } .bv-stage.playing.fx-arena .bv-hero, .bv-stage.playing.fx-dual .bv-hero { animation: bv-coin 1.9s ease-out both; }
.bv-stage.playing.fx-ascendant .bv-hero { animation: bv-ascend 2s ease-out both; } .bv-stage.playing.fx-summoning .bv-hero { animation: bv-scroll 1.8s ease-out both; }
.bv-stage.playing.fx-lights .bv-hero { animation: bv-turn 2s ease-out both; } .bv-stage.playing.fx-podium .bv-hero { animation: bv-rise 1.8s ease-out both; }
.bv-stage.playing.fx-sovereign .bv-hero { animation: bv-royal 2.3s ease-out both; } .bv-stage.playing.fx-hybrid .bv-hero { animation: bv-orbit 2s ease-out both; }
.fx-ascendant .bv-glow, .fx-lights .bv-glow { background: radial-gradient(ellipse at center, transparent 25%, #a366ff77 70%, transparent); }
.fx-hybrid .bv-glow, .fx-summoning .bv-glow { background: radial-gradient(ellipse at center, transparent 25%, #2cccf977 70%, transparent); }
.fx-dual .bv-glow { background: conic-gradient(from 0deg, transparent, #f2742977, transparent, #3399ff77, transparent); }
@keyframes bv-sweep { 0% { opacity: 0; transform: translateX(-110%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(110%); } }
@keyframes bv-glowk { 0% { opacity: 0; } 40% { opacity: .8; } 100% { opacity: 0; } }
@keyframes bv-coin { 0% { transform: rotateY(-540deg) scale(.65); opacity: .1; } 78% { transform: rotateY(12deg) scale(1.02); opacity: 1; } 100% { transform: none; } }
@keyframes bv-cross { 0% { transform: translateY(45px) scale(.8); opacity: .1; } 60% { transform: translateY(-5px) scale(1.02); opacity: 1; } 100% { transform: none; } }
@keyframes bv-ascend { 0% { transform: translateY(90px) rotateY(-180deg) scale(.65); opacity: 0; } 70% { transform: translateY(-8px) rotateY(15deg); opacity: 1; } 100% { transform: none; } }
@keyframes bv-scroll { 0% { transform: rotateX(-85deg) scale(.8); opacity: 0; } 65% { transform: rotateX(8deg); opacity: 1; } 100% { transform: none; } }
@keyframes bv-turn { 0% { transform: rotateY(-35deg) scale(.85); opacity: .1; } 50% { transform: rotateY(12deg); opacity: 1; } 100% { transform: none; } }
@keyframes bv-rise { 0% { transform: translateY(65px) scale(.8); opacity: 0; } 75% { transform: translateY(-6px) scale(1.03); opacity: 1; } 100% { transform: none; } }
@keyframes bv-royal { 0% { transform: rotateY(-360deg) scale(.7); opacity: 0; } 70% { transform: rotateY(8deg) scale(1.04); opacity: 1; } 100% { transform: none; } }
@keyframes bv-orbit { 0% { transform: rotateZ(-12deg) rotateY(-160deg) scale(.7); opacity: 0; } 75% { transform: rotateZ(2deg) rotateY(12deg); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .bv-stage .bv-hero, .bv-stage .bv-glow, .bv-stage .bv-sweep { animation: none !important; } }
.bv-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid #6b819e; font-size: 13px; font-weight: 700; color: #dfe8f5; }
.bv-chip.on { background: #e9c46a; border-color: #e9c46a; color: #1b1405; } .bv-chip.lock { border-style: dashed; } .bv-chip.sm { font-size: 11px; padding: 0 8px; }
.bv-sh-status { margin: 0 0 8px; } .bv-sh-body .sub, .bv-sh-note { color: #b5c3d6; } .bv-sh-note { font-size: 12px; margin: 10px 0 0; }
.bv-nextm { color: #dfe8f5; background: #142135; border: 1px solid #2d4056; border-radius: 10px; padding: 8px 10px; margin: 0 0 10px; }
.bv-show .bv-tier { grid-template-columns: 14px minmax(0, 1fr); } .bv-pip { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #6b819e; margin-top: 5px; } .bv-pip.on { background: #e9c46a; border-color: #e9c46a; }
.bv-show .bv-ev { color: #e9c46a; }
.bv-sh-act { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.gp-cov { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; }
.gp-cov.part { border: 1px solid #b54708; background: transparent; }
.gp-why { margin-top: 4px; } .gp-why summary { cursor: pointer; color: var(--accent-text); }
.qa-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; align-items: end; }
.qa-facts { margin: 0 0 10px; } .qa-facts summary { cursor: pointer; display: flex; gap: 8px; align-items: center; font-weight: 600; }
/* ---------- Cardio sheet ---------- */
.cd-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; align-items: end; }
.cd-unit .seg { margin: 0; }
.cd-time { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cd-time label { position: relative; display: block; } .cd-time small { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.cd-time .input { padding-right: 38px; }
.cd-pace { min-height: 18px; margin: 2px 0 8px; }
.cd-diff { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.cd-diff button { min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; padding: 0; cursor: pointer; }
.cd-diff button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cd-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 4px; }
.cd-dl { font-weight: 600; color: var(--accent-text); margin-left: 6px; }
.cd-more { margin-top: 10px; } .cd-more summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }

/* ---------- Timeline pulse: the active marker and the current progress segment breathe in the theme color (no layout shift) ---------- */
.tl-item.now::after { content: ""; position: absolute; left: -16px; top: -6px; width: 2px; height: 18px; background: var(--accent); border-radius: 2px; }
.prep-prog .fill { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .tl-item.now::before { animation: tl-pulse 2.6s ease-in-out infinite; }
  .tl-item.now::after { animation: tl-seg 2.6s ease-in-out infinite; }
  .prep-prog .fill { animation: tl-bar 2.6s ease-in-out infinite; }
}
@keyframes tl-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 12px 3px color-mix(in srgb, var(--accent) 45%, transparent); } }
@keyframes tl-seg { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes tl-bar { 0%, 100% { box-shadow: 0 0 0 0 transparent; filter: none; } 50% { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 40%, transparent); filter: brightness(1.12); } }
.pp-row .inline { gap: 8px; flex-wrap: wrap; } .pp-row .seg { flex: 0 0 auto; min-width: 150px; } .pp-row [data-ppn] { flex: 1; min-width: 120px; }

/* ---------- Physical badge pins (Athlete → Badges, reveals, previews) ---------- */
.t0 { --m1: #c8d0da; --m2: #7d8896; --m3: #3c4550; }
.t1 { --m1: #f0b27a; --m2: #a0582a; --m3: #5e2f12; }
.t2 { --m1: #ffffff; --m2: #b9c2cc; --m3: #5f6a76; }
.t3 { --m1: #fff1b0; --m2: #e2b13c; --m3: #8a5a10; }
.t4 { --m1: #f2feff; --m2: #8fe3f5; --m3: #2f7f9e; }
.t5 { --m1: #ffffff; --m2: #d9d4ee; --m3: #7c6fa6; }
.pin-stage { position: relative; width: min(64vw, 270px, calc(34dvh * (var(--ar)))); aspect-ratio: var(--ar); margin: 0 auto; perspective: 1200px; contain: layout; }
.pin { position: absolute; inset: 0; }
.pin-rot { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .pin .pin-rot { animation: pin-spin 11s cubic-bezier(.45, 0, .55, 1) infinite; animation-play-state: paused; }
  .pin.go .pin-rot { animation-play-state: running; }
}
/* Front faces you ~3 s, turns slowly to the flat back, a short hold, then returns. */
@keyframes pin-spin { 0%, 30% { transform: rotateY(0deg); } 62%, 70% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.pin.flipped .pin-rot { transform: rotateY(180deg); animation: none; }
.pin-face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pin-front { transform: translateZ(3px); } .pin-back { transform: rotateY(180deg) translateZ(3px); }
.pin-face img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.pin-edge { position: absolute; inset: 0; background: linear-gradient(90deg, var(--m3), var(--m1) 50%, var(--m3)); }
.pin-edge.e1 { transform: translateZ(-2px); } .pin-edge.e2 { transform: translateZ(0); } .pin-edge.e3 { transform: translateZ(2px); }
.k-ill .pin-edge, .k-ill .pin-front, .k-ill .pin-back { border-radius: 9%; }
.k-ill .pin-front { overflow: hidden; background: #0b1018; }
.k-ill .pin-front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--m2), inset 0 0 0 5px rgba(0, 0, 0, .45); pointer-events: none; }
.k-kit .pin-edge, .k-kit .pin-back { border-radius: 50%; }
.k-emblem .pin-edge { -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
.pin-back:not(:has(img)) { background: radial-gradient(circle at 35% 30%, var(--m1), var(--m2) 48%, var(--m3)); box-shadow: inset 0 0 0 4px var(--m3), inset 0 0 0 9px rgba(255, 255, 255, .18); }
.pin-mark { font-family: Anton, Impact, sans-serif; letter-spacing: .22em; font-size: 15px; color: var(--m3); opacity: .75; }
.pin.locked .pin-front img { filter: grayscale(.85) brightness(.6); }

dialog.pv { margin: auto; inset: 0; padding: 0; width: min(560px, calc(100% - 16px)); height: min(820px, calc(100dvh - 16px)); max-height: none; border: 1px solid #36506f; border-radius: 18px; background: #0c1421; color: #f1f6ff; overflow: hidden; overscroll-behavior: contain; }
dialog.pv[open] { display: flex; flex-direction: column; }
dialog.pv::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px); }
.pv .label { color: #b5c3d6; }
.pv-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px 4px; flex: none; }
.pv-top .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-pos { font-size: 13px; color: #b5c3d6; font-variant-numeric: tabular-nums; }
.pv-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #36506f; background: #142135; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; flex: none; }
.pv-note { margin: 4px 14px 0; padding: 8px 10px; border-radius: 10px; background: #1b2a40; border: 1px dashed #8fb4dd; color: #dfe8f5; flex: none; }
.pv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 14px 8px; }
.pv-stagewrap { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 4px; padding: 12px 0 6px; touch-action: pan-y; user-select: none; }
.pv-stagewrap.single { grid-template-columns: minmax(0, 1fr); } .pv-stagewrap.single .pv-arr { display: none; }
.pv-slot { min-width: 0; overflow: hidden; padding: 8px; }
.pv-arr { width: 40px; height: 56px; border-radius: 12px; border: 1px solid #36506f; background: #142135; color: #fff; font-size: 26px; cursor: pointer; }
.pv-arr:disabled { opacity: .3; cursor: default; }
/* 3D metal pin (pin3d.js): the canvas fills this box; horizontal drag turns the pin, vertical moves scroll the dialog. */
.pv-3d { width: 100%; height: min(300px, 38dvh); min-height: 190px; }
.pv-3d[hidden], .pv-static[hidden] { display: none; }
.pin3d-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; outline: none; }
.pin3d-canvas:active { cursor: grabbing; }
.pv-ctl { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; }
.pv-ctl .btn { min-width: 84px; }
.pv-ctl .btn[aria-pressed="true"] { border-color: #e9c46a; box-shadow: inset 0 0 0 1px #e9c46a; }
.pv-hint { text-align: center; color: #b5c3d6; margin: 2px 0 6px; }
.pin.noart .pin-front { background: radial-gradient(circle at 35% 30%, var(--m1), var(--m2) 48%, var(--m3)); border-radius: 9%; padding: 12%; text-align: center; }
.pin.noart .pin-front .pin-mark { letter-spacing: .08em; overflow-wrap: anywhere; }
.pv-name { margin: 6px 0 6px; font-size: 22px; color: #fff; text-transform: none; letter-spacing: 0; text-align: center; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-bottom: 8px; }
.pv-xp { font-weight: 800; color: #e9c46a; font-size: 14px; }
.pv-desc { color: #dfe8f5; text-align: center; margin: 0 0 10px; }
.pv-why { background: #142135; border: 1px solid #2d4056; border-radius: 10px; padding: 8px 10px; margin: 0 0 10px; color: #dfe8f5; }
.pv-why .sub, .pv .sub { color: #b5c3d6; }
.pv-tiers summary { cursor: pointer; color: #b5c3d6; font-size: 13px; margin-bottom: 8px; }
.pv .bv-tier { grid-template-columns: 14px minmax(0, 1fr); } .pv .bv-ev { color: #e9c46a; }
.pv-act { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #22344c; background: #0c1421; }
.pv-act .pv-sp { flex: 1; }
.pv .btn { background: #20334c; color: #eff6ff; border-color: #6f8aa7; } .pv .btn.primary { background: #e9c46a; color: #1b1405; border-color: #e9c46a; }
.pv-all { position: absolute; inset: 0; background: rgba(4, 8, 14, .7); display: grid; place-items: end center; padding: 8px; }
.pv-all[hidden] { display: none; }
.pv-all-in { width: 100%; max-height: 72%; display: flex; flex-direction: column; background: #101b2c; border: 1px solid #36506f; border-radius: 16px; overflow: hidden; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; padding: 8px 12px 14px; overflow-y: auto; }
.pv-cell { display: grid; gap: 3px; justify-items: center; text-align: center; padding: 6px; border-radius: 12px; border: 1px solid #2d4056; background: #0c1421; color: #f1f6ff; font: inherit; cursor: pointer; min-width: 0; }
.pv-cn { font-size: 12px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; } .pv-cs { font-size: 11px; color: #b5c3d6; }
.pv-th { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 10px; background: #0b1018; box-shadow: inset 0 0 0 2px var(--m2, #6b819e); overflow: hidden; }
.pv-th.k-emblem, .pv-th.k-kit { background: transparent; box-shadow: none; }
.pv-th img { width: 100%; height: 100%; object-fit: contain; }
.pv-th.dim img { filter: grayscale(.85) brightness(.6); }
.bv-chip.pre { border-style: dashed; border-color: #8fb4dd; color: #cfe2f8; }
.bv-chip.tier { background: linear-gradient(135deg, var(--m1), var(--m2)); border-color: var(--m3); color: #15110a; }

/* XP summary */
.xs { padding-top: 8px; border-radius: 14px; transition: box-shadow .4s; }
.xs-h { margin: 2px 0 10px; font-family: Anton, Impact, sans-serif; font-size: 34px; color: #e9c46a; text-transform: uppercase; letter-spacing: .02em; }
.xs-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.xs-list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: #142135; }
.xs-list li .pv-th { width: 40px; height: 40px; }
.xs-list span { flex: 1; min-width: 0; display: grid; } .xs-list small { color: #b5c3d6; } .xs-list em { font-style: normal; font-weight: 800; color: #e9c46a; }
.xs-lv { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; }
.xs-lvn { font-size: 18px; } .xs-num { font-size: 13px; color: #b5c3d6; font-variant-numeric: tabular-nums; }
.xs-bar { height: 14px; border-radius: 999px; background: #1b2a40; overflow: hidden; margin: 6px 0 8px; }
.xs-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #b8862b, #e9c46a, #fff1b0); }
.xs-up { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; margin-bottom: 8px; }
.xs-unl { padding: 4px 12px; border-radius: 999px; background: #e9c46a; color: #1b1405; font-weight: 800; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .xs.glow { animation: xs-glow 1s ease-out; }
  .xs-unl { animation: st-in .35s ease; }
}
@keyframes xs-glow { 0% { box-shadow: 0 0 0 0 rgba(233, 196, 106, 0); } 30% { box-shadow: 0 0 0 3px #e9c46a, 0 0 42px 8px rgba(233, 196, 106, .55); } 100% { box-shadow: 0 0 0 0 rgba(233, 196, 106, 0); } }

/* Athlete screen */
.ath-tabs { margin: 0 0 14px; max-width: 360px; }
.ath-tabs a { flex: 1; text-align: center; padding: 8px 6px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.ath-tabs a.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.ath-sum { color: var(--muted); margin: 0 0 4px; }
.pp-line { margin: 6px 0; } .pp-big { font-size: 20px; }
.pp-dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin: 10px 0; } .pp-dl dt { color: var(--muted); } .pp-dl dd { margin: 0; font-weight: 700; text-align: right; }
.ath-recent { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.ath-rb { display: grid; justify-items: center; gap: 4px; width: 78px; flex: none; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.ath-rb small { font-size: 11px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; color: var(--muted); }
.ath-rb .pv-th { width: 64px; height: 64px; }
.bv-pic.k-emblem, .bv-pic.k-kit { background: transparent; aspect-ratio: 1 / 1; max-width: 150px; }
.bv-pic.k-ill { background: #0b1018; border-radius: 12px; padding: 6px; aspect-ratio: 1 / 1; max-width: 150px; box-shadow: inset 0 0 0 2px var(--m2); }
.bv-toast .pv-th { width: 40px; height: 40px; }
.bv-toast .pv-x { width: 30px; height: 30px; font-size: 16px; background: transparent; color: var(--ink); border-color: var(--line); }
.set-inline { margin-top: 8px; } .set-inline summary { cursor: pointer; font-weight: 600; }
.pv-act .btn { white-space: nowrap; padding-left: 12px; padding-right: 12px; } @media (max-width: 360px) { .pv-act { gap: 6px; padding-left: 10px; padding-right: 10px; } .pv-act .btn { font-size: 13px; padding-left: 10px; padding-right: 10px; } }
.ath-lv .st-lv span b { font: inherit; font-weight: 700; color: var(--ink); }

/* Power level, abilities, friends */
.ab-power { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; } .ab-power b { font-family: Anton, Impact, sans-serif; font-size: 44px; line-height: 1; } .ab-power span { color: var(--muted); font-size: 13px; }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 12px; }
.ab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; }
.ab-n { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ab-l { font-size: 12px; font-weight: 700; color: var(--accent-text); }
.ab-bar { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; } .ab-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.ab.zero .ab-n, .ab.zero .ab-l { color: var(--muted); font-weight: 500; }
.pv-ab { text-align: center; color: #b5c3d6; margin: -2px 0 10px; } .pv-ab b { color: #fff; }
.fr-row { display: flex !important; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.fr-av { flex: none; width: 40px; height: 40px; font-size: 14px; } .avatar.cr { background: linear-gradient(135deg, #fff1b0, #e2b13c 55%, #8a5a10); color: #1b1405; }
.fr-main { flex: 1; min-width: 0; display: grid; gap: 2px; } .fr-pins { display: flex; gap: 4px; flex: none; } .fr-pins .pv-th { width: 30px; height: 30px; border-radius: 6px; }
.tag.cr { background: #e9c46a; color: #1b1405; border-color: #e9c46a; }
.fr-act { display: flex; gap: 6px; }
@media (max-width: 360px) { .fr-pins { display: none; } }
.fr-main .item-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .fr-main .tag { flex: none; } .prof-head + .ab-card { margin-top: 14px; }
/* Polished back: a soft light reflection slides across the back while it faces you (synced with the 11 s spin); clipped to the pin's shape. */
.pin-back { overflow: hidden; }
.pin-back::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .0) 38%, rgba(255, 255, 255, .55) 47%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, .55) 53%, transparent 62%);
  background-size: 300% 100%; background-position: 100% 0; mix-blend-mode: screen; }
.k-emblem .pin-back::after { -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .pin .pin-back::after { animation: pin-shine 11s linear infinite; animation-play-state: paused; }
  .pin.go .pin-back::after { animation-play-state: running; }
}
.pin.flipped .pin-back::after { background-position: 50% 0; }
@keyframes pin-shine { 0%, 40% { background-position: 100% 0; } 70% { background-position: 0% 0; } 100% { background-position: 0% 0; } }
.pv-slot .pin-stage { max-width: 100%; }

/* Workouts: split picker */
.sp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.sp-card { position: relative; display: grid; justify-items: start; gap: 2px; text-align: left; padding: 12px; min-height: 104px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; min-width: 0; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.sp-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; background: var(--accent-soft); }
.sp-card.locked { opacity: .55; }
.sp-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--track); color: var(--accent-text); margin-bottom: 4px; }
.sp-ic svg { width: 24px; height: 24px; }
.sp-card.on .sp-ic { background: var(--accent); color: var(--card); }
.sp-n { font-weight: 700; font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; } .sp-s { font-size: 12px; color: var(--muted); }
.sp-sug, .sp-done { position: absolute; top: 10px; right: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; }
.sp-sug { background: var(--accent); color: var(--card); } .sp-done { background: #2e8b57; color: #fff; position: static; margin-top: 4px; }
.sp-card.cardio .sp-ic { color: #e05a47; }
@media (prefers-reduced-motion: no-preference) {
  .sp-card { animation: sp-in .32s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--k, 0) * 45ms); }
  .sp-card:active { transform: scale(.97); }
  .sp-card.on .sp-ic { animation: sp-pop .3s ease; }
  .today-wo.sp-swap { animation: sp-in .25s ease; }
}
@keyframes sp-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sp-pop { 50% { transform: scale(1.12); } }
/* Diet: day-type choice */
.dc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dc-card { position: relative; display: grid; justify-items: start; gap: 4px; padding: 16px; min-height: 150px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dc-card:hover, .dc-card:focus-visible { border-color: var(--accent); }
.dc-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; margin-bottom: 6px; } .dc-ic svg { width: 28px; height: 28px; }
.dc-t { font-weight: 800; font-size: 18px; } .dc-s { font-size: 13px; color: var(--muted); }
.dc-card .sp-sug { top: 12px; right: 12px; }
@media (prefers-reduced-motion: no-preference) { .dc-card { animation: sp-in .3s ease both; } .dc-card + .dc-card { animation-delay: 60ms; } .dc-card:active { transform: scale(.98); } }
.dt-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; } .dt-row .label { flex: none; margin: 0; } .dt-row .seg { flex: 1; }
.sp-chosen { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.sp-chosen > span:nth-child(2) { flex: 1; display: grid; } .sp-chosen b { font-size: 18px; } .sp-chosen .sp-ic { margin: 0; background: var(--accent); color: var(--card); }
@media (prefers-reduced-motion: no-preference) { .sp-chosen { animation: sp-in .25s ease; } }
.dt-row { justify-content: space-between; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.dt-cur { display: grid; } .dt-cur b { font-size: 17px; } .dt-pick { margin-top: 8px; }
.dt-pick[hidden] { display: none; }
/* Cardio wheels */
.cd-wheels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; margin-top: 4px; }
.cd-wheels .wheel { height: 120px; } .cd-wheels .wheel-b { padding: 4px 0; }
.cd-wheels.dist { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 72px; }
.cd-useg { flex-direction: column; align-self: center; } .cd-useg button { padding: 10px 6px; }
/* Split picker cards: same size and feel as the Diet day choice */
.sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp-card { min-height: 150px; padding: 16px; border-radius: 18px; gap: 4px; }
.sp-card .sp-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); margin-bottom: 6px; } .sp-card .sp-ic svg { width: 28px; height: 28px; }
.sp-card .sp-n { font-size: 17px; font-weight: 800; }
.sp-ms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .sp-ms i { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--track); color: var(--muted); }
.sp-card .sp-sug { top: 12px; right: 12px; }
.sp-card { align-content: start; } .sp-ms i { line-height: 1.5; }

/* ---------- Dashboard: animated, interactive Diet and Workouts cards ---------- */
.dt-chip { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--accent-text); background: var(--accent-soft); border: 0; border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.dt-pop { display: flex; gap: 8px; margin: 8px 0 4px; }
.dt-pop button { flex: 1; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .dt-pop { animation: sp-in .2s ease; } }
.dd-top { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 10px; }
.kc-ring { position: relative; width: 128px; height: 128px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; perspective: 600px; }
.kc-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.kr-bg { fill: none; stroke: var(--track); stroke-width: 10; }
.kr-fg { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); }
.kr-fg.over { stroke: #d9822b; }
.kr-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; backface-visibility: hidden; transition: transform .45s cubic-bezier(.3, .7, .3, 1), opacity .3s; }
.kr-in b { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; } .kr-in small { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kr-alt { transform: rotateY(180deg); opacity: 0; } .kc-ring.flip .kr-in:not(.kr-alt) { transform: rotateY(-180deg); opacity: 0; } .kc-ring.flip .kr-alt { transform: none; opacity: 1; }
.dd-macros { display: grid; gap: 10px; min-width: 0; }
.mac { display: grid; gap: 5px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.mac-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; } .mac-v { position: relative; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv-b { position: absolute; right: 0; top: 0; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; } .mv-a { display: inline-block; transition: opacity .25s, transform .25s; }
.mac.flip .mv-a { opacity: 0; transform: translateY(-6px); } .mac.flip .mv-b { opacity: 1; transform: none; color: var(--ink); font-weight: 700; }
.mac-tr { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; } .mac-tr i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--accent); }
.mac-tr i.over { background: #d9822b; }
.m-c .mac-tr i { filter: saturate(.8) brightness(1.08); } .m-f .mac-tr i { filter: saturate(.7) brightness(.92); }
.dd-meals-h { margin-top: 14px; }
.dd-meals { display: flex; gap: 6px; margin-top: 8px; }
.mpip { flex: 1; display: grid; gap: 4px; text-decoration: none; color: var(--muted); min-width: 0; }
.mpip i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) calc(var(--p) * 100%), var(--track) 0); }
.mpip span { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.mpip.done span { color: var(--accent-text); font-weight: 700; }
.dd-water { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.wbtn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; }
.wdrop svg { width: 16px; height: 16px; fill: #4aa8e0; display: block; }
.wglass { position: relative; width: 22px; height: 30px; border: 2px solid var(--line); border-top: 0; border-radius: 3px 3px 7px 7px; overflow: hidden; flex: none; }
.wglass i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p) * 100%); background: linear-gradient(#7cc8f2, #2f8fd0); transition: height .6s cubic-bezier(.3, .7, .3, 1); }
.wo-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wt { position: relative; display: grid; align-content: start; gap: 4px; min-height: 104px; padding: 12px; border-radius: 16px; border: 0; background: var(--bg); color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; min-width: 0; overflow: hidden; }
.wt b { font-size: 17px; line-height: 1.15; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .wt small { font-size: 12px; color: var(--muted); }
.wt-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--track); color: var(--accent-text); margin-bottom: 2px; }
.wt-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wt-today.done .wt-ic { background: #2e8b57; color: #fff; } .wt-today.todo .wt-ic { background: var(--accent); color: var(--card); }
.wk-dots { display: flex; gap: 4px; height: 34px; align-items: center; margin-bottom: 2px; } .wk-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--track); }
.wk-dots i.on { background: var(--accent); } .wk-dots i.now { box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3px var(--accent); }
.ct-ring { width: 34px; height: 34px; transform: rotate(-90deg); margin-bottom: 2px; } .ct-ring circle { fill: none; stroke: var(--track); stroke-width: 6; }
.ct-ring .fg { stroke: #e05a47; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); }
@media (prefers-reduced-motion: no-preference) {
  .anim .kr-fg { transition: stroke-dashoffset 1s cubic-bezier(.3, .7, .3, 1) .1s; } .anim:not(.in) .kr-fg { stroke-dashoffset: 100; }
  .anim .mac-tr i { transition: width .8s cubic-bezier(.3, .7, .3, 1); transition-delay: calc(.15s + var(--i) * .1s); } .anim:not(.in) .mac-tr i { width: 0; }
  .anim .mpip i { transition: background-size .5s; } .anim .mpip { animation: sp-in .35s ease both; animation-delay: calc(.3s + var(--i) * 60ms); }
  .anim .wt { animation: sp-in .35s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i) * 70ms); }
  .anim .wk-dots i { animation: dot-pop .3s ease both; animation-delay: calc(.25s + var(--j) * 50ms); }
  .anim .ct-ring .fg { transition: stroke-dashoffset 1s cubic-bezier(.3, .7, .3, 1) .3s; } .anim:not(.in) .ct-ring .fg { stroke-dashoffset: 100; }
  .wt-today.todo .wt-ic { animation: wt-pulse 2.4s ease-in-out infinite; }
  .wt:active, .mac:active, .kc-ring:active, .mpip:active { transform: scale(.97); }
  .wt, .mac, .kc-ring, .mpip { transition: transform .15s ease; }
  .wbtn.splash::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #4aa8e0; opacity: .45; animation: splash .5s ease-out forwards; }
  .wglass.slosh i { animation: slosh .6s ease; }
}
@keyframes dot-pop { from { transform: scale(0); } 70% { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes wt-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 6px var(--accent-soft); } }
@keyframes splash { to { transform: scale(18); opacity: 0; } }
@keyframes slosh { 30% { transform: skewY(-6deg); } 60% { transform: skewY(4deg); } }
@media (max-width: 360px) { .dd-top { grid-template-columns: 108px minmax(0, 1fr); } .kc-ring { width: 108px; height: 108px; } .wt { padding: 10px; } .wt b { font-size: 15px; } }
.kr-fg.zero, .ct-ring .fg.zero { display: none; }
.mac { min-height: 44px; align-content: center; }
.dt-chip { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 10px; background: none; }
.dt-chip { position: relative; isolation: isolate; } .dt-chip::after { content: ""; position: absolute; inset: 11px 0; border-radius: 999px; background: var(--accent-soft); z-index: -1; }

/* Workouts page (revamp 10/28): one hero card, a row of small icon actions, compact week, completed list */
.tw-hero { margin-top: 14px; padding: 18px; border-radius: 22px; background: linear-gradient(160deg, var(--accent-soft), var(--card) 60%); border: 1px solid var(--line); }
.tw-top { display: flex; align-items: center; gap: 14px; }
.tw-top .sp-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--accent); color: var(--card); flex: none; margin: 0; }
.tw-top .sp-ic svg { width: 32px; height: 32px; }
.tw-tt { flex: 1; min-width: 0; display: grid; gap: 2px; } .tw-tt .label { margin: 0; }
.tw-title { font-size: 26px; line-height: 1.1; overflow-wrap: anywhere; }
.tw-chg { flex: none; align-self: start; }
.tw-ms { margin: 12px 0 2px; }
.tw-hero .start-btn { margin-top: 14px; min-height: 52px; font-size: 17px; border-radius: 14px; }
.tw-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.tq { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; min-height: 64px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; min-width: 0; }
.tq svg { width: 22px; height: 22px; color: var(--accent-text); } .tq span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq.on { border-color: var(--accent); background: var(--accent-soft); }
#addCardio.tq svg { color: #e05a47; }
.tw-links { display: flex; justify-content: center; gap: 10px; margin: 22px 0 6px; font-size: 14px; color: var(--muted); } .tw-links a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.big-in { font-size: 28px; text-align: center; font-weight: 800; }
@media (prefers-reduced-motion: no-preference) { .tw-hero { animation: sp-in .3s ease both; } .tq { animation: sp-in .3s ease both; } .tq:nth-child(2) { animation-delay: 40ms; } .tq:nth-child(3) { animation-delay: 80ms; } .tq:nth-child(4) { animation-delay: 120ms; } .tq:nth-child(5) { animation-delay: 160ms; } .tq:active { transform: scale(.95); } }
.tw-sug { color: var(--accent-text); }
.tw-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cd-wheels.one { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 12px; }
.cd-wheels.one .wheel { height: 120px; } .cd-wheels.one .wheel-i.on { font-size: 21px; }
.cd-wcol { display: grid; gap: 8px; min-width: 0; } .cd-wcol .cd-useg { flex-direction: row; }
.hdr-btns { display: inline-flex; gap: 6px; }

/* Session · add exercise by muscle group (artwork supplied by the user: icons/muscles/*.webp) */
.add-panel { margin-top: 4px; }
.mg-hint { font-size: 14px; color: var(--muted); margin: 2px 0 0; }
.mg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mg-card { --mg: var(--accent); position: relative; display: block; padding: 0; aspect-ratio: 342 / 300; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: var(--art-bg); color: #fff; font: inherit; cursor: pointer; isolation: isolate; transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease; -webkit-tap-highlight-color: transparent; }
.mg-art { position: absolute; inset: 0 0 auto 0; width: 100%; height: 86%; object-fit: cover; object-position: center top; z-index: -1; }
.mg-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 52%, rgba(10,16,14,.92) 82%); z-index: -1; }
.mg-l { position: absolute; left: 10px; bottom: 8px; font-weight: 800; font-size: 15px; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.mg-chev { position: absolute; right: 12px; bottom: 14px; width: 8px; height: 8px; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); opacity: .85; }
.mg-card:active { transform: scale(.96); }
.mg-card.on { border-color: var(--mg); box-shadow: 0 0 0 2px var(--mg) inset, 0 0 18px -4px var(--mg); }
.mg-card.on .mg-chev { transform: rotate(135deg); }
.mg-body { margin-top: 10px; animation: mgIn .2s ease; }
.mg-sub { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 10px 2px 4px; }
.mg-list { display: grid; gap: 6px; }
.mg-ex { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mg-ex .mg-plus { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--mg, var(--accent)) 18%, transparent); color: var(--mg, var(--accent-text)); font-weight: 700; flex: none; }
.mg-ex.have { opacity: .7; }
.mg-type { position: relative; display: flex; gap: 8px; margin-top: 12px; }
.mg-type .input { flex: 1; min-width: 0; padding-left: 40px; }
.mg-search { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.mg-search svg { width: 20px; height: 20px; }
@keyframes mgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .mg-card.on .mg-art { animation: mgGlow 2.4s ease-in-out infinite; } }
@keyframes mgGlow { 0%, 100% { filter: none; } 50% { filter: brightness(1.15) saturate(1.15); } }
@media (prefers-reduced-motion: reduce) { .mg-body { animation: none; } .mg-card { transition: none; } }
.mg-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .mg-head strong { white-space: nowrap; }

/* ---------- Show page: live countdown, rolled-up details, animated timeline ---------- */
.cdx { display: block; width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cdx-tiles { display: flex; align-items: flex-start; gap: 4px; }
.cdx-t { display: grid; justify-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
.cdx-n { position: relative; display: block; width: 100%; height: 58px; overflow: hidden; border-radius: 14px; background: var(--track); font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 58px; text-align: center; }
.cdx-n[data-u=days], .cdx-n[data-u=weeks], .cdx-n[data-u=hours] { background: var(--accent); color: var(--accent-ink, var(--card)); }
.cdx-v { position: absolute; inset: 0; transition: transform .36s cubic-bezier(.2,.8,.2,1), opacity .36s ease; }
.cdx-v.in { transform: translateY(-100%); opacity: 0; }
.cdx-v.out { transform: translateY(100%); opacity: 0; }
.cdx-n .cdx-v:not(.out):not(.in) { transform: none; opacity: 1; }
.cdx-u { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cdx-sep { font-size: 26px; font-weight: 800; line-height: 58px; color: var(--muted); }
.cdx-hint { font-size: 12px; color: var(--muted); margin: 10px 0 6px; }
.cdx.bump .cdx-tiles { animation: cdx-bump .3s ease; }
@keyframes cdx-bump { 0% { transform: scale(.97); } 100% { transform: none; } }
.roll { padding-top: 6px; padding-bottom: 6px; margin-top: 14px; }
.roll > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; }
.roll > summary::-webkit-details-marker { display: none; }
.roll-t { font-weight: 700; }
.roll-s { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.roll-ch { width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; flex: none; }
.roll[open] .roll-ch { transform: rotate(225deg) translateY(-3px); }
.roll[open] > .grid2 { animation: roll-in .22s ease; padding-bottom: 8px; }
@keyframes roll-in { from { opacity: 0; } to { opacity: 1; } }
.tl-ck-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.tl-ck-ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 800; }
.tl-x .tl-fill { position: absolute; left: 6px; top: 6px; width: 2px; height: 0; background: var(--accent); border-radius: 2px; z-index: 0; }
.tl-x.go .tl-fill { height: var(--fill, 0); transition: height 1.1s cubic-bezier(.3,.7,.2,1) .15s; }
.tl-x.still .tl-fill { transition: none; }
.tl-x .tl-item { display: block; width: 100%; text-align: left; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.tl-x .tl-item::before { z-index: 1; }
.tl-x .tl-item .tl-ck { position: absolute; left: -21px; top: 12px; width: 16px; height: 16px; display: grid; place-items: center; font-size: 10px; font-weight: 900; color: var(--accent-ink, var(--card)); z-index: 2; }
.tl-x .tl-item.past::before { width: 16px; height: 16px; left: -23px; top: 10px; border: 0; }
.tl-x .tl-item.past .tl-ck { left: -23px; top: 10px; }
.tl-x .tl-wk .tl-name { font-size: 15px; }
.tl-x .tl-peak .tl-name, .tl-x .tl-show .tl-name { font-size: 17px; }
.tl-x .tl-show::before { width: 14px; height: 14px; left: -22px; top: 11px; border-radius: 4px; transform: rotate(45deg); }
.tl-more { display: none; font-size: 13px; color: var(--accent-text); margin-top: 6px; }
.tl-item.open .tl-more { display: block; }
.tl-item.open { background: var(--accent-soft); box-shadow: -10px 0 0 var(--accent-soft), 10px 0 0 var(--accent-soft); }
.tl-here { position: relative; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--accent-text); padding: 2px 0 12px; }
.tl-here-dot { position: absolute; left: -19px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .tl-x.go .tl-item, .tl-x.go .tl-here { animation: tl-in .45s ease both; animation-delay: calc(var(--i, 0) * 60ms); }
  .tl-here-dot { animation: tl-here 1.6s ease-in-out infinite; }
}
@keyframes tl-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tl-here { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .cdx-v { transition: none; } .cdx.bump .cdx-tiles { animation: none; } .roll-ch { transition: none; } }
.cdx-tiles.n5 .cdx-n { font-size: 26px; height: 50px; line-height: 50px; } .cdx-tiles.n5 .cdx-sep { line-height: 50px; font-size: 20px; } .cdx-tiles.n5 { gap: 2px; }

/* ---------- Workouts page · layout from Josh's mockup (dark hero with muscle art, stat tiles, muscle strip) ---------- */
.wh.tw-hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 85% 10%, var(--hero-a) 0%, var(--hero-b) 55%, var(--hero-c) 100%); border: 1px solid rgba(255,255,255,.08); color: var(--hero-ink); padding: 20px 18px 18px; }
.wh .wh-art { position: absolute; right: -28px; top: -10px; width: 64%; max-width: 280px; z-index: -1; opacity: .55; -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 95%); mask-image: linear-gradient(to left, #000 35%, transparent 95%); filter: saturate(1.1); }
.wh .wh-ic { background: color-mix(in srgb, var(--accent) 80%, #fff 0%); color: var(--hi-ink); }
.wh .wh-lab { color: var(--hi-text); letter-spacing: .18em; font-size: 12px; }
.wh .tw-title { color: #fff; font-size: 30px; }
.wh .tw-sug { color: var(--hi-text); }
.wh .wh-sub { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: rgba(242,246,244,.8); font-size: 15px; }
.wh .wh-sub .link { color: var(--hi-text); }
.wh .wh-go { margin-left: auto; width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 22px; text-decoration: none; }
.wh .sp-ms i { background: rgba(255,255,255,.1); color: var(--hero-ink); }
.wh .tw-chg { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.18); }
.wh-prog { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 14px; color: rgba(242,246,244,.8); }
.wh-track { flex: 1; height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.wh-track i { display: block; height: 100%; border-radius: 99px; background: var(--hi); box-shadow: 0 0 10px rgba(var(--glow-rgb),.6); transition: width .8s cubic-bezier(.3,.7,.2,1); }
.wh .wh-btn { display: grid; justify-items: center; gap: 2px; min-height: 64px; margin-top: 16px; border-radius: 18px; padding: 10px 14px; }
.wh .wh-btn.primary { background: linear-gradient(180deg, var(--hi), var(--hi-2)); color: var(--hi-ink); border: 0; box-shadow: 0 0 24px -6px rgba(var(--glow-rgb),.8), inset 0 1px 0 rgba(255,255,255,.5); }
.wh .wh-btn:not(.primary) { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.16); }
.wh-b1 { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; }
.wh-b1 svg { width: 22px; height: 22px; }
.wh-b2 { font-size: 13px; font-weight: 600; opacity: .8; }
/* stat tiles */
.wq.tw-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wq .tq { position: relative; display: grid; align-content: start; justify-items: start; gap: 4px; padding: 12px 10px 10px; min-height: 112px; border-radius: 18px; text-align: left; overflow: hidden; }
.wq .tq span { white-space: normal; }
.wq-top { display: flex; align-items: center; gap: 6px; width: 100%; }
.wq .wq-top svg { width: 20px; height: 20px; flex: none; }
.wq-k { font-size: 12px; color: var(--muted); }
.wq-chev { margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); }
.wq-v { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wq-s { font-size: 11px; color: var(--muted); line-height: 1.25; }
.wq-hint { font-size: 12px; color: var(--muted); }
.wq-bars { display: flex; align-items: flex-end; gap: 2px; height: 28px; width: 100%; margin-top: auto; }
.wq-bars i { flex: 1; min-width: 0; border-radius: 2px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.wq-bars i.now { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.wq-cardio svg { color: #ef5a4a !important; }
.wq-cardio .wq-ekg { width: 60px; height: 16px; margin-top: auto; }
.wq-cardio.on { border-color: color-mix(in srgb, #ef5a4a 70%, transparent); background: color-mix(in srgb, #ef5a4a 10%, var(--card)); box-shadow: 0 0 16px -8px #ef5a4a; }
.wq-st { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; }
.wq-st i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--card); font-style: normal; font-size: 11px; }
.wq-sync.err .wq-st { color: var(--warn, #c77700); }
/* sections */
.wsec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wsec-a { font-size: 14px; font-weight: 700; color: var(--accent-text); text-decoration: none; }
.wc-list { gap: 8px; }
.wc-row { display: flex !important; align-items: center; gap: 12px; text-decoration: none; color: inherit; border-radius: 16px; }
.wc-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.wc-ic svg { width: 26px; height: 26px; }
.wc-ic.str { background: var(--accent-soft); color: var(--accent-text); }
.wc-ic.car { background: color-mix(in srgb, #ef5a4a 14%, transparent); color: #ef5a4a; }
.wc-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
/* today's plan */
.wp { padding: 14px; }
.wp-head { display: flex; align-items: center; gap: 12px; }
.wh-ic.sm { width: 44px; height: 44px; border-radius: 13px; margin: 0; background: var(--accent-soft); color: var(--accent-text); }
.wh-ic.sm svg { width: 26px; height: 26px; }
.wp-tt { flex: 1; min-width: 0; display: grid; } .wp-tt b { font-size: 18px; }
.wp-pr { width: 84px; display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.wp-pr .wh-track { background: var(--track); height: 7px; } .wp-pr .wh-track i { background: var(--accent); box-shadow: none; }
.wp-tiles { display: flex; gap: 8px; overflow-x: auto; margin: 14px -14px 0; padding: 2px 14px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.wp-tiles::-webkit-scrollbar { display: none; }
.wp-tile { --mg: var(--accent); position: relative; flex: none; width: 92px; height: 132px; padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: var(--art-bg); color: #fff; font: inherit; scroll-snap-align: start; cursor: pointer; isolation: isolate; transition: transform .16s ease; }
.wp-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; z-index: -1; filter: grayscale(1) brightness(.55); transition: filter .3s ease; }
.wp-tile img.flip { transform: scaleX(-1); }
.wp-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(8,12,10,.9)); z-index: -1; }
.wp-tile.on img { filter: none; }
.wp-tile.on { border-color: color-mix(in srgb, var(--mg) 45%, transparent); }
.wp-tile.done { border: 2px solid var(--hi); box-shadow: 0 0 14px -2px rgba(var(--glow-rgb),.7); }
.wp-tile:not(.on) .wp-l { color: rgba(255,255,255,.65); }
.wp-l { position: absolute; left: 8px; bottom: 8px; font-size: 13px; font-weight: 700; }
.wp-ck { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--hi); color: var(--hi-ink); display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.wp-chev { position: absolute; right: 9px; bottom: 12px; width: 6px; height: 6px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: .8; }
.wp-tile:active { transform: scale(.96); }
.wp-week { margin-top: 12px; gap: 4px; }
.wp-week .wk-day { padding: 6px 2px; }
/* links */
.wl-grid.tw-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; }
.wl { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; min-height: 64px; }
.wl-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.wl-ic svg { width: 22px; height: 22px; }
.wl-tx { flex: 1; min-width: 0; display: grid; } .wl-tx b { font-size: 14px; } .wl-tx span { font-size: 12px; color: var(--muted); }
.wl-chev { width: 7px; height: 7px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .wp-tile.on { animation: wpIn .4s ease both; animation-delay: calc(var(--k, 0) * 50ms); }
  .wh .wh-btn.primary { animation: whGlow 2.8s ease-in-out infinite; }
}
@keyframes wpIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes whGlow { 0%, 100% { box-shadow: 0 0 20px -8px rgba(var(--glow-rgb),.7), inset 0 1px 0 rgba(255,255,255,.5); } 50% { box-shadow: 0 0 28px -4px rgba(var(--glow-rgb),.9), inset 0 1px 0 rgba(255,255,255,.5); } }
@media (prefers-reduced-motion: reduce) { .wh-track i, .wp-tile img { transition: none; } }
.wh .wh-ic { background: linear-gradient(180deg, var(--hi), var(--hi-2)); color: var(--hi-ink); }
.wh .wh-art { opacity: .7; }
.wp-l { font-size: 12px; }
.wl { padding: 10px; gap: 8px; } .wl-ic { width: 34px; height: 34px; } .wl-ic svg { width: 19px; height: 19px; }
.wl-tx b { font-size: 13px; line-height: 1.2; } .wl-tx span { font-size: 11px; line-height: 1.25; }

/* ---------- Dashboard · layout from Josh's mockup ---------- */
.brand { flex-direction: column; align-items: flex-start; gap: 0; }
.brand-tag { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--muted); text-transform: none; font-family: inherit; }
.dh-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 4px 0 12px; }
.dh-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.dh-day { display: grid; justify-items: center; gap: 1px; padding: 4px 0 2px; border-radius: 99px; text-decoration: none; color: var(--ink); min-height: 52px; }
.dh-day .dh-wd { font-size: 11px; color: var(--muted); }
.dh-day b { font-size: 15px; font-variant-numeric: tabular-nums; }
.dh-day i { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.dh-day i.on { background: var(--accent); }
.dh-day.fut b { color: var(--muted); font-weight: 600; }
.dh-day.now { border: 2px solid var(--accent); box-shadow: 0 0 12px -3px var(--accent); margin: 0 1px; }
.dh-plan { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; text-align: left; min-height: 52px; }
.dh-plan-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.dh-plan-ic svg, .dh-st-ic svg, .dh-li, .dh-th svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dh-plan-ic svg { width: 18px; height: 18px; }
.dh-plan-tx { display: grid; line-height: 1.2; } .dh-plan-tx b { font-size: 13px; } .dh-plan-tx span { font-size: 12px; color: var(--muted); }
.dh-lab { display: inline-flex; align-items: center; gap: 6px; }
.dh-li { width: 18px; height: 18px; color: var(--accent-text); }
/* show hero */
.dh-show { position: relative; overflow: hidden; isolation: isolate; }
.dh-show.art { background: radial-gradient(120% 100% at 75% 0%, var(--hero-a) 0%, var(--hero-b) 60%); color: var(--hero-ink); border-color: rgba(255,255,255,.08); }
.dh-show.art .label, .dh-show.art .sub, .dh-show.art .unit, .dh-show.art .chev { color: rgba(242,246,244,.78); }
.dh-show.art .title, .dh-show.art .big { color: #fff; }
.dh-art { position: absolute; right: -10px; top: 0; height: 74%; max-width: 78%; object-fit: cover; object-position: left top; z-index: -1; -webkit-mask-image: linear-gradient(to left, #000 50%, transparent), linear-gradient(to top, transparent, #000 35%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 50%, transparent); opacity: .9; }
.dh-show.art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 40%, var(--hero-b) 78%); }
.dh-show.art .track { background: rgba(255,255,255,.12); } .dh-show.art .prog-ends, .dh-show.art .bar-top { color: rgba(242,246,244,.75); }
.dh-phase { position: absolute; right: 14px; top: 46px; display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: rgba(12,18,16,.72); border: 1px solid rgba(255,255,255,.12); color: var(--hero-ink); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 12px; }
.dh-show:not(.art):not(.flyer) .dh-phase { background: var(--bg); color: var(--ink); border-color: var(--line); }
.dh-phase b { font-size: 13px; } .dh-phase small { opacity: .75; }
.dh-stats { display: grid; gap: 0; margin: 14px -4px 0; padding: 10px 4px; border-radius: 16px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); }
.dh-show:not(.art):not(.flyer) .dh-stats { background: var(--bg); border-color: var(--line); }
.dh-stats.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dh-stats.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dh-st { display: grid; justify-items: center; gap: 2px; padding: 2px 4px; text-align: center; text-decoration: none; color: inherit; min-width: 0; border-left: 1px solid rgba(255,255,255,.1); }
.dh-st:first-child { border-left: 0; }
.dh-st-ic { width: 22px; height: 22px; color: var(--hi); } .dh-st-ic svg { width: 22px; height: 22px; }
.dh-show:not(.art):not(.flyer) .dh-st-ic { color: var(--accent-text); }
.dh-st b { font-size: 16px; font-variant-numeric: tabular-nums; } .dh-st small { font-size: 11px; opacity: .8; }
.dh-st em { display: block; font-style: normal; font-size: 10.5px; opacity: .75; line-height: 1.2; }
/* diet */
.dh-mealsum { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 8px; font-size: 13px; color: var(--accent-text); }
.dh-mbar { width: 64px; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; } .dh-mbar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.dh-diet .card-head { display: flex; align-items: center; }
.kr-seg { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: var(--len) 100; stroke-dashoffset: var(--off); }
.kr-seg.s-p { stroke: var(--hi); } .kr-seg.s-c { stroke: #f2d27a; } .kr-seg.s-f { stroke: #f07a8a; }
.kr-fl svg { width: 18px; height: 18px; fill: #f2a24a; display: block; margin: 0 auto 2px; }
.kr-g { display: block; }
.dh-diet .mac { grid-template-columns: 22px minmax(0, 1fr) 38px; align-items: center; gap: 8px; }
.mac-ic svg { width: 20px; height: 20px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.m-p .mac-ic { color: var(--hi); } .m-p .mac-ic svg { stroke: currentColor; } .m-c .mac-ic svg { stroke: #e8c25a; } .m-f .mac-ic svg { stroke: #f07a8a; }
.mac-body { display: grid; gap: 5px; min-width: 0; }
.mac-pct { font-size: 13px; font-weight: 700; color: var(--accent-text); text-align: right; font-variant-numeric: tabular-nums; }
.m-c .mac-tr i { background: #e8c25a; } .m-f .mac-tr i { background: #f07a8a; }
.dh-meals { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin-top: 14px; }
.dh-meal { position: relative; display: grid; align-content: start; gap: 2px; padding: 9px 9px 10px; min-height: 58px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); text-decoration: none; overflow: hidden; }
.dh-meal i { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p) * 100%); border-radius: 0; background: var(--accent); }
.dh-meal .dm-n { font-size: 13px; font-weight: 700; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.dh-meal .dm-k { font-size: 11.5px; color: var(--muted); text-align: left; }
.dh-meal .dm-ck { position: absolute; right: 7px; top: 7px; font-size: 11px; color: var(--accent-text); font-weight: 900; }
.dh-meal.done { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.dh-meal.add { place-content: center; justify-items: center; border-style: dashed; color: var(--accent-text); }
.dh-meal.add .dm-n { color: var(--accent-text); font-size: 12px; }
.dm-plus { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--card); font-weight: 800; }
/* workout */
.dh-wo .card-head { display: flex; align-items: center; }
.dh-wplan { margin-left: auto; margin-right: 8px; font-size: 13px; color: var(--muted); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-wbody { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 8px; }
.dh-wart { --mg: #ff4b3a; position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--mg) 35%, transparent); background: var(--art-bg); box-shadow: 0 0 18px -8px var(--mg); }
.dh-wart img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.dh-wart.done img { filter: saturate(.6) brightness(.7); }
.dh-wck { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--hi); color: var(--hi-ink); font-weight: 900; }
.dh-wtx { display: grid; min-width: 0; } .dh-wt { font-size: 18px; line-height: 1.2; }
.dh-wbtns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.dh-wbtns .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 12px; font-size: 14px; }
.dh-wbtns svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dh-wbtns .dh-go svg { fill: currentColor; stroke: none; }
.dh-go { flex: 1 1 auto; justify-content: center; }
.dh-wfoot { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.dh-wfoot .wt-week { min-height: 0; padding: 0; background: none; display: grid; gap: 0; flex: none; text-decoration: none; }
.dh-wfoot .wk-dots { height: 14px; margin: 0; } .dh-wfoot .wt-week b { font-size: 14px; } .dh-wfoot .wt-week small { font-size: 11px; }
.dh-wline2 { flex: 1; min-width: 0; margin: 0; }
/* tiles */
.dh-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.dh-tile { position: relative; display: grid; align-content: start; justify-items: start; gap: 2px; min-height: 132px; padding: 10px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.dh-th { display: flex; align-items: center; gap: 5px; width: 100%; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dh-th svg { width: 18px; height: 18px; flex: none; }
.dh-tchev { margin-left: auto; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); }
.dh-tile b { font-size: 21px; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; } .dh-tile small { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.dh-tnil { margin-top: auto; font-size: 11px; color: var(--muted); line-height: 1.25; }
.t-cardio .dh-th svg { color: #ef5a4a; } .t-cardio.on { border-color: color-mix(in srgb, #ef5a4a 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, #ef5a4a 16%, var(--card)), var(--card) 70%); }
.t-steps .dh-th svg { color: var(--accent-text); } .t-steps.on { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: linear-gradient(160deg, var(--accent-soft), var(--card) 70%); }
.t-sleep .dh-th svg { color: #9b7bff; } .t-sleep.on { border-color: color-mix(in srgb, #9b7bff 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, #9b7bff 18%, var(--card)), var(--card) 70%); }
.dh-spark { width: 100%; height: 30px; margin-top: auto; overflow: visible; }
.dh-spark polyline { fill: none; stroke: #ef5a4a; stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dh-spark circle { fill: var(--card); stroke: #ef5a4a; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dh-bars, .dh-sbar { display: flex; align-items: flex-end; gap: 2px; width: 100%; height: 34px; margin-top: auto; }
.dh-bars i { flex: 1; height: var(--h); border-radius: 2px; background: color-mix(in srgb, var(--accent) 50%, transparent); transform-origin: bottom; }
.dh-bars i.hit { background: color-mix(in srgb, var(--accent) 80%, transparent); } .dh-bars i.now { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.dh-sbar i { flex: 1; height: var(--h); border-radius: 3px; background: color-mix(in srgb, #9b7bff 45%, transparent); transform-origin: bottom; } .dh-sbar i.now { background: #9b7bff; box-shadow: 0 0 6px #9b7bff; }
.dh-sw { display: flex; gap: 12px; justify-content: center; }
/* check-in */
.dh-ckrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: center; margin-top: 6px; }
.dh-ckl { padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); }
.dh-wline { width: 100%; height: 60px; display: block; }
.dh-wline line { stroke: var(--line); stroke-width: 1; } .dh-wline polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.dh-wline circle { fill: var(--card); stroke: var(--accent); stroke-width: 2.5; }
.dh-next { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); text-decoration: none; color: var(--ink); }
.dh-next .dh-st-ic { color: var(--accent-text); width: 24px; height: 24px; } .dh-next .dh-st-ic svg { width: 24px; height: 24px; }
.dh-next-tx { flex: 1; display: grid; line-height: 1.25; } .dh-next-tx small { font-size: 12px; color: var(--muted); } .dh-next-tx b { font-size: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .anim .dh-bars i, .anim .dh-sbar i { animation: dhGrow .5s cubic-bezier(.3,.7,.2,1) both; animation-delay: calc(var(--k, 0) * 30ms); }
  .anim .kr-seg { transition: stroke-dasharray 1s cubic-bezier(.3,.7,.3,1) .1s; } .anim:not(.in) .kr-seg { stroke-dasharray: 0 100; }
  .dh-show.art .dh-art { animation: dhDrift 14s ease-in-out infinite alternate; }
  .dh-tile:active, .dh-plan:active, .dh-day:active, .dh-meal:active { transform: scale(.97); }
  .dh-tile, .dh-plan, .dh-day, .dh-meal { transition: transform .15s ease; }
  .dh-day.now { animation: dhRing 2.6s ease-in-out infinite; }
}
@keyframes dhGrow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes dhDrift { from { transform: translateX(0) scale(1); } to { transform: translateX(-8px) scale(1.04); } }
@keyframes dhRing { 0%, 100% { box-shadow: 0 0 8px -3px var(--accent); } 50% { box-shadow: 0 0 16px -2px var(--accent); } }
@media (max-width: 360px) { .dh-tile b { font-size: 18px; } .dh-stats.n4 .dh-st b { font-size: 14px; } }
.dh-wfoot .wt-week { padding-left: 4px; overflow: visible; } .dh-wfoot .wk-dots { gap: 5px; } .dh-wfoot .wk-dots i { width: 7px; height: 7px; } .dh-wfoot .wk-dots i.now { box-shadow: 0 0 0 2px var(--accent); }
.dh-wfoot .wt-week small { white-space: nowrap; }
.dh-meal { isolation: isolate; min-height: 62px; }
.dh-meal .dm-img { position: absolute; right: 0; top: 0; height: 100%; width: 58%; object-fit: cover; z-index: -1; -webkit-mask-image: linear-gradient(to right, transparent, #000 55%); mask-image: linear-gradient(to right, transparent, #000 55%); opacity: .9; }
.dh-meal.done .dm-img { opacity: .55; }
.dh-meals { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.dh-meal .dm-ck { left: auto; right: 6px; top: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--card); font-size: 10px; }
.dh-meal .dm-ck:empty { display: none; }
.dh-meal .dm-n, .dh-meal .dm-k { text-shadow: 0 1px 3px var(--bg); }
.dh-tile { isolation: isolate; }
.dh-tart { position: absolute; right: -6px; top: 0; height: 78%; width: auto; max-width: 70%; z-index: -1; opacity: .85; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent), linear-gradient(to left, #000 60%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-composite: intersect; pointer-events: none; }
:root[data-theme="light"] .dh-tart { opacity: .35; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .dh-tart { opacity: .35; } }
.dh-wave { position: absolute; left: 0; right: 0; bottom: 30px; width: 100%; height: 40px; z-index: -1; pointer-events: none; }
.t-sleep .dh-sbar { position: relative; }
.dh-wbtns .btn { min-height: 44px; }
@media (prefers-reduced-motion: no-preference) { .dh-wave path:first-of-type { animation: dhWave 6s ease-in-out infinite alternate; } }
@keyframes dhWave { from { transform: translateY(2px); } to { transform: translateY(-3px); } }
.dh-tart { -webkit-mask-image: radial-gradient(ellipse 70% 65% at 62% 35%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 70% 65% at 62% 35%, #000 45%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }

/* ---------- Dashboard · compact sizing to match the mockup proportions ---------- */
.dh-top { margin: 0 0 10px; }
.dh-day { min-height: 44px; padding: 3px 0 2px; } .dh-day .dh-wd { font-size: 10.5px; } .dh-day b { font-size: 14px; }
.dh-plan { min-height: 44px; padding: 6px 8px; gap: 6px; border-radius: 14px; } .dh-plan-ic { width: 28px; height: 28px; }
.dh-plan-tx b { font-size: 12px; } .dh-plan-tx span { font-size: 11px; }
.dh-show, .dh-diet, .dh-wo, .dh-ck { padding: 14px; border-radius: 18px; margin-bottom: 10px; }
.dh-show .card-head, .dh-diet .card-head, .dh-wo .card-head, .dh-ck .card-head { margin-bottom: 6px; }
.dh-show .big { font-size: 46px; } .dh-show .unit { font-size: 14px; }
.dh-show .dh-wk { margin-top: 2px; font-size: 13px; }
.dh-show .prep-prog { margin-top: 8px; max-width: 60%; }
.dh-show .prep-prog .bar-top, .dh-show .prep-prog .prog-ends { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dh-show .prep-prog .track.thin { height: 6px; }
.dh-show.art .prep-prog .fill { background: var(--hi); }
.dh-show .title { font-size: 15px; margin-top: 10px; }
.dh-show .sub { font-size: 12px; margin-top: 2px; }
.dh-art { height: 82%; max-width: 72%; right: 0; }
.dh-phase { top: auto; bottom: 92px; right: 12px; padding: 6px 9px; font-size: 11px; }
.dh-stats { margin: 10px -4px 0; padding: 7px 2px; border-radius: 14px; }
.dh-st { grid-template-columns: auto; padding: 0 3px; gap: 1px; }
.dh-st-ic, .dh-st-ic svg { width: 18px; height: 18px; }
.dh-st b { font-size: 14px; } .dh-st small { font-size: 10px; } .dh-st em { font-size: 9.5px; }
/* diet */
.dh-diet .dd-top { grid-template-columns: 108px minmax(0, 1fr); gap: 12px; margin-top: 4px; }
.dh-diet .kc-ring { width: 108px; height: 108px; }
.dh-diet .kr-in b { font-size: 21px; } .dh-diet .kr-in small { font-size: 10.5px; } .kr-fl svg { width: 14px; height: 14px; }
.dh-diet .dd-macros { gap: 6px; }
.dh-diet .mac { grid-template-columns: 18px minmax(0, 1fr) 34px; gap: 6px; min-height: 30px; }
.dh-diet .mac-top { font-size: 12.5px; } .dh-diet .mac-tr { height: 6px; } .mac-ic svg { width: 16px; height: 16px; } .mac-pct { font-size: 12px; }
.dh-mealsum { font-size: 12px; gap: 6px; } .dh-mbar { width: 52px; }
.dh-meals { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.dh-meal { min-height: 48px; padding: 6px 7px; border-radius: 12px; }
.dh-meal .dm-n { font-size: 11.5px; } .dh-meal .dm-k { font-size: 10.5px; }
.dh-meal .dm-img { width: 62%; }
.dh-meal .dm-ck { width: 14px; height: 14px; font-size: 8px; top: 4px; right: 4px; }
.dh-meal.add { gap: 2px; } .dm-plus { width: 18px; height: 18px; font-size: 13px; } .dh-meal.add .dm-n { font-size: 11px; }
.dh-diet .dd-water { margin-top: 8px; gap: 8px; } .dh-diet .wbtn { min-height: 44px; padding: 6px 12px; font-size: 13px; } .dh-diet .wglass { width: 16px; height: 22px; } .dh-diet .wnum { font-size: 12px; }
/* workout */
.dh-wbody { grid-template-columns: 44% minmax(0, 1fr); gap: 10px; margin-top: 2px; }
.dh-wart { aspect-ratio: 300 / 158; border-radius: 12px; }
.dh-wt { font-size: 15px; } .dh-wtx .sub { font-size: 11.5px; }
.dh-wbtns { flex-wrap: nowrap; gap: 6px; margin-top: 8px; }
.dh-wbtns .btn { min-height: 44px; padding: 6px 9px; font-size: 12.5px; gap: 5px; white-space: nowrap; border-radius: 12px; }
.dh-wbtns .dh-go { flex: 1 1 auto; } .dh-wbtns .dh-vp { flex: none; }
.dh-wbtns svg { width: 13px; height: 13px; }
.dh-wfoot { margin-top: 8px; padding-top: 6px; gap: 8px; }
.dh-wfoot .wt-week { display: flex; align-items: center; gap: 6px; } .dh-wfoot .wt-week b { font-size: 12px; } .dh-wfoot .wt-week small { font-size: 10.5px; }
.dh-wline2 { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* tiles */
.dh-tiles { margin: 0 0 10px; gap: 7px; }
.dh-tile { min-height: 100px; padding: 9px; border-radius: 16px; }
.dh-th { font-size: 10px; } .dh-th svg { width: 15px; height: 15px; }
.dh-tile b { font-size: 18px; margin-top: 2px; } .dh-tile small { font-size: 10.5px; }
.dh-tnil { font-size: 10px; }
.dh-bars, .dh-sbar { height: 26px; } .dh-spark { height: 24px; }
.dh-wave { bottom: 6px; height: 30px; }
.t-sleep:not(.on) .dh-wave { opacity: .5; }
/* check-in */
.dh-ck .ck-st { margin: 4px 0 8px; padding: 8px 10px; font-size: 13px; }
.dh-ckrow { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px; margin-top: 2px; align-items: stretch; }
.dh-ckw { display: grid; align-content: center; }
.dh-ckv b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; } .dh-ckv span { font-size: 14px; color: var(--muted); }
.dh-cks { font-size: 11px; color: var(--muted); }
.dh-ckl { padding: 4px; border-radius: 12px; display: grid; align-items: center; }
.dh-wline { height: 50px; }
.dh-cknil { font-size: 10.5px; color: var(--muted); text-align: center; }
.dh-next { margin-top: 0; padding: 8px; gap: 6px; border-radius: 12px; min-height: 44px; }
.dh-next .dh-st-ic, .dh-next .dh-st-ic svg { width: 18px; height: 18px; }
.dh-next-tx small { font-size: 10px; } .dh-next-tx b { font-size: 13px; }
@media (max-width: 360px) { .dh-ckrow { grid-template-columns: 1fr 1fr; } .dh-next { grid-column: 1 / -1; } .dh-meals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dh-phase { top: 38px; bottom: auto; right: 12px; }
.dh-show .title, .dh-show .sub { padding-right: 0; }
.dh-wbody { grid-template-columns: 38% minmax(0, 1fr); }
.dh-wbtns .btn { padding: 6px 8px; font-size: 12px; }
.dh-diet .dd-macros { gap: 0; } .dh-diet .mac { min-height: 44px; }
.dh-top + .dt-pop { margin: -4px 0 10px auto; }
.dh-top, .dh-week { min-width: 0; } .dh-plan { min-width: 0; max-width: 46vw; } .dh-plan-tx { min-width: 0; overflow: hidden; } .dh-plan-tx b, .dh-plan-tx span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-show { max-width: 100%; }
.dh-wtx { min-width: 0; } .dh-wbtns { flex-wrap: wrap; } .dh-wbtns .dh-go { min-width: 0; }

/* ---------- Dashboard · spec pass (week nav, prep line, workout states, macro foods, insights) ---------- */
.dh-top { grid-template-columns: minmax(0, 1fr) auto; }
.dh-wk-wrap { min-width: 0; }
.dh-wnav { display: grid; grid-template-columns: 22px minmax(0, 1fr) 22px; align-items: center; }
.dh-wbtn { min-height: 44px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 20px; cursor: pointer; }
.dh-wback { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.dh-today { min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 700; cursor: pointer; }
.dh-day i.plan { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.dh-day { transition: border-color .22s ease, box-shadow .22s ease; }
.dh-week.in-r { animation: dhWkR .25s ease; } .dh-week.in-l { animation: dhWkL .25s ease; }
@keyframes dhWkR { from { transform: translateX(14px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes dhWkL { from { transform: translateX(-14px); opacity: .3; } to { transform: none; opacity: 1; } }
.dh-day i.on, .dh-day i.plan { animation: dot-pop .3s ease both; }
.dh-prepl { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: rgba(242,246,244,.82); text-decoration: none; }
.dh-show:not(.art):not(.flyer) .dh-prepl { color: var(--muted); }
.dh-prepl.set { color: #e9c46a; font-weight: 700; min-height: 32px; }
.dh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hi); box-shadow: 0 0 6px var(--hi); }
.dh-show .prep-prog { margin-top: 10px; max-width: none; }
.dh-show .prep-prog .sub.small { font-size: 0; margin: 0; } /* "Add a prep start date" line is replaced by the Set prep start link */
.mac-foods { display: grid; gap: 4px; margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: 12.5px; }
.mac-foods > b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mac-foods span { display: flex; justify-content: space-between; gap: 10px; } .mac-foods i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mac-foods em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.dh-wstate { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.dh-wtx[data-ws=live] .dh-wstate { color: #ef9a4a; } .dh-wtx[data-ws=done] .dh-wstate { color: var(--hi); }
.dh-wprog { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; margin-top: 6px; } .dh-wprog i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.dh-live { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 99px; background: #ef5a4a; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.dh-wart.idle img { filter: saturate(.85) brightness(.85); }
.dh-rest { font-size: 10px; font-weight: 700; color: #b9a6ff; letter-spacing: .04em; }
.dh-next.k-due { border-color: var(--accent); background: var(--accent-soft); } .dh-next.k-overdue { border-color: #c4554d; background: color-mix(in srgb, #c4554d 14%, var(--bg)); } .dh-next.k-done { border-color: color-mix(in srgb, #2e8b57 60%, var(--line)); }
.dh-ckfoot { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.dh-ckfoot a { color: var(--accent-text); text-decoration: none; font-weight: 600; min-height: 24px; }
.dh-ins { padding: 12px 14px; margin-bottom: 10px; }
.dh-ins > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; } .dh-ins > summary::-webkit-details-marker { display: none; }
.dh-ins > summary .sub { flex: 1; text-align: right; }
.dh-ins[open] .roll-ch { transform: rotate(225deg) translateY(-3px); }
.dh-ins-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.dh-in { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.dh-in b { font-size: 17px; font-variant-numeric: tabular-nums; } .dh-in span { font-size: 12px; font-weight: 600; } .dh-in small { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
@media (prefers-reduced-motion: no-preference) {
  .t-cardio:active .dh-th svg { animation: dhBeat .5s ease; }
  .t-sleep .dh-th svg { animation: dhBreath 5s ease-in-out infinite; }
  .dh-meal.done .dm-ck { animation: dot-pop .35s ease both; }
  .wbtn.splash .wdrop svg { animation: dhFill .5s ease; }
}
@keyframes dhBeat { 30% { transform: scale(1.3); } 60% { transform: scale(.95); } }
@keyframes dhBreath { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes dhFill { 40% { transform: scale(1.35); } }
@media (max-width: 360px) { .dh-top { grid-template-columns: 1fr; } .dh-plan { max-width: none; } .dh-ins-g { grid-template-columns: 1fr; } }
.bg-paused .dh-art, .bg-paused .dh-wave path, .bg-paused .t-sleep .dh-th svg, .bg-paused .dh-day.now, .bg-paused .tl-item.now::before { animation-play-state: paused !important; }
.mac-foods[hidden] { display: none; }
/* Workouts page · match the mockup more closely */
.tw-day { display: grid; justify-items: center; gap: 0; }
.wh .wh-art.gen { right: -40px; top: -20px; width: 80%; max-width: 340px; opacity: .55; filter: sepia(.35) hue-rotate(95deg) saturate(1.4) brightness(.9); }
.wh .tw-title { font-size: 28px; }
.wh .wh-btn { min-height: 56px; }
.wc-photo { padding-left: 0 !important; overflow: hidden; }
.wc-img { width: 112px; align-self: stretch; height: auto; min-height: 64px; object-fit: cover; margin: -12px 0 -12px 0; border-radius: 0; -webkit-mask-image: linear-gradient(to right, #000 60%, transparent); mask-image: linear-gradient(to right, #000 60%, transparent); flex: none; }
.wh .wh-art { -webkit-mask-image: radial-gradient(ellipse 75% 85% at 70% 35%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 75% 85% at 70% 35%, #000 40%, transparent 100%); }
.wl-grid.tw-links .wl { padding: 10px; gap: 8px; } .wl-grid .wl-tx b { font-size: 13px; } .wl-grid .wl-tx span { font-size: 11px; }
.wp-tile { width: 84px; height: 118px; }
/* Show card · trophy + prep phase chip, slim bar under the weeks line (mockup) */
.dh-show .prep-prog { max-width: 58%; margin-top: 8px; }
.dh-show .prep-prog .track.thin { height: 7px; }
.dh-show.art .prep-prog .fill, .dh-show.flyer .prep-prog .fill { background: var(--hi); box-shadow: 0 0 8px rgba(var(--glow-rgb),.6); }
.dh-phase { position: absolute; right: 12px; top: 64px; bottom: auto; display: grid; justify-items: center; gap: 2px; padding: 8px 10px 9px; min-width: 92px; border-radius: 14px; background: rgba(10,16,14,.7); border: 1px solid rgba(255,255,255,.14); color: var(--hero-ink); text-decoration: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dh-phase > span { display: grid; justify-items: center; gap: 0; text-align: center; }
.dh-phase b { font-size: 12px; font-weight: 700; } .dh-phase strong { font-size: 18px; line-height: 1.15; font-variant-numeric: tabular-nums; } .dh-phase em { font-style: normal; font-size: 10.5px; opacity: .75; }
.dh-phase.set em { color: #e9c46a; opacity: 1; font-weight: 700; }
.dh-trophy { width: 30px; height: 30px; margin-top: -26px; filter: drop-shadow(0 2px 6px rgba(217,164,65,.55)); }
.dh-show:not(.art):not(.flyer) .dh-phase { background: var(--bg); color: var(--ink); border-color: var(--line); }
.dh-show .title, .dh-show .dh-wk { padding-right: 0; }
@media (prefers-reduced-motion: no-preference) { .dh-trophy { animation: dhShine 6s ease-in-out infinite; } }
@keyframes dhShine { 0%, 100% { filter: drop-shadow(0 2px 6px rgba(217,164,65,.45)); } 50% { filter: drop-shadow(0 2px 12px rgba(255,214,120,.85)); } }
.bg-paused .dh-trophy { animation-play-state: paused; }
/* Diet ring · flame above the calories */
.kc-ring .kr-fl svg { position: static; inset: auto; transform: none; width: 16px; height: 16px; display: block; margin: 0 auto 2px; fill: #f2a24a; }
/* ---------- Dashboard · mockup match pass 2 ---------- */
/* stat strip: icon left of value/label */
.dh-stats { padding: 9px 6px; }
.dh-st { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: left; padding: 0 4px; }
.dh-st > span:last-child { display: grid; line-height: 1.15; min-width: 0; }
.dh-st-ic, .dh-st-ic svg { width: 20px; height: 20px; flex: none; }
.dh-st b { font-size: 15px; white-space: nowrap; } .dh-st em { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-stats.n3 .dh-st em, .dh-stats.n4 .dh-st em { max-width: 100%; }
@media (max-width: 380px) { .dh-stats.n4 .dh-st-ic { display: none; } }
/* meal tiles: one row, photo right, no check bubble */
.dh-meal .dm-ck { display: none; }
.dh-meal.done { border-color: var(--line); }
.dh-meal i { display: none; }
.dh-meals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* water: compact pill under the meals */
.dh-diet .dd-water { justify-content: flex-end; margin-top: 8px; }
.dh-diet .wbtn { min-height: 44px; padding: 4px 12px; border-radius: 99px; font-size: 12.5px; }
/* macros like the mockup: protein mint, carbs gold, fat mint */
.m-f .mac-tr i { background: var(--accent); } .m-f .mac-ic svg { stroke: var(--hi); } .m-c .mac-pct { color: #e8c25a; }
/* tiles: progress ring + value row */
.dh-tv { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.dh-tvt { display: grid; min-width: 0; } .dh-tvt b { margin-top: 0; }
.dh-tring { width: 26px; height: 26px; flex: none; }
.t-sleep .dh-sbar { display: none; }
.dh-sleepbar { position: relative; display: block; width: 100%; height: 6px; margin-top: auto; border-radius: 99px; background: color-mix(in srgb, #9b7bff 18%, transparent); overflow: hidden; }
.dh-sleepbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7b5cff, #4f7bff); }
.t-sleep .dh-wave { bottom: 16px; }
@media (prefers-reduced-motion: no-preference) { .anim .dh-tring circle:nth-child(2) { transition: stroke-dasharray .9s cubic-bezier(.3,.7,.2,1); } }
.dh-st > span:last-child { display: block; }
.dh-st b, .dh-st small { display: inline; } .dh-st small { font-size: 9.5px; margin-left: 1px; }
.dh-st em { display: block; font-size: 9.5px; }
.dh-st-ic, .dh-st-ic svg { width: 18px; height: 18px; }
.dh-st { gap: 5px; padding: 0 2px; }
.dh-st b { font-size: 14px; }
.dh-tvt b { white-space: nowrap; font-size: 17px; } .dh-tvt small { font-size: 10px; }
.dh-tring { width: 22px; height: 22px; } .dh-tv { gap: 5px; }
.dh-wbody { grid-template-columns: 34% minmax(0, 1fr); }
.dh-wbtns { flex-wrap: nowrap; } .dh-wbtns .btn { font-size: 11.5px; padding: 6px 8px; } .dh-wbtns .dh-go { flex: 1 1 auto; min-width: 0; }
@media (max-width: 420px) { .dh-wbtns .dh-vp svg { display: none; } }
@media (max-width: 340px) { .dh-wbtns { flex-wrap: wrap; } }
.dh-wfoot { opacity: .85; }

/* ---------- Page 4 · Log cardio ---------- */
.cg-h { margin: 4px 0 0; font-size: 28px; }
.cg-acts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.cg-act { display: grid; justify-items: center; gap: 4px; min-height: 64px; padding: 8px 2px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease; }
.cg-act svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cg-act.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 14px -4px var(--accent); }
.cg-act.on svg { color: #ef5a4a; }
.cg-act:active { transform: scale(.96); }
.cg-art { position: relative; margin: 10px -16px 0; height: 200px; overflow: hidden; }
.cg-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 55%, transparent 100%); }
.cg-boxes { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: -24px; position: relative; }
.cg-box { padding: 10px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.cg-diff { margin-top: 10px; padding: 12px 14px; }
.cg-dh { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; margin-bottom: 8px; }
.cg-diff .cd-diff { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.cg-diff .cd-diff button { min-height: 44px; padding: 0; border-radius: 8px; font-size: 12px; }
.cg-diff .cd-diff button.lit { background: color-mix(in srgb, var(--accent) 45%, var(--bg)); border-color: transparent; color: var(--ink); }
.cg-diff .cd-diff button.on { background: var(--accent); color: var(--accent-ink, var(--card)); }
.cg-pace { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; margin-top: 10px; font-weight: 600; }
.cg-pace b { font-variant-numeric: tabular-nums; }
.cg-save { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin-top: 12px; font-size: 18px; font-weight: 800; border-radius: 16px; }
.cg-save svg { width: 20px; height: 20px; }
.cg .cd-more { margin-top: 12px; padding: 12px 14px; } .cg .cd-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.cg-list { gap: 8px; }
.cg-row { display: flex !important; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.cg-ric { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, #ef5a4a 14%, transparent); color: #ef5a4a; flex: none; }
.cg-ric svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cg-rtx { flex: 1; display: grid; gap: 2px; min-width: 0; } .cg-rtx small { color: var(--muted); font-size: 12px; }
.cg-rst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .cg-rst b { font-size: 15px; font-variant-numeric: tabular-nums; } .cg-rst b + b { border-left: 1px solid var(--line); padding-left: 10px; }
.cg-imp { margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) { .cg { animation: cgIn .22s ease; } .cg-art img { animation: cgGlow 4s ease-in-out infinite alternate; } }
@keyframes cgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cgGlow { from { filter: brightness(.95); } to { filter: brightness(1.12); } }
.cd-type[hidden] { display: none !important; } .cg-boxes .cd-useg { margin-top: 6px; }

/* ---------- Page 2 · Choose your workout ---------- */
.spx-h { margin: 4px 0 0; font-size: 28px; }
.spx-status { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.spx-status span { padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.spx-status .ok { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); } .spx-status .live { color: #ef9a4a; border-color: #ef9a4a; }
.spx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
.spx { position: relative; display: block !important; min-height: 150px; padding: 0 !important; overflow: hidden; isolation: isolate; border-radius: 18px !important; border: 1px solid color-mix(in srgb, var(--mg) 30%, transparent) !important; background: #0b110e !important; color: #fff !important; text-align: left; }
.spx.hero { grid-column: 1 / -1; min-height: 196px; border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) inset, 0 0 22px -6px var(--accent) !important; }
.spx-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -2; }
.spx::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 40%, rgba(6,10,8,.88) 85%); }
.spx-ic { position: absolute !important; left: 10px; top: 10px; width: 40px !important; height: 40px !important; margin: 0 !important; border-radius: 50% !important; background: rgba(6,10,8,.72) !important; color: var(--mg) !important; border: 1.5px solid var(--mg); }
.spx-ic svg { width: 22px !important; height: 22px !important; }
.spx-tx { position: absolute; left: 12px; right: 30px; bottom: 10px; display: grid; gap: 1px; }
.spx .sp-n { font-size: 18px; font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8); } .spx.hero .sp-n { font-size: 22px; }
.spx .sp-s { font-size: 11.5px; color: rgba(255,255,255,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spx .sp-sug { position: absolute; right: 10px; top: 10px; padding: 3px 9px; border-radius: 99px; background: var(--accent); color: var(--accent-ink, var(--hi-ink)); font-size: 11px; font-weight: 800; }
.spx .sp-done { position: absolute; right: 10px; top: 10px; padding: 3px 9px; border-radius: 99px; background: #2e8b57; color: #fff; font-size: 11px; font-weight: 800; }
.spx-chev { position: absolute; right: 12px; bottom: 16px; width: 8px; height: 8px; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); }
.spx.on:not(.hero) { border-color: var(--accent) !important; }
.spx-rest { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 10px; min-height: 52px !important; padding: 8px 12px !important; }
.spx-rest .sp-ic { margin: 0 !important; width: 32px !important; height: 32px !important; } .spx-rest .spx-tx { position: static; display: flex; gap: 8px; align-items: baseline; } .spx-rest .sp-sug { margin-left: auto; position: static; }
.spx-tools { display: grid; gap: 8px; }
.spx-recs { gap: 8px; }
.spx-rec { display: flex !important; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 8px 10px !important; }
.spx-rec img { width: 54px; height: 42px; object-fit: cover; border-radius: 10px; flex: none; }
.spx-rt { flex: 1; display: grid; min-width: 0; } .spx-rt small, .spx-rn small { font-size: 11.5px; color: var(--muted); }
.spx-rok { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--card); font-size: 11px; font-weight: 900; }
.spx-rn { display: grid; text-align: right; }
.wh-opts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.wh-opts a { flex: 1 1 auto; text-align: center; min-height: 44px; display: grid; place-items: center; padding: 6px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); color: var(--hero-ink); text-decoration: none; font-size: 13px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .spx { animation: spxIn .35s ease both; animation-delay: calc(var(--k, 0) * 50ms); transition: transform .15s ease; }
  .spx.hero .spx-art { animation: spxGlow 3.2s ease-in-out infinite alternate; }
  .spx.pick .spx-art { filter: brightness(1.25) saturate(1.2); transition: filter .2s ease; }
  .spx:active { transform: scale(.97); }
}
@keyframes spxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes spxGlow { from { filter: brightness(.95); } to { filter: brightness(1.12) saturate(1.1); } }

/* ---------- Page 3 · Active workout ---------- */
.p3-top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.p3-back { color: var(--ink); text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.p3-count { padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.p3-h { font-size: 26px; margin: 2px 0 0; }
.p3-segs { display: flex; gap: 5px; margin: 12px 0 4px; }
.p3-segs i { flex: 1; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) calc(var(--f) * 100%), var(--track) 0); }
.p3-segs i.full { background: var(--accent); } .p3-segs i.cur { box-shadow: 0 0 8px -1px var(--accent); }
.p3-card { padding-top: 12px !important; }
.p3-exh { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.p3-exh .set-ex { font-size: 20px; text-align: left; }
.p3-more { flex: none; }
.p3-art { position: relative; margin: 8px -14px 6px; height: 170px; overflow: hidden; }
.p3-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 75%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 75%, transparent); }
.p3-art:not(.bench) img { object-fit: contain; }
.p3-setno { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 18px !important; font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,.8); color: #fff; }
.p3-rir { margin-top: 10px; }
.p3-rirh { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.p3-rirs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.p3-rirs button { min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.p3-rirs button.on { background: var(--accent); color: var(--accent-ink, var(--card)); border-color: var(--accent); }
.p3-done { min-height: 56px; font-size: 18px; font-weight: 800; }
.p3-ov { margin-top: 12px; padding: 12px 14px; }
.p3-ov > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; } .p3-ov > summary::-webkit-details-marker { display: none; }
.p3-ov[open] .roll-ch { transform: rotate(225deg) translateY(-3px); }
.p3-list { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 6px; }
.p3-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.p3-row img { width: 46px; height: 34px; object-fit: cover; border-radius: 8px; flex: none; }
.p3-rn { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p3-rs { font-size: 12px; color: var(--muted); white-space: nowrap; }
.p3-st { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--muted); display: grid; place-items: center; font-size: 11px; font-weight: 900; flex: none; }
.p3-row.done .p3-st { background: var(--accent); border-color: var(--accent); color: var(--card); }
.p3-row.cur { border-color: var(--accent); box-shadow: 0 0 10px -4px var(--accent); }
.p3-notes { margin-top: 10px; } .p3-notes textarea { font-size: 16px; }
@media (prefers-reduced-motion: no-preference) { .p3-segs i.cur { animation: p3Pulse 2.4s ease-in-out infinite; } }
@keyframes p3Pulse { 50% { box-shadow: 0 0 12px 0 var(--accent); } }
.p3-card .wheels { grid-template-columns: 1fr 1fr !important; display: grid; gap: 10px; } .p3-card .set-plan, .p3-card .set-last { margin: 4px 0; font-size: 13px; }
/* Page 3 keeps the bottom navigation (Workouts highlighted); the page scrolls behind it */
body.session-mode #tabbar:not([hidden]) { display: flex !important; }
body.session-mode.has-tabbar .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---------- Page 1 · Diet ---------- */
.p1-seg { display: grid !important; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.p1-seg button { min-height: 44px; font-weight: 700; }
.p1-seg button.on { background: var(--accent); color: var(--accent-ink, var(--card)); box-shadow: 0 0 14px -4px var(--accent); }
.p1-sum { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 12px; padding: 14px; }
.p1-ring { position: relative; width: 112px; height: 112px; }
.p1-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.p1-rfg { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); filter: drop-shadow(0 0 4px var(--accent)); transition: stroke-dashoffset 1s cubic-bezier(.3,.7,.3,1); }
.p1-rfg.zero { display: none; }
.p1-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .p1-ring b { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; } .p1-ring small { font-size: 11px; color: var(--muted); margin-top: 3px; }
.p1-macs { display: grid; gap: 10px; min-width: 0; }
.p1-mact { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; } .p1-mact b { font-variant-numeric: tabular-nums; }
.p1-mtr { height: 7px; border-radius: 99px; background: var(--track); overflow: hidden; margin-top: 4px; } .p1-mtr i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .8s cubic-bezier(.3,.7,.3,1); }
.p1-mac.m-c .p1-mtr i { background: #e8c25a; } .p1-mac.m-f .p1-mtr i { background: #f07a8a; }
.p1-plan { grid-column: 1 / -1; margin: 0; }
.p1-meals { gap: 8px; margin-top: 12px; }
.p1-meal { padding: 0 !important; overflow: hidden; }
.p1-mh { display: flex; gap: 12px; width: 100%; padding: 10px 12px 6px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.p1-thumb { width: 74px; height: 74px; border-radius: 16px; object-fit: cover; flex: none; }
.p1-mt { flex: 1; min-width: 0; display: grid; gap: 2px; align-content: start; }
.p1-mtop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .p1-mtop .item-kcal { white-space: nowrap; font-weight: 700; }
.p1-row { padding: 0 12px 10px 96px; gap: 10px; }
.p1-log { min-height: 40px; }
.p1-ok { color: var(--accent-text); font-weight: 700; }
.p1-ing { padding: 4px 12px 12px 96px; display: grid; gap: 4px; font-size: 13px; }
.p1-ir { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 4px 0; } .p1-ir b { font-weight: 600; color: var(--muted); }
.p1-ing .btn { justify-self: start; margin-top: 6px; }
.p1-meal.open { border-color: var(--accent); }
.p1-out, .p1-water { display: flex; align-items: center; gap: 12px; min-height: 52px; margin-top: 10px; padding: 8px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; }
.p1-out { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 0 12px -6px var(--accent); }
.p1-out > span:nth-child(2), .p1-water > span:nth-child(2) { flex: 1; text-align: center; } .p1-water > span:nth-child(2) { text-align: left; } .p1-water b { margin-left: 6px; color: var(--accent-text); }
.p1-oic svg { width: 24px; height: 24px; fill: none; stroke: var(--accent-text); stroke-width: 1.9; stroke-linecap: round; }
.p1-water .wdrop svg { width: 20px; height: 20px; }
.p1-wadd { min-height: 40px; }
.p1-water.splash .wdrop svg { animation: dhFill .5s ease; }
.p1-preps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p1-prep { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; }
.p1-prep img { width: 48px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; }
.p1-prep > span:nth-child(2) { flex: 1; line-height: 1.25; }
@media (prefers-reduced-motion: no-preference) { .p1 { animation: cgIn .22s ease; } .p1-meal.done .p1-ok { animation: dot-pop .35s ease both; } }
@media (prefers-reduced-motion: reduce) { .p1-rfg, .p1-mtr i { transition: none; } }
.p1-ing[hidden] { display: none; }

/* ---------- Add-exercise queue ---------- */
.mg-ex { position: relative; }
.mg-ex .mg-tag { font-size: 11px; font-weight: 700; color: var(--muted); min-width: 64px; text-align: right; }
.mg-ex.queued { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.mg-ex.queued .mg-plus { background: var(--accent); color: var(--accent-ink, var(--card)); } .mg-ex.queued .mg-tag { color: var(--accent-text); }
.mg-ex.have { opacity: .6; }
.mg-ex { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; }
.mg-ex .mg-plus { order: 3; } .mg-ex .mg-tag { order: 2; }
.mg-cnt { position: absolute; right: 8px; top: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--accent-ink, var(--hi-ink)); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.add-panel { padding-bottom: 0; }
.mg-sticky { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); margin: 12px -14px 0; padding: 10px 14px 12px; background: linear-gradient(to top, var(--card) 70%, transparent); z-index: 5; }
body.session-mode:not(.has-tabbar) .mg-sticky { bottom: env(safe-area-inset-bottom); }
.mg-sticky .btn { min-height: 52px; font-weight: 800; box-shadow: 0 0 18px -6px var(--accent); }
.q-acts { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.q-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.q-item { padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); transition: transform .12s ease; touch-action: pan-y; }
.q-item.dragging { z-index: 3; position: relative; box-shadow: 0 8px 24px rgba(0,0,0,.4); border-color: var(--accent); transition: none; }
.q-item.drop-at { border-top: 3px solid var(--accent); }
.q-top { display: flex; align-items: center; gap: 8px; }
.q-drag { width: 32px; min-height: 44px; display: grid; place-items: center; color: var(--muted); cursor: grab; touch-action: none; font-size: 18px; user-select: none; }
.q-top img { width: 44px; height: 34px; border-radius: 8px; object-fit: cover; }
.q-n { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-mv { display: flex; gap: 2px; } .q-mv .icon-btn { width: 36px; min-height: 44px; }
.q-fields { display: grid; grid-template-columns: .7fr 1.3fr 1fr 1fr; gap: 6px; margin-top: 6px; }
.q-fields .field { margin: 0; } .q-fields .field > span { font-size: 11px; } .q-fields .input { font-size: 16px; padding: 8px 6px; min-height: 44px; text-align: center; }
.q-rep { display: flex; align-items: center; gap: 2px; } .q-rep i { font-style: normal; color: var(--muted); }
@media (max-width: 360px) { .q-fields { grid-template-columns: 1fr 1fr; } }
.q-fields { grid-template-columns: minmax(0, .7fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.q-fields .field { display: grid; gap: 2px; min-width: 0; }
.q-rep { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.q-fields .input { width: 100%; min-width: 0; box-sizing: border-box; }
.q-item { min-width: 0; box-sizing: border-box; } .q-list { min-width: 0; }
.q-top img { flex: none; }

/* ---------- Muscle map (picker + review) ---------- */
.mg-ex .mg-sub2 { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; } .mg-ex .mg-flag { color: #e9c46a; }
.mg-ex img.mg-th { width: 48px; height: 36px; border-radius: 8px; object-fit: cover; }
.mg-ex.wide { grid-template-columns: auto minmax(0, 1fr) auto auto !important; gap: 10px; }
.q-nn { flex: 1; min-width: 0; display: grid; } .q-nn small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-nn .q-n { flex: none; }
.q-det { margin-top: 4px; } .q-det > summary { display: flex; justify-content: space-between; align-items: center; min-height: 40px; font-size: 13px; color: var(--muted); cursor: pointer; list-style: none; } .q-det > summary::-webkit-details-marker { display: none; }
.q-det[open] .roll-ch { transform: rotate(225deg) translateY(-3px); }
.q-fields { grid-template-columns: repeat(5, minmax(0, 1fr)); } .q-fields .field:nth-child(2) { grid-column: span 2; }
@media (max-width: 400px) { .q-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } .q-fields .field:nth-child(2) { grid-column: span 2; } }
.q-ct { margin-top: 8px; } .q-cts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.q-cts button { min-height: 32px; padding: 0 8px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 11.5px; cursor: pointer; }
.q-cts button.on { background: color-mix(in srgb, var(--c) 30%, var(--card)); border-color: var(--c); }

/* ===== Supplements: Today · My Stack · Explore (10/28/26) ===== */
.sp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sp-comp { font-size: 13px; white-space: nowrap; text-decoration: none; }
.sp-tabs { margin: 6px 0 14px; }
.sp-warn { margin-bottom: 12px; }
.sp-empty { display: flex; gap: 14px; align-items: center; }
.sp-empty img { border-radius: 12px; flex: none; object-fit: cover; }
.sp-date { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; text-align: center; }
.sp-date .icon-btn { min-width: 40px; min-height: 40px; font-size: 18px; }
.sp-prog { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; }
.sp-prog-t { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 14px; }
.sp-prog .fill { box-shadow: 0 0 10px -2px rgba(var(--glow-rgb), .55); }
.sp-none { margin: 4px 2px 12px; }
.sp-grp { margin-bottom: 12px; }
.sp-grp > .label { margin: 0 2px 6px; }
.sp-row, .sx-row, .sp-card { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; margin-bottom: 8px; }
.sp-row.done { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.sp-row.done .sp-name { color: var(--muted); }
.sp-jar { width: 40px; height: 49px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.sp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-name { font-weight: 650; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.sp-brand { font-weight: 500; font-size: 12px; color: var(--muted); }
.sp-sub { font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.sp-acts { display: flex; gap: 14px; margin-top: 2px; }
.sp-acts .linkbtn { font-size: 12.5px; min-height: 32px; padding: 4px 0; text-decoration: none; color: var(--accent-text); }
.sp-take { flex: none; min-width: 104px; min-height: 40px; }
.sp-state { flex: none; font-weight: 700; font-size: 13px; color: var(--accent-text); padding: 6px 10px; border-radius: 99px; background: var(--accent-soft); }
.sp-foot { margin-top: 6px; }
.sp-card { flex-direction: column; align-items: stretch; padding: 0; }
.sp-cardbtn { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; color: inherit; text-align: left; padding: 8px 10px; cursor: pointer; font: inherit; border-radius: 14px; }
.sp-cardacts { padding: 0 10px 10px 60px; display: flex; gap: 8px; }
.sp-supply { color: var(--ink); } .sp-supply i { color: var(--muted); font-style: normal; }
.sp-supply.low { color: var(--warn); }
.sp-addmore { margin: 4px 0 12px; }
.sp-sec { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; background: var(--card); }
.sp-sec > summary { cursor: pointer; font-weight: 650; font-size: 14px; min-height: 28px; display: flex; align-items: center; gap: 6px; }
.sp-sec[open] > summary { margin-bottom: 8px; }
.sp-schedrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 0; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.sp-schedrow:first-of-type { border-top: 0; }
.sp-sugg { padding: 8px 0; border-top: 1px solid var(--line); } .sp-sugg:first-of-type { border-top: 0; }
.sp-labelink { display: inline-block; margin: 6px 2px 12px; color: var(--accent-text); font-weight: 600; font-size: 14px; text-decoration: none; }
.sx-cats { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 10px -2px 12px; padding: 0 2px 2px; scrollbar-width: none; }
.sx-cats::-webkit-scrollbar { display: none; }
.chip-b { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 36px; }
.chip-b.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sx-row.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 16px -8px rgba(var(--glow-rgb), .8); }
.sx-btns { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: none; }
.sx-btns .btn { min-width: 84px; min-height: 36px; }
.btn.on { background: var(--accent-soft); color: var(--accent-text); box-shadow: 0 0 0 1.5px var(--accent) inset; }
.sx-custom { margin-top: 12px; padding: 14px; }
.sp-note { margin: 12px 2px 0; }
.sp-sticky { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 6; padding: 10px 0 4px; background: linear-gradient(to bottom, transparent, var(--bg) 35%); margin-top: 6px; }
.sp-sticky .btn { min-height: 48px; box-shadow: 0 6px 22px -8px rgba(var(--glow-rgb), .7); }
.sp-revtop { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; }
.sp-rev { padding: 14px; }
.sp-rev .item-top { align-items: center; gap: 10px; margin-bottom: 8px; }
.sp-serv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.sp-serv.three { grid-template-columns: 1fr .9fr 1fr; }
.sp-revbtns { display: flex; gap: 8px; } .sp-revbtns .btn { flex: 1; min-height: 48px; } .sp-revbtns .btn.primary { flex: 1.6; }
.sp-wd { margin-top: 8px; }
.sp-blend { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.sp-brow { display: grid; grid-template-columns: 1fr 74px 66px auto; gap: 6px; align-items: center; }
.sp-mac { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 8px; }
.modal.sheet { border-radius: 22px 22px 18px 18px; border: 1px solid var(--line); box-shadow: 0 -10px 40px -18px rgba(var(--glow-rgb), .45); }
.modal.sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: -8px auto 10px; }
.sp-det details { border-top: 1px solid var(--line); padding: 10px 0; }
.sp-det details:first-child { border-top: 0; padding-top: 0; }
.sp-det summary { cursor: pointer; font-weight: 650; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.sp-det details > div { margin-top: 4px; }
@media (max-width: 360px) { .sp-serv.three { grid-template-columns: 1fr 1fr; } .sp-take { min-width: 92px; } }

/* ===== Theme previews (Settings → Appearance): same sample parts in every colorway ===== */
.cwp { display: flex; flex-direction: column; gap: 7px; }
.cwp-top { display: flex; align-items: center; gap: 6px; }
.cwp-ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.cwp-glow { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 9px; background: radial-gradient(120% 120% at 80% 0%, var(--hero-a), var(--hero-c)); color: var(--hero-ink); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.cwp-glow i { width: 9px; height: 9px; border-radius: 50%; background: var(--hi); box-shadow: 0 0 10px 2px rgba(var(--glow-rgb), .8); }
.cwp .btn { margin-top: 0; align-self: flex-start; }
.cwp-nav { display: flex; gap: 4px; padding: 4px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); }
.cwp-nav i { flex: 1; height: 8px; border-radius: 4px; background: var(--track); }
.cwp-nav i.on { background: var(--accent); }
.cw-option[aria-checked="true"] { box-shadow: 0 0 0 1px var(--accent-text), 0 0 18px -6px rgba(var(--glow-rgb), .7); }

/* ===== Shared interaction states, themed (hover · pressed · selected · disabled · focus · loading) ===== */
@media (hover: hover) {
  .btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
  .btn:not(.primary):not(.danger):hover:not(:disabled) { background: color-mix(in srgb, var(--accent-soft) 80%, var(--accent)); }
  .chip-b:hover, .chip span:hover { border-color: var(--accent); }
}
.btn:active:not(:disabled), .chip-b:active, .sp-cardbtn:active { transform: scale(.98); }
.btn:focus-visible, .chip-b:focus-visible, .sp-cardbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent-ink); border-right-color: transparent; animation: wbSpin .7s linear infinite; }
@keyframes wbSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn:active:not(:disabled), .chip-b:active, .sp-cardbtn:active { transform: none; } .btn[aria-busy="true"]::after { animation: none; } }

/* ===== Add exercises: full-height picker + male/female front/back body map (10/28/26) ===== */
body.xp-open { overflow: hidden; }
.ses.picking > :not(.xp) { display: none !important; }
.xp { position: fixed; z-index: 45; left: 0; right: 0; top: 0; bottom: var(--xp-bottom, 0px); display: flex; flex-direction: column; max-width: 640px; margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) 14px 0; background: var(--bg); }
.xp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; }
.xp-head strong { font-size: 18px; }
.xp-count { font-size: 12px; color: var(--muted); margin-top: 1px; }
.xp .mg-type { margin-top: 6px; }
.xp-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 8px -14px 0; padding: 0 14px 12px; -webkit-overflow-scrolling: touch; }
.xp-sticky { position: static; margin: 0 -14px; padding: 8px 14px; background: var(--bg); border-top: 1px solid var(--line); }
.xp.notab { padding-bottom: env(safe-area-inset-bottom); }
.xp-sticky:empty { display: none; }
.xp-sticky .btn { min-height: 48px; }
.xp-sticky.q-acts { display: flex; gap: 8px; } .xp-sticky.q-acts .btn { flex: 1; } .xp-sticky.q-acts .btn.primary { flex: 1.6; }
.mm { position: relative; margin: 0; padding: 6px 10px 6px; border-radius: 16px; background: radial-gradient(70% 80% at 50% 40%, var(--hero-a), var(--hero-c)); }
.mm-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 30px; }
.mm-lbl { display: flex; gap: 0; flex: 1; } .mm-lbl b { flex: 1; text-align: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.mm-tools { display: flex; gap: 6px; align-items: center; }
.mm-size { width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: #fff; font-size: 16px; cursor: pointer; }
.mm-model { display: inline-flex; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; padding: 2px; }
.mm-model button { border: 0; background: none; color: rgba(255,255,255,.8); font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 99px; min-height: 28px; cursor: pointer; }
.mm-model button:hover { background: rgba(var(--glow-rgb), .16); }
.mm-tog { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(255,255,255,.16); border-radius: 99px; padding: 2px; }
.mm-tog button { min-height: 32px; min-width: 60px; border: 0; border-radius: 99px; background: none; color: rgba(255,255,255,.7); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mm-tog button.on { background: rgba(var(--glow-rgb), .16); color: #fff; box-shadow: 0 0 0 1.5px var(--accent) inset; }
.mm-figs { display: flex; justify-content: space-around; align-items: flex-end; --fig-h: 196px; }
.mm-figs.big { --fig-h: min(400px, 52vh); justify-content: center; }
.mm-fig { position: relative; height: var(--fig-h); aspect-ratio: 320 / 700; flex: none; }
.mm-fig img, .mm-fig .mm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mm-fig img { object-fit: contain; -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent); }
.mm-col { mix-blend-mode: color; }
.mm-glo { mix-blend-mode: screen; pointer-events: none; }
.mm-r path { fill: var(--c); opacity: 0; transition: opacity .3s ease; }
.mm-col .mm-r path { pointer-events: all; cursor: pointer; }
.mm-col .mm-r.lit path { opacity: 1; } .mm-col .mm-r.soft path { opacity: .2; }
.mm-glo .mm-r.lit path { opacity: .4; } .mm-glo .mm-r.soft path { opacity: 0; }
.mm-glo .mm-r.sel path { opacity: 1; fill-opacity: .18; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .mm-r path { transition: none; } }
.mm-also { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 4px; }
.mm-also:empty { display: none; }
.mm-also span { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c) 26%, transparent); color: #fff; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.mm-also span i { font-style: normal; opacity: .7; } .mm-also span.s { opacity: .7; }
.mm-other { font: inherit; font-size: 12px; font-weight: 700; color: #fff; background: rgba(var(--glow-rgb), .14); border: 1px solid rgba(var(--glow-rgb), .5); border-radius: 99px; padding: 3px 10px; cursor: pointer; }
.mm-filter { font-size: 12px; color: rgba(255,255,255,.8); text-align: center; margin-top: 2px; } .mm-filter:empty { display: none; }
.mm-filter .linkbtn { color: var(--hi-text); font-size: 12px; min-height: 28px; }
.xp-chips { margin-top: 10px; }
.xp-groups, .xp-regions { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.xp-groups::-webkit-scrollbar, .xp-regions::-webkit-scrollbar { display: none; }
.xp-regions { margin-top: 6px; }
.xp-chip, .xp-rg { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 650; min-height: 36px; cursor: pointer; }
.xp-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--mg); }
.xp-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.xp-chip .mg-cnt { position: static; min-width: 18px; height: 18px; font-size: 11px; display: inline-grid; place-items: center; padding: 0 5px; }
.xp-rg { font-size: 12px; font-weight: 600; min-height: 32px; padding: 4px 10px; border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.xp-rg.lit { background: color-mix(in srgb, var(--c) 16%, var(--card)); }
.xp-rg.on { box-shadow: 0 0 0 2px var(--c) inset; }
.xp-clear { font-size: 13px; margin: 4px 2px 0; }
.xp-body { margin-top: 8px; animation: none; }
.xp-res-h { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin: 2px 2px 6px; }
.xp .mg-ex { min-height: 56px; }
.xp .q-list { margin-top: 10px; }
.xp > .q-review { display: contents; }

body.xp-open .toast { bottom: calc(var(--xp-toast, 150px) + env(safe-area-inset-bottom)); }

/* ===== Workout player: compact active set · rest · end sheet (10/28/26) ===== */
.wp { padding-bottom: 8px; }
.wp-top { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding-top: max(4px, env(safe-area-inset-top)); }
.wp-back { width: 40px; height: 40px; display: grid; place-items: center; font-size: 26px; color: var(--ink); text-decoration: none; border-radius: 12px; }
.wp-title { text-align: center; line-height: 1.15; min-width: 0; } .wp-title b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wp-title span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wp-end { min-height: 36px; padding: 6px 12px; border-radius: 10px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.wp-prog { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; font-size: 13px; color: var(--muted); } .wp-prog b { color: var(--accent-text); }
.wp-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; } .wp-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; box-shadow: 0 0 8px rgba(var(--glow-rgb), .5); transition: width .3s ease; }
.wp-set { padding: 0; background: none; border: 0; }
.wp-exh { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.wp-ex { font-size: 22px; line-height: 1.15; margin: 4px 0 2px; letter-spacing: -.01em; }
.wp-exs { font-size: 13px; color: var(--muted); } .wp-exs b { color: var(--ink); font-weight: 650; }
.wp-art { margin: 8px 0 0; position: relative; border-radius: 16px; overflow: hidden; background: radial-gradient(80% 90% at 50% 40%, var(--hero-a), var(--hero-c)); }
.wp-art-box { position: relative; width: 100%; max-height: min(34vh, 260px); margin: 0 auto; }
.wp-art-box img, .wp-art-box .ea-svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.wp-art-box { aspect-ratio: auto; height: min(34vh, 260px); }
.wp-cue { text-align: center; font-size: 13px; color: var(--hero-ink); padding: 4px 8px 8px; opacity: .9; }
.ea-svg .ea-shaft { stroke: var(--hi); stroke-width: 7; stroke-linecap: round; fill: none; filter: drop-shadow(0 0 6px rgba(var(--glow-rgb), .7)); }
.ea-svg .ea-head { stroke: var(--hi); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.ea-svg text { fill: #fff; font: 700 26px system-ui, sans-serif; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 5px; }
@media (prefers-reduced-motion: no-preference) { .ea-arrow { animation: eaPulse 2.4s ease-in-out infinite; } .ea-arrow.down { animation-delay: 1.2s; } }
@keyframes eaPulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.wp-fallback { display: flex; align-items: center; gap: 12px; padding: 8px 12px; min-height: 150px; }
.wp-fb-fig .mm-fig { height: 150px; --fig-h: 150px; }
.wp-fallback figcaption { display: flex; flex-direction: column; gap: 4px; color: var(--hero-ink); font-size: 13px; } .wp-fallback figcaption b { font-size: 14px; } .wp-fallback figcaption span { opacity: .8; }
.wp-last { font-size: 12.5px; color: var(--muted); margin: 8px 2px 0; } .wp-last b { color: var(--ink); }
.wp-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.wp-val { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 10px 8px; min-width: 0; }
.wp-vl { font-size: 12.5px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-big { display: block; width: 100%; border: 0; background: none; color: var(--ink); font: inherit; font-size: 32px; font-weight: 800; line-height: 1.1; text-align: center; padding: 2px 0 4px; cursor: pointer; font-variant-numeric: tabular-nums; border-radius: 10px; }
.wp-big small { font-size: 16px; font-weight: 600; margin-left: 4px; color: var(--muted); }
.wp-ctl { display: flex; align-items: center; gap: 6px; }
.wp-pm { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.wp-pm:active { transform: scale(.94); }
.wp-slider { flex: 1; min-width: 0; accent-color: var(--accent); height: 28px; }
.wp-rir { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.wp-rirh { font-size: 13px; color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.wp-rir .p3-rirs { display: flex; gap: 4px; } .wp-rir .p3-rirs button { min-width: 40px; min-height: 40px; }
.wp .p3-done { margin-top: 12px; min-height: 54px; font-size: 17px; font-weight: 800; }
.wp-ov { margin-top: 12px; }
.wp-rest { text-align: center; }
.wp-rest-h { font-size: 20px; font-weight: 800; margin: 10px 0 6px; }
.wp-ring { position: relative; width: min(200px, 52vw); aspect-ratio: 1; margin: 0 auto; }
.wp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wp-ring .trk { fill: none; stroke: var(--track); stroke-width: 9; }
.wp-ring .arc { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(var(--glow-rgb), .6)); transition: stroke-dashoffset .5s linear; }
.wp-ring-t { position: absolute; inset: 0; display: grid; place-items: center; font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wp-ring.ready .wp-ring-t { color: var(--accent-text); font-size: 36px; }
.wp-ring.ready .arc { stroke-dashoffset: 0 !important; }
@media (prefers-reduced-motion: reduce) { .wp-ring .arc { transition: none; } }
.wp-next { text-align: left; margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.wp-next-h { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.wp-next-b { display: flex; gap: 10px; align-items: center; } .wp-next-b img { width: 84px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--hero-c); flex: none; }
.wp-rctl { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 14px 0 12px; }
.wp-rb { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 60px; height: 60px; justify-content: center; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.wp-rb span { font-size: 16px; line-height: 1; } .wp-rb.main { width: 72px; height: 72px; border-color: var(--accent); }
.wp-endsheet { text-align: center; padding-top: 4px; } .wp-end-h { font-size: 21px; font-weight: 800; margin: 8px 0 4px; }
.wp-end-ic { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); font-size: 16px; }
.wp-end-n { font-size: 15px; color: var(--ink); } .wp-end-n b { color: var(--accent-text); }
.wp-endsheet .btn { min-height: 50px; font-weight: 750; }
.wp-discard { display: block; margin: 10px auto 0; color: var(--danger); text-decoration: none; }
.wp-sheet { text-align: center; } .wp-sh-sub { color: var(--muted); font-size: 13px; margin-top: -6px; }
.wp-sh-big { font-size: 44px; font-weight: 800; margin: 6px 0 10px; font-variant-numeric: tabular-nums; } .wp-sh-big small { font-size: 20px; color: var(--muted); }
.wp-sh-l { text-align: left; font-size: 13px; color: var(--muted); margin: 12px 0 6px; }
.wp-steps { display: flex; gap: 8px; } .wp-steps button { flex: 1; min-height: 40px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.wp-steps button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.wp-type { display: flex; align-items: center; gap: 8px; margin: 12px 0; } .wp-type .input { text-align: center; font-size: 20px; font-weight: 700; } .wp-type span { color: var(--muted); }
body.session-mode .wp { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (max-height: 700px) { .wp-art-box { height: 26vh; } .wp-big { font-size: 28px; } }
.p3-list { grid-template-columns: minmax(0, 1fr); } .wp-ov { min-width: 0; }

/* ---------- Batch meal prep + Create meal plan (11/1/26). Semantic tokens only. ---------- */
.bp-hero2 { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--card); min-height: 168px; margin-bottom: 14px; }
.bp-hero2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bp-hero2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--card) 8%, color-mix(in srgb, var(--card) 55%, transparent) 55%, transparent); }
.bp-hero2-txt { position: relative; z-index: 1; padding: 18px; max-width: 70%; }
.bp-hero2-txt h1 { margin: 10px 0 2px; font-size: 26px; line-height: 1.15; overflow-wrap: anywhere; }
.bp-hero2-sub { color: var(--muted); font-size: 14px; }
.bp-pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); border: 1px solid var(--accent-text); border-radius: 999px; padding: 4px 10px; background: var(--card); }
.bp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bp-tags .tag { margin: 0; }
.bp-st-legacy, .bp-st-partial, .bp-st-unknown, .bp-st-pending { color: var(--warn); border-color: var(--warn); }
.bp-st-complete { color: var(--accent-text); border-color: var(--accent-text); }
.bp-stats { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 18px; }
.bp-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-stats > div + div { border-left: 1px solid var(--line); padding-left: 16px; }
.bp-stats b { font-size: 20px; }
.bp-stats span { font-size: 12px; color: var(--muted); }
.bp-ings { padding: 16px 18px; }
.bp-ilist { list-style: none; margin: 0; padding: 0; }
.bp-ilist li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.bp-ilist li:last-child { border-bottom: none; }
.bp-ilist b { white-space: nowrap; font-weight: 650; }
.bp-rawtxt { color: var(--muted); }
.bp-editbtn { text-decoration: none; min-height: 44px; padding: 0 4px; }
.bp-ing { padding: 10px 0; border-top: 1px solid var(--line); }
.bp-ing-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bp-ing-acts { text-align: right; margin-top: -4px; }
.bp-ntitle { font-size: 16px; font-weight: 650; }
.bp-mode { margin-bottom: 4px; }
.bp-mode button.on, .bp-unit button.on { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.bp-stepper { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 6px; }
.bp-step { width: 52px; height: 52px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; touch-action: manipulation; }
.bp-step.plus { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.bp-step.sm { width: 44px; height: 44px; font-size: 22px; background: none; border-color: var(--accent-text); color: var(--accent-text); }
.bp-step:disabled { opacity: .4; cursor: not-allowed; }
.bp-step:focus-visible, .bp-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bp-stepval { display: flex; align-items: baseline; gap: 6px; }
.card .bp-stepval input.input, .card .bp-stepval input.input:focus { width: 64px; text-align: right; font-size: 30px; font-weight: 700; padding: 4px 6px; border-color: transparent; background: transparent; }
.bp-stepval .input:focus { border-color: var(--accent); }
.bp-stepval span { font-size: 22px; font-weight: 650; }
.bp-center { text-align: center; }
.bp-big { text-align: center; font-size: 22px; font-weight: 700; margin-top: 10px; }
.bp-raw { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); }
.bp-raw-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.bp-raw-v { margin-left: auto; font-weight: 700; }
.bp-rawtag { color: var(--warn); border-color: var(--warn); margin: 0; }
.bp-divider { height: 1px; background: var(--line); margin: 16px 0 12px; }
.bp-wrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; margin-top: 8px; }
.bp-unit { padding: 2px; flex: none; }
.bp-unit button { min-width: 48px; padding: 7px 10px; }
.bp-unit button:disabled, .bp-chip:disabled { opacity: .45; cursor: not-allowed; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-chips3 { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.bp-chip { min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.bp-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bp-outline { border-color: var(--accent-text); color: var(--accent-text); border-radius: 12px; min-height: 40px; }
.bp-need { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--warn-soft); color: var(--ink); }
.bp-bigval { display: flex; justify-content: center; align-items: baseline; gap: 6px; margin-top: 14px; }
.card .bp-bigval input.input { width: 96px; text-align: right; font-size: 40px; font-weight: 700; padding: 2px 4px; background: transparent; border-color: transparent; }
.bp-bigval .input:focus { border-color: var(--accent); }
.bp-bigval span { font-size: 30px; font-weight: 700; }
.bp-slider { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.bp-slider input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); height: 44px; }
.bp-portions { display: flex; align-items: center; gap: 12px; }
.bp-boxes { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; align-items: center; }
.bp-boxes img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); }
.bp-pcount { text-align: right; display: flex; flex-direction: column; }
.bp-pcount b { font-size: 22px; white-space: nowrap; }
.bp-split { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.bp-statrow { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.bp-stat { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px; min-width: 0; }
.bp-stat + .bp-stat { border-left: 1px solid var(--line); }
.bp-stat b { font-size: 20px; white-space: nowrap; }
.bp-stat span { font-size: 12px; color: var(--muted); }
.bp-whole { margin-top: 10px; }
.bp-needrow { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; }
.bp-needrow > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; list-style: none; font-size: 15px; }
.bp-needrow > summary::-webkit-details-marker { display: none; }
.bp-needrow[open] { padding-bottom: 12px; }
.bp-needrow[open] .chev { transform: rotate(90deg); }
.bp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); flex: none; }
.bp-sub { margin-top: 12px; }
.bp-sub > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent-text); min-height: 44px; display: flex; align-items: center; }
.bp-sec > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; font-weight: 650; min-height: 32px; list-style: none; }
.bp-sec > summary::-webkit-details-marker { display: none; }
.bp-sec > summary::after { content: "›"; color: var(--muted); font-size: 18px; transition: transform .15s ease; }
.bp-sec[open] > summary::after { transform: rotate(90deg); }
.bp-save { min-height: 52px; font-size: 16px; border-radius: 16px; margin-top: 4px; }
.bp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.bp-actions .btn { min-height: 48px; }
.bp-unk { color: var(--warn); }
.bp-grid4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 8px; }
.bp-prev { margin: 8px 0 0; }
.bp-prev li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.bp-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.bp-photo { width: 84px; height: 84px; border-radius: 16px; object-fit: cover; flex: none; border: 1px solid var(--line); }
.bp-hero-txt { min-width: 0; }
.bp-hero-txt h1 { margin: 4px 0; overflow-wrap: anywhere; }
.bp-h2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 22px; }
.bp-h2 h2 { margin: 0; }
.bp-h2 .btn { min-height: 40px; display: inline-flex; align-items: center; }
.bp-cards { display: grid; gap: 10px; margin-top: 10px; }
.bp-card { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: inherit; text-decoration: none; }
.bp-card img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; }
.bp-card-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bp-card-k { text-align: right; font-weight: 700; font-size: 18px; display: flex; flex-direction: column; flex: none; }
.bp-card-k small { font-size: 11px; color: var(--muted); font-weight: 500; }
.bp-pick { display: flex; width: 100%; align-items: center; gap: 12px; background: none; border: none; border-bottom: 1px solid var(--line); text-align: left; color: inherit; font: inherit; min-height: 64px; }
.bp-pick img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.bp-pick > span:nth-child(2) { flex: 1; min-width: 0; }
.mp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mp-head h1 { margin: 0; }
.tag.mp-draft { color: var(--warn); border-color: var(--warn); font-size: 11px; }
.mp-choices { display: grid; gap: 8px; margin-top: 14px; }
.mp-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 14px 16px; min-height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.mp-choice span { font-size: 13px; color: var(--muted); }
.mp-choice:hover:not(:disabled) { border-color: var(--accent); }
.mp-choice:disabled { opacity: .5; cursor: not-allowed; }
.mp-meals { display: grid; gap: 10px; margin-top: 14px; }
.mp-meal { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.mp-meal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.mp-kcal { font-weight: 650; font-size: 14px; white-space: nowrap; }
.mp-acts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.mp-ic { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.mp-ic.danger { color: var(--danger); }
.mp-ic:disabled { opacity: .35; cursor: not-allowed; }
.mp-empty { margin-top: 14px; text-align: center; font-size: 14px; }
.mp-sum { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; color: var(--muted); }
.mp-sum b { color: var(--ink); font-size: 15px; }
.mp-bottom { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 18px; position: sticky; bottom: calc(env(safe-area-inset-bottom) + 76px); z-index: 2; background: var(--bg); padding: 8px 0; }
.mp-bottom .btn { min-height: 50px; font-size: 15px; }
.am-list { display: grid; gap: 6px; max-height: 38vh; overflow-y: auto; margin-top: 8px; }
.am-opt { display: flex; gap: 10px; align-items: center; padding: 10px 12px; min-height: 52px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.am-opt input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.am-opt span { display: flex; flex-direction: column; min-width: 0; }
.am-opt small { color: var(--muted); font-size: 12px; }
.am-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
@media (min-width: 900px) { .mp-bottom { bottom: 0; } }
@media (max-width: 380px) { .bp-stat b { font-size: 17px; } .bp-hero2-txt { max-width: 80%; } .card .bp-bigval input.input { font-size: 34px; width: 104px; } }
@media (prefers-reduced-motion: reduce) { .bp-sec > summary::after, .bp-needrow .chev { transition: none; } }
.bp-ing-acts .linkbtn, #mpCancel { min-height: 44px; padding: 0 8px; }
.field[hidden], .inline[hidden], .bp-edit-body[hidden] { display: none !important; }

/* ===== Nutrition flow redesign (11/1/26): amount control, add-to-plan sheet, add-food picker, portion editor, today's meal =====
   Theme tokens only, so every saved colorway keeps working. */
.nsheet-bg { align-items: flex-end; padding-left: 0; padding-right: 0; padding-bottom: 0; }
.nsheet-modal { max-width: 560px; border-radius: 22px 22px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-bottom: 0; max-height: 92vh; max-height: 92dvh; }
@media (min-width: 600px) { .nsheet-bg { align-items: center; padding: 16px; } .nsheet-modal { border-radius: 22px; border-bottom: 1px solid var(--line); } }
.nsheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 2px auto 10px; }
.nsheet .btn { min-height: 44px; }
/* amount sheet */
.nf-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.nf-name { font-weight: 700; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.nf-meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.nf-edit { color: var(--accent-text); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; padding: 4px 0; }
.nf-ctx, .pe-ctx { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--accent-text); background: var(--accent-soft); border-radius: 8px; padding: 4px 8px; }
.nf-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .nf-lbl { font-size: 13px; color: var(--muted); }
.nf-seg { flex: 1; } .nf-note { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.nf-state { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; padding: 1px 5px; vertical-align: 2px; white-space: nowrap; }
.nf-state.nf-cooked { color: var(--warn); border-color: var(--warn); } .nf-state.nf-raw, .nf-state.nf-dry { color: var(--accent-text); border-color: var(--accent-text); }
.nf-prev { min-height: 22px; margin-top: 8px; }
.nf-mac { font-size: 14px; } .nf-mac b { font-size: 20px; } .nf-mac span { color: var(--muted); margin-left: 6px; font-size: 13px; }
.nf-fill { display: grid; gap: 4px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.nf-acts { display: flex; gap: 10px; margin-top: 12px; } .nf-acts .btn { flex: 1; } .nf-acts .btn.primary { flex: 2; }
/* quantity control */
.qc { margin-top: 12px; }
.qc-top { display: flex; align-items: center; gap: 8px; }
.qc-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.qc-btn:active { background: var(--accent-soft); }
.qc-num { flex: 1; min-width: 0; width: 100%; height: 48px; text-align: center; font-size: 26px; font-weight: 700; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.qc-num:focus { border-color: var(--accent); outline: none; background: var(--bg); }
.qc-seg { flex: none; display: flex; background: var(--track); border-radius: 999px; padding: 3px; gap: 2px; }
.qc-seg button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; min-width: 40px; min-height: 38px; padding: 0 10px; border-radius: 999px; cursor: pointer; }
.qc-seg button.on { background: var(--accent); color: var(--accent-ink); }
.qc-u { color: var(--muted); font-weight: 600; }
.qc-eq { text-align: center; font-size: 12.5px; color: var(--muted); min-height: 17px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.qc-slide { width: 100%; accent-color: var(--accent); height: 32px; margin-top: 2px; }
@media (max-width: 360px) { .qc-seg button { min-width: 34px; padding: 0 7px; } .qc-num { font-size: 22px; } }
/* add to plan */
.ap-title { font-size: 19px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 10px; }
.ap-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.ap-steps li { display: flex; align-items: center; gap: 6px; flex: 1; }
.ap-steps li span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.ap-steps li.now { color: var(--ink); font-weight: 700; } .ap-steps li.now span, .ap-steps li.done span { background: var(--accent); border-color: var(--accent); }
.ap-steps li:not(:last-child)::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-chip { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; min-height: 36px; cursor: pointer; }
.ap-q { font-weight: 700; margin: 12px 0 8px; }
.ap-list { display: grid; gap: 8px; }
.ap-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 14px; padding: 12px 14px; font: inherit; min-height: 52px; cursor: pointer; }
.ap-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.ap-opt-t { font-weight: 700; } .ap-opt-s { font-size: 12.5px; color: var(--muted); } .ap-ok { color: var(--accent-text); }
.ap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ap-day { flex-direction: row; align-items: center; justify-content: center; gap: 6px; font-weight: 600; padding: 10px 6px; }
.ap-day.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ap-ic { font-size: 15px; }
.ap-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-pill { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; cursor: pointer; }
.ap-pill.sm { min-height: 38px; font-size: 13px; padding: 6px 10px; }
.ap-pill.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ap-new { border-style: dashed; color: var(--accent-text); } .ap-new.on { border-style: solid; }
.ap-newbox { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; }
.ap-pos { display: grid; gap: 4px; font-size: 13px; color: var(--muted); } .ap-pos .input { min-height: 44px; }
.ap-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.ap-sum { margin-top: 12px; color: var(--accent-text); background: var(--accent-soft); border-radius: 10px; padding: 8px 10px; min-height: 18px; }
.ap-sum:empty { display: none; }
.ap-foot { display: flex; gap: 10px; margin-top: 12px; position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); background: var(--card); padding: 8px 0 4px; }
.ap-foot .btn { flex: 1; } .ap-foot .btn.primary { flex: 2; }
/* add-food picker */
.fs-head { display: flex; align-items: center; justify-content: space-between; }
.fs-title { font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0; }
.fs-x { width: 44px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.fs-dest { margin: 6px 0 10px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; color: var(--accent-text); font-size: 14px; font-weight: 600; }
.fs-search { margin: 0 0 10px; }
.fs-tabs { margin-bottom: 10px; } .fs-tabs button.on { background: var(--accent); color: var(--accent-ink); }
.fs-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fs-cat { position: relative; text-align: left; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 14px; padding: 10px 12px; min-height: 64px; display: grid; gap: 2px; font: inherit; cursor: pointer; }
.fs-cat::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--accent-2); }
.fs-cat.cat-protein::before { background: #c0504d; } .fs-cat.cat-carbs::before { background: #d39b2a; } .fs-cat.cat-fats::before { background: #7a6bb8; }
.fs-cat.cat-veg::before { background: #3f9a5a; } .fs-cat.cat-fruit::before { background: #d4677f; }
.fs-cat-n { font-weight: 700; font-size: 15px; } .fs-cat-h { font-size: 12px; color: var(--muted); line-height: 1.25; }
.fs-cat-c { position: absolute; top: 9px; right: 10px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fs-h { font-size: 12px; font-weight: 700; color: var(--muted); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .08em; }
.fs-cathead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .fs-cathead .fs-h { margin: 0 0 0 auto; }
.fs-list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); }
.fs-row { display: flex; align-items: center; border-top: 1px solid var(--line); } .fs-row:first-child { border-top: 0; }
.fs-pick { flex: 1; min-width: 0; text-align: left; border: 0; background: none; color: var(--ink); font: inherit; padding: 10px 6px 10px 12px; display: grid; gap: 2px; min-height: 52px; cursor: pointer; }
.fs-n { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; } .fs-m { font-size: 12px; color: var(--muted); }
.fs-star { width: 40px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; } .fs-star.on { color: var(--accent-text); }
.fs-plus { flex: none; width: 36px; height: 36px; margin-right: 8px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 20px; cursor: pointer; }
.fs-empty { padding: 14px 12px; color: var(--muted); font-size: 14px; }
.fs-scan { display: block; margin: 10px auto 4px; text-decoration: none; }
.fs-qty { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); margin: 10px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0,0,0,.18); }
.fs-qty-src { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.nsheet.qty-open #fsBody { opacity: .55; }
/* portion editor */
.pe-ctx-tag { font-weight: 700; }
.pe-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 10px 0; } .pe-sum b { font-size: 22px; } .pe-sum > span { color: var(--muted); font-size: 13px; } .pe-st { margin-left: auto; } .pe-st .tag { margin: 0; }
.pe-list { display: grid; gap: 8px; }
.pe-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.pe-card.open { border-color: var(--accent); }
.pe-row { display: flex; align-items: center; }
.pe-t { flex: 1; min-width: 0; text-align: left; border: 0; background: none; color: var(--ink); font: inherit; padding: 10px 6px 10px 14px; display: grid; gap: 2px; min-height: 52px; cursor: pointer; }
div.pe-t { cursor: default; }
.pe-n { font-weight: 600; overflow-wrap: anywhere; } .pe-a { font-size: 13px; color: var(--muted); } .pe-need { color: var(--accent-text); font-weight: 600; }
.pe-qty { padding: 0 12px 10px; } .pe-qty .qc { margin-top: 0; }
.pe-det { margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; background: var(--card); } .pe-det summary { cursor: pointer; font-weight: 600; min-height: 28px; }
.pe-di { padding: 8px 0; border-top: 1px solid var(--line); } .pe-di:first-of-type { border-top: 0; }
.pe-acts { display: flex; gap: 10px; margin-top: 12px; } .pe-acts .btn { flex: 1; min-height: 44px; }
/* today's meal */
.tm-h { margin-bottom: 2px; } .tm-sub { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.tm-stat { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 10px 12px; }
.tm-stat.done { border-color: var(--accent); }
.tm-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.tm-stat.done .tm-ic { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tm-st-t { flex: 1; min-width: 0; display: grid; } .tm-st-t span { font-size: 12.5px; color: var(--muted); }
.tm-det { border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 13px; font-weight: 600; min-height: 44px; padding: 0 2px; cursor: pointer; white-space: nowrap; }
.tm-track { margin: 8px 2px 10px; }
.tm-need { font-size: 13px; color: var(--warn); margin: 0 2px 8px; }
.tm-cta { display: grid; gap: 8px; margin-top: 12px; } .tm-cta .btn { min-height: 48px; font-size: 15px; }
.btn.tm-add { background: none; border: 1.5px solid var(--accent); color: var(--accent-text); }
.tm-hint { margin-top: 10px; color: var(--muted); }
button.ml-chk { padding: 0; background: none; color: inherit; cursor: pointer; position: relative; width: 26px; height: 26px; }
button.ml-chk::after { content: ""; position: absolute; inset: -10px; }
button.ml-chk[aria-disabled="true"] { cursor: default; }
.ml-chk.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ml-addamt { border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 14px; font-weight: 600; padding: 2px 0; min-height: 32px; cursor: pointer; text-align: left; }
.ml-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 72px; }
.ml-act.a-amount { background: var(--accent); color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .ml-main { transition: none; } }
.ml-row .ml-acts { visibility: hidden; } .ml-row.open .ml-acts, .ml-row.drag .ml-acts { visibility: visible; }
.ml-row.logged { font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: normal; text-transform: none; margin: 0; }
.fs-search { background: none; padding: 0; } .fs-search .input { min-height: 44px; }
.ml-main { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ===== Start screen with the approved WILLBOUND logo (11/2/26). The artwork is only cropped and scaled (brand/willbound-hero.jpg from
   brand/willbound-logo-master.jpg); edges fade into the page so the frame sits in black. Always dark: it's the brand moment and matches
   the splash's final frame, whatever colorway or light/dark mode the athlete picks later. Cyan/magenta are accents only. */
:root { --wb-cyan: #3fe0ff; --wb-magenta: #ff3fc8; --wb-black: #03060b; }
body:has(.start) { background: var(--wb-black); color-scheme: dark; }
body:has(.start) .site-foot { opacity: .8; }
.start { --ink: #f2f4f7; --muted: #a9b0bb; --line: #2a2f38; --card: #0c1016; }
.start-brandhero { margin: -8px -16px 0; text-align: center; }
.start-logo-h { margin: 0; line-height: 0; }
.start-logo-img { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; aspect-ratio: 864 / 880;
  -webkit-mask-image: radial-gradient(120% 92% at 50% 44%, #000 62%, transparent 100%); mask-image: radial-gradient(120% 92% at 50% 44%, #000 62%, transparent 100%);
  animation: wbLogoIn .6s ease-out both; }
@keyframes wbLogoIn { from { opacity: 0; } to { opacity: 1; } }
.start-tag { margin: -6px 16px 0; font-size: 18px; line-height: 1.35; font-weight: 600; color: #f2f4f7; letter-spacing: .005em; }
.start-what { margin: 8px 16px 22px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: #a9b0bb; }
.start .start-actions { max-width: 480px; margin: 0 auto; }
.start .start-cta { background: linear-gradient(#e6e9ee, #c9ced6) padding-box, linear-gradient(90deg, var(--wb-cyan), var(--wb-magenta)) border-box;
  border: 1.5px solid transparent; color: #05070b; font-weight: 700; }
.start .start-alt { background: #0c1016; color: #f2f4f7; border: 1.5px solid #2a2f38; }
.start .start-code { display: flex; align-items: center; justify-content: center; min-height: 44px; color: #d7dce4; text-underline-offset: 3px; }
.start .start-cta:focus-visible, .start .start-alt:focus-visible, .start .start-code:focus-visible, .start .btn:focus-visible { outline: 2px solid var(--wb-cyan); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(255, 63, 200, .35); }
@media (prefers-reduced-motion: reduce) { .start-logo-img { animation: none; } }
@media (min-width: 720px) { .start-brandhero { margin: 0; } .start-tag { font-size: 20px; } }
.start .start-actions { width: 100%; }
.start-what { font-size: 11.5px; letter-spacing: .1em; text-wrap: balance; }
.start-tag { text-wrap: balance; }
/* soft edges on all four sides (top was hard with the radial mask) */
.start-logo-img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 78%, transparent 100%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 78%, transparent 100%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%); mask-composite: intersect; }
.start-logo-img { animation: none; } /* no fade: the splash will do the reveal; a stalled fade could leave the logo dim */

/* ===== Sign in / Create account / Reset / email code (11/2/26 review): same brand look as Start (always dark, approved logo cropped only,
   silver primary with a cyan→magenta edge, cyan focus). Other screens keep the athlete's colorway. */
body:has(.auth-brand) { background: var(--wb-black); color-scheme: dark; }
.auth-brand { --bg: #03060b; --card: #0c1016; --ink: #f2f4f7; --muted: #a9b0bb; --line: #2a2f38; --track: #161b23; --accent: #d7dce4; --accent-ink: #05070b; --accent-soft: #161b23; --accent-text: #9fe9ff;
  max-width: 480px; margin: 0 auto; color: var(--ink); }
.auth-logo { margin: -6px -16px 4px; line-height: 0; }
.auth-logo img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; aspect-ratio: 784 / 360;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); mask-composite: intersect; }
.auth-brand h1 { text-align: center; margin: 6px 0 4px; }
.auth-note { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 6px; }
.auth-brand .card { background: var(--card); border-color: var(--line); }
.auth-brand .input { background: #070a0f; border-color: #2a2f38; color: var(--ink); }
.auth-brand .seg { background: #0c1016; } .auth-brand .seg button { color: var(--muted); } .auth-brand .seg button.on { background: #1c222c; color: var(--ink); }
.auth-brand .start-cta { background: linear-gradient(#e6e9ee, #c9ced6) padding-box, linear-gradient(90deg, var(--wb-cyan), var(--wb-magenta)) border-box; border: 1.5px solid transparent; color: #05070b; font-weight: 700; }
.auth-brand .start-cta:disabled { opacity: .7; }
.auth-brand a:focus-visible, .auth-brand button:focus-visible, .auth-brand .input:focus-visible { outline: 2px solid var(--wb-cyan); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(255, 63, 200, .3); }
.auth-link { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; text-underline-offset: 3px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { padding-right: 72px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-width: 60px; min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--accent-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
@media (min-width: 720px) { .auth-logo { margin: 0 0 4px; } }

/* ===== Your show: hero + Overview / Timeline / Show info (11/2/26, owner concept, brand colors; amber only for review items) ===== */
.sh-hero { position: relative; overflow: hidden; margin-top: 4px; padding: 18px 18px 16px; background-color: #0b1017; background-size: cover; background-position: center 30%; color: #f2f4f7; border-color: #232a35; }
.sh-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 0% 0%, rgba(63, 224, 255, .12), transparent 55%), radial-gradient(120% 70% at 100% 0%, rgba(255, 63, 200, .10), transparent 55%); }
.sh-hero > * { position: relative; }
.sh-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #05070b; background: linear-gradient(90deg, #9feeff, #f6b3e4); border-radius: 6px; padding: 3px 8px; }
.sh-name { font-size: 28px; line-height: 1.1; margin: 10px 0 8px; color: #fff; overflow-wrap: anywhere; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-chip { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(159, 238, 255, .55); color: #dff8ff; background: rgba(63, 224, 255, .08); }
.sh-meta { font-size: 13.5px; color: #b7bfcb; margin-top: 8px; }
.sh-pend { color: #ffc46b; font-weight: 600; }
.sh-when { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; color: #e6eaf0; }
.sh-when svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sh-count { margin-top: 14px; }
.sh-hero .sub { color: #b7bfcb; } .sh-hero .big, .sh-hero .unit { color: #fff; }
.sh-hero .prep-prog { margin-top: 12px; } .sh-hero .bar-top span:last-child { color: #b7bfcb; }
.sh-hero .track { background: rgba(255, 255, 255, .12); } .sh-hero .track .fill { background: linear-gradient(90deg, var(--wb-cyan), var(--wb-magenta)); }
.sh-prepnote { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: #9aa3b0; }
.sh-alert { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 12px 12px 14px; border-radius: 16px; border: 1px solid var(--warn); background: var(--warn-soft); }
.sh-alert.info { border-color: var(--line); background: var(--card); }
.sh-alert-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--warn); color: #111; }
.sh-alert.info .sh-alert-ic { background: var(--accent-soft); color: var(--accent-text); }
.sh-alert-t { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 13.5px; } .sh-alert-t span { color: var(--muted); }
.sh-alert-go { flex: none; min-height: 40px; }
.sh-tabs { margin-top: 14px; } .sh-tabs button { min-height: 44px; }
.sh-panel { margin-top: 12px; }
.sh-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sh-q { display: grid; gap: 3px; text-align: left; margin: 0; padding: 14px; font: inherit; color: var(--ink); cursor: pointer; text-decoration: none; min-height: 88px; }
.sh-q-l { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sh-q b { font-size: 16px; } .sh-q-s { font-size: 12.5px; color: var(--muted); display: block; }
.sh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; margin-top: 10px; padding: 14px; font: inherit; color: var(--ink); cursor: pointer; min-height: 56px; }
.sh-later-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 4px; border: 1px dashed var(--line); border-radius: 12px; background: none; color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; }
.tl-x .tl-later { display: none; } .tl-x.show-later .tl-later { display: block; }
.sh-links { display: grid; gap: 8px; margin-top: 12px; }
.sh-link { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--accent-text); text-decoration: none; font-weight: 600; }
.sh-fees { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
#shp-info .card + .card { margin-top: 12px; }
@media (max-width: 360px) { .sh-quick { grid-template-columns: 1fr; } }
.sh-prepnote { justify-content: flex-end; }

/* ===== Coach check-in review (11/7/26): comparison table, client-page section, review queue ===== */
.ckc { display: grid; margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 14px; }
.ckc-r { display: grid; grid-template-columns: minmax(96px, 1.3fr) 1fr 1fr 0.9fr; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); align-items: baseline; }
.ckc-r:first-child { border-top: 0; }
.ckc-r > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.ckc-h { background: var(--track); font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ckc-r [role="rowheader"] { color: var(--muted); }
.ckc-d.better { color: var(--accent-text); font-weight: 700; } .ckc-d.worse { color: var(--warn); font-weight: 700; }
.ckc-miss { color: var(--muted); font-size: 12.5px; font-style: italic; }
.ckc-sc { color: var(--muted); font-size: 12px; }
.ckc-notes { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--track); } .ckc-notes p { margin: 4px 0 0; white-space: pre-wrap; }
.ckc-replies { margin-top: 10px; display: grid; gap: 4px; }
.ckc-pick { margin-top: 8px; } .ckc-pick .field { margin: 0; } .ckc-pick select { min-height: 44px; }
.ckr-entry { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px; text-decoration: none; color: var(--ink); min-height: 56px; }
.ckr-entry > span:first-child { flex: 1; display: grid; gap: 2px; }
.ckr-count { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 14px; }
.ckr-mode { margin-top: 10px; } .ckr-mode button { min-height: 44px; }
.ckr-nav { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; } .ckr-nav .btn { min-height: 40px; }
@media (max-width: 380px) { .ckc-r { grid-template-columns: minmax(80px, 1.2fr) 1fr 1fr 0.9fr; font-size: 13px; padding: 8px; } }
@media (max-width: 480px) { .ckc-pick { grid-template-columns: 1fr; gap: 8px; } }
/* change chips: text stays --ink (readable in every colorway/mode); better/worse shown by a tinted chip + the sign, never colour alone */
.ckc-d.better, .ckc-d.worse { color: var(--ink); font-weight: 700; justify-self: end; padding: 1px 8px; border-radius: 8px; }
.ckc-d.better { background: var(--accent-soft); } .ckc-d.worse { background: var(--warn-soft); }

/* ===== Coach "who needs attention" (11/7/26): status pill + reasons, filter chips, jump bar, Overview chart ===== */
.cs-pill { flex: none; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: var(--ink); border: 1px solid var(--line); white-space: nowrap; }
.cs-pill.cs-review { background: var(--warn-soft); border-color: var(--warn); }
.cs-pill.cs-action { background: var(--danger-soft); border-color: var(--danger); }
.cs-pill.cs-ok { background: var(--accent-soft); }
.cs-reasons { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 2px; }
.cs-reasons li { font-size: 14px; } .cs-reasons a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); display: inline-block; padding: 4px 0; min-height: 28px; }
.cs-reasons li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 2px; background: var(--muted); }
.cs-reasons .cs-r-review::before { background: var(--warn); } .cs-reasons .cs-r-action::before { background: var(--danger); }
.cs-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; margin-top: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cs-chips::-webkit-scrollbar { display: none; }
.cs-chip { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cs-chip span { color: var(--muted); font-weight: 700; margin-left: 4px; } .cs-chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .cs-chip.on span { color: inherit; opacity: .8; }
.cs-row .item-top { align-items: center; gap: 10px; } .cs-name { color: var(--ink); text-decoration: none; }
.cs-open { display: inline-flex; align-items: center; min-height: 40px; margin-top: 4px; color: var(--accent-text); font-weight: 600; text-decoration: none; }
.cs-jump { display: flex; gap: 6px; overflow-x: auto; margin: 4px 0 6px; scrollbar-width: none; } .cs-jump::-webkit-scrollbar { display: none; }
.cs-jump a { flex: none; min-height: 36px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.cs-ov .item-top { align-items: center; gap: 10px; }
.cs-chart { margin: 8px 0 0; } .cs-chart svg { width: 100%; height: auto; display: block; }
.cs-grid { stroke: var(--chart-grid, var(--line)); stroke-width: 1; } .cs-tick { fill: var(--chart-label, var(--muted)); font-size: 10px; }
.cs-dot { fill: var(--muted); } .cs-avg { fill: none; stroke: var(--chart-primary, var(--accent)); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cs-target { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cs-weeks { display: grid; margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 13.5px; }
.cs-wr { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 4px; padding: 8px 10px; border-top: 1px solid var(--line); } .cs-wr:first-child { border-top: 0; }
.cs-wr > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; } .cs-wh { background: var(--track); font-size: 11.5px; font-weight: 700; color: var(--muted); }
[tabindex="-1"]:focus { outline: none; }

/* ===== Coach quick plan edits (11/7/26) ===== */
.qa-card .label { margin-bottom: 8px; }
.qa-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qa-b { min-width: 60px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.qa-b.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.qa-custom { flex: 1; min-width: 96px; } .qa-custom .input { min-height: 44px; width: 100%; }
.qa-lbl { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 6px; }
.qa-seg button { min-height: 44px; }
.qa-prev { margin-top: 12px; display: grid; gap: 6px; }
.qa-p { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--track); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.qa-p.qa-bad { background: var(--warn-soft); }
.qn-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 12px; }
.qn { display: flex; flex-wrap: wrap; gap: 6px; }
.qn-b { min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.qn-b:active { background: var(--accent-soft); }
.qn-unsaved { color: var(--warn); margin-top: 8px; }

/* ===== Coach migration (11/7/26) ===== */
.im-steps { margin-top: 6px; }
.im-map { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; } .im-map .field select { min-height: 44px; }
@media (max-width: 420px) { .im-map { grid-template-columns: 1fr; } }
.im-prev { padding: 8px 0; border-top: 1px solid var(--line); } .im-prev:first-child { border-top: 0; padding-top: 0; }
.im-mail { white-space: pre-wrap; font: inherit; font-size: 13px; background: var(--track); border-radius: 10px; padding: 10px; max-height: 40vh; overflow: auto; margin: 0; }
.im-client { border-color: var(--accent); }

/* ===== Coach plan status (11/7/26, phase 0) ===== */
.cp-card { margin-top: 12px; } .cp-card.warn { border-color: var(--warn); background: var(--warn-soft); }
.cp-card .cp-note { margin: 4px 0 0; color: var(--ink); }
.cp-card .link { display: inline-block; margin-top: 8px; min-height: 32px; }
.cp-admin .cp-note { color: var(--warn); margin: 4px 0 0; }

/* ===== Approved logo in the app header (11/8/26) =====
   The approved artwork (brand/willbound-logo-compact.jpg, a crop of the master — never redrawn), scaled only. Its black background
   blends into the dark header with `screen`; in light themes it sits on a small dark tile so the metal and lighting stay intact. */
.brand { flex-direction: row; align-items: center; gap: 10px; }
.brand-logo { display: block; height: 40px; width: auto; border-radius: 8px; mix-blend-mode: screen; }
.brand .brand-tag { max-width: 9.5em; line-height: 1.2; }
[data-mode="light"] .brand-logo { mix-blend-mode: normal; background: #000; }
@media (max-width: 360px) { .brand .brand-tag { display: none; } }

/* ===== Meal cards: food name with its amount underneath (11/8/26) ===== */
.p1-foods { display: grid; gap: 6px; margin-top: 4px; }
.p1-food { display: grid; gap: 1px; }
.p1-fn { color: var(--ink); font-size: 14.5px; line-height: 1.25; }
.p1-fq { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.p1-more { color: var(--accent-text); font-size: 12.5px; font-weight: 600; }
.brand-mini { flex: none; } .brand-mini .brand-logo { height: 30px; border-radius: 6px; }
header.top > .brand-mini + div:empty { min-width: 60px; } /* keeps the logo centred when the right side is empty */
@media (max-width: 430px) { header.top:has(.hdr-btns .icon-btn + .icon-btn) { gap: 6px; } header.top:has(.hdr-btns .icon-btn + .icon-btn) .brand-mini .brand-logo { height: 21px; border-radius: 4px; } }
@media (max-width: 340px) { header.top:has(.hdr-btns .icon-btn + .icon-btn) .brand-mini { display: none; } }

/* ===== Background matched to the approved logo (11/8/26) =====
   Dark mode, every colorway: the page background is the logo's own background — near-black blue #04080F (sampled from the
   artwork's edges) with the logo's faint cyan haze on the left and magenta on the right near the top. The logo has no box or
   rounded corners: it sits in the same colour, and its outermost edges fade (mask only; the artwork itself is unchanged). */
[data-colorway][data-mode="dark"] { --bg: #04080f; }
[data-mode="dark"] body {
  background-color: #04080f;
  background-image: radial-gradient(70% 38% at 0% 0%, rgba(22, 45, 62, .55), transparent 72%),
                    radial-gradient(70% 38% at 100% 0%, rgba(44, 17, 45, .5), transparent 72%);
  background-repeat: no-repeat;
}
/* The header logo is brand/willbound-logo-alpha.webp: the approved artwork with its black made transparent (colour ÷ brightness,
   so over black it reproduces the original) and only the faint background fog faded out — it blends on any dark background.
   Light mode keeps a black tile behind it so the metal and lighting read as designed. */
.brand-logo, .brand-mini .brand-logo, header.top .brand-mini .brand-logo { border-radius: 0 !important; mix-blend-mode: normal !important; background: none; }
[data-mode="light"] .brand-logo { background: #000; border-radius: 6px !important; }

/* ===== Check-ins redesign (11/8/26): banner, Front/Side/Back photo strip, weight summary, draft form =====
   Gunmetal surfaces with cobalt/periwinkle accents, scoped to .ckx and the photo sheets (other screens keep their colorway). */
.ckx, .ckp-sheet { --ck-surf: #0f1520; --ck-surf2: #141c2a; --ck-line: #263247; --ck-acc: #5b6cf7; --ck-acc-ink: #ffffff; --ck-acc-soft: rgba(91, 108, 247, .16); --ck-cyan: #3fd0e6; }
[data-mode="light"] .ckx, [data-mode="light"] .ckp-sheet { --ck-surf: #f4f6fb; --ck-surf2: #ffffff; --ck-line: #d6dcea; --ck-acc: #3d4fe0; --ck-acc-soft: rgba(61, 79, 224, .1); --ck-cyan: #0f8fa3; }
.ckx-h { margin-bottom: 12px; }
.ckb { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ck-surf2); border: 1px solid var(--ck-line); overflow: hidden; }
.ckb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--ck-cyan), var(--ck-acc) 70%, transparent); }
.ckb-l { flex: 1; min-width: 0; padding-right: 12px; border-right: 1px solid var(--ck-line); }
.ckb-k { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ckb-d { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.2; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckb-chip { flex: none; padding: 5px 12px; background: var(--ck-acc); color: var(--ck-acc-ink); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transform: skewX(-12deg); border-radius: 3px; text-decoration: none; }
.ckb-warn .ckb-chip { background: var(--warn); color: #1a1205; } .ckb-warn::before { background: linear-gradient(90deg, var(--warn), transparent); }
.ckb-set { background: transparent; color: var(--ck-acc); border: 1px solid var(--ck-acc); }
.ckb-cal { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ck-line); display: grid; place-items: center; color: var(--ink); }
.ckb-cal svg { width: 22px; height: 22px; }
.ckx-photos { margin-top: 18px; }
.ckp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 10px; }
.ckp-title { font-size: 22px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; }
.ckp-count { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ckp-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ckp-tile { position: relative; display: block; aspect-ratio: 1 / 2; min-height: 150px; max-height: 300px; width: 100%; padding: 0; border-radius: 14px; border: 1px solid var(--ck-line);
  background: radial-gradient(80% 50% at 50% 42%, rgba(70, 110, 220, .14), transparent 70%), var(--ck-surf); overflow: hidden; cursor: pointer; color: var(--ink); font: inherit; -webkit-tap-highlight-color: transparent; }
.ckp-tile img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ckp-tile .ckp-art { object-fit: contain; object-position: 50% 30%; padding: 8px 6px 40px; }
.ckp-tile .ckp-photo { object-fit: cover; }
.ckp-tile.filled::after { content: ""; position: absolute; inset: auto 0 0 0; height: 48px; background: linear-gradient(transparent, rgba(4, 8, 15, .82)); }
.ckp-tile.next { border-color: var(--ck-acc); box-shadow: 0 0 0 1px var(--ck-acc), 0 0 18px -6px var(--ck-acc); }
.ckp-tile.failed { border-color: var(--warn); }
.ckp-tile.busy { opacity: .6; pointer-events: none; }
.ckp-tile:focus-visible { outline: 2px solid var(--ck-cyan); outline-offset: 2px; }
.ckp-foot { position: absolute; left: 10px; right: 8px; bottom: 9px; display: flex; align-items: center; justify-content: space-between; z-index: 1; }
.ckp-label { font-size: 15px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
[data-mode="light"] .ckp-tile:not(.filled) .ckp-label { color: var(--ink); text-shadow: none; }
.ckp-plus { width: 28px; height: 28px; border-radius: 50%; background: var(--ck-acc); color: #fff; display: grid; place-items: center; }
.ckp-plus svg { width: 16px; height: 16px; }
.ckp-tile.filled .ckp-plus { background: var(--ck-cyan); color: #04121a; }
.ckp-tile.failed .ckp-plus { background: var(--warn); color: #1a1205; }
.ckp-fail { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 1; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--warn); color: #1a1205; font-weight: 700; font-size: 14px; }
.ckp-fail svg { width: 16px; height: 16px; }
.ckw { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; padding: 4px 0 2px; }
.ckw-c { padding: 4px 14px; } .ckw-c + .ckw-c { border-left: 1px solid var(--ck-line); }
.ckw-k { font-size: 14px; color: var(--muted); }
.ckw-v { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.ckw-s { font-size: 13px; color: var(--muted); margin-top: 2px; min-height: 1em; }
.ckw-since { grid-column: 1 / -1; text-align: center; font-style: italic; color: var(--muted); font-size: 14px; margin-top: 8px; }
.ckw-log { grid-column: 1 / -1; margin-top: 12px; }
.ckx-go { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; font-size: 18px; background: var(--ck-acc); border-color: var(--ck-acc); color: var(--ck-acc-ink); }
.ckx-go svg { width: 22px; height: 22px; }
.ckx-upd { margin-top: 10px; min-height: 46px; display: flex; align-items: center; justify-content: center; }
.ckx-note { text-align: center; margin-top: 8px; }
.ckx-det { margin-top: 14px; }
.ckx .card { background: var(--ck-surf2); border-color: var(--ck-line); }
.ckx .btn.primary { background: var(--ck-acc); border-color: var(--ck-acc); color: var(--ck-acc-ink); }
.ckx .seg button.on { background: var(--ck-acc); border-color: var(--ck-acc); color: var(--ck-acc-ink); }
.ckf-ref { margin: 6px 0 4px; }
.ckf-photos .ckp-title { font-size: 18px; }
.ckf-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 6px; position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 2; padding: 8px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.ckf-actions .btn { min-height: 50px; display: flex; align-items: center; justify-content: center; }
.ckf-actions [aria-disabled="true"] { opacity: .55; }
.ckf-foot { text-align: center; } .ckf-discard { display: block; margin: 10px auto 0; color: var(--muted); }
/* Photo sheets */
.ckp-sheet { background: var(--ck-surf2); }
.ckp-sh-row { display: flex; gap: 16px; align-items: stretch; }
.ckp-sh-art { flex: none; width: 34%; max-width: 150px; border-radius: 14px; border: 1px solid var(--ck-line); background: radial-gradient(80% 50% at 50% 42%, rgba(70, 110, 220, .16), transparent 70%), var(--ck-surf); display: grid; place-items: center; padding: 8px; aspect-ratio: 1 / 1.6; }
.ckp-sh-art img { width: 100%; height: 100%; object-fit: contain; }
.ckp-sh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.ckp-sh-t { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
.ckp-sh .btn { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; }
.ckp-sh .btn svg { width: 24px; height: 24px; flex: none; }
.ckp-sh .btn.primary { background: var(--ck-acc); border-color: var(--ck-acc); color: var(--ck-acc-ink); }
.ckp-cancel { margin-top: 12px; }
.ckp-prev { position: relative; border-radius: 14px; overflow: hidden; background: #000; margin: 6px 0 12px; max-height: 52vh; display: grid; place-items: center; }
.ckp-prev img { max-width: 100%; max-height: 52vh; object-fit: contain; display: block; }
.ckp-prev.big, .ckp-prev.big img { max-height: 62vh; }
.ckp-prev-l { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(4, 8, 15, .78); color: #fff; font-weight: 700; font-size: 14px; }
.ckp-sh-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 360px) { .ckb-d { font-size: 19px; } .ckp-label { font-size: 13px; } .ckp-plus { width: 24px; height: 24px; } .ckw-v { font-size: 25px; } }
.ckp-sh .btn { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
@media (max-width: 400px) { .ckp-sh .btn { font-size: 15px; gap: 8px; } .ckp-sh .btn svg { width: 20px; height: 20px; } .ckp-sh-art { width: 30%; } }
.ckx-upd { background: transparent; border: 1px solid var(--ck-line); color: var(--ink); }

/* ===== Invite a client (11/8/26): gunmetal/midnight surfaces, cobalt-periwinkle selection, small cyan accents ===== */
.ivx { --iv-surf: #0f1520; --iv-surf2: #141c2a; --iv-line: #263247; --iv-acc: #4f63f5; --iv-acc2: #7d8cff; --iv-acc-soft: rgba(79, 99, 245, .16); --iv-cyan: #3fd0e6; }
[data-mode="light"] .ivx { --iv-surf: #f4f6fb; --iv-surf2: #ffffff; --iv-line: #d6dcea; --iv-acc: #3d4fe0; --iv-acc2: #3d4fe0; --iv-acc-soft: rgba(61, 79, 224, .1); --iv-cyan: #0f8fa3; }
.ivx-h { font-style: italic; letter-spacing: .01em; text-transform: uppercase; margin-bottom: 14px; }
.ivx-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 18px 2px 8px; }
.ivx-k .opt { letter-spacing: .08em; }
.ivx-in { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--iv-line); background: var(--iv-surf2); }
.ivx-in:focus-within { border-color: var(--iv-acc2); box-shadow: 0 0 0 3px var(--iv-acc-soft); }
.ivx-in svg { width: 22px; height: 22px; flex: none; color: var(--muted); }
.ivx-in input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; padding: 12px 0; outline: none; }
.ivx-row { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--iv-line); background: var(--iv-surf2); color: var(--ink); text-decoration: none; margin-top: 10px; }
.ivx-row > svg:first-child, .ivx-row summary > svg:first-child { width: 26px; height: 26px; flex: none; color: var(--iv-acc2); }
.ivx-row > span, .ivx-row summary > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ivx-row b { font-size: 15px; letter-spacing: .02em; }
.ivx-rs { font-size: 13px; color: var(--muted); }
.ivx-chev { width: 20px; height: 20px; flex: none; color: var(--muted); }
.ivx-row.primary { border-color: var(--iv-acc); background: linear-gradient(135deg, var(--iv-acc-soft), transparent 70%), var(--iv-surf2); }
.ivx-entries { margin-top: 4px; }
details.ivx-row { display: block; padding: 0; }
details.ivx-row summary { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 14px; cursor: pointer; list-style: none; }
details.ivx-row summary::-webkit-details-marker { display: none; }
details.ivx-row[open] .ivx-chev { transform: rotate(90deg); }
.ivx-code-body { padding: 0 14px 14px 54px; display: grid; gap: 10px; }
.ivx-code-v { font: 700 24px ui-monospace, Menlo, monospace; letter-spacing: .12em; color: var(--ink); }
.ivx-code-btns { display: flex; gap: 8px; } .ivx-code-btns .btn { min-height: 40px; min-width: 84px; }
.ivx-code-new { justify-self: start; color: var(--muted); font-size: 13px; }
.ivx-steps { display: grid; gap: 10px; margin-top: 18px; position: relative; }
.ivx-step { position: relative; display: flex; gap: 10px; align-items: flex-start; }
.ivx-step + .ivx-step::before { content: ""; position: absolute; left: 21px; top: -12px; height: 14px; width: 2px; background: var(--iv-cyan); opacity: .7; }
.ivx-n { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #fff; background: linear-gradient(160deg, #2a3fd6, #13226b); border: 1px solid #3b52ff; box-shadow: 0 0 14px -4px #3b52ff; margin-top: 6px; }
.ivx-step.wait .ivx-n { background: var(--iv-surf2); color: var(--muted); border-color: var(--iv-line); box-shadow: none; }
.ivx-step-main { flex: 1; min-width: 0; border-radius: 14px; border: 1px solid var(--iv-line); background: var(--iv-surf2); padding: 10px 14px 12px; }
.ivx-step.open .ivx-step-main { border-color: var(--iv-acc); }
.ivx-step.done { align-items: center; }
.ivx-step.done .ivx-step-main { padding-right: 86px; }
.ivx-step-k { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ivx-step-v { display: flex; align-items: center; gap: 10px; margin-top: 6px; min-width: 0; flex-wrap: wrap; }
.ivx-step-v > svg, .ivx-step-v .ivx-ic { width: 22px; height: 22px; flex: none; color: var(--iv-acc2); }
.ivx-step-v b { font-size: 16px; text-transform: uppercase; letter-spacing: .02em; }
.ivx-ev { display: grid; gap: 2px; min-width: 0; } .ivx-ev b { text-transform: none; }
.ivx-sv { display: block; font-size: 13px; color: var(--muted); }
.ivx-step.wait .ivx-step-v { margin-top: 4px; }
.ivx-change { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--iv-acc2); background: transparent; color: var(--iv-acc2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ivx-step-body { margin-top: 10px; }
.ivx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ivx-tile { position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--iv-line); background: var(--iv-surf); color: var(--ink); font: inherit; font-weight: 800; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; text-align: left; cursor: pointer; }
.ivx-tile span { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
.ivx-tile .ivx-ic { width: 26px; height: 26px; flex: none; color: var(--iv-acc2); }
.ivx-tile[aria-pressed="true"] { border-color: var(--iv-acc2); background: linear-gradient(160deg, rgba(79, 99, 245, .28), rgba(19, 34, 107, .35)); box-shadow: 0 0 0 1px var(--iv-acc2), 0 0 18px -6px var(--iv-acc2); }
.ivx-tick { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--iv-cyan); color: #04121a; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.ivx-tick svg { width: 14px; height: 14px; }
.ivx-opt .ivx-tick { position: static; flex: none; box-shadow: none; }
.ivx-other, .ivx-form { display: grid; gap: 6px; margin-top: 10px; } .ivx-other .ivx-k, .ivx-form .ivx-k { margin-top: 6px; } .ivx-form .btn, .ivx-other .btn { justify-self: start; margin-top: 6px; min-height: 40px; }
.ivx-search { min-height: 44px; } .ivx-search input { padding: 8px 0; }
.ivx-opts { display: grid; gap: 6px; margin-top: 8px; max-height: 320px; overflow: auto; overscroll-behavior: contain; }
.ivx-opt { display: flex; align-items: center; gap: 10px; min-height: 52px; width: 100%; text-align: left; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--iv-line); background: var(--iv-surf); color: var(--ink); font: inherit; cursor: pointer; }
.ivx-opt > span:first-child { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ivx-opt[aria-pressed="true"] { border-color: var(--iv-acc2); background: var(--iv-acc-soft); }
.ivx-alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ivx-alt .btn { min-height: 40px; }
.ivx-empty { padding: 6px 2px; }
.ivx-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ivx-filters label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.ivx-filters input, .ivx-filters select { min-height: 40px; border-radius: 10px; border: 1px solid var(--iv-line); background: var(--iv-surf); color: var(--ink); font: inherit; padding: 0 8px; }
.ivx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
@media (max-width: 380px) { .ivx-two { grid-template-columns: 1fr; } .ivx-tile { font-size: 13px; gap: 8px; padding: 8px 10px; } .ivx-tile .ivx-ic { width: 22px; height: 22px; } .ivx-n { width: 38px; height: 38px; font-size: 15px; } .ivx-step + .ivx-step::before { left: 18px; } }
.ivx-notes { margin-top: 12px; display: grid; gap: 4px; }
.ivx-go { margin-top: 18px; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(180deg, #4f63f5, #2a3fd6); border-color: #4f63f5; color: #fff; box-shadow: 0 8px 22px -10px #3b52ff; }
.ivx-go svg { width: 22px; height: 22px; }
.ivx-sep { height: 1px; background: var(--iv-line); margin: 22px 0 6px; }
/* preview */
.ivx-pv { border-radius: 16px; border: 1px solid var(--iv-line); background: linear-gradient(160deg, rgba(79, 99, 245, .12), transparent 60%), var(--iv-surf2); padding: 16px; display: grid; gap: 10px; }
.ivx-pv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ivx-pv-logo { height: 30px; width: auto; }
[data-mode="light"] .ivx-pv-logo { background: #000; border-radius: 6px; }
.ivx-pv-k { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--iv-cyan); }
.ivx-pv-coach { font-size: 22px; font-weight: 800; display: grid; } .ivx-pv-coach span { font-size: 14px; font-weight: 500; color: var(--muted); }
.ivx-pv-to { font-size: 14px; color: var(--muted); } .ivx-pv-to b { color: var(--ink); overflow-wrap: anywhere; }
.ivx-pv-dl { margin: 0; display: grid; gap: 8px; } .ivx-pv-dl div { display: grid; gap: 1px; }
.ivx-pv-dl dt { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .ivx-pv-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ivx-pv-note { margin: 0; padding: 10px 12px; border-left: 3px solid var(--iv-cyan); background: var(--iv-surf); border-radius: 0 10px 10px 0; font-style: italic; }
.ivx-mail { margin-top: 10px; } .ivx-mail summary { cursor: pointer; color: var(--accent-text); font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.ivx-send { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 14px; position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); padding: 8px 0; background: linear-gradient(transparent, var(--bg) 35%); z-index: 2; }
.ivx-send .btn { min-height: 52px; display: flex; align-items: center; justify-content: center; } .ivx-send .btn.primary { background: linear-gradient(180deg, #4f63f5, #2a3fd6); border-color: #4f63f5; color: #fff; }
.ivx-ok { border-color: var(--iv-cyan); }
.invite-show .ivx-pv-dl { margin-top: 6px; }
/* Invite a client — fixes after the phone check (11/8/26) */
.ivx-form[hidden], .ivx-other[hidden] { display: none; }
.ivx-tile { font-size: 13px; letter-spacing: .01em; gap: 8px; padding: 8px 10px; }
.ivx-tile span { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.ivx-tile .ivx-ic { width: 22px; height: 22px; }
.ivx .btn.primary, .ivx a.btn.primary, .ivx a.btn.primary:link, .ivx a.btn.primary:visited { background: linear-gradient(180deg, #4f63f5, #2a3fd6); border-color: #4f63f5; color: #fff; }
.ivx .ivx-go.btn { background: linear-gradient(180deg, #4f63f5, #2a3fd6); border-color: #4f63f5; color: #fff; }
.ivx-send { position: static; background: none; padding: 0; }
.ivx-change { top: 10px; transform: none; }
.ivx-in select { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; padding: 12px 0; outline: none; }
.ivx-in select option { background: var(--card); color: var(--ink); }
.ivx-ocb { margin-top: 0; } .ivx-ocb .ivx-k { margin-top: 18px; }
.ivx-ocb { margin-top: 0; } .ivx-ocb .ivx-k { margin-top: 18px; }
/* open step uses the full width: its number moves into the label */
.ivx-step.open .ivx-n { display: none; }
.ivx-n-in { display: none; }
.ivx-step.open .ivx-n-in { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; margin-right: 8px; border-radius: 6px; background: linear-gradient(160deg, #2a3fd6, #13226b); border: 1px solid #3b52ff; color: #fff; font-size: 12px; letter-spacing: 0; }
.ivx-step.open .ivx-step-k { display: flex; align-items: center; }
.ivx-filters input, .ivx-filters select { min-width: 0; width: 100%; box-sizing: border-box; } .ivx { max-width: 640px; } .ivx-opts, .ivx-step-main { min-width: 0; }

/* ===== Workouts → Today's plan: one body, front + back (11/9/26) ===== */
.wpb { margin-top: 12px; }
.wpb-figs { --fig-h: min(250px, 40vh); justify-content: center; gap: 18px; padding: 6px 0 2px; border-radius: 16px; background: radial-gradient(60% 55% at 50% 45%, rgba(var(--glow-rgb), .10), transparent 70%); }
.wpb .mm-col .mm-r path { cursor: pointer; }
.wpb .mm-col .mm-r:focus-visible path { outline: none; stroke: #fff; stroke-width: 3; }
.wpb .mm-glo .mm-r.lit:not(.done) path { animation: wpbPulse 2.6s ease-in-out infinite; }
.wpb .mm-glo .mm-r.done path { opacity: .9; fill-opacity: .25; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
@keyframes wpbPulse { 0%, 100% { opacity: .25; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .wpb .mm-glo .mm-r.lit:not(.done) path { animation: none; opacity: .4; } }
.wpb-key { display: flex; justify-content: center; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.wpb-key span { display: inline-flex; align-items: center; gap: 6px; }
.wpb-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.wpb-key .k-lit { background: linear-gradient(135deg, #e5525c, #4285f2); }
.wpb-key .k-done { background: transparent; border: 2px solid #fff; }
.wpb-key .k-soft { background: rgba(255,255,255,.18); }
[data-mode="light"] .wpb-key .k-done { border-color: var(--ink); }
.wpb-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.wpb-chip { --c: var(--accent); display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.wpb-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.wpb-chip b { font-weight: 700; opacity: .75; }
.wpb-chip.done { border-color: var(--hi); box-shadow: 0 0 0 1px var(--hi) inset; }
.wpb-none { text-align: center; margin-top: 6px; }
[data-mode="light"] .wpb-figs { background: radial-gradient(60% 55% at 50% 45%, rgba(91, 143, 240, .14), transparent 70%), #0f1520; } /* the body art is made for a dark backdrop */
[data-mode="light"] .wpb-key .k-soft { background: rgba(0, 0, 0, .18); }
.ivx-filters.three { grid-template-columns: 1.25fr 1fr 1fr; } /* NPC / IFBB Pro: From · Where · Level */
/* Onboard a client: New vs Existing (11/9/26) */
.ivx-choice { display: grid; gap: 12px; margin-top: 8px; }
.ivx-big { display: grid; gap: 6px; padding: 18px; border-radius: 16px; border: 1px solid var(--iv-line); background: linear-gradient(150deg, var(--iv-acc-soft), transparent 60%), var(--iv-surf2); color: var(--ink); text-decoration: none; }
.ivx-big:hover, .ivx-big:focus-visible { border-color: var(--iv-acc2); }
.ivx-big svg { width: 30px; height: 30px; color: var(--iv-acc2); }
.ivx-big b { font-size: 20px; } .ivx-big span { color: var(--muted); font-size: 14px; line-height: 1.4; } .ivx-big em { font-style: normal; font-weight: 700; color: var(--iv-acc2); margin-top: 4px; }
.ivx-row.soon { opacity: .75; } .ivx-row.soon .tag { flex: none; }

/* ===== Check-ins + coach invite follow the chosen colorway (11/9/26) =====
   They had fixed cobalt accents; now accents and surfaces come from the theme (gunmetal, midnight, bone, rose; light or dark). */
.ckx, .ckp-sheet { --ck-surf: var(--bg); --ck-surf2: var(--card); --ck-line: var(--line); --ck-acc: var(--accent); --ck-acc-ink: var(--accent-ink); --ck-acc-soft: var(--accent-soft); --ck-cyan: var(--hi, var(--accent-2)); }
[data-mode="light"] .ckx, [data-mode="light"] .ckp-sheet { --ck-surf: var(--bg); --ck-surf2: var(--card); --ck-line: var(--line); --ck-acc: var(--accent); --ck-acc-soft: var(--accent-soft); --ck-cyan: var(--hi, var(--accent-2)); }
.ckb::before { background: linear-gradient(90deg, var(--ck-cyan), var(--ck-acc) 70%, transparent); }
.ckp-tile { background: radial-gradient(80% 50% at 50% 42%, rgba(var(--glow-rgb), .12), transparent 70%), var(--ck-surf); }
.ckp-plus { color: var(--ck-acc-ink); } .ckp-tile.filled .ckp-plus { background: var(--ck-cyan); color: var(--hi-ink, var(--accent-ink)); }
.ckp-sh-art { background: radial-gradient(80% 50% at 50% 42%, rgba(var(--glow-rgb), .14), transparent 70%), var(--ck-surf); }
.ivx, [data-mode="light"] .ivx { --iv-surf: var(--bg); --iv-surf2: var(--card); --iv-line: var(--line); --iv-acc: var(--accent); --iv-acc2: var(--accent-text); --iv-acc-soft: var(--accent-soft); --iv-cyan: var(--hi, var(--accent-2)); }
.ivx .btn.primary, .ivx a.btn.primary, .ivx a.btn.primary:link, .ivx a.btn.primary:visited, .ivx .ivx-go.btn, .ivx-send .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 22px -12px rgba(var(--glow-rgb), .8); }
.ivx-n, .ivx-step.open .ivx-n-in { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 14px -6px rgba(var(--glow-rgb), .8); }
.ivx-tile[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text), 0 0 18px -6px rgba(var(--glow-rgb), .8); }
.ivx-tick { color: var(--hi-ink, var(--accent-ink)); }
/* Pose guide figures take the colorway's hue (the artwork is blue); light mode keeps a dark tile so the figures read. */
.ckp-tile:not(.filled)::before, .ckp-sh-art::before { content: ""; position: absolute; inset: 0; background: rgb(var(--glow-rgb)); mix-blend-mode: color; pointer-events: none; z-index: 1; border-radius: inherit; }
.ckp-sh-art { position: relative; overflow: hidden; }
.ckp-foot, .ckp-fail { z-index: 2; }
[data-mode="light"] .ckp-tile:not(.filled), [data-mode="light"] .ckp-sh-art { background: radial-gradient(80% 50% at 50% 42%, rgba(var(--glow-rgb), .16), transparent 70%), #10141b; }
[data-mode="light"] .ckp-tile:not(.filled) .ckp-label { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* Sheets: swipes on the dimmed area or beside a picker never move the page behind (11/9/26) */
.modal-bg { overscroll-behavior: contain; }
.modal { overscroll-behavior: contain; }
html.modal-open, html.modal-open body { overscroll-behavior: none; }

/* ===== Coach Workspace (11/9/26): Coach HQ, Clients, Review Queue, More, coach bar. Fixed palette per the redesign:
   black/gunmetal base, cyan primary actions, restrained magenta light. Coach Studio onboarding adds blush accents. ===== */
.hq, .ivx.studio, .tabbar.coach-nav { --hq-bg: #07090d; --hq-s1: #10141b; --hq-s2: #161b24; --hq-line: #262d3a; --hq-ink: #eef3f8; --hq-mut: #9aa6b6;
  --hq-cy: var(--hi); --hq-cy2: var(--hi-2); --hq-cy-ink: var(--hi-ink); --hq-cy-soft: rgba(var(--glow-rgb), .14); --hq-mg: #e0479e; --hq-mg-soft: rgba(224, 71, 158, .14); --hq-ok: #49d39a; }
body:has(.hq), body:has(.ivx.studio) { background: radial-gradient(90% 40% at 85% -5%, rgba(224, 71, 158, .10), transparent 60%), radial-gradient(80% 40% at 0% 0%, rgba(var(--glow-rgb), .07), transparent 60%), #07090d; color: #eef3f8; }
.hq { color: var(--hq-ink); max-width: 720px; margin: 0 auto; padding-bottom: 24px; }
.hq-k { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--hq-cy); margin: 4px 2px 6px; }
.hq-h { font-style: italic; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 6px; color: var(--hq-ink); }
.hq-sub { color: var(--hq-mut); margin: 0 0 16px; }
.hq-sec { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hq-mut); margin: 22px 2px 10px; }
.hq svg { width: 22px; height: 22px; flex: none; }
.hq-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 22px 18px 18px; border: 1px solid var(--hq-line);
  background: radial-gradient(70% 60% at 100% 0%, var(--hq-mg-soft), transparent 70%), radial-gradient(60% 70% at 0% 100%, var(--hq-cy-soft), transparent 70%), linear-gradient(180deg, #121722, #0b0e14); }
.hq-hero-art { display: flex; justify-content: center; margin: 2px 0 14px; }
.hq-hero-art img { width: min(260px, 70%); height: auto; filter: drop-shadow(0 10px 30px rgba(var(--glow-rgb), .18)); }
.hq-hero-t { font-size: 24px; font-style: italic; text-transform: uppercase; margin: 0 0 6px; color: var(--hq-ink); }
.hq-hero-s { color: var(--hq-mut); margin: 0 0 16px; }
.hq-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 18px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, var(--hq-cy), var(--hq-cy2)); color: var(--hq-cy-ink); font: inherit; font-weight: 800; font-size: 16px; letter-spacing: .02em; text-decoration: none;
  box-shadow: 0 10px 28px -12px rgba(var(--glow-rgb), .8); transition: transform .12s, filter .12s; }
.hq-btn span { flex: 0 1 auto; }
.hq-btn .hq-chev { margin-left: auto; }
.hq-btn:active, .hq-row:active, .hq-stat:active, .hq-tab:active { transform: scale(.98); }
.hq-btn:disabled, .hq-btn.busy { filter: saturate(.4) brightness(.8); cursor: progress; }
.hq a:focus-visible, .hq button:focus-visible, .hq textarea:focus-visible, .ivx.studio :is(a, button, input, select, textarea):focus-visible, .tabbar.coach-nav a:focus-visible { outline: 2px solid var(--hq-cy); outline-offset: 2px; }
.hq-stats { display: grid; gap: 10px; margin-top: 14px; }
.hq-stats.two { grid-template-columns: 1fr 1fr; } .hq-stats.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 430px) { .hq-stats.four { grid-template-columns: 1fr 1fr; } }
.hq-stat { display: grid; gap: 2px; padding: 14px; min-height: 84px; border-radius: 16px; border: 1px solid var(--hq-line); background: var(--hq-s1); color: var(--hq-ink); text-decoration: none; transition: border-color .15s, transform .12s; }
.hq-stat svg { color: var(--hq-cy); }
.hq-stat.hot { border-color: rgba(224, 71, 158, .55); box-shadow: inset 0 0 0 1px rgba(224, 71, 158, .25); } .hq-stat.hot svg { color: var(--hq-mg); }
.hq-stat-n { font-size: 26px; font-weight: 800; line-height: 1.1; }
.hq-stat-l { font-size: 12px; color: var(--hq-mut); }
.hq-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 10px 14px; margin-top: 10px; border-radius: 16px; border: 1px solid var(--hq-line); background: var(--hq-s1);
  color: var(--hq-ink); text-decoration: none; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; box-sizing: border-box; }
.hq-row:hover { border-color: #36404f; }
.hq-row > svg:first-child { color: var(--hq-cy); width: 24px; height: 24px; }
.hq-row > span:not(.hq-copied) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hq-row b { font-size: 15px; overflow-wrap: anywhere; }
.hq-rs { font-size: 13px; color: var(--hq-mut); overflow-wrap: anywhere; }
.hq-row.hot { border-color: rgba(224, 71, 158, .5); background: linear-gradient(90deg, var(--hq-mg-soft), transparent 70%), var(--hq-s1); }
.hq-row.hot > svg:first-child { color: var(--hq-mg); }
.hq-row.sm { min-height: 50px; margin-top: 8px; }
.hq-chev { width: 18px !important; height: 18px !important; color: var(--hq-mut); }
.hq-copied { font-size: 13px; font-weight: 700; color: var(--hq-ok); white-space: nowrap; }
.hq-clear { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 16px; border: 1px solid var(--hq-line); background: var(--hq-s1); }
.hq-clear svg { color: var(--hq-ok); width: 28px; height: 28px; }
.hq-clear div { display: grid; gap: 2px; } .hq-clear span { color: var(--hq-mut); font-size: 14px; }
.hq-link { display: inline-block; margin-top: 10px; color: var(--hq-cy); font-weight: 700; text-decoration: none; min-height: 44px; line-height: 44px; }
.hq-demo-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--hq-mg-soft, rgba(224, 71, 158, .14)); color: #ff8ccb; border: 1px solid rgba(224, 71, 158, .5); }
/* Review Queue */
.hq-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; border-radius: 16px; background: var(--hq-s1); border: 1px solid var(--hq-line); position: sticky; top: calc(env(safe-area-inset-top, 0px) + 56px); z-index: 5; }
.hq-tab { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 6px; border-radius: 12px; color: var(--hq-mut); text-decoration: none; font-weight: 700; font-size: 14px; transition: background .18s, color .18s; white-space: nowrap; }
.hq-tab svg { width: 18px; height: 18px; }
.hq-tab.on { background: var(--hq-cy-soft); color: var(--hq-cy); box-shadow: inset 0 0 0 1px rgba(var(--glow-rgb), .45); }
@media (max-width: 370px) { .hq-tab svg { display: none; } .hq-tab { font-size: 13px; } }
.hq-panel { margin-top: 14px; animation: hqIn .22s ease-out; }
@keyframes hqIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hq-ck, .hq-flag, .hq-inv { padding: 16px; margin-bottom: 14px; border-radius: 20px; border: 1px solid var(--hq-line); background: linear-gradient(180deg, var(--hq-s2), var(--hq-s1)); }
.hq-ck.done { opacity: .85; }
.hq-ck-top { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.hq-ck-top .hq-status { margin-left: auto; }
.hq-av { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, rgba(var(--glow-rgb), .3), rgba(224, 71, 158, .3)); color: #fff; }
.hq-ck-who { flex: 1 1 150px; min-width: 0; display: grid; } .hq-ck-who b { overflow-wrap: break-word; hyphens: auto; } .hq-ck-who span { font-size: 13px; color: var(--hq-mut); }
.hq-status { font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: var(--hq-mg-soft); color: #ff8ccb; white-space: nowrap; }
.hq-status.ok { background: rgba(73, 211, 154, .14); color: var(--hq-ok); }
.hq-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 8px; }
.hq-metrics > div { display: grid; align-content: start; gap: 3px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--hq-line); min-width: 0; }
.hq-metrics b { font-size: 20px; } .hq-metrics b small { font-size: 12px; color: var(--hq-mut); font-weight: 600; } .hq-metrics i { font-style: normal; font-size: 14px; color: var(--hq-mut); font-weight: 600; }
.hq-mk { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hq-mut); }
.hq-mk svg { width: 14px; height: 14px; }
.hq-ms { font-size: 12px; color: var(--hq-mut); overflow-wrap: anywhere; }
.hq-spark { width: 100%; height: 40px; color: var(--hq-cy); }
.hq-tr { color: var(--hq-cy); font-weight: 700; }
@media (max-width: 380px) { .hq-metrics { grid-template-columns: 1fr 1fr; } .hq-metrics > div:last-child { grid-column: 1 / -1; } }
.hq-phk { margin-top: 10px; }
.hq-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.hq-ph { position: relative; padding: 0; border: 1px solid var(--hq-line); border-radius: 12px; overflow: hidden; background: radial-gradient(70% 60% at 50% 40%, rgba(var(--glow-rgb), .15), transparent 70%), #0b0e14; cursor: zoom-in; aspect-ratio: 3 / 4; color: var(--hq-ink); }
.hq-ph img { width: 100%; height: 100%; object-fit: contain; }
.hq-ph span { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .6); }
.hq-ph-note { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--hq-mut); margin-top: 8px; }
.hq-ph-note svg { width: 18px; height: 18px; }
.hq-ph-big { width: 100%; max-height: 60vh; object-fit: contain; background: #0b0e14; border-radius: 12px; }
.hq-note { margin-top: 12px; } .hq-note p { margin: 4px 0 0; }
.hq-reply { display: grid; gap: 6px; margin: 14px 0 10px; font-size: 13px; font-weight: 700; color: var(--hq-mut); }
.hq-reply textarea { background: var(--hq-bg); border: 1px solid var(--hq-line); color: var(--hq-ink); font-size: 16px; border-radius: 12px; }
.hq-reply .opt { font-weight: 500; }
.hq-ck-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
@media (max-width: 400px) { .hq-ck-links { grid-template-columns: 1fr; } }
.hq-done summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--hq-mut); font-weight: 700; }
.hq-flag-l { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.hq-flag-l a { display: block; padding: 10px 12px; min-height: 44px; box-sizing: border-box; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--hq-line); color: var(--hq-ink); text-decoration: none; }
.hq-flag-l .lv-action a { border-color: rgba(224, 71, 158, .55); }
.hq-inv { display: grid; gap: 4px; } .hq-inv b { overflow-wrap: anywhere; }
.hq-inv-a { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .hq-inv-a .btn { min-height: 44px; }
.hq .btn.primary, .ivx.studio .btn.primary { background: var(--hq-cy); border-color: var(--hq-cy); color: var(--hq-cy-ink); box-shadow: 0 8px 22px -12px rgba(var(--glow-rgb), .8); }
.hq .notice, .ivx.studio .notice { background: var(--hq-s1); border-color: var(--hq-line); color: var(--hq-ink); }
.hq .notice.danger, .ivx.studio .notice.danger { border-color: rgba(255, 99, 99, .6); background: rgba(255, 99, 99, .08); }
.hq .notice.warn-n { border-color: rgba(255, 196, 0, .5); }
/* coach bar */
.tabbar.coach-nav { background: rgba(9, 11, 16, .94); border-top: 1px solid #1f2633; }
.tabbar.coach-nav a { color: #8b97a8; }
.tabbar.coach-nav a[aria-current="page"] { color: var(--hi); background: rgba(var(--glow-rgb), .12); }
/* Coach Studio (blush accents on the same controls) */
.ivx.studio { --iv-surf: #0d1016; --iv-surf2: #141922; --iv-line: #2a3140; --iv-acc: #f2a6c4; --iv-acc2: #f6b8cf; --iv-acc-soft: rgba(242, 166, 196, .14); --iv-cyan: var(--hi); color: #eef3f8; --blush: #f6b8cf; }
.ivx.studio .ivx-n, .ivx.studio .ivx-step.open .ivx-n-in { background: rgba(242, 166, 196, .14); border-color: var(--blush); color: var(--blush); box-shadow: none; }
.ivx.studio .ivx-tile[aria-pressed="true"] { background: rgba(242, 166, 196, .12); border-color: var(--blush); box-shadow: 0 0 0 1px var(--blush); }
.studio-steps { margin: 0 0 16px; }
.studio-k { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blush); margin: 4px 2px 10px; }
.studio-steps ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0; margin: 0; counter-reset: s; }
.studio-steps li > * { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px; border-radius: 12px; color: #9aa6b6; text-decoration: none; border: 1px solid transparent; }
.studio-steps i { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 13px; border: 1px solid #39414f; }
.studio-steps i svg { width: 15px; height: 15px; }
.studio-steps b { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.studio-steps li.cur > * { color: #fff; border-color: rgba(242, 166, 196, .5); background: rgba(242, 166, 196, .08); }
.studio-steps li.cur i { background: var(--blush); color: #2a0f1b; border-color: var(--blush); }
.studio-steps li.done i { background: rgba(73, 211, 154, .16); color: #49d39a; border-color: rgba(73, 211, 154, .5); }
.studio-choice { display: grid; gap: 10px; margin-top: 14px; }
.studio-opt { display: flex; gap: 14px; align-items: center; width: 100%; min-height: 72px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--iv-line); background: var(--iv-surf2); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; }
.studio-opt:active { transform: scale(.985); }
.studio-opt > svg { width: 26px; height: 26px; flex: none; color: var(--blush); }
.studio-opt > span { display: grid; gap: 2px; } .studio-opt > span > span { font-size: 13px; color: #9aa6b6; }
.studio-opt.on { border-color: var(--blush); background: rgba(242, 166, 196, .09); box-shadow: 0 0 0 1px var(--blush); }
.studio-card { margin-top: 14px; padding: 16px; border-radius: 18px; border: 1px solid var(--iv-line); background: var(--iv-surf2); }
.studio-card .ivx-k:first-child { margin-top: 0; }
.studio-card select { flex: 1; min-width: 0; background: transparent; color: inherit; border: 0; font: inherit; font-size: 16px; min-height: 48px; }
.studio-card select option { color: #111; }
.studio-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--iv-surf); border: 1px solid var(--iv-line); margin-bottom: 12px; }
.studio-seg button { min-height: 42px; border: 0; border-radius: 9px; background: transparent; color: #9aa6b6; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.studio-seg button.on { background: rgba(242, 166, 196, .16); color: var(--blush); }
.studio-drop { display: flex; gap: 12px; align-items: center; min-height: 84px; padding: 14px; border-radius: 14px; border: 1.5px dashed rgba(242, 166, 196, .5); cursor: pointer; }
.studio-drop svg { width: 28px; height: 28px; flex: none; color: var(--blush); } .studio-drop > span { display: grid; gap: 3px; } .studio-drop > span > span { font-size: 13px; color: #9aa6b6; }
.studio-drop:focus-within { outline: 2px solid var(--blush); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ivx.studio textarea.input { width: 100%; box-sizing: border-box; background: var(--iv-surf); color: inherit; border: 1px solid var(--iv-line); border-radius: 12px; font-size: 16px; margin-bottom: 10px; }
.studio-found { display: grid; gap: 2px; margin-top: 12px; }
.studio-found b { display: flex; gap: 6px; align-items: center; } .studio-found svg { width: 18px; height: 18px; color: #49d39a; }
.studio-map { margin-top: 10px; } .studio-map summary, .studio-skip summary, .studio-orig summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--blush); }
.studio-map-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.studio-map-g label { display: grid; gap: 3px; font-size: 12px; color: #9aa6b6; } .studio-map-g select { border: 1px solid var(--iv-line); border-radius: 10px; padding: 0 8px; background: var(--iv-surf); min-height: 44px; }
.studio-note { margin-top: 12px; }
.studio-nav { display: flex; gap: 10px; margin-top: 18px; } .studio-nav .btn { flex: 1; min-height: 52px; } .studio-nav .btn.primary { flex: 2; }
.studio-nav.sticky { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); z-index: 6; padding: 10px; margin: 18px -10px 0; border-radius: 18px; background: rgba(13, 16, 22, .92); backdrop-filter: blur(8px); }
.studio-nav .btn.busy { cursor: progress; opacity: .8; }
.studio-sec { display: flex; justify-content: space-between; align-items: center; } .studio-sec h2 { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--blush); }
.studio-sec .link { min-height: 44px; display: inline-flex; align-items: center; color: var(--blush); }
.studio-to { margin: 6px 0 4px; overflow-wrap: anywhere; }
.studio-sent { display: flex; gap: 10px; align-items: center; margin-top: 8px; } .studio-sent svg { width: 22px; height: 22px; color: #49d39a; flex: none; } .studio-sent > span { display: grid; } .studio-sent > span > span { font-size: 13px; color: #9aa6b6; }
.studio-day { margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--iv-surf); border: 1px solid var(--iv-line); }
.studio-day-h { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.studio-day-h input { flex: 1; min-width: 0; font: inherit; font-weight: 800; font-size: 16px; background: transparent; color: inherit; border: 0; border-bottom: 1px solid var(--iv-line); padding: 8px 2px; }
.studio-ex-h, .studio-ex { display: grid; grid-template-columns: minmax(0, 1fr) 46px 62px 62px 40px; gap: 6px; align-items: center; }
.studio-ex-h { font-size: 11px; color: #9aa6b6; text-transform: uppercase; letter-spacing: .08em; padding: 0 2px; }
.studio-ex { margin-top: 6px; }
.studio-ex input { min-width: 0; width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 8px; font: inherit; font-size: 16px; color: inherit; background: var(--iv-surf2); border: 1px solid var(--iv-line); border-radius: 10px; }
.studio-ex input.bad { border-color: #ff6b6b; background: rgba(255, 107, 107, .08); }
.studio-ex.warn > input:first-child { border-color: rgba(255, 196, 0, .6); }
.studio-ex-w { grid-column: 1 / -1; font-size: 12px; color: #ffcf5c; }
.studio-ex .icon-btn, .studio-day-h .icon-btn { width: 40px; height: 44px; padding: 0; display: grid; place-items: center; color: #9aa6b6; }
.studio-ex .icon-btn svg, .studio-day-h .icon-btn svg { width: 18px; height: 18px; }
.studio-day > .btn { margin-top: 8px; min-height: 44px; } #stDadd { margin-top: 12px; min-height: 44px; }
@media (max-width: 400px) { .studio-ex-h, .studio-ex { grid-template-columns: 1fr 1fr 1.25fr 40px; } .studio-ex-h > span:first-child { display: none; } .studio-ex > input:first-child { grid-column: 1 / -1; } .studio-ex input { padding: 0 6px; } }
.ivx.studio .notice svg { width: 18px; height: 18px; vertical-align: -3px; color: #49d39a; }
.studio-skip ul { margin: 0; padding-left: 18px; font-size: 14px; color: #c9d2de; } .studio-skip li { margin: 3px 0; overflow-wrap: anywhere; }
.studio-orig pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow: auto; font-size: 13px; background: var(--iv-surf); padding: 10px; border-radius: 10px; }
.studio-tbl { max-height: 300px; overflow: auto; } .studio-tbl table { border-collapse: collapse; font-size: 12px; } .studio-tbl td, .studio-tbl th { border: 1px solid var(--iv-line); padding: 4px 6px; text-align: left; white-space: nowrap; }
.studio-done { text-align: center; padding: 18px 6px; } .studio-done p { color: #c9d2de; }
.studio-done-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(73, 211, 154, .14); color: #49d39a; animation: hqPop .35s ease-out; }
.studio-done-ic svg { width: 32px; height: 32px; }
@keyframes hqPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hq-panel, .studio-done-ic { animation: none; } .hq-btn, .hq-row, .hq-stat, .hq-tab, .studio-opt { transition: none; } }
@media (min-width: 900px) { .hq { padding-top: 8px; } .hq-hero { padding: 30px; } }
/* Coach Studio identity (11/9/26 follow-up): the studio reads as its own blush space, like the reference. */
body:has(.ivx.studio) { background: radial-gradient(120% 55% at 100% 0%, rgba(214, 108, 150, .22), transparent 60%), radial-gradient(90% 40% at 0% 30%, rgba(160, 70, 110, .12), transparent 65%), #0c0a0e; }
.studio-hero { position: relative; padding: 6px 2px 4px; margin-bottom: 6px; }
.studio-hk { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #c9a9b6; }
.studio-title { font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(46px, 14vw, 72px); line-height: .95; letter-spacing: -.01em; color: #fbe9ef; margin: 10px 0 8px; text-shadow: 0 8px 30px rgba(242, 166, 196, .25); }
.studio-tag { font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: #d8bcc7; }
.studio-bar { display: block; width: 56px; height: 4px; border-radius: 4px; margin-top: 12px; background: linear-gradient(90deg, #f6b8cf, #d9739b); }
.ivx.studio .studio-steps { padding: 14px; border-radius: 20px; border: 1px solid rgba(246, 184, 207, .35); background: linear-gradient(135deg, rgba(246, 184, 207, .16), rgba(120, 50, 80, .10) 60%, rgba(20, 14, 20, .4)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.ivx.studio .studio-k { color: #f6b8cf; margin-top: 0; }
.ivx.studio .ivx-h { font-size: 22px; margin-top: 18px; }
.ivx.studio .btn.primary, .ivx.studio a.btn.primary, .ivx.studio .ivx-go.btn, .ivx.studio .studio-nav .btn.primary { background: linear-gradient(180deg, var(--hi), var(--hi-2)); border-color: var(--hi); color: var(--hi-ink); border-radius: 14px; box-shadow: 0 10px 26px -12px rgba(var(--glow-rgb), .85); }
.ivx.studio .btn.primary:disabled { opacity: .45; box-shadow: none; }
.ivx.studio .studio-nav .btn:not(.primary), .ivx.studio .actions .btn:not(.primary) { border-radius: 999px; }
.ivx.studio .ivx-row > svg:first-child { color: #f6b8cf; }
.ivx.studio .ivx-in:focus-within { border-color: #f6b8cf; box-shadow: 0 0 0 3px rgba(242, 166, 196, .18); }
.ivx.studio .studio-card, .ivx.studio .ivx-row, .ivx.studio .ivx-in { background: rgba(32, 22, 30, .78); border-color: #3a2b35; }
.ivx.studio .studio-opt { background: rgba(32, 22, 30, .78); border-color: #3a2b35; }

/* ===== Coach Studio week builder (11/9/26): Build your week · Session editor · Exercise library. Blush = selection, highlight = primary. ===== */
.wb { --bl: #f6b8cf; --bl-soft: rgba(246, 184, 207, .16); --sf: rgba(26, 22, 30, .86); --sf2: rgba(34, 28, 38, .9); --ln: #3a2f3a; --mut: #a99aa6; padding-bottom: 8px; }
.wb .wb-h, .wb .wb-title { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; }
.wb .wb-h svg, .wb .wb-title > svg { width: 28px; height: 28px; color: var(--bl); flex: none; }
.wb .wb-h h2, .wb .wb-title h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; color: #f6eef2; overflow-wrap: anywhere; }
.wb .wb-title h2 { flex: 1; min-width: 0; }
.wb-lead { margin: 0 0 10px; }
.wb-mode { margin-top: 14px; } .wb-mode button { min-height: 44px; }
.wb-modehint { margin: 6px 2px 10px; }
.wb-strip, .wb-switch { display: flex; gap: 6px; margin: 4px 0 10px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.wb-strip { display: grid; grid-template-columns: repeat(7, 1fr); }
.wb-dchip { min-width: 44px; min-height: 44px; padding: 0 12px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--ln); background: var(--sf); color: #d9ccd4; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; flex: none; transition: background .15s, border-color .15s, transform .1s; }
.wb-dchip.on { background: var(--bl-soft); border-color: var(--bl); color: #fff; }
.wb-switch .wb-dchip.on { background: linear-gradient(180deg, #f9cadb, #f2a6c4); color: #2a0f1b; border-color: var(--bl); }
.wb-dchip.warn:not(.on) { border-color: rgba(255, 196, 0, .55); }
.wb-dchip:active, .wb-row button:active, .wb-lib-row:active, .wb-sheet-b:active { transform: scale(.97); }
.wb-days, .wb-exs, .wb-lib, .wb-pv { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wb-row { display: flex; align-items: stretch; border-radius: 14px; border: 1px solid var(--ln); background: var(--sf); transition: border-color .15s, box-shadow .15s; touch-action: pan-y; }
.wb-row.warn { border-color: rgba(255, 196, 0, .45); } .wb-row.unsched { border-style: dashed; }
.wb-row.dragging, .wb-ex.dragging { position: relative; z-index: 5; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7); border-color: var(--bl); background: var(--sf2); }
.wb-row.drop, .wb-ex.drop { box-shadow: 0 0 0 2px var(--bl); }
.wb-drag { width: 44px; flex: none; display: grid; place-items: center; border: 0; background: transparent; color: #8f8290; cursor: grab; touch-action: none; border-radius: 14px 0 0 14px; }
.wb-drag svg { width: 18px; height: 18px; } .wb-drag:active { cursor: grabbing; }
.wb-drag-sp { width: 44px; flex: none; }
.wb-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 8px 4px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wb-lbl { font-weight: 800; min-width: 36px; } .wb-dot { color: #7d6f7b; } .wb-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-meta { font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--mut); }
.wb-meta.warn { color: #ffcf5c; } .wb-meta.ok { color: #9fd9b9; } .wb-meta.rec { color: #b7c7ff; }
.wb-chev { width: 18px; height: 18px; flex: none; color: #8f8290; }
.wb-moreb { width: 44px; min-height: 44px; flex: none; display: grid; place-items: center; border: 0; background: transparent; color: #b8aab5; cursor: pointer; border-radius: 12px; }
.wb-moreb svg { width: 20px; height: 20px; }
@media (max-width: 380px) { .wb-meta { display: none; } .wb-row.warn .wb-meta, .wb-row.rec .wb-meta { display: inline; font-size: 11px; } }
.wb-add, .wb-split, .wb-custom { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin-top: 12px; border-radius: 14px; }
.wb-split, .wb-custom { background: transparent; border: 1.5px solid var(--bl); color: var(--bl); font-weight: 800; }
.wb-add svg, .wb-split svg, .wb-custom svg { width: 20px; height: 20px; }
.wb-links { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; margin-top: 10px; }
.wb-link { min-height: 44px; border: 0; background: none; color: var(--mut); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; }
.wb-start { display: grid; gap: 10px; margin-top: 14px; } .wb-start .studio-opt { text-decoration: none; }
.wb-saved { min-height: 20px; text-align: center; font-size: 12px; color: #9fd9b9; margin-top: 6px; }
.wb-foot .btn.block { width: 100%; }
.wb-foot > .sub { flex: 1; text-align: center; align-self: center; }
.wb-sub { color: var(--mut); font-size: 14px; margin: 0 2px 6px; display: flex; flex-wrap: wrap; gap: 0 6px; }
.wb-loadt { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px; margin: 8px 0 12px; border-radius: 14px; border: 1px solid var(--ln); background: var(--sf); color: inherit; text-decoration: none; font-weight: 800; }
.wb-loadt > svg:first-child { width: 22px; height: 22px; color: var(--bl); } .wb-loadt span { flex: 1; }
.wb-flash { display: flex; gap: 8px; align-items: center; margin: 6px 0; } .wb-flash svg { width: 18px; height: 18px; flex: none; }
.wb-ex { display: flex; align-items: stretch; gap: 0; border-radius: 16px; border: 1px solid var(--ln); background: var(--sf); touch-action: pan-y; }
.wb-ex-main { flex: 1; min-width: 0; padding: 10px 4px 12px 0; }
.wb-ex-name { display: block; width: 100%; border: 0; background: none; color: #f6eef2; font: inherit; font-weight: 800; font-size: 16px; text-align: left; padding: 4px 0; cursor: pointer; overflow-wrap: anywhere; }
.wb-n { color: var(--bl); margin-right: 2px; }
.wb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.wb-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid #4a3c48; background: rgba(255, 255, 255, .03); color: #e8dce3; font-size: 13px; font-weight: 600; white-space: nowrap; }
.wb-chip.warn { border-color: rgba(255, 196, 0, .6); color: #ffcf5c; } .wb-chip.k { border-color: rgba(183, 199, 255, .5); color: #b7c7ff; }
.wb-note { font-size: 13px; color: var(--mut); margin-top: 6px; overflow-wrap: anywhere; } .wb-free { font-size: 12px; color: #c9a9b6; margin-top: 4px; font-style: italic; }
.wb-pen { width: 46px; flex: none; display: grid; place-items: center; border: 0; background: transparent; color: #cdbfc8; cursor: pointer; }
.wb-pen svg { width: 20px; height: 20px; padding: 7px; box-sizing: content-box; border-radius: 10px; border: 1px solid #4a3c48; }
.wb-empty { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 26px 16px; border-radius: 16px; border: 1.5px dashed var(--ln); color: var(--mut); }
.wb-empty svg { width: 30px; height: 30px; color: var(--bl); } .wb-empty b { color: #f6eef2; }
.wb-typebtns { display: flex; gap: 8px; margin-top: 10px; } .wb-typebtns .btn { flex: 1; min-height: 48px; }
.wb-search { margin: 6px 0 10px; } .wb-search input[type=search] { -webkit-appearance: none; }
.wb-tabs a { display: grid; place-items: center; min-height: 42px; text-decoration: none; color: var(--mut); font-weight: 800; font-size: 14px; border-radius: 9px; }
.wb-tabs a.on { background: linear-gradient(180deg, #f9cadb, #f2a6c4); color: #2a0f1b; }
.wb-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.wb-filters select { min-height: 46px; background: var(--sf); border: 1px solid var(--ln); color: inherit; border-radius: 12px; font-size: 15px; }
.wb-selcount { min-height: 18px; font-size: 13px; color: var(--bl); margin: 0 2px 6px; }
.wb-lib { gap: 0; border-radius: 16px; border: 1px solid var(--ln); background: var(--sf); overflow: hidden; }
.wb-lib > li + li { border-top: 1px solid #2f2630; }
.wb-lib-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 6px 12px 6px 6px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .12s; }
.wb-lib-row.on { background: var(--bl-soft); }
.wb-th { width: 64px; height: 50px; flex: none; border-radius: 10px; object-fit: cover; background: #0b0a0d; }
.wb-th.mus { object-fit: contain; padding: 2px; } .wb-th.ic { display: grid; place-items: center; color: var(--bl); } .wb-th.ic svg { width: 26px; height: 26px; }
.wb-lib-t { flex: 1; min-width: 0; display: grid; gap: 2px; } .wb-lib-t b { overflow-wrap: anywhere; } .wb-lib-t > span { font-size: 12.5px; color: var(--mut); }
.wb-box { width: 28px; height: 28px; flex: none; border-radius: 8px; border: 1.5px solid #6d5f6b; display: grid; place-items: center; }
.wb-lib-row.on .wb-box { background: var(--hi); border-color: var(--hi); color: var(--hi-ink); } .wb-box i { font-style: normal; font-weight: 800; font-size: 13px; }
.wb-lib-h { padding: 12px 14px 6px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bl); }
.wb-tpl { display: flex; align-items: center; } .wb-tpl .wb-lib-row { flex: 1; } .wb-tpl .wb-pen svg { border: 0; }
.wb-none { padding: 14px; }
.wb-sheet { display: grid; gap: 6px; }
.wb-sheet-b { display: grid; gap: 2px; text-align: left; min-height: 52px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.wb-sheet-b span { font-size: 13px; color: var(--muted); } .wb-sheet-b.on { border-color: #f6b8cf; } .wb-sheet-b.danger b { color: var(--danger); } .wb-sheet-b:disabled { opacity: .55; cursor: default; }
.wb-form .input { width: 100%; box-sizing: border-box; font-size: 16px; }
.wb-form .studio-seg { margin: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--line); }
.wb-form .studio-seg button { min-height: 42px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-weight: 800; }
.wb-form .studio-seg button.on { background: rgba(246, 184, 207, .18); color: var(--ink); box-shadow: inset 0 0 0 1px #f6b8cf; }
.wb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wb-grid label, .wb-l { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); } .wb-grid em, .wb-l em { font-style: normal; font-weight: 500; }
.wb-grid label[hidden] { display: none; } .wb-span2 { grid-column: 1 / -1; } .wb-l { margin-bottom: 10px; }
.wb-u { display: flex; gap: 6px; } .wb-u .input:first-child { flex: 1; min-width: 0; } .wb-u select { width: auto; flex: none; }
.wb-linkst { font-size: 13px; margin: 6px 2px 0; } .wb-linkst .ok { color: var(--accent-text); display: inline-flex; gap: 4px; align-items: center; } .wb-linkst svg { width: 14px; height: 14px; } .wb-linkst .free { color: var(--muted); }
.wb-mv { display: flex; gap: 8px; margin-top: 12px; } .wb-mv .btn { flex: 1; min-height: 44px; }
.wb-eqset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; } .wb-eqset label { display: inline-flex; gap: 6px; align-items: center; min-height: 36px; }
.modal.wb-modal { max-height: calc(100dvh - 40px); overflow-y: auto; }
.wb-pv-h { display: grid; gap: 2px; margin: 6px 0 10px; } .wb-pv-h span { font-size: 13px; color: var(--mut); } .wb-pv-h .link { justify-self: start; min-height: 40px; display: inline-flex; align-items: center; color: var(--bl); }
.wb-issues ul { margin: 6px 0 8px; padding: 0; list-style: none; display: grid; gap: 6px; } .wb-issues li { display: flex; gap: 8px; align-items: center; justify-content: space-between; } .wb-issues .btn { flex: none; min-height: 40px; }
.wb-pv-day, .wb-pv-rest { border-radius: 14px; border: 1px solid var(--ln); background: rgba(12, 10, 14, .5); padding: 10px 12px; }
.wb-pv-day.warn { border-color: rgba(255, 196, 0, .5); } .wb-pv-rest { color: var(--mut); }
.wb-pv-dh { display: flex; justify-content: space-between; gap: 8px; } .wb-pv-dh span { font-size: 12px; color: var(--mut); }
.wb-pv-day ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; } .wb-pv-day li { display: grid; } .wb-pv-n { font-weight: 700; } .wb-pv-p { font-size: 13px; color: #e8dce3; } .wb-pv-note { font-size: 12px; color: var(--mut); }
@media (prefers-reduced-motion: reduce) { .wb-dchip, .wb-row, .wb-lib-row { transition: none; } }
.wb .wb-h h2, .wb .wb-title h2 { text-transform: none; font-style: normal; }
.wb-foot .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; }
.wb-foot .btn svg { width: 20px; height: 20px; flex: none; }
.ivx.studio .ivx-in input:focus-visible, .ivx.studio .ivx-in select:focus-visible { outline: none; }
.wb-dchip.on { background: rgba(246, 184, 207, .26); }
.wb-form .wb-u select.input { width: 84px; flex: none; }
.studio-hero.compact { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; margin-bottom: 8px; }
.studio-hero.compact .studio-title { font-size: 30px; margin: 2px 0; }
.studio-hero.compact .studio-tag { font-size: 10px; letter-spacing: .2em; }
.wb .studio-steps { padding: 8px 10px; } .wb .studio-steps .studio-k { display: none; }
.wb-strip .wb-dchip { min-width: 0; padding: 0; }
.wb-mode button { font-size: 14px; line-height: 1.15; }
.wb .studio-nav.sticky { padding: 8px; margin-top: 14px; }
.wb .wb-foot .btn { min-height: 50px; }
@media (max-height: 620px) { .wb .wb-foot .btn { min-height: 46px; } }
/* Toasts never block a tap on what's under them (only an Undo-style action inside is tappable). */
.toast { pointer-events: none; } .toast-act { pointer-events: auto; }
body.has-tabbar .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
.wb-days > li, .wb-exs > li, .wb-pv > li, .wb-lib > li { min-width: 0; }
.studio-steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } .studio-steps li { min-width: 0; }
@media (max-width: 360px) { .studio-steps li > * { padding: 6px 4px; gap: 5px; } .studio-steps b { font-size: 12px; } .studio-steps i { width: 22px; height: 22px; } }
.ex-cond { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; border: 1px dashed var(--line); color: var(--ink); font-weight: 600; }
.ex-target { margin: 2px 0 6px; }
@media (max-width: 400px) { .studio-hero.compact .studio-title { font-size: 24px; } .studio-hero.compact .studio-tag { display: none; } .wb-tabs a { font-size: 13px; } }

/* Home Screen app (11/13/26): the status bar is see-through (black-translucent) with white text, so keep a dark strip behind it in every
   mode; .wrap and the tab bars already pad by env(safe-area-inset-*). */
@media (display-mode: standalone) { body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: #04080F; z-index: 9999; pointer-events: none; } }