/* Nine July — styles.
   Dark is the default. Light follows the phone's setting unless the theme
   is forced in Settings (html[data-theme]). */

:root {
  --ground: #151210;
  --panel: #1E1A17;
  --raise: #29241F;
  --line: #372F29;
  --ink: #F3EDE6;
  --mute: #A39A91;
  --faint: #6F665E;
  --accent: #FF7A1A;
  --accent-ink: #FF9546;
  --accent-soft: rgba(255, 122, 26, .14);
  --on-accent: #1C0E03;
  --ok: #55DB8E;
  --ok-soft: rgba(85, 219, 142, .13);
  --bad: #FF5A74;
  --bad-soft: rgba(255, 90, 116, .13);
  --deload: #9DB7FF;
  --deload-soft: rgba(157, 183, 255, .13);
  --plate: #3A322C;
  --fig-base: #2B2521;
  --fig-near: #E7E1DA;
  --fig-far: #8C847C;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --nav: rgba(24, 20, 18, .88);
  --display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #EEE9E3; --panel: #FFFFFF; --raise: #F6F1EC; --line: #DDD4CA; --ink: #1D1814; --mute: #6A6057;
    --faint: #A1968B; --accent: #F06A0E; --accent-ink: #B64B00; --accent-soft: rgba(240, 106, 14, .12); --on-accent: #FFFFFF;
    --ok: #1C9A57; --ok-soft: rgba(28, 154, 87, .11); --bad: #D5314E; --bad-soft: rgba(213, 49, 78, .1);
    --deload: #3D5FD1; --deload-soft: rgba(61, 95, 209, .1); --plate: #E2DAD1; --fig-base: #D2C8BD;
    --fig-near: #3A332D; --fig-far: #9A9086; --shadow: 0 10px 30px rgba(60, 40, 20, .12); --nav: rgba(255, 255, 255, .9);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ground: #EEE9E3; --panel: #FFFFFF; --raise: #F6F1EC; --line: #DDD4CA; --ink: #1D1814; --mute: #6A6057;
  --faint: #A1968B; --accent: #F06A0E; --accent-ink: #B64B00; --accent-soft: rgba(240, 106, 14, .12); --on-accent: #FFFFFF;
  --ok: #1C9A57; --ok-soft: rgba(28, 154, 87, .11); --bad: #D5314E; --bad-soft: rgba(213, 49, 78, .1);
  --deload: #3D5FD1; --deload-soft: rgba(61, 95, 209, .1); --plate: #E2DAD1; --fig-base: #D2C8BD;
  --fig-near: #3A332D; --fig-far: #9A9086; --shadow: 0 10px 30px rgba(60, 40, 20, .12); --nav: rgba(255, 255, 255, .9);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); }
body {
  color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.45;
  font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
svg { display: block; }

/* ---------- layout ---------- */
.app {
  max-width: 480px; margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(112px + env(safe-area-inset-bottom));
}
.topbar { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-bottom: 6px; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; }
.wordmark b { color: var(--accent); font-weight: 800; }
.iconbtn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel);
  display: grid; place-items: center; color: var(--mute); padding: 0;
}
.iconbtn svg { width: 20px; height: 20px; }
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 26px 2px 10px; }
.eyebrow:first-child { margin-top: 8px; }
.pagehead { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: .95; letter-spacing: .01em; text-transform: uppercase; margin: 10px 0 4px; }
.pagesub { color: var(--mute); font-size: 14px; margin: 0 0 8px; }

