:root {
  --bg: #bfe3f0;
  --card: #eaf6fb;
  --card2: #d3eaf3;
  --line: #9fc9da;
  --text: #10202a;
  --muted: #4b6878;
  --purple: #7466b4;        /* faded purple, the accent */
  --purple-soft: #5b4f99;
  --ice-soft: #7fbbd3;
  --ice: #1d6b8c;           /* deep glacier, for lines and numbers on the light surface */
  --ice-ink: #ffffff;
  --ok: #1f8a5a;
  --warn: #b7791f;
  --bad: #c0392b;
  --radius: 14px;
  --bg-glow: #a9dcf0;
  --top-bg: #bfe3f0;
  --top-ink: #4b6878;
  --hero-from: #d9eef7;
  --chip-to: #8d80c9;
  --scrim: rgba(16,32,42,.45);
}
/* Night theme: same purple accent on dark blue-grey surfaces, light glacier for lines and numbers. */
:root[data-theme="dark"] {
  --bg: #111821;
  --card: #19222d;
  --card2: #232f3c;
  --line: #2e3b4a;
  --text: #ecf0f8;
  --muted: #93a3b4;
  --purple: #8f7fc9;
  --purple-soft: #5e5484;
  --ice: #a9dcf0;
  --ice-soft: #3f6b80;
  --ok: #7fd9b3;
  --warn: #f2c66d;
  --bad: #f08a8a;
  --bg-glow: #1d3344;
  --top-bg: #111821;
  --top-ink: #93a3b4;
  --hero-from: #1d3344;
  --chip-to: #6f63a8;
  --scrim: rgba(8,6,16,.7);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.35 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); background: var(--bg); min-height: 100vh; }
body.no-scroll { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; width: 100%; font-size: 16px; }
input:focus, select:focus { outline: none; border-color: var(--purple); }
select { appearance: none; -webkit-appearance: none; }
h2 { margin: 0; font-size: 22px; }
h3 { margin: 0; font-size: 17px; }
.hidden { display: none !important; }
.small { font-size: 12px; }
.dim { opacity: .5; }

.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 14px 8px; background: var(--top-bg); border-bottom: 1px solid rgba(0,0,0,.15); }
.logo { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.nav { display: flex; gap: 4px; flex: 1; justify-content: flex-end; }
.nav a { color: var(--top-ink); text-decoration: none; font-weight: 600; font-size: 14px; padding: 7px 10px; border-radius: 999px; }
.nav a.active { color: #fff; background: var(--purple); }

.main { padding: 12px 14px 0; max-width: 720px; margin: 0 auto; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 14px; }
.empty { text-align: center; color: var(--muted); padding: 48px 16px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.row.center { justify-content: center; }
.row.pad { padding: 0 14px 12px; margin: 0; }
.row.actions { margin-top: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; }
.field { display: block; font-size: 12px; color: var(--muted); margin-bottom: 10px; letter-spacing: .02em; }
.field input, .field select { margin-top: 4px; }
.msg { font-size: 13px; color: var(--muted); margin: 6px 0; }
.note { font-size: 12px; color: var(--muted); }
.lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.btn { background: var(--purple); color: #fff; border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 700; cursor: pointer; }
.btn.ghost { background: var(--card2); color: var(--text); border: 1px solid var(--line); font-weight: 600; }
.btn.danger { background: transparent; color: var(--bad); border: 1px solid var(--line); }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn:disabled { opacity: .4; }
.icon-btn { background: none; border: 0; font-size: 22px; color: var(--muted); padding: 2px 8px; line-height: 1; cursor: pointer; }
.icon-btn:disabled { opacity: .3; }
.tiny { background: none; border: 0; color: var(--purple); font-size: 12px; padding: 0 4px; }
.badge { background: var(--purple); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }

.block-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.block-name { font-weight: 700; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block-name .type { margin-left: 8px; font-size: 11px; color: var(--purple); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.week-nav { display: flex; align-items: center; gap: 2px; flex: none; }
@media (max-width: 440px) { .block-name .type { display: none; } }
.week-select { width: auto; padding: 6px 10px; font-size: 13px; font-weight: 600; border-radius: 999px; }

.day-chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 12px; scrollbar-width: none; }
.day-chips::-webkit-scrollbar { display: none; }
.chip { flex: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 14px; font-weight: 700; font-size: 14px; color: var(--text); text-align: left; min-width: 86px; }
.chip small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }
.chip.active { background: linear-gradient(135deg, var(--purple) 0%, var(--chip-to) 100%); border-color: transparent; color: #fff; }
.chip.active small { color: rgba(255,255,255,.8); }
.chip.complete:not(.active) { border-color: var(--ok); }
.day-head { padding-bottom: 6px; }

.card { background: var(--card); border-radius: var(--radius); margin-bottom: 12px; border: 1px solid var(--line); overflow: hidden; }
.card.pad-all { padding: 14px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; }
.card-title { min-width: 0; }
.card-right { display: flex; align-items: center; gap: 4px; flex: none; }
.presc { color: var(--purple); font-size: 13px; font-weight: 600; white-space: nowrap; }
.block-card.active { border-color: var(--purple); }

/* Day header */
.day-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0 14px; }
.icon-btn.big { font-size: 30px; padding: 0 10px; color: var(--purple); }
.day-title { flex: 1; background: none; border: 0; text-align: center; padding: 4px; display: flex; flex-direction: column; gap: 1px; }
.day-title .kicker { font-size: 11px; font-weight: 700; color: var(--purple); text-transform: uppercase; letter-spacing: .1em; }
.day-title .main { font-size: 20px; font-weight: 800; }
.day-title .sub { font-size: 13px; color: var(--muted); }

/* Exercise cards, Juggernaut-style: accent bar, name, scheme line, one row per set with a Log button */
.card.ex { border-left: 4px solid var(--purple); padding-bottom: 6px; }
.card.ex.complete { border-left-color: var(--ok); }
.card.ex .card-head { padding: 14px 10px 6px 14px; }
.card.ex h3 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.card.ex .note { margin-top: 2px; font-size: 13px; }
.set { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 14px; }
.set .n { width: 28px; height: 28px; border-radius: 50%; background: var(--card2); color: var(--purple); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.set.done .n { background: var(--ok); color: #fff; }
.set .target { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 15px; font-weight: 700; color: var(--ice); }
.set .target .result { color: var(--text); }
.set .target .lw, .set .target .e1, .set .target .cmt { font-size: 12px; font-weight: 500; color: var(--muted); }
.set .target .cmt { font-style: italic; }
.pill { background: var(--purple); color: #fff; border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 13px; min-width: 64px; }
.pill.ghost { background: var(--card2); color: var(--muted); border: 1px solid var(--line); }
.big-inputs input { font-size: 22px; font-weight: 700; text-align: center; padding: 12px 6px; }
.msg.live { color: var(--ice); font-weight: 600; min-height: 18px; }
.day-list .slot { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; color: var(--text); }
.day-list .slot.current b { color: var(--ice); }

.slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); cursor: pointer; }
.slot-main { min-width: 0; }
.slot b { font-weight: 600; }
.chev { color: var(--muted); font-size: 20px; }
.inline-title { padding: 4px 8px; width: auto; max-width: 240px; font-weight: 700; background: transparent; border-color: transparent; }
.inline-title:focus { background: var(--card2); border-color: var(--purple); }
.group { color: var(--purple); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin: 16px 0 6px; }
.build h3 { margin-bottom: 4px; }
.hist-sets { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; font-size: 13px; }
.hist-sets span { background: var(--card2); border-radius: 8px; padding: 4px 8px; }

.sheet-panel { position: fixed; inset: 0; background: var(--scrim); z-index: 10; display: flex; align-items: flex-end; }
.panel-inner { background: var(--card); width: 100%; max-width: 720px; margin: 0 auto; max-height: 90vh; overflow: auto; border-radius: 18px 18px 0 0; padding: 14px 16px calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.custom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.custom-grid label { font-size: 12px; color: var(--muted); }
.custom-grid input { margin-top: 2px; padding: 8px; font-size: 14px; }
.flag { padding: 10px 12px; border-left: 3px solid var(--warn); background: var(--card2); border-radius: 8px; margin-bottom: 8px; }
.flag.pain { border-left-color: var(--bad); }
.flag.cold { border-left-color: var(--ok); }
.flag.skipped { border-left-color: var(--purple); }
.preview h3 { margin: 12px 0 6px; color: var(--purple); }
.preview-row { padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.preview-weeks { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); margin-top: 2px; }
.preview-weeks .same { opacity: .45; }

/* Bodyweight */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile b { font-size: 20px; font-weight: 800; }
.tile small { font-size: 11px; color: var(--muted); }
.chart-card { padding: 10px 12px 6px; }
.readout { font-size: 14px; font-weight: 700; color: var(--text); padding: 2px 4px 6px; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .grid.v { stroke-dasharray: 2 4; }
.chart .tick { fill: var(--muted); font-size: 10px; }
.chart .line { fill: none; stroke: var(--ice); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--ice); stroke: var(--card); stroke-width: 2; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .focus { fill: none; stroke: var(--purple); stroke-width: 2.5; }
.nav a { padding: 7px 8px; font-size: 13px; }
.nav { gap: 2px; }
.top { gap: 8px; padding-left: 10px; padding-right: 10px; }

/* Home */
.logo-link { display: block; flex: none; line-height: 0; }
.hero { text-align: center; padding: 18px 14px; background: linear-gradient(160deg, var(--hero-from) 0%, var(--card) 70%); }
.hero-num { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.hero-sub { color: var(--muted); font-size: 14px; margin-top: 2px; }
.hero-inline { float: right; color: var(--purple); font-weight: 800; font-size: 18px; }
.clickable { cursor: pointer; }
.chart-title { font-weight: 700; font-size: 14px; margin: 4px 2px 2px; }
.chart-title .note { font-weight: 500; }
.chart .bar.planned { opacity: .3; }
.chart .bar.logged { opacity: 1; }
.chart .current-week { fill: none; stroke: var(--purple); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .7; }
.chart .line.dotted { stroke: var(--purple); stroke-dasharray: 4 4; }
.day-chips.tight { padding: 0 0 8px; }
.chip.small { padding: 5px 12px; font-size: 13px; min-width: 0; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 6px 2px 0; text-transform: capitalize; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.switch { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; font-size: 15px; }
.switch input { width: 22px; height: 22px; margin: 0; accent-color: var(--purple); }

/* Records and summary */
.pb-badge { display: inline-block; margin-left: 8px; background: var(--purple); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 2px 6px; border-radius: 999px; vertical-align: middle; }
.hist-sets span.pb { border: 1px solid var(--purple); color: var(--text); }
.rec { display: flex; gap: 10px; align-items: baseline; margin: 8px 0; font-size: 13px; color: var(--muted); }
.rec b { font-size: 22px; color: var(--ice); white-space: nowrap; }
.rec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.rec-cell { background: var(--card2); border-radius: 10px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rec-cell b { font-size: 15px; }
.rec-cell small { font-size: 10px; color: var(--muted); }
.sum-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 6px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; align-items: baseline; }
.sum-row span { text-align: right; color: var(--muted); }
.sum-row b { font-weight: 600; }
.sum-row.head { border-top: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sum-row.head b { color: var(--muted); font-weight: 600; }
.sum-row.total { border-top: 2px solid var(--purple); }
.sum-row.total span, .sum-row.current b { color: var(--ice); }
.sum-row .hot { color: var(--warn); }
.sum-row.dim { opacity: .5; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); background: var(--purple); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; opacity: 0; transition: all .2s; pointer-events: none; z-index: 20; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Windows XP (Luna) theme: beige windows, blue title bars, bevelled buttons, Tahoma ---------- */
:root[data-theme="xp"] {
  --bg: #3a6ea5;
  --card: #ece9d8;
  --card2: #ffffff;
  --line: #aca899;
  --text: #000000;
  --muted: #4d4d4d;
  --purple: #316ac5;
  --purple-soft: #0a246a;
  --ice: #0054e3;
  --ice-soft: #7f9db9;
  --ice-ink: #ffffff;
  --ok: #2a9d3a;
  --warn: #d58a00;
  --bad: #c62828;
  --radius: 3px;
  --bg-glow: #5a8fc8;
  --top-bg: #245edc;
  --top-ink: #ffffff;
  --hero-from: #ffffff;
  --chip-to: #2a5fb8;
  --scrim: rgba(0,0,0,.4);
}
:root[data-theme="xp"] body { font-family: Tahoma, Verdana, "Trebuchet MS", sans-serif; font-size: 15px; background: linear-gradient(180deg, #5a8fc8 0%, #3a6ea5 45%, #2f5e8f 100%); }
:root[data-theme="xp"] .top { background: linear-gradient(180deg, #3f8cf3 0%, #245edc 12%, #245edc 88%, #1941a5 100%); border-bottom: 1px solid #0d2f78; box-shadow: inset 0 1px 0 #6aa5ff; }
:root[data-theme="xp"] .logo { border-radius: 3px; border: 1px solid #1e3c7a; }
:root[data-theme="xp"] .nav a { color: #fff; border-radius: 3px; text-shadow: 0 1px 1px rgba(0,0,0,.5); font-weight: 700; }
:root[data-theme="xp"] .nav a.active { background: #1e52b7; box-shadow: inset 1px 1px 3px rgba(0,0,0,.6); color: #fff; }
:root[data-theme="xp"] .card { border-radius: 8px 8px 3px 3px; border: 1px solid #0831d9; background: var(--card); box-shadow: 1px 1px 0 #003c74, 0 0 0 1px #ece9d8 inset; }
:root[data-theme="xp"] .card.ex, :root[data-theme="xp"] .block-card.active { border-left: 1px solid #0831d9; }
:root[data-theme="xp"] .card-head { background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0054e3 100%); color: #fff; border-radius: 7px 7px 0 0; padding: 7px 10px 7px 12px; align-items: center; }
:root[data-theme="xp"] .card-head h3, :root[data-theme="xp"] .card-head .note, :root[data-theme="xp"] .card-head .lbl { color: #fff; text-shadow: 1px 1px 0 #0a246a; }
:root[data-theme="xp"] .card-head .icon-btn { color: #fff; background: linear-gradient(#5aa0ff, #2a5fd8); border: 1px solid #fff; border-radius: 3px; font-size: 16px; width: 24px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
:root[data-theme="xp"] .card.ex h3 { font-size: 16px; font-weight: 700; font-family: "Trebuchet MS", Tahoma, sans-serif; }
:root[data-theme="xp"] .btn, :root[data-theme="xp"] .pill, :root[data-theme="xp"] .chip, :root[data-theme="xp"] .btn.ghost, :root[data-theme="xp"] .btn.danger, :root[data-theme="xp"] .pill.ghost {
  background: linear-gradient(180deg, #ffffff 0%, #ecebe5 60%, #d6d3ce 100%); color: #000; border: 1px solid #003c74; border-radius: 3px; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #c9c7bd; font-weight: 400; text-shadow: none;
}
:root[data-theme="xp"] .btn { box-shadow: inset 0 0 0 1px #c3daf9, inset 1px 1px 0 #fff; }
:root[data-theme="xp"] .btn.danger { color: #c62828; }
:root[data-theme="xp"] .chip.active { background: #316ac5; color: #fff; border-color: #0a246a; box-shadow: none; }
:root[data-theme="xp"] .chip.active small { color: #dbe6f7; }
:root[data-theme="xp"] .chip.complete:not(.active) { border-color: #2a9d3a; }
:root[data-theme="xp"] input, :root[data-theme="xp"] select { background: #fff; border: 1px solid #7f9db9; border-radius: 0; }
:root[data-theme="xp"] .set { border-top: 1px solid #d8d5c6; }
:root[data-theme="xp"] .set .n { border-radius: 2px; background: #fff; border: 1px solid #7f9db9; color: #000; font-size: 12px; }
:root[data-theme="xp"] .set.done .n { background: #2a9d3a; border-color: #1f7a2c; color: #fff; }
:root[data-theme="xp"] .set .target { color: #0054e3; }
:root[data-theme="xp"] .badge, :root[data-theme="xp"] .pb-badge { border-radius: 2px; background: #316ac5; }
:root[data-theme="xp"] .tile, :root[data-theme="xp"] .rec-cell, :root[data-theme="xp"] .hist-sets span { border-radius: 2px; border: 1px solid #aca899; background: #fff; }
:root[data-theme="xp"] .day-title .kicker, :root[data-theme="xp"] .group, :root[data-theme="xp"] .block-name .type, :root[data-theme="xp"] .preview h3 { color: #fff; text-shadow: 1px 1px 0 #0a246a; }
:root[data-theme="xp"] .day-title .main, :root[data-theme="xp"] .day-title .sub, :root[data-theme="xp"] .page-head h2, :root[data-theme="xp"] .icon-btn.big { color: #fff; text-shadow: 1px 1px 0 #0a246a; }
:root[data-theme="xp"] .main > .msg, :root[data-theme="xp"] .empty, :root[data-theme="xp"] .schedule { color: #fff; }
:root[data-theme="xp"] .hero { background: #fff; }
:root[data-theme="xp"] .hero-num { font-family: "Trebuchet MS", Tahoma, sans-serif; color: #0a246a; }
:root[data-theme="xp"] .panel-inner { background: #ece9d8; border: 1px solid #0831d9; border-radius: 8px 8px 0 0; }
:root[data-theme="xp"] .panel-head { background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0054e3 100%); margin: -14px -16px 12px; padding: 7px 10px 7px 14px; border-radius: 7px 7px 0 0; color: #fff; }
:root[data-theme="xp"] .panel-head h2 { font-size: 15px; font-family: "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 0 #0a246a; }
:root[data-theme="xp"] .panel-head .icon-btn { color: #fff; background: linear-gradient(#e89a8a, #c43b1e); border: 1px solid #fff; border-radius: 3px; width: 24px; height: 22px; padding: 0; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
:root[data-theme="xp"] .toast { border-radius: 3px; background: #ffffe1; color: #000; border: 1px solid #000; font-weight: 400; }
:root[data-theme="xp"] .chart .line { stroke: #0054e3; }
:root[data-theme="xp"] .chart .dot { fill: #0054e3; }
:root[data-theme="xp"] .chart .focus { stroke: #c62828; }
:root[data-theme="xp"] .week-select { border-radius: 0; }

/* ---------- Game Boy theme: the four DMG greens, a pixel font, thick outlines, no curves ---------- */
:root[data-theme="gameboy"] {
  --bg: #8bac0f;
  --card: #9bbc0f;
  --card2: #8bac0f;
  --line: #306230;
  --text: #0f380f;
  --muted: #306230;
  --purple: #0f380f;
  --purple-soft: #306230;
  --ice: #0f380f;
  --ice-soft: #306230;
  --ice-ink: #9bbc0f;
  --ok: #306230;
  --warn: #306230;
  --bad: #0f380f;
  --radius: 0;
  --bg-glow: #8bac0f;
  --top-bg: #2a2a2a;
  --top-ink: #9bbc0f;
  --hero-from: #9bbc0f;
  --chip-to: #0f380f;
  --scrim: rgba(15,56,15,.6);
}
:root[data-theme="gameboy"] body { font-family: "Press Start 2P", "Courier New", monospace; font-size: 11px; line-height: 1.6; }
:root[data-theme="gameboy"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; background: repeating-linear-gradient(0deg, rgba(15,56,15,.08) 0 1px, transparent 1px 3px); }
:root[data-theme="gameboy"] h2 { font-size: 15px; }
:root[data-theme="gameboy"] h3 { font-size: 12px; line-height: 1.5; }
:root[data-theme="gameboy"] .top { background: var(--top-bg); border-bottom: 4px solid #0f380f; }
:root[data-theme="gameboy"] .top::after { content: ""; position: absolute; left: 12px; bottom: -14px; width: 6px; height: 6px; background: #c0392b; box-shadow: 0 0 4px #ff6b5b; }
:root[data-theme="gameboy"] .logo { border-radius: 0; image-rendering: pixelated; filter: grayscale(1) sepia(1) hue-rotate(50deg) saturate(2.2) brightness(.9); border: 2px solid #9bbc0f; }
:root[data-theme="gameboy"] .nav a { font-size: 9px; padding: 7px 5px; border-radius: 0; color: #9bbc0f; }
:root[data-theme="gameboy"] .nav a.active { background: #9bbc0f; color: #0f380f; }
:root[data-theme="gameboy"] .card { border: 3px solid #0f380f; border-radius: 0; box-shadow: 4px 4px 0 #306230; background: var(--card); }
:root[data-theme="gameboy"] .card.ex, :root[data-theme="gameboy"] .card.ex.complete, :root[data-theme="gameboy"] .block-card.active { border-left: 3px solid #0f380f; }
:root[data-theme="gameboy"] .card.ex.complete { box-shadow: 4px 4px 0 #0f380f; }
:root[data-theme="gameboy"] .card.ex h3 { font-size: 12px; font-weight: 400; }
:root[data-theme="gameboy"] .card-head { padding: 12px 10px 6px 12px; }
:root[data-theme="gameboy"] .note, :root[data-theme="gameboy"] .msg, :root[data-theme="gameboy"] .lbl, :root[data-theme="gameboy"] .tick, :root[data-theme="gameboy"] .field { font-size: 8px; line-height: 1.6; }
:root[data-theme="gameboy"] .btn, :root[data-theme="gameboy"] .pill, :root[data-theme="gameboy"] .chip, :root[data-theme="gameboy"] .btn.ghost, :root[data-theme="gameboy"] .btn.danger, :root[data-theme="gameboy"] .pill.ghost {
  border-radius: 0; border: 3px solid #0f380f; background: #9bbc0f; color: #0f380f; box-shadow: 3px 3px 0 #0f380f; font-weight: 400; font-size: 9px; padding: 9px 12px;
}
:root[data-theme="gameboy"] .btn, :root[data-theme="gameboy"] .pill { background: #0f380f; color: #9bbc0f; box-shadow: 3px 3px 0 #306230; }
:root[data-theme="gameboy"] .btn:active, :root[data-theme="gameboy"] .pill:active, :root[data-theme="gameboy"] .chip:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0f380f; }
:root[data-theme="gameboy"] .chip { min-width: 0; padding: 8px 10px; }
:root[data-theme="gameboy"] .chip small { font-size: 7px; color: #306230; }
:root[data-theme="gameboy"] .chip.active { background: #0f380f; color: #9bbc0f; }
:root[data-theme="gameboy"] .chip.active small { color: #8bac0f; }
:root[data-theme="gameboy"] .chip.complete:not(.active) { border-style: double; border-width: 4px; }
:root[data-theme="gameboy"] input, :root[data-theme="gameboy"] select { background: #9bbc0f; border: 3px solid #0f380f; border-radius: 0; font-size: 11px; color: #0f380f; }
:root[data-theme="gameboy"] .big-inputs input { font-size: 16px; }
:root[data-theme="gameboy"] .set { border-top: 2px dashed #306230; padding: 8px 12px; }
:root[data-theme="gameboy"] .set .n { border-radius: 0; background: #9bbc0f; border: 2px solid #0f380f; color: #0f380f; font-size: 9px; width: 24px; height: 24px; }
:root[data-theme="gameboy"] .set.done .n { background: #0f380f; color: #9bbc0f; }
:root[data-theme="gameboy"] .set .target { font-size: 10px; line-height: 1.6; }
:root[data-theme="gameboy"] .set .target .lw, :root[data-theme="gameboy"] .set .target .e1, :root[data-theme="gameboy"] .set .target .cmt { font-size: 8px; }
:root[data-theme="gameboy"] .pill { min-width: 54px; padding: 8px 10px; }
:root[data-theme="gameboy"] .badge, :root[data-theme="gameboy"] .pb-badge { border-radius: 0; background: #0f380f; color: #9bbc0f; font-size: 7px; padding: 3px 5px; }
:root[data-theme="gameboy"] .tile, :root[data-theme="gameboy"] .rec-cell, :root[data-theme="gameboy"] .hist-sets span { border-radius: 0; border: 2px solid #0f380f; background: #9bbc0f; }
:root[data-theme="gameboy"] .tile b { font-size: 12px; }
:root[data-theme="gameboy"] .tile small, :root[data-theme="gameboy"] .rec-cell small { font-size: 7px; }
:root[data-theme="gameboy"] .day-title .kicker { font-size: 8px; }
:root[data-theme="gameboy"] .day-title .main { font-size: 14px; }
:root[data-theme="gameboy"] .day-title .sub { font-size: 8px; }
:root[data-theme="gameboy"] .icon-btn { color: #0f380f; }
:root[data-theme="gameboy"] .icon-btn.big { color: #0f380f; font-size: 22px; }
:root[data-theme="gameboy"] .hero { background: #9bbc0f; }
:root[data-theme="gameboy"] .hero-num { font-size: 20px; }
:root[data-theme="gameboy"] .hero-sub { font-size: 8px; }
:root[data-theme="gameboy"] .hero-inline { font-size: 12px; }
:root[data-theme="gameboy"] .panel-inner { background: #9bbc0f; border: 3px solid #0f380f; border-bottom: 0; border-radius: 0; }
:root[data-theme="gameboy"] .panel-head h2 { font-size: 11px; }
:root[data-theme="gameboy"] .toast { border-radius: 0; background: #0f380f; color: #9bbc0f; border: 2px solid #9bbc0f; font-size: 9px; }
:root[data-theme="gameboy"] .chart .line { stroke: #0f380f; stroke-width: 3; }
:root[data-theme="gameboy"] .chart .dot { fill: #0f380f; stroke: #9bbc0f; }
:root[data-theme="gameboy"] .chart .focus { stroke: #0f380f; stroke-width: 3; stroke-dasharray: 2 2; }
:root[data-theme="gameboy"] .chart .grid { stroke: #306230; }
:root[data-theme="gameboy"] .chart .bar.planned { opacity: .35; }
:root[data-theme="gameboy"] .chart .bar { fill: #0f380f !important; }
:root[data-theme="gameboy"] .chart .current-week { stroke: #0f380f; }
:root[data-theme="gameboy"] .legend i { border-radius: 0; }
:root[data-theme="gameboy"] .slot b { font-weight: 400; font-size: 10px; }
:root[data-theme="gameboy"] .sum-row { font-size: 9px; }
:root[data-theme="gameboy"] .week-select { border-radius: 0; }
:root[data-theme="gameboy"] .switch input { accent-color: #0f380f; }
:root[data-theme="gameboy"] .group { font-size: 8px; }

/* ---------- Classic Mac OS (System 7) theme: black and white, pinstripe title bars, square checkboxes ---------- */
:root[data-theme="mac"] {
  --bg: #a8a8a8;
  --card: #ffffff;
  --card2: #ffffff;
  --line: #000000;
  --text: #000000;
  --muted: #444444;
  --purple: #000000;
  --purple-soft: #000000;
  --ice: #000000;
  --ice-soft: #888888;
  --ice-ink: #ffffff;
  --ok: #000000;
  --warn: #000000;
  --bad: #000000;
  --radius: 0;
  --bg-glow: #a8a8a8;
  --top-bg: #ffffff;
  --top-ink: #000000;
  --hero-from: #ffffff;
  --chip-to: #000000;
  --scrim: rgba(0,0,0,.35);
}
:root[data-theme="mac"] body { font-family: "Helvetica Neue", Helvetica, Geneva, Arial, sans-serif; font-size: 14px; background-color: #a8a8a8; background-image: repeating-conic-gradient(#8f8f8f 0 25%, #b4b4b4 0 50%); background-size: 4px 4px; }
:root[data-theme="mac"] .top { background: #fff; border-bottom: 1px solid #000; box-shadow: 0 1px 0 #fff, 0 2px 0 #000; }
:root[data-theme="mac"] .logo { border-radius: 0; filter: grayscale(1) contrast(1.6); border: 1px solid #000; }
:root[data-theme="mac"] .nav a { border-radius: 0; color: #000; font-weight: 400; font-size: 14px; padding: 6px 9px; }
:root[data-theme="mac"] .nav a.active { background: #000; color: #fff; }
:root[data-theme="mac"] .card { border: 1px solid #000; border-radius: 0; box-shadow: 2px 2px 0 #000; background: #fff; }
:root[data-theme="mac"] .card.ex, :root[data-theme="mac"] .card.ex.complete, :root[data-theme="mac"] .block-card.active { border-left: 1px solid #000; }
:root[data-theme="mac"] .card-head { position: relative; margin: 0; padding: 26px 10px 6px 12px; }
:root[data-theme="mac"] .card-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; border-bottom: 1px solid #000; background: repeating-linear-gradient(180deg, #000 0 1px, #fff 1px 3px); background-position: 0 3px; background-size: 100% 100%; }
:root[data-theme="mac"] .card-head::after { content: ""; position: absolute; left: 7px; top: 4px; width: 10px; height: 10px; border: 1px solid #000; background: #fff; box-shadow: 0 0 0 1px #fff; }
:root[data-theme="mac"] .card.ex h3 { font-size: 17px; font-weight: 700; letter-spacing: 0; }
:root[data-theme="mac"] .card-head .icon-btn { color: #000; }
:root[data-theme="mac"] .card.pad-all { padding-top: 14px; }
:root[data-theme="mac"] .btn, :root[data-theme="mac"] .pill, :root[data-theme="mac"] .chip, :root[data-theme="mac"] .btn.ghost, :root[data-theme="mac"] .btn.danger, :root[data-theme="mac"] .pill.ghost {
  background: #fff; color: #000; border: 1px solid #000; border-radius: 7px; box-shadow: none; font-weight: 400; padding: 7px 14px;
}
:root[data-theme="mac"] .btn { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; margin: 4px; }
:root[data-theme="mac"] .btn:active, :root[data-theme="mac"] .pill:active, :root[data-theme="mac"] .chip:active { background: #000; color: #fff; }
:root[data-theme="mac"] .chip { border-radius: 0; min-width: 0; padding: 7px 12px; }
:root[data-theme="mac"] .chip small { color: #444; }
:root[data-theme="mac"] .chip.active { background: #000; color: #fff; }
:root[data-theme="mac"] .chip.active small { color: #ccc; }
:root[data-theme="mac"] .chip.complete:not(.active) { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #000; }
:root[data-theme="mac"] input, :root[data-theme="mac"] select { background: #fff; border: 1px solid #000; border-radius: 0; box-shadow: inset 1px 1px 0 #000; color: #000; }
:root[data-theme="mac"] .set { border-top: 1px dotted #000; }
:root[data-theme="mac"] .set .n { border-radius: 0; width: 18px; height: 18px; background: #fff; border: 1px solid #000; color: #000; font-size: 11px; box-shadow: 1px 1px 0 #000; }
:root[data-theme="mac"] .set.done .n { background: #000; color: #fff; }
:root[data-theme="mac"] .set .target { color: #000; }
:root[data-theme="mac"] .badge, :root[data-theme="mac"] .pb-badge { border-radius: 0; background: #000; color: #fff; }
:root[data-theme="mac"] .tile, :root[data-theme="mac"] .rec-cell, :root[data-theme="mac"] .hist-sets span { border-radius: 0; border: 1px solid #000; background: #fff; }
:root[data-theme="mac"] .day-title .main { font-weight: 700; }
:root[data-theme="mac"] .icon-btn.big { color: #000; }
:root[data-theme="mac"] .hero { background: #fff; }
:root[data-theme="mac"] .hero-num { font-weight: 700; }
:root[data-theme="mac"] .panel-inner { background: #fff; border: 2px solid #000; border-bottom: 0; border-radius: 0; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #000; padding-top: 20px; }
:root[data-theme="mac"] .panel-head { border-bottom: 1px solid #000; padding-bottom: 8px; }
:root[data-theme="mac"] .toast { border-radius: 0; background: #fff; color: #000; border: 2px solid #000; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #000; font-weight: 400; }
:root[data-theme="mac"] .chart .line { stroke: #000; }
:root[data-theme="mac"] .chart .dot { fill: #000; stroke: #fff; }
:root[data-theme="mac"] .chart .focus { stroke: #000; stroke-dasharray: 2 2; }
:root[data-theme="mac"] .chart .grid { stroke: #999; }
:root[data-theme="mac"] .chart .bar { fill: #000 !important; }
:root[data-theme="mac"] .chart .bar.planned { opacity: .2; }
:root[data-theme="mac"] .chart .current-week { stroke: #000; }
:root[data-theme="mac"] .legend i { border-radius: 0; border: 1px solid #000; }
:root[data-theme="mac"] .sum-row.total { border-top: 2px solid #000; }
:root[data-theme="mac"] .week-select { border-radius: 0; }
:root[data-theme="mac"] .switch input { accent-color: #000; }
:root[data-theme="mac"] .slot { border-top: 1px dotted #000; }
:root[data-theme="mac"] .flag { border-left: 3px solid #000; background: #fff; border-radius: 0; box-shadow: inset 0 0 0 1px #000; }

/* ---------- iPod theme: silver body, white screen, the blue selection bar, a click wheel that works ---------- */
.wheel { display: none; }
:root[data-theme="ipod"] {
  --bg: #d9d9d9;
  --card: #ffffff;
  --card2: #f1f1f1;
  --line: #b9b9b9;
  --text: #111111;
  --muted: #6b6b6b;
  --purple: #2a6fd6;
  --purple-soft: #1b4fa6;
  --ice: #2a6fd6;
  --ice-soft: #8fb6ec;
  --ice-ink: #ffffff;
  --ok: #3aa655;
  --warn: #d8891a;
  --bad: #d13b3b;
  --radius: 6px;
  --bg-glow: #d9d9d9;
  --top-bg: #e4e4e4;
  --top-ink: #222222;
  --hero-from: #ffffff;
  --chip-to: #1b63d8;
  --scrim: rgba(0,0,0,.35);
}
:root[data-theme="ipod"] body { font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; background: linear-gradient(90deg, #cfcfcf 0%, #e9e9e9 30%, #f3f3f3 50%, #e9e9e9 70%, #cfcfcf 100%); padding-bottom: 210px; }
:root[data-theme="ipod"] .top { background: linear-gradient(180deg, #fafafa 0%, #e0e0e0 50%, #cdcdcd 51%, #dedede 100%); border-bottom: 1px solid #9a9a9a; }
:root[data-theme="ipod"] .logo { border-radius: 6px; filter: grayscale(1); border: 1px solid #999; }
:root[data-theme="ipod"] .nav a { color: #222; border-radius: 4px; font-weight: 700; }
:root[data-theme="ipod"] .nav a.active { background: linear-gradient(180deg, #6fb3ff 0%, #2a6fd6 50%, #1b5ec9 51%, #3b7fe0 100%); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); }
:root[data-theme="ipod"] .card { border: 1px solid #9a9a9a; border-radius: 6px; box-shadow: inset 0 0 0 1px #fff, 0 1px 2px rgba(0,0,0,.15); background: #fff; }
:root[data-theme="ipod"] .card.ex, :root[data-theme="ipod"] .card.ex.complete, :root[data-theme="ipod"] .block-card.active { border-left: 1px solid #9a9a9a; }
:root[data-theme="ipod"] .card.ex .card-head { background: linear-gradient(180deg, #fbfbfb 0%, #e4e4e4 100%); border-bottom: 1px solid #c4c4c4; padding: 8px 10px 8px 12px; align-items: center; }
:root[data-theme="ipod"] .card.ex h3 { font-size: 16px; font-weight: 700; }
:root[data-theme="ipod"] .card-head .note { color: #555; }
:root[data-theme="ipod"] .btn, :root[data-theme="ipod"] .pill, :root[data-theme="ipod"] .chip, :root[data-theme="ipod"] .btn.ghost, :root[data-theme="ipod"] .btn.danger, :root[data-theme="ipod"] .pill.ghost {
  background: linear-gradient(180deg, #ffffff 0%, #e6e6e6 100%); color: #111; border: 1px solid #8f8f8f; border-radius: 6px; box-shadow: inset 0 1px 0 #fff; font-weight: 600;
}
:root[data-theme="ipod"] .btn, :root[data-theme="ipod"] .pill { background: linear-gradient(180deg, #6fb3ff 0%, #2a6fd6 50%, #1b5ec9 51%, #3b7fe0 100%); color: #fff; border-color: #1b4fa6; text-shadow: 0 -1px 0 rgba(0,0,0,.3); }
:root[data-theme="ipod"] .btn.danger { color: #d13b3b; }
:root[data-theme="ipod"] .chip { min-width: 0; border-radius: 4px; }
:root[data-theme="ipod"] .chip.active { background: linear-gradient(180deg, #6fb3ff 0%, #2a6fd6 50%, #1b5ec9 51%, #3b7fe0 100%); color: #fff; border-color: #1b4fa6; text-shadow: 0 -1px 0 rgba(0,0,0,.3); }
:root[data-theme="ipod"] .chip.active small { color: #dbe9ff; }
:root[data-theme="ipod"] input, :root[data-theme="ipod"] select { background: #fff; border: 1px solid #9a9a9a; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
:root[data-theme="ipod"] .set { border-top: 1px solid #e3e3e3; padding: 8px 12px; }
:root[data-theme="ipod"] .set:nth-child(even) { background: #f4f7fc; }
:root[data-theme="ipod"] .set .n { border-radius: 4px; background: #e9e9e9; border: 1px solid #b5b5b5; color: #333; }
:root[data-theme="ipod"] .set.done .n { background: linear-gradient(180deg, #6fb3ff, #2a6fd6); border-color: #1b4fa6; color: #fff; }
:root[data-theme="ipod"] .set .target { color: #111; }
:root[data-theme="ipod"] .set .target .lw, :root[data-theme="ipod"] .set .target .e1 { color: #2a6fd6; }
:root[data-theme="ipod"] .badge, :root[data-theme="ipod"] .pb-badge { background: linear-gradient(180deg, #6fb3ff, #2a6fd6); border-radius: 4px; }
:root[data-theme="ipod"] .tile, :root[data-theme="ipod"] .rec-cell, :root[data-theme="ipod"] .hist-sets span { border-radius: 4px; border: 1px solid #c4c4c4; background: #fff; }
:root[data-theme="ipod"] .day-title .kicker { color: #2a6fd6; }
:root[data-theme="ipod"] .icon-btn.big { color: #2a6fd6; }
:root[data-theme="ipod"] .hero { background: #fff; }
:root[data-theme="ipod"] .panel-inner { background: #fff; border: 1px solid #9a9a9a; border-bottom: 0; border-radius: 10px 10px 0 0; }
:root[data-theme="ipod"] .panel-head { background: linear-gradient(180deg, #fbfbfb 0%, #e4e4e4 100%); margin: -14px -16px 12px; padding: 10px 14px; border-bottom: 1px solid #c4c4c4; border-radius: 10px 10px 0 0; }
:root[data-theme="ipod"] .panel-head h2 { font-size: 16px; }
:root[data-theme="ipod"] .toast { background: linear-gradient(180deg, #6fb3ff, #2a6fd6); color: #fff; border-radius: 6px; }
:root[data-theme="ipod"] .chart .line { stroke: #2a6fd6; }
:root[data-theme="ipod"] .chart .dot { fill: #2a6fd6; stroke: #fff; }
:root[data-theme="ipod"] .chart .focus { stroke: #1b4fa6; }
:root[data-theme="ipod"] .chart .grid { stroke: #e0e0e0; }
:root[data-theme="ipod"] .chart .bar { fill: #2a6fd6 !important; }
:root[data-theme="ipod"] .chart .current-week { stroke: #1b4fa6; }
:root[data-theme="ipod"] .legend i { border-radius: 2px; }
:root[data-theme="ipod"] .switch input { accent-color: #2a6fd6; }
:root[data-theme="ipod"] .slot { border-top: 1px solid #e3e3e3; }
/* The click wheel. MENU goes home, the skip buttons step weeks, play opens the log. */
:root[data-theme="ipod"] .wheel { display: block; position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: 176px; height: 176px; border-radius: 50%; z-index: 8; background: radial-gradient(circle at 50% 45%, #f2f2f2 0 31%, #d2d2d2 32%, #e9e9e9 60%, #cfcfcf 100%); box-shadow: inset 0 2px 4px rgba(255,255,255,.9), inset 0 -2px 4px rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.28); }
:root[data-theme="ipod"] .wheel button { position: absolute; background: none; border: 0; color: #777; font-weight: 700; font-size: 11px; letter-spacing: .08em; padding: 8px; }
:root[data-theme="ipod"] .wheel .menu { top: 8px; left: 50%; transform: translateX(-50%); }
:root[data-theme="ipod"] .wheel .prev { left: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; }
:root[data-theme="ipod"] .wheel .next { right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; }
:root[data-theme="ipod"] .wheel .play { bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 10px; }
:root[data-theme="ipod"] .wheel .centre { width: 58px; height: 58px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 50% 35%, #ffffff, #d6d6d6); box-shadow: inset 0 -1px 2px rgba(0,0,0,.2), 0 1px 1px #fff; padding: 0; }
:root[data-theme="ipod"] .wheel button:active { color: #2a6fd6; }

/* ---------- Wii theme: the channel menu. Soft white, rounded channels, sky-blue buttons, the bottom bar with round buttons ---------- */
.wiibar { display: none; }
:root[data-theme="wii"] {
  --bg: #f1f1f1;
  --card: #ffffff;
  --card2: #f4f8fb;
  --line: #d2d2d2;
  --text: #2c2c2c;
  --muted: #7a7a7a;
  --purple: #39a0f5;
  --purple-soft: #1f7dd6;
  --ice: #2a8be6;
  --ice-soft: #9cd0ff;
  --ice-ink: #ffffff;
  --ok: #5bc86a;
  --warn: #f0b23a;
  --bad: #ef6f6f;
  --radius: 18px;
  --bg-glow: #f1f1f1;
  --top-bg: #f7f7f7;
  --top-ink: #555555;
  --hero-from: #ffffff;
  --chip-to: #2a8be6;
  --scrim: rgba(60,80,100,.35);
}
:root[data-theme="wii"] body { font-family: Nunito, -apple-system, "Helvetica Neue", Arial, sans-serif; background-color: #f1f1f1; background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.035) 0 2px, transparent 2px 6px); padding-bottom: 120px; }
:root[data-theme="wii"] .top { background: #f7f7f7; border-bottom: 2px solid #e2e2e2; }
:root[data-theme="wii"] .logo { border-radius: 10px; border: 2px solid #d9d9d9; }
:root[data-theme="wii"] .nav a { color: #666; border-radius: 999px; font-weight: 800; }
:root[data-theme="wii"] .nav a.active { background: linear-gradient(180deg, #8fd0ff 0%, #39a0f5 55%, #2a8be6 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(42,139,230,.35); }
:root[data-theme="wii"] .card { border: 3px solid #dadada; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.06); }
:root[data-theme="wii"] .card.ex, :root[data-theme="wii"] .card.ex.complete, :root[data-theme="wii"] .block-card.active { border-left: 3px solid #dadada; }
:root[data-theme="wii"] .card.ex.complete { border-color: #9fe0a8; }
:root[data-theme="wii"] .card.ex .card-head { padding: 14px 12px 6px 16px; }
:root[data-theme="wii"] .card.ex h3 { font-weight: 800; color: #333; }
:root[data-theme="wii"] .btn, :root[data-theme="wii"] .pill, :root[data-theme="wii"] .chip, :root[data-theme="wii"] .btn.ghost, :root[data-theme="wii"] .btn.danger, :root[data-theme="wii"] .pill.ghost {
  background: linear-gradient(180deg, #ffffff 0%, #ededed 100%); color: #444; border: 2px solid #d4d4d4; border-radius: 999px; box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(0,0,0,.08); font-weight: 800;
}
:root[data-theme="wii"] .btn, :root[data-theme="wii"] .pill { background: linear-gradient(180deg, #8fd0ff 0%, #39a0f5 55%, #2a8be6 100%); color: #fff; border-color: #6fb8f2; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(42,139,230,.35); }
:root[data-theme="wii"] .btn.danger { color: #e05a5a; }
:root[data-theme="wii"] .chip { min-width: 0; border-radius: 16px; padding: 8px 14px; }
:root[data-theme="wii"] .chip.active { background: linear-gradient(180deg, #8fd0ff 0%, #39a0f5 55%, #2a8be6 100%); color: #fff; border-color: #6fb8f2; }
:root[data-theme="wii"] .chip.active small { color: #e6f4ff; }
:root[data-theme="wii"] .chip.complete:not(.active) { border-color: #9fe0a8; }
:root[data-theme="wii"] input, :root[data-theme="wii"] select { background: #fff; border: 2px solid #d4d4d4; border-radius: 12px; }
:root[data-theme="wii"] .set { border-top: 2px solid #f0f0f0; }
:root[data-theme="wii"] .set .n { border-radius: 50%; width: 30px; height: 30px; background: #fff; border: 2px solid #d4d4d4; color: #666; }
:root[data-theme="wii"] .set.done .n { background: linear-gradient(180deg, #8fd0ff, #2a8be6); border-color: #6fb8f2; color: #fff; }
:root[data-theme="wii"] .set .target { color: #333; }
:root[data-theme="wii"] .set .target .lw, :root[data-theme="wii"] .set .target .e1 { color: #2a8be6; }
:root[data-theme="wii"] .badge, :root[data-theme="wii"] .pb-badge { background: linear-gradient(180deg, #8fd0ff, #2a8be6); border-radius: 999px; }
:root[data-theme="wii"] .tile, :root[data-theme="wii"] .rec-cell, :root[data-theme="wii"] .hist-sets span { border-radius: 14px; border: 2px solid #e0e0e0; background: #fff; }
:root[data-theme="wii"] .day-title .kicker { color: #39a0f5; }
:root[data-theme="wii"] .day-title .main { color: #333; }
:root[data-theme="wii"] .icon-btn.big { color: #39a0f5; }
:root[data-theme="wii"] .hero { background: #fff; }
:root[data-theme="wii"] .hero-num { color: #333; }
:root[data-theme="wii"] .panel-inner { background: #fff; border: 3px solid #dadada; border-bottom: 0; border-radius: 22px 22px 0 0; }
:root[data-theme="wii"] .toast { background: linear-gradient(180deg, #8fd0ff, #2a8be6); color: #fff; }
:root[data-theme="wii"] .chart .line { stroke: #2a8be6; }
:root[data-theme="wii"] .chart .dot { fill: #2a8be6; stroke: #fff; }
:root[data-theme="wii"] .chart .focus { stroke: #1f7dd6; }
:root[data-theme="wii"] .chart .grid { stroke: #e6e6e6; }
:root[data-theme="wii"] .chart .bar { fill: #39a0f5 !important; }
:root[data-theme="wii"] .chart .current-week { stroke: #1f7dd6; }
:root[data-theme="wii"] .switch input { accent-color: #39a0f5; }
:root[data-theme="wii"] .slot { border-top: 2px solid #f0f0f0; }
/* bottom bar: round Wii button (home) on the left, the clock in the middle, round mail button (log) on the right */
:root[data-theme="wii"] .wiibar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: calc(78px + env(safe-area-inset-bottom)); padding: 0 18px env(safe-area-inset-bottom); align-items: center; justify-content: space-between; z-index: 8; background: linear-gradient(180deg, #e4f3fb 0%, #c9e6f6 100%); border-top: 3px solid #b7dcf0; border-radius: 40px 40px 0 0 / 28px 28px 0 0; box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
:root[data-theme="wii"] .wiibar button { width: 58px; height: 58px; border-radius: 50%; border: 3px solid #d4d4d4; background: radial-gradient(circle at 50% 35%, #ffffff, #e9e9e9); color: #6f6f6f; font-weight: 800; font-size: 15px; box-shadow: 0 2px 4px rgba(0,0,0,.12), inset 0 1px 0 #fff; font-family: Nunito, sans-serif; }
:root[data-theme="wii"] .wiibar button:active { background: radial-gradient(circle at 50% 35%, #d8eeff, #9fd0ff); border-color: #6fb8f2; color: #1f7dd6; }
:root[data-theme="wii"] .wiibar .clock { text-align: center; color: #6c8798; font-weight: 800; line-height: 1.2; }
:root[data-theme="wii"] .wiibar .clock b { display: block; font-size: 22px; color: #4f6b7c; }
:root[data-theme="wii"] .wiibar .clock span { font-size: 12px; }
.msg.bad { color: var(--bad); }
.day-chips.wrap { flex-wrap: wrap; overflow: visible; }

/* Readiness check-in */
.scale-row { margin: 10px 0 4px; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 4px; }
.scale-btn { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 2px; font-weight: 800; font-size: 16px; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.scale-btn small { font-size: 9px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.scale-btn.active { background: var(--purple); color: #fff; border-color: var(--purple); }
.scale-btn.active small { color: rgba(255,255,255,.85); }

/* Meals */
.row.between { justify-content: space-between; }
.macro { margin: 8px 0; }
.macro-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 3px; }
.macro-head b { color: var(--text); font-weight: 600; }
.macro-bar { height: 10px; background: var(--card2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.macro-bar.slim { height: 6px; margin-top: 6px; }
.macro-bar i { display: block; height: 100%; background: var(--purple); border-radius: 999px; transition: width .2s; }
.macro-bar i.kcal { background: var(--purple); }
.macro-bar i.p { background: var(--ice); }
.macro-bar i.c { background: var(--ok); }
.macro-bar i.f { background: var(--warn); }
.macro-bar i.over { background: var(--bad); }
.card.ex.meal .set.food-row { grid-template-columns: 26px 1fr auto; cursor: pointer; }
.card.ex.meal .set .n { width: 22px; height: 22px; font-size: 12px; }
.card.ex.meal .set .n.flex { color: var(--purple); background: transparent; border: 1px dashed var(--purple); }
.card.ex.meal .set .target .result { font-size: 15px; }
.card.ex.meal .set .target .lw { font-weight: 500; }
.pick-list { max-height: 55vh; overflow: auto; margin-top: 8px; }
.pick-list .slot { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; color: var(--text); }

/* Meal editor page */
.tiles.four { grid-template-columns: repeat(4, 1fr); }
.tiles.four .tile b { font-size: 16px; }
.item-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 10px 14px; border-top: 1px solid var(--line); align-items: center; }
.item-main { min-width: 0; grid-column: 1 / 3; }
.item-main b { font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper .step { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--text); font-size: 20px; font-weight: 700; }
.stepper input.amt { width: 76px; text-align: center; padding: 8px 4px; font-weight: 700; }
.stepper .unit { font-size: 12px; color: var(--muted); min-width: 28px; }
.item-tools { display: flex; gap: 0; justify-content: flex-end; }
.item-tools .icon-btn { font-size: 18px; padding: 4px 7px; }
.item-tools .icon-btn.danger { color: var(--bad); }
.msg.pad-all { padding: 14px; }

/* Plan against target */
.gap-grid { margin-top: 10px; font-size: 13px; }
.gap-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr; gap: 4px; padding: 5px 0; border-top: 1px solid var(--line); align-items: baseline; }
.gap-row span { text-align: right; color: var(--muted); }
.gap-row b { font-weight: 600; }
.gap-row.head { border-top: 0; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.gap-row.head span { color: var(--muted); }
.gap-row.gap span, .gap-row.gap b { color: var(--text); font-weight: 700; }
.gap-row.left span { color: var(--purple); font-weight: 600; }
.pad-x { padding: 0 14px 4px; }
.scale-to { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 6px; align-items: center; margin-top: 4px; }
.scale-to input, .scale-to select { padding: 8px; }
.slot > .row { flex-wrap: nowrap; flex: none; margin: 0; }

/* status row: protein floor, fat ceiling, calorie target */
.gap-row span.good { color: var(--ok); font-weight: 700; }
.gap-row span.bad { color: var(--bad); font-weight: 700; }
.macro-head.plain { margin: 6px 0 2px; }