/* ---------- cards ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 18px; margin-bottom: 12px; }
.card.tight { padding: 14px 16px; }
.card.hot { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.card.deload { border-color: color-mix(in srgb, var(--deload) 45%, var(--line)); }
.card h3, .h3 { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .01em; line-height: 1.05; margin: 0 0 6px; text-transform: uppercase; }
.card p, .p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; }
.card p:last-child { margin-bottom: 0; }
.mut { color: var(--mute); }
.small { font-size: 12.5px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; }
.row:first-child { border-top: 0; padding-top: 2px; }
.row > span:last-child { color: var(--mute); text-align: right; }
.row > span:first-child { text-align: left; }
.row .nw { white-space: nowrap; color: var(--ink); }
ul.list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
ul.list li { margin-bottom: 6px; }
ul.list li::marker { color: var(--accent); }

.tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 99px; background: var(--raise); color: var(--mute); white-space: nowrap;
}
.tag.hot { background: var(--accent-soft); color: var(--accent-ink); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.deload { background: var(--deload-soft); color: var(--deload); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.note { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; padding: 11px 13px; border-radius: 14px; background: var(--raise); margin: 12px 0 0; }
.note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--accent); }
.note.deload svg { color: var(--deload); }
.note.ok svg { color: var(--ok); }

/* ---------- buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: 0; border-radius: 16px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 16px; padding: 16px 18px; margin-top: 14px;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(.985); }
.btn.quiet { background: var(--raise); color: var(--ink); font-weight: 500; font-size: 14.5px; padding: 13px 16px; }
.btn.line { background: transparent; border: 1px solid var(--line); color: var(--mute); font-weight: 500; font-size: 14px; padding: 12px 16px; }
.btn.danger { background: var(--bad); color: #fff; }
.btn:disabled { opacity: .45; }
.btnrow { display: flex; gap: 10px; }
.btnrow .btn { flex: 1; }
.link { background: none; border: 0; padding: 0; color: var(--accent-ink); font-weight: 600; font-size: 13.5px; }

/* ---------- hero: body figure + countdown ---------- */
.hero { position: relative; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 9%, var(--panel)) 0%, var(--panel) 60%); border: 1px solid var(--line); border-radius: 26px; padding: 14px 14px 18px; overflow: hidden; }
.body-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.body-pair figure { margin: 0; }
.body-pair figcaption { text-align: center; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.body-fig { width: 100%; height: auto; max-height: 232px; }
.b-base { fill: var(--fig-base); }
.b-limb { stroke: var(--fig-base); stroke-linecap: round; fill: none; }
.b-plate { fill: var(--plate); stroke: var(--panel); stroke-width: 1.6; stroke-linejoin: round; }
.b-lit { fill: var(--accent); stroke: var(--panel); stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent)); }
.b-next { fill: var(--accent); stroke: none; opacity: .16; animation: next-pulse 2.6s ease-in-out infinite; }
@keyframes next-pulse { 50% { opacity: .05; } }
.countdown { display: flex; align-items: flex-end; gap: 12px; margin-top: 10px; padding: 0 4px; }
.countdown .num { font-family: var(--display); font-weight: 800; font-size: 76px; line-height: .78; letter-spacing: -.01em; }
.countdown .lab { font-size: 13px; line-height: 1.3; color: var(--mute); padding-bottom: 2px; }
.countdown .lab strong { display: block; color: var(--ink); font-weight: 600; font-size: 14px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 4px 0; font-size: 12px; color: var(--mute); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .l-lit { background: var(--accent); }
.legend .l-next { background: var(--accent); opacity: .3; }

/* ---------- week ---------- */
.quota { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quota > div { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 12px 12px 11px; }
.quota .q-num { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; }
.quota .q-num small { font-size: 18px; color: var(--faint); font-weight: 700; }
.quota .q-lab { font-size: 12px; color: var(--mute); margin-top: 3px; }
.pips { display: flex; gap: 4px; margin-top: 9px; }
.pips i { flex: 1; height: 4px; border-radius: 3px; background: var(--raise); }
.pips i.on { background: var(--accent); }
.strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 10px; }
.day { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 0 9px; text-align: center; min-width: 0; }
.day .d-n { font-size: 11px; color: var(--mute); font-weight: 600; letter-spacing: .04em; }
.day .d-i { display: grid; place-items: center; height: 26px; margin-top: 3px; color: var(--faint); }
.day .d-i svg { width: 18px; height: 18px; }
.day.done { background: var(--accent-soft); border-color: transparent; }
.day.done .d-i { color: var(--accent-ink); }
.day.today { border-color: var(--accent); }
.day.today .d-n { color: var(--accent-ink); }
.day.missed .d-i { color: var(--bad); opacity: .8; }
.day.moved .d-i { color: var(--ink); }

/* ---------- tonight card ---------- */
.tonight .t-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tonight .t-title { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: .92; text-transform: uppercase; }
.tonight .t-meta { color: var(--mute); font-size: 13.5px; margin-top: 7px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { font-size: 12.5px; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink); background: transparent; }
button.chip { cursor: pointer; }
.chip b { color: var(--accent-ink); font-weight: 600; margin-left: 4px; }
.done-list .row span:last-child { font-variant-numeric: tabular-nums; }

/* ---------- segmented / toggles ---------- */
.seg { display: flex; gap: 4px; background: var(--raise); padding: 4px; border-radius: 14px; }
.seg button { flex: 1; border: 0; background: transparent; padding: 9px 4px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--mute); }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.toggle { width: 50px; height: 30px; border-radius: 99px; border: 0; background: var(--raise); position: relative; padding: 0; flex: none; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--faint); transition: left .18s ease, background .18s ease; }
.toggle[aria-pressed="true"] { background: var(--accent); }
.toggle[aria-pressed="true"]::after { left: 23px; background: #fff; }

/* ---------- nav ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--nav); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line);
}
.nav-in { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: end; }
.nav button { border: 0; background: none; padding: 6px 0 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--faint); }
.nav button svg { width: 22px; height: 22px; }
.nav button[aria-current="page"] { color: var(--ink); }
.nav button[aria-current="page"] svg { color: var(--accent); }
.nav .go { position: relative; top: -14px; margin: 0 auto; width: 62px; height: 62px; border-radius: 50%; background: var(--accent); color: var(--on-accent); justify-content: center; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 6px var(--ground); padding: 0; }
.nav .go svg { width: 26px; height: 26px; color: var(--on-accent) !important; }
.nav .go.done { background: var(--raise); color: var(--ok); box-shadow: 0 0 0 6px var(--ground); }
.nav .go.done svg { color: var(--ok) !important; }

/* ---------- sheets ---------- */
.sheet-back { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; animation: fade .18s ease; }
.sheet {
  width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; background: var(--panel); border-radius: 26px 26px 0 0;
  padding: 10px 18px calc(24px + env(safe-area-inset-bottom)); animation: rise .24s cubic-bezier(.2, .8, .2, 1); border: 1px solid var(--line); border-bottom: 0;
}
.sheet .grab { width: 40px; height: 4px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.sheet-title { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: .95; text-transform: uppercase; }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- form cards ---------- */
.demo { position: relative; background: radial-gradient(90% 90% at 50% 20%, color-mix(in srgb, var(--fig-near) 7%, var(--ground)) 0%, var(--ground) 70%); border-radius: 20px; border: 1px solid var(--line); overflow: hidden; }
.demo svg { width: 100%; height: auto; }
.demo .badge { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.demo .badge svg { width: 16px; height: 16px; }
.demo .badge.ok { background: var(--ok); color: #06200F; box-shadow: 0 0 16px color-mix(in srgb, var(--ok) 60%, transparent); }
.demo .badge.bad { background: var(--bad); color: #2A0710; box-shadow: 0 0 16px color-mix(in srgb, var(--bad) 60%, transparent); }
.demo .dlabel { position: absolute; left: 14px; top: 14px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.demo .dlabel.ok { color: var(--ok); } .demo .dlabel.bad { color: var(--bad); }
.demo-seg { margin-top: 10px; }
.checks { list-style: none; padding: 0; margin: 14px 0 0; }
.checks li { display: flex; gap: 11px; font-size: 14px; line-height: 1.5; padding: 10px 0; border-top: 1px solid var(--line); }
.checks li:first-child { border-top: 0; }
.checks .mk { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.checks .mk svg { width: 12px; height: 12px; }
.checks .mk.ok { background: var(--ok-soft); color: var(--ok); }
.checks .mk.bad { background: var(--bad-soft); color: var(--bad); }
.worked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---------- player ---------- */
.player {
  position: fixed; inset: 0; z-index: 30; background: var(--ground); overflow-y: auto;
  padding: calc(10px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  animation: fade .2s ease;
}
.pl-in { max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; }
.pl-top .pl-where { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); text-align: center; flex: 1; }
.pl-top .pl-clock { font-family: var(--display); font-weight: 700; font-size: 20px; min-width: 60px; text-align: right; }
.bar { display: flex; gap: 3px; margin: 6px 0 16px; }
.bar i { flex: 1; height: 4px; border-radius: 3px; background: var(--raise); }
.bar i.done { background: var(--accent); }
.bar i.now { background: var(--ink); }
.bar i.rgap { margin-left: 5px; }
.pl-ex { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: .9; text-transform: uppercase; margin: 6px 0 4px; }
.pl-level { color: var(--mute); font-size: 14px; }
.pl-demo { margin: 14px 0 0; }
.pl-demo .demo { border-radius: 18px; }
.pl-formbtn { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.pl-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 10px 0; }
.counter { display: grid; grid-template-columns: 76px 1fr 76px; align-items: center; gap: 10px; margin: 8px 0 4px; }
.counter button { height: 76px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center; padding: 0; }
.counter button svg { width: 26px; height: 26px; }
.counter .val { text-align: center; }
.counter .val b { display: block; font-family: var(--display); font-weight: 800; font-size: 104px; line-height: .8; }
.counter .val span { font-size: 13px; color: var(--mute); }
.target-line { text-align: center; font-size: 13.5px; color: var(--mute); margin-top: 8px; }
.target-line b { color: var(--accent-ink); font-weight: 600; }
.tempo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); font-size: 13.5px; }
.tempo .beat { display: flex; gap: 5px; }
.tempo .beat i { width: 8px; height: 8px; border-radius: 50%; background: var(--raise); }
.tempo .beat i.on { background: var(--accent); }
.ring { position: relative; width: min(74vw, 290px); aspect-ratio: 1; margin: 6px auto 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .r-track { fill: none; stroke: var(--raise); stroke-width: 10; }
.ring .r-fill { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.ring.rest .r-fill { stroke: var(--ink); }
.ring.hold .r-fill { stroke: var(--accent); }
.ring .r-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring .r-num { font-family: var(--display); font-weight: 800; font-size: clamp(76px, 24vw, 108px); line-height: .85; }
.ring .r-lab { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-top: 8px; }
.pl-next { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); margin-top: 16px; }
.pl-next .n-lab { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.pl-next .n-ex { font-weight: 600; font-size: 16px; margin-top: 2px; }
.pl-next .n-t { margin-left: auto; font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--accent-ink); white-space: nowrap; }
.pl-next .n-t small { font-family: var(--body); font-size: 12px; font-weight: 500; color: var(--mute); margin-left: 3px; }
.effort { margin-top: 14px; padding: 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.effort p { margin: 0 0 10px; font-size: 14px; }
.effort .seg button { font-size: 14px; padding: 11px 4px; }
.pl-actions { margin-top: auto; padding-top: 14px; }
.stylepick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.stylepick button { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 16px; padding: 12px 13px; }
.stylepick button b { display: block; font-family: var(--display); font-weight: 800; font-size: 21px; text-transform: uppercase; line-height: 1; }
.stylepick button span { display: block; font-size: 12px; color: var(--mute); margin-top: 5px; line-height: 1.35; }
.stylepick button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.stylepick button[aria-pressed="true"] b { color: var(--accent-ink); }
.plan-list .row { align-items: flex-start; }
.plan-list .row .x-n { font-weight: 600; }
.plan-list .row .x-l { font-size: 12.5px; color: var(--mute); margin-top: 1px; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px; }
.summary-grid div { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.summary-grid b { display: block; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; }
.summary-grid span { font-size: 11.5px; color: var(--mute); }
.sets-table .row span:last-child { color: var(--ink); font-weight: 500; }
.up { color: var(--ok); font-weight: 600; }

/* ---------- progress ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 13px; }
.stat .v { font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1; }
.stat .l { font-size: 12px; color: var(--mute); margin-top: 4px; line-height: 1.3; }
.chart { width: 100%; height: auto; }
.chart .grid { stroke: var(--line); }
.chart text { fill: var(--mute); font-family: var(--body); font-size: 19px; }
select.sel, input.inp {
  font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--raise); color: var(--ink); width: 100%;
}
select.sel { margin-bottom: 12px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.inline { display: flex; gap: 8px; margin-top: 12px; }
.inline .btn { width: auto; margin: 0; padding: 12px 20px; }
.hist .row { cursor: pointer; }
.hist .row .h-k { font-weight: 600; }
.hist .row .h-d { font-size: 12.5px; color: var(--mute); }

/* ---------- misc ---------- */
.install { display: none; background: var(--accent); color: var(--on-accent); border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; align-items: center; justify-content: space-between; gap: 12px; }
.install.on { display: flex; }
.install p { margin: 0; font-size: 14px; font-weight: 500; }
.install button { border: 0; background: var(--on-accent); color: var(--accent); font-weight: 700; padding: 9px 14px; border-radius: 12px; }
.foot { font-size: 12px; color: var(--faint); text-align: center; margin: 26px 10px 0; line-height: 1.6; }
.toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--ground); padding: 11px 16px; border-radius: 14px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow); animation: rise .2s ease; max-width: calc(100vw - 32px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- mannequin ---------- */
.m-near, .m-far, .m-lit { fill: none; stroke-linecap: round; }
.m-near { stroke: var(--fig-near); }
.m-far { stroke: var(--fig-far); }
.m-torso { fill: var(--fig-near); stroke: var(--fig-near); stroke-width: 3; stroke-linejoin: round; }
.m-lit { stroke: var(--accent); opacity: .92; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 70%, transparent)); }
.m-far-lit { opacity: .5; }
.m-litfill { fill: var(--accent); opacity: .9; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 70%, transparent)); }
.m-shadow { fill: #000; opacity: .28; }
.m-floor { stroke: var(--line); stroke-width: 1.5; }
.m-prop { fill: var(--raise); stroke: var(--line); stroke-width: 1; }
.m-prop-top { fill: var(--line); }
.m-prop-far { fill: var(--raise); }
.m-ok, .m-bad, .m-ghost { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-ok { stroke: var(--ok); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ok) 80%, transparent)); }
.m-bad { stroke: var(--bad); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--bad) 80%, transparent)); }
.m-ghost { stroke: var(--ok); stroke-dasharray: 3 4; opacity: .55; }
.m-ok-dot { fill: var(--ok); } .m-bad-dot { fill: var(--bad); }
.m-ring { fill: none; stroke: var(--bad); stroke-width: 1.5; opacity: .8; animation: next-pulse 1.4s ease-in-out infinite; }