/* Layout: one phone-width column, a lesson path of coins down the middle, chunky pressable buttons. */
:root {
  --bg: #F2F6F1;
  --surface: #FFFFFF;
  --surface-2: #E6EEE5;
  --ink: #12302A;
  --ink-2: #4E655E;
  --ink-3: #7A8E87;
  --line: #D3DFD4;
  --brand: #0E6E58;
  --brand-deep: #08503F;
  --brand-soft: #D7EDE5;
  --on-brand: #FFFFFF;
  --gold: #F2B630;
  --gold-deep: #B7820F;
  --gold-soft: #FCEFC7;
  --ok: #1E9C57;
  --ok-deep: #157541;
  --ok-bg: #DDF3E5;
  --bad: #D2433B;
  --bad-deep: #A3302A;
  --bad-bg: #FBE2DF;
  --lock: #CBD5CC;
  --lock-deep: #A9B6AB;
  --flame: #F27A1A;
  --art-bg: #FFFFFF;
  --ok-ink: #157541;
  --bad-ink: #A3302A;
  --gold-ink: #8C6107;
  --example-bg: #EEF5F1;
  --shadow: 0 1px 2px rgba(18, 48, 42, .06), 0 8px 24px rgba(18, 48, 42, .08);
  --scrim: rgba(10, 25, 22, .45);
  --q-teal: #0F8C74; --q-teal-soft: #DDF4EE; --q-teal-ink: #0B6B59; --q-teal-deep: #08654F;
  --q-violet: #7B4FD6; --q-violet-soft: #EEE6FC; --q-violet-ink: #5B34B0; --q-violet-deep: #5530A8;
  --q-blue: #2C73D2; --q-blue-soft: #E1EDFB; --q-blue-ink: #1D56A3; --q-blue-deep: #1C4F96;
  --q-coral: #E0603A; --q-coral-soft: #FDE9E2; --q-coral-ink: #B4441F; --q-coral-deep: #A9401F;
  --q-accent: var(--brand);
  /* 0.12 colors: the second brand color (gradients), the gradient colors' images, the swatch */
  --brand-2: #0B7480; --brand-img: none; --mark-img: none; --mark-fill: currentColor;
  --sw-img: linear-gradient(135deg, var(--brand) 35%, var(--brand-2));

  --font-display: 'Fredoka', 'Rubik', 'Arial Hebrew', system-ui, sans-serif;
  --font-body: 'Assistant', 'Heebo', 'Arial Hebrew', system-ui, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --nav-h: 64px;
  --legal-h: 30px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1714;
    --surface: #14221E;
    --surface-2: #1C2E29;
    --ink: #E7F1EC;
    --ink-2: #A9BDB5;
    --ink-3: #7C9188;
    --line: #26392F;
    --brand: #23A583;
    --brand-deep: #157A5F;
    --brand-soft: #112E27; /* 0.12: was #173A31, brand on it was 4.02:1 */
    --brand-2: #2BB3A6;
    --on-brand: #04120E;
    --gold: #F5C04A;
    --gold-deep: #B88618;
    --gold-soft: #3A2F12;
    --ok: #35C274;
    --ok-deep: #1F8A50;
    --ok-bg: #12321F;
    --bad: #EE6A61;
    --bad-deep: #B2433C;
    --bad-bg: #3A1816;
    --lock: #2A3A35;
    --lock-deep: #1E2B27;
    --flame: #FF9440;
    --art-bg: #E9F1EC;
    --ok-ink: #35C274;
    --bad-ink: #EE6A61;
    --gold-ink: #F5C04A;
    --example-bg: #1A2C27;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --scrim: rgba(0, 0, 0, .6);
    --q-teal: #2BB394; --q-teal-soft: #12332C; --q-teal-ink: #5FD3B6; --q-teal-deep: #1C7F69;
    --q-violet: #9B78F0; --q-violet-soft: #2A2140; --q-violet-ink: #BCA3FF; --q-violet-deep: #6A4BB8;
    --q-blue: #4B92F0; --q-blue-soft: #15283F; --q-blue-ink: #8DB9F7; --q-blue-deep: #2F64AD;
    --q-coral: #F07C57; --q-coral-soft: #3A1E15; --q-coral-ink: #FFA586; --q-coral-deep: #B2533A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C1714;
  --surface: #14221E;
  --surface-2: #1C2E29;
  --ink: #E7F1EC;
  --ink-2: #A9BDB5;
  --ink-3: #7C9188;
  --line: #26392F;
  --brand: #23A583;
  --brand-deep: #157A5F;
  --brand-soft: #112E27;
  --brand-2: #2BB3A6;
  --on-brand: #04120E;
  --gold: #F5C04A;
  --gold-deep: #B88618;
  --gold-soft: #3A2F12;
  --ok: #35C274;
  --ok-deep: #1F8A50;
  --ok-bg: #12321F;
  --bad: #EE6A61;
  --bad-deep: #B2433C;
  --bad-bg: #3A1816;
  --lock: #2A3A35;
  --lock-deep: #1E2B27;
  --flame: #FF9440;
  --art-bg: #E9F1EC;
  --ok-ink: #35C274;
  --bad-ink: #EE6A61;
  --gold-ink: #F5C04A;
  --example-bg: #1A2C27;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --scrim: rgba(0, 0, 0, .6);
  --q-teal: #2BB394; --q-teal-soft: #12332C; --q-teal-ink: #5FD3B6; --q-teal-deep: #1C7F69;
  --q-violet: #9B78F0; --q-violet-soft: #2A2140; --q-violet-ink: #BCA3FF; --q-violet-deep: #6A4BB8;
  --q-blue: #4B92F0; --q-blue-soft: #15283F; --q-blue-ink: #8DB9F7; --q-blue-deep: #2F64AD;
  --q-coral: #F07C57; --q-coral-soft: #3A1E15; --q-coral-ink: #FFA586; --q-coral-deep: #B2533A;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; color: var(--ink-3); }
.eyebrow svg { width: 14px; height: 14px; vertical-align: -2px; margin-inline-end: 2px; }
.fine { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.spacer { flex: 1; }
.link { border: 0; background: none; padding: 0; color: var(--brand); font-weight: 700; text-decoration: underline; cursor: pointer; font-size: inherit; }

#app {
  direction: rtl;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.gutter {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- Buttons ---------- */
.btn {
  --b: var(--brand);
  --b-deep: var(--brand-deep);
  --b-ink: var(--on-brand);
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--r-md);
  background: var(--b);
  color: var(--b-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .01em;
  padding: 14px 18px;
  box-shadow: 0 4px 0 var(--b-deep);
  cursor: pointer;
  transition: transform .06s ease, box-shadow .06s ease;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--b-deep); }
.btn:disabled, .btn.gold:disabled, .btn.ok:disabled, .btn.bad:disabled { --b: var(--lock); --b-deep: var(--lock-deep); --b-ink: var(--ink-3); cursor: default; }
.btn.ok { --b: var(--ok); --b-deep: var(--ok-deep); --b-ink: #fff; }
.btn.bad { --b: var(--bad); --b-deep: var(--bad-deep); --b-ink: #fff; }
.btn.gold { --b: var(--gold); --b-deep: var(--gold-deep); --b-ink: #2A1E00; }
.btn.ghost { --b: var(--surface); --b-deep: var(--line); --b-ink: var(--ink); border: 2px solid var(--line); }
.btn.text { background: none; box-shadow: none; color: var(--ink-2); padding: 10px; }

.icon-btn {
  border: 0; background: none; padding: 8px; border-radius: 12px; cursor: pointer;
  color: var(--ink-3); display: grid; place-items: center; flex: none;
}
.icon-btn svg { width: 26px; height: 26px; }
.icon-btn:disabled { opacity: .3; cursor: default; }

/* ---------- Top stats bar ---------- */
.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
  border-bottom: 2px solid var(--line);
}
.brandmark { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--brand); letter-spacing: -.01em; }
.stats { display: flex; gap: 4px; align-items: center; }
.stat {
  display: flex; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer;
  padding: 6px 8px; border-radius: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums;
}
.stat:hover { background: var(--surface-2); }
.stat svg { width: 22px; height: 22px; }
.stat.flame { color: var(--flame); }
.stat.flame.off { color: var(--ink-3); }
.stat.flame.off > svg { filter: grayscale(1); }
.stat.xp { color: var(--gold-ink); }
.stat.xp svg { color: var(--gold); }
.goal-ring .track { stroke: var(--line); }
.goal-ring .fill { stroke: var(--brand); transition: stroke-dashoffset .6s ease; }

/* ---------- Main scroll area ---------- */
.screen { flex: 1; padding-bottom: calc(var(--nav-h) + var(--legal-h) + 24px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Rank strip ---------- */
.rank-strip {
  width: 100%; margin-top: 16px; border: 2px solid var(--line); background: var(--surface);
  border-radius: var(--r-md); padding: 10px 12px; cursor: pointer; text-align: right;
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "badge txt" "bar bar"; gap: 6px 10px; align-items: center;
}
.rank-strip .rank-badge { grid-area: badge; }
.rank-strip .rank-txt { grid-area: txt; }
.rank-strip .bar { grid-area: bar; }
.rank-badge { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); }
.rank-badge svg { width: 20px; height: 20px; }
.rank-badge.big { width: 56px; height: 56px; border-radius: 16px; }
.rank-badge.big svg { width: 32px; height: 32px; }
.rank-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rank-txt b { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.rank-txt span { font-size: 13.5px; color: var(--ink-3); }
.nudge { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 15px; }
.nudge svg { width: 20px; height: 20px; flex: none; }
.nudge.warn { background: var(--gold-soft); color: var(--gold-ink); }
.nudge.warn svg { color: var(--flame); }
.bar { display: block; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .5s ease; }
.bar.gold i { background: var(--gold); }

/* ---------- Path ---------- */
.unit { padding-block: 22px 8px; }
.unit-banner {
  width: 100%; border: 0; cursor: pointer; text-align: right;
  border-radius: var(--r-lg);
  background: var(--u, var(--brand));
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 0 var(--u-deep, var(--brand-deep));
  overflow: hidden;
}
.unit-banner:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--u-deep, var(--brand-deep)); }
.unit-banner .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.unit-banner .eyebrow { color: #fff; opacity: .85; }
.unit-banner h2 { font-size: 22px; margin-top: 2px; }
.unit-banner .meta { font-size: 14px; opacity: .9; margin-top: 4px; font-variant-numeric: tabular-nums; }
.unit-banner .ubar { display: block; height: 6px; margin-top: 8px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; max-width: 160px; }
.unit-banner .ubar i { display: block; height: 100%; background: #fff; border-radius: 999px; }
.unit-banner .art {
  width: 64px; height: 64px; flex: none; border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 38px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}
.unit-banner .art.pic { width: 116px; height: 86px; background: var(--art-bg); padding: 6px; }
.unit-banner .art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.u1 { --u: #0E6E58; --u-deep: #08503F; }
.u2 { --u: #C2700F; --u-deep: #8E5009; }
.u3 { --u: #2F6FB3; --u-deep: #1F4F84; }
.u4 { --u: #7A4FB5; --u-deep: #573686; }
.u5 { --u: #0F8A8A; --u-deep: #0A6363; }
.u6 { --u: #C2453D; --u-deep: #8F2E28; }
.u7 { --u: #4F5DAA; --u-deep: #37427D; }
.u8 { --u: #3D6B2E; --u-deep: #2A4C1F; }
.u9 { --u: #A63D6B; --u-deep: #772A4C; }

.path { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-block: 26px 10px; }
.node-wrap { position: relative; transform: translateX(var(--dx, 0)); }
.node-wrap.current { margin-top: 46px; }
.node {
  width: 74px; height: 70px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid; place-items: center;
  background: var(--lock);
  color: var(--ink-3);
  box-shadow: 0 7px 0 var(--lock-deep);
  transition: transform .08s ease, box-shadow .08s ease;
}
.node svg { width: 32px; height: 32px; }
.node:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--lock-deep); }
.node.done { background: var(--gold); color: #5A3D00; box-shadow: 0 7px 0 var(--gold-deep); }
.node.done:active { box-shadow: 0 1px 0 var(--gold-deep); }
.node.current { position: relative; background: var(--u, var(--brand)); color: #fff; box-shadow: 0 7px 0 var(--u-deep, var(--brand-deep)); }
.node.current:active { box-shadow: 0 1px 0 var(--u-deep, var(--brand-deep)); }
.node.current::before {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  border: 4px solid var(--u, var(--brand)); opacity: .28; pointer-events: none;
  animation: pulse 1.8s ease-in-out infinite;
}
.start-tip {
  position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  background: var(--surface); color: var(--u, var(--brand));
  border: 2px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 6px 14px; border-radius: 12px; white-space: nowrap; pointer-events: none;
  animation: bob 2s ease-in-out infinite;
}
.start-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; margin-left: -7px;
  border: 7px solid transparent; border-top-color: var(--line);
}
.node-label { text-align: center; font-size: 13px; color: var(--ink-2); margin-top: 12px; max-width: 110px; line-height: 1.25; }
.unit-end { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; font-weight: 700; padding-top: 6px; }
.unit-end svg { width: 22px; height: 22px; }
.unit-end.won { color: var(--gold-ink); }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .28; } 50% { transform: scale(1.08); opacity: .12; } }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
.course-end { text-align: center; color: var(--ink-3); padding-block: 26px; font-size: 15px; }

/* ---------- Bottom nav ---------- */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  background: var(--surface);
  border-top: 2px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.nav-inner { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); height: var(--nav-h); }
.nav button {
  border: 0; background: none; cursor: pointer; color: var(--ink-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 12px; font-weight: 700;
}
.nav .ic { position: relative; display: grid; }
.nav button svg { width: 26px; height: 26px; }
.nav .badge {
  position: absolute; top: -6px; left: -10px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--bad); color: #fff; font-style: normal; font-size: 11px; line-height: 18px; text-align: center;
}
.nav button[aria-current="page"] { color: var(--brand); }

/* ---------- Bottom sheet ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 20; animation: fade .2s ease; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  max-width: 480px; margin: 0 auto;
  max-height: 88vh; overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding-block: 22px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 14px;
  animation: up .22s ease;
  direction: rtl;
}
.sheet h3 { font-size: 24px; }
.sheet .lead { color: var(--ink-2); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); color: var(--ink-2); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 600; }
.chip svg { width: 16px; height: 16px; }
.chip.gold { background: var(--gold-soft); color: var(--gold-ink); }
.chip.gold svg { color: var(--gold); }
.chip.ok { background: var(--ok-bg); color: var(--ok-ink); }
.sheet .row { display: flex; gap: 10px; }
.sheet .row > * { flex: 1; }
.lock-note { display: flex; gap: 8px; align-items: center; color: var(--ink-3); font-size: 15px; }
.lock-note svg { width: 18px; height: 18px; flex: none; }
.lesson-list { display: flex; flex-direction: column; gap: 8px; }
.lesson-row {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: right; cursor: pointer;
  border: 2px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 10px 12px;
}
.lesson-row > svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.lesson-row .dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--lock); color: var(--ink-3); }
.lesson-row .dot svg { width: 18px; height: 18px; }
.lesson-row.done .dot { background: var(--gold); color: #5A3D00; }
.lesson-row.current .dot { background: var(--brand); color: #fff; }
.lesson-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.lesson-row .t span { font-size: 14px; color: var(--ink-3); }
.rules { display: flex; flex-direction: column; }
.rules li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.rules li:last-child { border-bottom: 0; }
.rules b { font-family: var(--font-display); font-weight: 600; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.ladder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.ladder li { display: flex; justify-content: space-between; border-radius: var(--r-sm); background: var(--surface-2); padding: 6px 10px; font-size: 14px; color: var(--ink-2); }
.ladder li span { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.ladder li.past { background: var(--gold-soft); color: var(--gold-ink); }
.ladder li.me { background: var(--gold); color: #2A1E00; }
.ladder li.me span { color: #2A1E00; }
.goal-big { display: flex; align-items: center; gap: 14px; }
.goal-big b { font-family: var(--font-display); font-weight: 600; font-size: 24px; display: block; font-variant-numeric: tabular-nums; }
.goal-big span { color: var(--ink-3); font-size: 15px; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Lesson player ---------- */
.player, .notes { min-height: 100%; display: flex; flex-direction: column; }
.player-top { display: flex; align-items: center; gap: 4px; padding-block: 12px 6px; }
.player-top .progress { margin-inline-start: 6px; }
.progress { flex: 1; height: 16px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.progress > i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--ok);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12), inset 0 4px 0 rgba(255, 255, 255, .25);
  transition: width .35s ease;
}
.combo { display: flex; align-items: center; gap: 2px; font-family: var(--font-display); font-weight: 600; color: var(--flame); font-size: 16px; min-width: 40px; justify-content: center; }
.combo svg { width: 18px; height: 18px; }

.stage { flex: 1; padding-block: 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--brand); }
.kicker.review { color: var(--gold-ink); }
.q-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.peek { display: inline-flex; align-items: center; gap: 5px; border: 0; background: var(--surface-2); color: var(--ink-2); border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 700; cursor: pointer; flex: none; }
.peek svg { width: 15px; height: 15px; }
.explain-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 12px;
  animation: slidein .25s ease;
}
.explain-card.flat { animation: none; }
.explain-card h2 { font-size: 25px; }
.explain-card p { font-size: 18px; line-height: 1.7; color: var(--ink); }
.explain-card p, .example p, .peek-item p { white-space: pre-line; }
.explain-card .lead-line { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.45; }
.peek-item .lead-line { font-weight: 700; color: var(--ink); }
.example { background: var(--example-bg); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; border-inline-start: 4px solid var(--brand); }
.example p { font-size: 16px; line-height: 1.6; }
.dots { display: flex; gap: 6px; justify-content: center; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--brand); width: 22px; border-radius: 999px; }

.scenario { display: flex; gap: 10px; align-items: flex-start; background: var(--example-bg); border-radius: var(--r-md); padding: 12px 14px; }
.scenario svg { width: 22px; height: 22px; color: var(--brand); flex: none; margin-top: 2px; }
.scenario p { font-size: 16.5px; line-height: 1.55; }
.q-prompt { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.35; animation: slidein .25s ease; }
.options { display: flex; flex-direction: column; gap: 10px; }
.options.tf { flex-direction: row; }
.options.tf .opt { flex: 1; justify-content: center; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 20px; padding-block: 22px; }
.opt {
  display: flex; align-items: center; gap: 12px; text-align: right;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 13px 14px;
  font-size: 16.5px; line-height: 1.4;
  box-shadow: 0 3px 0 var(--line);
  cursor: pointer;
  transition: transform .06s, box-shadow .06s, border-color .12s, background .12s;
}
.opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.opt .key {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  border: 2px solid var(--line); color: var(--ink-3);
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}
.opt.sel { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 3px 0 var(--brand); }
.opt.sel .key { border-color: var(--brand); color: var(--brand); }
.opt.right { border-color: var(--ok); background: var(--ok-bg); box-shadow: 0 3px 0 var(--ok); }
.opt.right .key { border-color: var(--ok); color: var(--ok); }
.opt.wrong { border-color: var(--bad); background: var(--bad-bg); box-shadow: 0 3px 0 var(--bad); animation: shake .35s; }
.opt.wrong .key { border-color: var(--bad); color: var(--bad); }
.opt:disabled { cursor: default; }

.num-wrap {
  display: flex; align-items: center; gap: 10px; direction: ltr;
  border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  padding: 6px 16px; box-shadow: 0 3px 0 var(--line);
}
.num-wrap:focus-within { border-color: var(--brand); box-shadow: 0 3px 0 var(--brand); }
.num-wrap.right { border-color: var(--ok); background: var(--ok-bg); box-shadow: 0 3px 0 var(--ok); }
.num-wrap.wrong { border-color: var(--bad); background: var(--bad-bg); box-shadow: 0 3px 0 var(--bad); }
.num {
  flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 30px; padding: 6px 0; text-align: left;
  font-variant-numeric: tabular-nums;
}
.num::placeholder { color: var(--ink-3); }
.num-wrap .unit { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--ink-3); }
.hint { font-size: 14px; color: var(--ink-3); }
.hint.center { text-align: center; }

.match { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; }
.match .col { display: flex; flex-direction: column; gap: 10px; }
.tile-btn {
  min-height: 62px; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  box-shadow: 0 3px 0 var(--line); padding: 8px 10px; font-size: 15px; line-height: 1.3; cursor: pointer; text-align: center;
  transition: transform .06s, box-shadow .06s, border-color .12s, background .12s, opacity .2s;
}
.match .col:first-child .tile-btn { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.tile-btn.sel { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 3px 0 var(--brand); }
.tile-btn.wrong { border-color: var(--bad); background: var(--bad-bg); box-shadow: 0 3px 0 var(--bad); animation: shake .35s; }
.tile-btn.matched { border-color: var(--ok); background: var(--ok-bg); box-shadow: none; opacity: .55; cursor: default; }

.player-foot {
  position: sticky; bottom: 0;
  padding-block: 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 2px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
  transition: background .15s;
}
.player-foot.ok { background: var(--ok-bg); border-color: transparent; }
.player-foot.bad { background: var(--bad-bg); border-color: transparent; }
.verdict { display: flex; gap: 12px; align-items: flex-start; animation: up .2s ease; }
.verdict .badge { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface); }
.verdict .badge svg { width: 24px; height: 24px; }
.player-foot.ok .verdict { color: var(--ok-ink); }
.player-foot.bad .verdict { color: var(--bad-ink); }
.verdict h3 { font-size: 21px; display: flex; align-items: center; gap: 8px; }
.verdict .gain { font-size: 15px; background: var(--gold); color: #2A1E00; border-radius: 999px; padding: 1px 9px; }
.verdict p { color: var(--ink); font-size: 16px; margin-top: 2px; }
.verdict .ans { font-weight: 700; }

.peek-item { border-bottom: 1px solid var(--line); padding-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.peek-item p { color: var(--ink-2); }
.peek-item .ex { font-size: 15px; background: var(--example-bg); border-radius: var(--r-sm); padding: 8px 10px; }

@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@keyframes slidein { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Notes ---------- */
.notes-title { display: flex; flex-direction: column; line-height: 1.25; }
.notes-title b { font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.source { font-size: 13px; color: var(--ink-3); }
/* the official page behind a fact: under the explanation, and listed in the notes */
.q-src, .verdict .q-src { margin-top: 6px; }
.q-src a { display: inline-flex; align-items: flex-start; gap: 6px; padding-block: 6px; font-size: 14px; font-weight: 600; line-height: 1.4;
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.q-src svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.src-list { display: flex; flex-direction: column; gap: 2px; }
.src-list .q-src { margin-top: 0; }

/* ---------- Lesson complete ---------- */
.done-wrap { min-height: 100%; display: flex; flex-direction: column; padding-block: 24px calc(20px + env(safe-area-inset-bottom, 0px)); gap: 16px; }
.done-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.done-hero h1 { font-size: 30px; color: var(--gold-ink); }
.done-hero p { color: var(--ink-2); }
.done-art { width: 100%; max-width: 300px; background: var(--art-bg); border-radius: var(--r-lg); padding: 10px; }
.done-art img { display: block; width: 100%; height: auto; max-height: 160px; object-fit: contain; }
.coin {
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE08A, var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 6px 0 var(--gold-deep), inset 0 0 0 6px rgba(255, 255, 255, .25);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 38px; color: #5A3D00;
  animation: pop .5s cubic-bezier(.2, 1.6, .4, 1);
}
.coin.small { width: 72px; height: 72px; font-size: 26px; margin-top: -40px; }
@keyframes pop { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { border: 2px solid var(--line); border-radius: var(--r-md); overflow: hidden; text-align: center; background: var(--surface); }
.tile .t-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; padding: 4px; color: #fff; }
.tile .t-val { font-family: var(--font-display); font-weight: 600; font-size: 22px; padding: 8px 4px; font-variant-numeric: tabular-nums; }
.tile.xp .t-label { background: var(--gold-deep); }
.tile.acc .t-label { background: var(--ok-deep); }
.tile.time .t-label { background: var(--brand-deep); }
.progress-row { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.progress-row .bar { flex: 1; }

.takeaway { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.takeaway.remember { background: var(--gold-soft); border-color: transparent; }
.takeaway.remember p { font-family: var(--font-display); font-weight: 500; font-size: 19px; }

/* ---------- Missions ---------- */
.mission-card {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: right; cursor: pointer;
  border: 2px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 12px 14px;
  box-shadow: 0 3px 0 var(--line);
}
.mission-card:active { transform: translateY(3px); box-shadow: none; }
.mission-card > svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.mission-card .m-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand); }
.mission-card .m-ic svg { width: 26px; height: 26px; }
.mission-card .m-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.mission-card b { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.mission-card .m-meta { display: flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--ink-3); }
.mission-card .m-meta svg { width: 14px; height: 14px; }
.mission-card.big { border-color: var(--brand); box-shadow: 0 3px 0 var(--brand); }
.mission-card.done .m-ic { background: var(--ok-bg); color: var(--ok); }
.mission-card.done b { color: var(--ink-2); }
.m-steps { display: flex; flex-direction: column; gap: 8px; counter-reset: s; }
.m-step { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; border: 2px solid var(--line); border-radius: var(--r-md); padding: 12px; }
.m-step input { width: 22px; height: 22px; accent-color: var(--brand); flex: none; margin: 2px 0 0; }
.m-step:has(input:checked) { border-color: var(--ok); background: var(--ok-bg); }
.m-step:has(input:checked) span { color: var(--ink-2); }
.m-done-note { display: flex; gap: 8px; align-items: flex-start; color: var(--gold-ink); font-weight: 600; font-size: 15px; }
.m-done-note svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.m-summary { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n l" "bar bar"; gap: 6px 10px; align-items: baseline; }
.m-summary b { grid-area: n; font-family: var(--font-display); font-weight: 600; font-size: 26px; font-variant-numeric: tabular-nums; }
.m-summary span:not(.bar) { grid-area: l; color: var(--ink-3); }
.m-summary .bar { grid-area: bar; }
.m-list { display: flex; flex-direction: column; gap: 10px; }
.sec { font-size: 18px; margin-top: 4px; }

/* ---------- Welcome ---------- */
.welcome { min-height: 100%; display: flex; flex-direction: column; padding-block: 28px calc(24px + env(safe-area-inset-bottom, 0px)); gap: 18px; }
.welcome .logo { font-family: var(--font-display); font-weight: 700; font-size: 52px; color: var(--brand); line-height: 1; }
.welcome .tag { font-size: 20px; color: var(--ink-2); max-width: 26ch; }
.welcome .lead { color: var(--ink-2); }
.welcome .back-top { align-self: flex-start; margin-inline-start: -8px; }
.welcome-art { border-radius: var(--r-lg); overflow: hidden; background: var(--art-bg); padding: 14px 14px 6px; border: 2px solid var(--line); }
.welcome-art img { display: block; width: 100%; height: auto; max-height: 190px; object-fit: contain; }
.promises { display: flex; flex-direction: column; gap: 10px; }
.promises li { display: flex; flex-direction: column; border-inline-start: 4px solid var(--gold); padding-inline-start: 12px; line-height: 1.35; }
.promises b { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.promises span { color: var(--ink-2); font-size: 15px; }
.goal-pick { display: flex; flex-direction: column; gap: 10px; }
.goal-opt { display: flex; justify-content: space-between; align-items: center; text-align: right; }
.goal-opt > span:first-child { display: flex; flex-direction: column; line-height: 1.2; }
.goal-opt b { font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.goal-opt small { font-family: var(--font-body); font-weight: 600; font-size: 14px; opacity: .8; }
.goal-opt .note { font-family: var(--font-body); font-weight: 600; font-size: 15px; opacity: .8; }

/* ---------- Pages ---------- */
.page { padding-block: 22px; display: flex; flex-direction: column; gap: 16px; }
.page > h1 { font-size: 28px; }
.page > .sub { color: var(--ink-2); margin-top: -8px; }
.card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.card.tight { padding: 12px 16px; gap: 8px; }
.card h2 { font-size: 20px; }
.card p { color: var(--ink-2); }
.rank-card { flex-direction: row; align-items: center; gap: 14px; text-align: right; cursor: pointer; width: 100%; }
.rank-card .rank-txt { flex: 1; gap: 4px; }
.rank-card .rank-txt b { font-size: 24px; }
.rank-card .bar { margin-top: 4px; }
.empty { text-align: center; color: var(--ink-3); padding: 8px 8px 16px; }
.empty-art { background: var(--art-bg); border-radius: var(--r-md); padding: 12px; }
.empty-art img { display: block; width: 100%; height: auto; max-height: 180px; object-fit: contain; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-box { border: 2px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: flex; gap: 10px; align-items: center; background: var(--surface); }
.stat-box svg { width: 28px; height: 28px; flex: none; }
.stat-box b { font-family: var(--font-display); font-weight: 600; font-size: 22px; display: block; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-box span { font-size: 13px; color: var(--ink-3); }
.week > svg { width: 100%; height: auto; display: block; }
.week .wbar { fill: var(--brand); }
.week .wbar.met { fill: var(--gold); }
.week .wbar.zero { fill: var(--surface-2); }
.week .goal-line { stroke: var(--ink-3); stroke-dasharray: 4 4; }
.week .lbl { fill: var(--ink-3); font-size: 12px; font-family: var(--font-body); }
.week .val { fill: var(--ink-2); font-size: 11px; font-family: var(--font-body); font-weight: 700; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg button { border: 2px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 10px 4px; cursor: pointer; font-weight: 700; line-height: 1.25; }
.seg button small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; }
.seg button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.switch { width: 52px; height: 30px; border-radius: 999px; border: 0; background: var(--lock); position: relative; cursor: pointer; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: right .15s; }
.switch[aria-checked="true"] { background: var(--brand); }
.switch[aria-checked="true"]::after { right: 25px; }
.mistake-list { display: flex; flex-direction: column; gap: 8px; }
.mistake-list li { font-size: 15px; color: var(--ink-2); border-inline-start: 3px solid var(--bad); padding-inline-start: 10px; }

canvas.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 30; width: 100%; height: 100%; }

/* ---------- v0.5: fixed disclaimer ---------- */
.legal-bar {
  position: fixed; left: 0; right: 0; z-index: 9;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  max-width: 480px; margin: 0 auto; height: var(--legal-h);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-top: 1px solid var(--line); background: var(--bg); color: var(--ink-3);
  font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0 12px;
}
.legal-bar svg { width: 14px; height: 14px; flex: none; }
.legal-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legal-line {
  align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; background: none; color: var(--ink-3); font-size: 12.5px; line-height: 1.4; text-align: center;
  padding: 4px 8px; cursor: pointer;
}
.legal-line svg { width: 14px; height: 14px; flex: none; }
.fine.center { text-align: center; }
a.btn { text-align: center; text-decoration: none; }

/* ---------- v0.5: home cards ---------- */
.screen > .resume-card, .screen > .repair-card, .screen > .install-card, .screen > .reminder-card { margin-top: 16px; }
.resume-card {
  width: 100%; border: 0; cursor: pointer; text-align: right;
  display: flex; align-items: center; gap: 14px;
  border-radius: var(--r-lg); padding: 14px 16px;
  background: linear-gradient(135deg, var(--u, var(--brand)), var(--u-deep, var(--brand-deep)));
  color: #fff; box-shadow: 0 4px 0 var(--u-deep, var(--brand-deep));
  animation: up .3s ease;
}
.resume-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--u-deep, var(--brand-deep)); }
.resume-card .r-ic { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--u, var(--brand)); display: grid; place-items: center; flex: none; }
.resume-card .r-ic svg { width: 24px; height: 24px; margin-inline-start: -3px; }
.resume-card .r-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.resume-card .eyebrow { color: #fff; opacity: .85; }
.resume-card b { font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.resume-card .bar { height: 8px; margin-top: 6px; background: rgba(255, 255, 255, .25); }
.resume-card .bar i { background: #fff; }
.rc-head { display: flex; gap: 12px; align-items: flex-start; }
.rc-head > div { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.rc-head b { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.rc-head span:not(.rc-ic) { color: var(--ink-2); font-size: 15px; }
.rc-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand); }
.rc-ic svg { width: 26px; height: 26px; }
.repair-card { border-color: var(--flame); background: linear-gradient(160deg, var(--gold-soft), var(--surface) 70%); }
.repair-card .rc-ic { background: var(--flame); color: #fff; animation: pulse-ic 1.6s ease-in-out infinite; }
@keyframes pulse-ic { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.install-card .row, .reminder-card .row, .transfer-card .row, .transfer-box .row { display: flex; gap: 10px; }
.install-card .row > *, .reminder-card .row > *, .transfer-card .row > *, .transfer-box .row > * { flex: 1; }
.transfer-box { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--brand-soft); }
.transfer-box p { font-size: 15px; line-height: 1.45; }
.card.opener { background: var(--brand-soft); border-color: transparent; gap: 8px; }
.card.opener h2 { font-size: 19px; color: var(--brand); }
.card.opener .lead { font-size: 15.5px; }
.sheet .code-box, .sheet .copy-box { font-size: 14px; word-break: break-all; }
.sheet .code-box { font-family: ui-monospace, Menlo, Consolas, monospace; direction: ltr; text-align: left; }
.fine.bad { color: var(--bad); font-weight: 700; }
.reminder-card .rc-ic { background: var(--gold-soft); color: var(--flame); }
.pilot-bar {
  width: 100%; border: 0; cursor: pointer; text-align: right;
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--r-md); padding: 11px 14px;
  background: linear-gradient(90deg, var(--q-violet), var(--q-blue)); color: #fff;
  font-size: 15px; box-shadow: 0 3px 0 var(--q-violet-deep);
}
.pilot-bar:active { transform: translateY(3px); box-shadow: none; }
.pilot-bar svg { width: 22px; height: 22px; flex: none; }
.pilot-bar span { flex: 1; }
/* v0.8: invite friends */
.invite-bar {
  width: 100%; border: 0; cursor: pointer; text-align: right;
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--r-md); padding: 11px 14px;
  background: linear-gradient(90deg, var(--brand), var(--q-teal)); color: #fff;
  font-size: 15px; box-shadow: 0 3px 0 var(--brand-deep);
}
.invite-bar:active { transform: translateY(3px); box-shadow: none; }
.invite-bar svg { width: 22px; height: 22px; flex: none; }
.invite-bar span { flex: 1; }
.btn svg { width: 20px; height: 20px; vertical-align: -4px; margin-inline-end: 6px; }
/* v0.8: discharge calculator */
.calc { display: flex; flex-direction: column; gap: 14px; }
.calc-field { display: flex; flex-direction: column; gap: 8px; }
.calc .seg button small { font-size: 11.5px; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 18px; }
.stepper button {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: var(--brand);
  font-size: 26px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 var(--line); transition: transform .06s, box-shadow .06s;
}
.stepper button:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.stepper button:disabled { color: var(--ink-3); cursor: default; box-shadow: none; }
.stepper b { font-family: var(--font-display); font-weight: 600; font-size: 34px; min-width: 2.2ch; text-align: center; font-variant-numeric: tabular-nums; }
.stepper.small button { width: 40px; height: 40px; font-size: 22px; }
.stepper.small b { font-size: 26px; }
.calc .chips { justify-content: center; }
.calc .chip-btn { font-size: 14px; padding: 7px 14px; text-align: center; }
.calc .chip-btn small { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.calc .chip-btn[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
details.calc-more { border: 2px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; }
details.calc-more summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
details.calc-more > :not(summary) { margin-top: 10px; }
.calc-check { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.calc-check input { width: 22px; height: 22px; accent-color: var(--brand); }
.calc-result { background: var(--example-bg); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; border-inline-start: 4px solid var(--brand); }
.calc-result.empty p { color: var(--ink-3); font-size: 15px; }
.calc-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; }
.calc-row span { font-weight: 700; font-size: 16px; }
.calc-row b { font-family: var(--font-display); font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; }
.calc-row small { grid-column: 1 / -1; color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.calc-row.total { border-top: 1px solid var(--line); padding-top: 8px; }
.calc-row.total b { font-size: 24px; color: var(--brand); }
.calc-card .rc-ic { background: var(--gold-soft); color: var(--gold-ink); }
.page > .calc-card { margin-top: 0; }
.explain-card .calc { margin-top: 4px; }
.explain-card .calc p, .explain-card .calc .fine { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.explain-card .calc-result.empty p { font-size: 15px; }
.explain-card .calc-row small { font-size: 13px; }

/* ---------- v0.5: points box in the lesson preview ---------- */
.pts-box { background: var(--gold-soft); border-radius: var(--r-md); padding: 12px 14px 6px; display: flex; flex-direction: column; gap: 4px; }
.pts-head { display: flex; align-items: center; gap: 8px; }
.pts-head svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.pts-head b { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.pts-head span { font-weight: 800; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.rules.compact li { padding: 6px 0; font-size: 15px; border-color: rgba(140, 97, 7, .15); }
.rules li span svg { width: 16px; height: 16px; vertical-align: -3px; margin-inline-end: 4px; color: var(--flame); }
.rules b i { font-style: normal; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink-3); }
.ladder li b { font-weight: 700; }

/* ---------- v0.5: colorful questions ---------- */
.qt0 { --q-accent: var(--q-teal); --q-soft: var(--q-teal-soft); --q-ink: var(--q-teal-ink); --q-deep: var(--q-teal-deep); }
.qt1 { --q-accent: var(--q-violet); --q-soft: var(--q-violet-soft); --q-ink: var(--q-violet-ink); --q-deep: var(--q-violet-deep); }
.qt2 { --q-accent: var(--q-blue); --q-soft: var(--q-blue-soft); --q-ink: var(--q-blue-ink); --q-deep: var(--q-blue-deep); }
.qt3 { --q-accent: var(--q-coral); --q-soft: var(--q-coral-soft); --q-ink: var(--q-coral-ink); --q-deep: var(--q-coral-deep); }
.player[class*="qt"] .kicker:not(.review) { color: var(--q-ink); }
.player[class*="qt"] .scenario { background: var(--q-soft); border-inline-start: 5px solid var(--q-accent); animation: slidein .25s ease; }
.scenario .sc-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--q-accent, var(--brand)); display: grid; place-items: center; flex: none; }
.scenario .sc-ic svg { width: 19px; height: 19px; color: #fff; margin: 0; }
.player[class*="qt"] .opt.sel, .player[class*="qt"] .tile-btn.sel { border-color: var(--q-accent); background: var(--q-soft); box-shadow: 0 3px 0 var(--q-accent); }
.player[class*="qt"] .opt.sel .key { border-color: var(--q-accent); color: var(--q-ink); }
.player[class*="qt"] .player-foot:not(.ok):not(.bad) .btn:not(:disabled) { --b: var(--q-accent); --b-deep: var(--q-deep); --b-ink: #fff; }
.player .explain-card { border-top: 6px solid var(--u, var(--brand)); }
.player .example { border-inline-start-color: var(--u, var(--brand)); }
.progress.hot > i {
  background: linear-gradient(90deg, var(--gold), var(--flame), var(--gold));
  background-size: 200% 100%;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12), inset 0 4px 0 rgba(255, 255, 255, .3), 0 0 12px rgba(242, 122, 26, .55);
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { from { background-position: 0 0; } to { background-position: -200% 0; } }
.combo svg { animation: flick .6s ease-in-out infinite alternate; }
@keyframes flick { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.15) rotate(4deg); } }

/* ---------- v0.5: order question ---------- */
.order-slots { display: flex; flex-direction: column; gap: 8px; }
.slot {
  width: 100%; min-height: 54px; display: flex; align-items: center; gap: 10px; text-align: right;
  border: 2px dashed var(--line); border-radius: var(--r-md); padding: 8px 12px; font-size: 16px; line-height: 1.35;
  background: transparent;
}
button.slot { cursor: pointer; }
.slot.filled { border-style: solid; border-color: var(--q-accent, var(--brand)); background: var(--q-soft, var(--brand-soft)); box-shadow: 0 3px 0 var(--q-accent, var(--brand)); animation: pop-in .2s ease; }
.slot.right { border-color: var(--ok); background: var(--ok-bg); box-shadow: 0 3px 0 var(--ok); }
.slot.wrong { border-color: var(--bad); background: var(--bad-bg); box-shadow: 0 3px 0 var(--bad); animation: shake .35s; }
.slot:disabled { cursor: default; color: inherit; }
.num-badge {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--q-accent, var(--brand)); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
}
.slot.empty .num-badge { background: var(--surface-2); color: var(--ink-3); }
.slot.right .num-badge { background: var(--ok); }
.slot.wrong .num-badge { background: var(--bad); }
.order-pool { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn {
  border: 2px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink);
  padding: 9px 14px; font-size: 15.5px; line-height: 1.35; text-align: right; cursor: pointer;
  box-shadow: 0 3px 0 var(--line); transition: transform .06s, box-shadow .06s;
}
.chip-btn:active { transform: translateY(3px); box-shadow: none; }
.ans-list { list-style: decimal; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); font-weight: 700; font-size: 15.5px; }
@keyframes pop-in { from { transform: scale(.94); } to { transform: none; } }

/* ---------- v0.5: celebration effects ---------- */
.float-pts {
  position: fixed; z-index: 40; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--gold);
  -webkit-text-stroke: 1.5px var(--gold-deep);
  direction: ltr; unicode-bidi: isolate;
  transform: translate(-50%, -50%);
  animation: float-up 1.1s ease-out forwards;
}
@keyframes float-up {
  0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  20% { transform: translate(-50%, -70%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -260%) scale(1); opacity: 0; }
}
.burst { position: fixed; z-index: 39; width: 0; height: 0; pointer-events: none; }
.burst i {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 3px;
  background: var(--c); animation: burst .75s cubic-bezier(.15, .7, .3, 1) forwards;
}
.burst i:nth-child(3n) { border-radius: 50%; }
@keyframes burst {
  from { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
  to { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.3); opacity: 0; }
}
.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 64px); z-index: 35;
  display: block; direction: rtl; text-align: center; white-space: normal; pointer-events: none;
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 10px 18px; border-radius: 22px; background: var(--ink); color: var(--bg);
  font-size: 16px; box-shadow: var(--shadow);
  transform: translateX(-50%);
  animation: toast-in .4s cubic-bezier(.2, 1.5, .4, 1);
  transition: opacity .35s, transform .35s;
}
.toast svg { width: 22px; height: 22px; display: inline-block; vertical-align: middle; margin-inline-end: 8px; }
.toast b { font-family: var(--font-display); font-weight: 600; font-size: 18px; vertical-align: middle; white-space: nowrap; }
.toast span { opacity: .85; font-weight: 600; vertical-align: middle; }
.toast b + span { margin-inline-start: 2px; }
.toast.combo { background: linear-gradient(90deg, var(--flame), var(--gold)); color: #2A1200; }
.toast.info { background: var(--brand); color: var(--on-brand); }
.toast.out { opacity: 0; transform: translate(-50%, -14px); }
@keyframes toast-in { from { transform: translate(-50%, -24px) scale(.85); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

/* ---------- v0.5: lesson complete extras ---------- */
.done-wrap[class*=" u"] { background: linear-gradient(180deg, color-mix(in srgb, var(--u) 22%, transparent), transparent 300px); }
.rate, .intent { display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 14px 16px; }
.rate b, .intent b { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.intent { background: var(--brand-soft); border-color: transparent; }
.intent > span { color: var(--ink-2); font-size: 14px; margin-top: -6px; }
.rate-btns { display: flex; gap: 8px; }
.rate-btns .chip-btn { flex: 1; text-align: center; padding-inline: 6px; }
.rate.done, .intent.done { flex-direction: row; align-items: center; gap: 8px; color: var(--ok-ink); font-weight: 700; font-size: 15px; }
.rate.done svg, .intent.done svg { width: 20px; height: 20px; flex: none; }
.rate.done .link { margin-inline-start: auto; font-size: 14px; }
.compare { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--line); }
.compare > b { font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.cmp-list { display: flex; flex-direction: column; gap: 10px; }
.cmp-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border: 2px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface); }
.cmp-opt b { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.cmp-opt p { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.cmp-opt .chip { align-self: flex-start; }
.chip.plain { background: var(--surface-2); color: var(--ink-3); }
.cmp-partners { font-weight: 600; }
.about-link { margin-top: 8px; }
.rate-btns.bands { display: grid; grid-template-columns: 1fr 1fr; }
.rate-btns.bands .chip-btn { text-align: center; padding-inline: 6px; font-size: 14.5px; }
.intent .skip { align-self: flex-start; font-size: 14px; }

/* ---------- v0.5: feedback, install, level up ---------- */
.faces { display: flex; gap: 6px; }
.face {
  flex: 1; font-size: 30px; line-height: 1; padding: 10px 0; cursor: pointer;
  border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  filter: grayscale(.7); opacity: .8; transition: transform .12s, filter .12s, opacity .12s;
}
.face[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); filter: none; opacity: 1; transform: scale(1.08); }
.sheet textarea {
  width: 100%; min-height: 110px; resize: vertical;
  border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 16px; line-height: 1.5; padding: 12px;
}
.sheet textarea:focus { outline: none; border-color: var(--brand); }
.shake { animation: shake .35s; }
.install-steps { display: flex; flex-direction: column; gap: 12px; }
.install-steps li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.install-steps .num-badge { background: var(--brand); color: var(--on-brand); }
.install-steps svg { width: 20px; height: 20px; vertical-align: -4px; color: var(--brand); }
.level-up { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-top: 6px; }
.lvl-coin {
  width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; color: #5A3D00;
  background: radial-gradient(circle at 35% 30%, #FFE08A, var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 6px 0 var(--gold-deep), 0 0 0 10px var(--gold-soft);
  animation: pop .6s cubic-bezier(.2, 1.6, .4, 1), glow 1.8s ease-in-out .6s infinite;
}
.lvl-coin svg { width: 54px; height: 54px; }
@keyframes glow { 0%, 100% { box-shadow: 0 6px 0 var(--gold-deep), 0 0 0 10px var(--gold-soft); } 50% { box-shadow: 0 6px 0 var(--gold-deep), 0 0 0 18px var(--gold-soft); } }
.level-up h3 { font-size: 26px; }
.seg.two { grid-template-columns: 1fr 1fr; }

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

/* ---------- Days off for the streak (0.9) ---------- */
.stat.flame .off-badge {
  display: inline-flex; align-items: center; gap: 2px; margin-inline-start: 2px; padding: 1px 6px; border-radius: 999px;
  background: var(--q-blue-soft); color: var(--q-blue-ink); font: 700 12px var(--font-body); font-style: normal;
}
.stat.flame .off-badge svg { width: 12px; height: 12px; }
.week .wbar.off { fill: var(--q-blue-soft); stroke: var(--q-blue); stroke-width: 1.5; }
.week .off-ic { color: var(--q-blue); fill: var(--q-blue); }
.gift-banner {
  display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--q-blue-soft); color: var(--q-blue-ink); font-size: 15px; line-height: 1.45; text-align: start;
}
.gift-banner svg { width: 22px; height: 22px; flex: none; color: var(--q-blue); }
.chain { font-weight: 700; color: var(--brand); margin: 4px 0 8px; }
.rules li.gift b, .rules li.gift span svg { color: var(--q-blue-ink); }
.off-line { display: flex; gap: 8px; align-items: flex-start; }
.off-line svg { width: 20px; height: 20px; flex: none; color: var(--q-blue); margin-top: 2px; }
.points-now { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.points-now .bar { display: block; }
.first-explainer { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.first-explainer svg { width: 18px; height: 18px; flex: none; color: var(--q-blue); margin-top: 2px; }
.invite-note { text-align: center; margin-top: -4px; }
/* narrow phones (320-360px): the top bar keeps the streak, the days-off badge, the points and the goal on one line */
@media (max-width: 360px) {
  .brandmark { font-size: 21px; }
  .stats { gap: 0; }
  .stat { padding: 6px 5px; gap: 3px; font-size: 16px; }
  .stat svg { width: 20px; height: 20px; }
  .stat.flame .off-badge { padding: 1px 4px; margin-inline-start: 1px; }
}
/* v0.9.2: no zoom, like a phone app (Jonathan, 18.10): no double-tap zoom; pinch is stopped in app.js and the viewport */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* v0.9.3: the one-time notifications popup (Jonathan, 18.10) */
.ask-ic { width: 64px; height: 64px; margin: 2px auto 0; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--flame); }
.ask-ic svg { width: 34px; height: 34px; }
.sheet .ask-ic ~ h3, .sheet .ask-ic ~ .lead { text-align: center; }
/* v0.9.7: the install popup before the start, compact so both buttons fit on a small iPhone */
.sheet.ask-welcome { gap: 12px; }
.sheet.ask-welcome .eyebrow { color: var(--flame); text-align: center; margin-bottom: -6px; }
.sheet.ask-welcome h3, .sheet.ask-welcome .lead { text-align: center; }
/* v0.9.8: the "ממשיכים מאיפה שעצרת" toast: the detail on its own line */
.toast.resume span { display: block; margin-top: 2px; }
/* ---------- 0.10: tools that open by level (Jonathan, 21.10) ---------- */
/* each tool has its own color, on its card, its icon and inside its sheet */
.t-discharge, .tool[data-tool="discharge"] { --t: var(--gold-deep); --t-soft: var(--gold-soft); --t-ink: var(--gold-ink); }
.t-pikadon_check, .tool[data-tool="pikadon_check"] { --t: var(--q-teal); --t-soft: var(--q-teal-soft); --t-ink: var(--q-teal-ink); }
.t-time_machine, .tool[data-tool="time_machine"] { --t: var(--q-violet); --t-soft: var(--q-violet-soft); --t-ink: var(--q-violet-ink); }
.t-fees, .tool[data-tool="fees"] { --t: var(--q-coral); --t-soft: var(--q-coral-soft); --t-ink: var(--q-coral-ink); }
.t-my_plan, .tool[data-tool="my_plan"] { --t: var(--q-blue); --t-soft: var(--q-blue-soft); --t-ink: var(--q-blue-ink); }
.nav-inner.n5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 360px) {
  .nav-inner.n5 button { font-size: 11px; }
  .nav-inner.n5 button svg { width: 24px; height: 24px; }
}
/* the tab */
.tools-next {
  width: 100%; border: 2px solid var(--gold); background: var(--surface); border-radius: var(--r-md); padding: 10px 12px; cursor: pointer; text-align: right;
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "badge txt" "bar bar"; gap: 6px 10px; align-items: center;
}
.tools-next .rank-badge { grid-area: badge; }
.tools-next .rank-txt { grid-area: txt; }
.tools-next .bar { grid-area: bar; }
.tool-list { display: flex; flex-direction: column; gap: 10px; }
.tool-card {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; text-align: right; cursor: pointer;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-md); box-shadow: 0 3px 0 var(--line);
  transition: transform .06s, box-shadow .06s;
}
.tool-card:active { transform: translateY(3px); box-shadow: none; }
.tool-card > svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.tool-card.locked { background: var(--bg); box-shadow: none; }
.tool-card.locked.next { border-color: var(--gold); border-style: dashed; }
.tc-ic { position: relative; width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--t-soft); color: var(--t); }
.tc-ic svg { width: 28px; height: 28px; }
.tool-card.locked .tc-ic { background: var(--surface-2); color: var(--ink-3); }
.tc-lock {
  position: absolute; bottom: -5px; left: -5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line); color: var(--ink-3); font-style: normal;
}
.tc-lock svg { width: 12px; height: 12px; }
.tc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tc-top b { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.25; }
.tc-top .chip { flex: none; font-size: 12.5px; padding: 2px 9px; }
.tc-sub { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.tool-card.locked .tc-sub { color: var(--ink-3); }
.tc-sub .revisit { color: var(--gold-ink); }
.chip.lvl { background: var(--surface-2); color: var(--ink-3); }
.chip.lvl svg { width: 13px; height: 13px; }
.tool-ladder { display: flex; flex-direction: column; gap: 6px; }
.tool-ladder button {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: right; cursor: pointer;
  border: 0; border-radius: var(--r-sm); padding: 8px 10px; background: var(--surface-2); color: var(--ink-2); font-size: 14.5px; line-height: 1.3;
}
.tool-ladder svg { width: 20px; height: 20px; color: var(--ink-3); }
.tool-ladder .open { background: var(--t-soft); color: var(--t-ink); font-weight: 700; }
.tool-ladder .open svg { color: var(--t); }
.tl-s { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tool-ladder .open .tl-s { color: var(--t-ink); }
/* a tool's sheet */
.tool { display: flex; flex-direction: column; gap: 14px; }
.tool > h3 { color: var(--t-ink); }
.tool .chip-btn { font-size: 14.5px; padding: 7px 13px; }
.tool .chip-btn small { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.tool .chip-btn[aria-pressed="true"] { border-color: var(--t); background: var(--t-soft); color: var(--t-ink); box-shadow: 0 3px 0 var(--t); }
.tool .chip-btn[aria-pressed="true"] small { color: var(--t-ink); }
.tool .stepper button { color: var(--t); }
.stepper.money-step { justify-content: flex-start; gap: 14px; }
.stepper.money-step b { font-size: 22px; min-width: 7ch; }
.tool .link { color: var(--t-ink); align-self: flex-start; text-align: right; }
.tool-result { background: var(--example-bg); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; border-inline-start: 4px solid var(--t, var(--brand)); }
.tool-result.empty p { color: var(--ink-3); font-size: 15px; }
.tr-head { font-weight: 700; font-size: 15px; color: var(--ink-2); }
.tr-lines { display: flex; flex-direction: column; gap: 4px; }
.tr-lines p { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.tool-note { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; background: var(--surface-2); border-radius: var(--r-sm); padding: 10px 12px; }
.tool-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tool-link { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.4; text-decoration: none; }
.tool-link .u { text-decoration: underline; text-underline-offset: 3px; }
.tool-result h4 { margin: 0; }
.tool-link .chip { text-decoration: none; font-size: 12.5px; padding: 1px 8px; }
.tool-foot { margin-top: 2px; }
.fine.caveat { font-size: 13px; }
/* the time machine and the fees: bars that grow from the right */
.tm-rows { display: flex; flex-direction: column; gap: 10px; }
.tm-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline; }
.tm-row > span:first-child { font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.tm-row > b { font-family: var(--font-display); font-weight: 600; font-size: 19px; font-variant-numeric: tabular-nums; }
.tm-row.zero > b { color: var(--ink-2); }
.tm-row > small { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.tm-bar { grid-column: 1 / -1; display: block; height: 14px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.tm-bar .fill { display: flex; height: 100%; border-radius: 999px; overflow: hidden; transform-origin: right; animation: grow-x .55s cubic-bezier(.2, .8, .2, 1) both; }
.tm-bar .dep { display: block; height: 100%; background: var(--ink-3); flex: none; }
.tm-bar .gain { display: block; height: 100%; flex: 1; background: var(--t, var(--q-violet)); }
.tm-bar .fill.solid.cheap { background: var(--q-teal); } /* 0.12: not the brand, which a color can make orange like "dear" */
.tm-bar .fill.solid.dear { background: var(--q-coral); }
.tm-rows.still .fill { animation: none; }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: none; } }
.tm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-3); }
.tm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tm-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.tm-legend .dep { background: var(--ink-3); }
.tm-legend .gain { background: var(--t, var(--q-violet)); }
.tm-legend .ef { background: var(--ok); }
.tm-legend .tr { background: var(--gold); }
.tm-legend .lg { background: var(--q-blue); }
.fees-gap { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--q-coral-soft); }
.fees-gap b { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--q-coral-ink); }
.fees-gap span { font-size: 14px; color: var(--ink-2); }
/* the pikadon checker */
.chips.wishes .chip-btn { padding: 8px 12px; }
.pk-verdict { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); animation: verdict-in .35s cubic-bezier(.2, 1.3, .4, 1) both; }
.pk-verdict.ok { background: var(--ok-bg); border-inline-start: 4px solid var(--ok); }
.pk-verdict.wait { background: var(--gold-soft); border-inline-start: 4px solid var(--gold); }
.pk-verdict.still { animation: none; }
.pk-verdict h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.3; }
.pk-verdict.ok h4 { color: var(--ok-ink); }
.pk-verdict.wait h4 { color: var(--gold-ink); }
.pk-verdict h4 svg { width: 22px; height: 22px; flex: none; }
.pk-verdict p { font-size: 15px; line-height: 1.5; }
.pk-verdict .q-src { margin-top: 0; }
@keyframes verdict-in { from { transform: translateY(8px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
/* my plan */
.plan-sec { display: flex; flex-direction: column; gap: 8px; }
.plan-in { font-size: 15.5px; line-height: 1.5; }
.plan-bar { display: flex; gap: 2px; height: 18px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.plan-bar i { display: block; height: 100%; transform-origin: right; animation: grow-x .5s cubic-bezier(.2, .8, .2, 1) both; }
.plan-bar .ef { background: var(--ok); }
.plan-bar .tr { background: var(--gold); }
.plan-bar .lg { background: var(--q-blue); }
.plan-lockbar { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-3); padding: 6px 10px; border: 2px dashed var(--line); border-radius: var(--r-sm); }
.plan-lockbar svg { width: 16px; height: 16px; flex: none; }
.plan-rows { display: flex; flex-direction: column; gap: 8px; }
.plan-rows li { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); border-inline-start: 4px solid var(--ink-3); }
.plan-rows li.ef { border-color: var(--ok); }
.plan-rows li.tr { border-color: var(--gold); }
.plan-rows li.lg { border-color: var(--q-blue); }
.plan-rows li > b { font-size: 15.5px; }
.plan-rows li > span { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.plan-rows li > span.fine { font-size: 13px; color: var(--ink-3); }
.plan-rows .tool-links { margin-top: 2px; }
.plan-dont { font-size: 14px; color: var(--ink-2); }
.plan-dont b { color: var(--bad-ink); }
.plan-done { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--ok-bg); color: var(--ok-ink); }
.plan-done svg { width: 24px; height: 24px; }
.plan-done b { font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.plan-done.glint { animation: pop .6s cubic-bezier(.2, 1.6, .4, 1); }
/* a locked tool's preview */
.tool-sample { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--example-bg); pointer-events: none; }
.tool-sample > :not(.ts-lock) { opacity: .75; }
.ts-lock { position: absolute; top: 8px; left: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink-3); box-shadow: var(--shadow); font-style: normal; }
.ts-lock svg { width: 16px; height: 16px; }
/* the level-up that opens a tool: the lock shakes and falls off the coin */
.level-up.tool-unlock { gap: 10px; }
.level-up.tool-unlock .tool-card { text-align: right; }
.lvl-coin.unlock { position: relative; }
.unlock-lock {
  position: absolute; bottom: -4px; left: -4px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--ink-3); box-shadow: var(--shadow); font-style: normal;
  opacity: 0; animation: unlock-off 1.2s ease .25s both;
}
.unlock-lock svg { width: 20px; height: 20px; }
@keyframes unlock-off {
  0% { opacity: 1; transform: none; }
  20% { transform: rotate(-16deg); }
  38% { transform: rotate(14deg); }
  55% { opacity: 1; transform: rotate(0); }
  100% { opacity: 0; transform: translateY(18px) scale(.5); }
}
/* the done screen: the next level's tool at the end of the bar */
.pr-tool { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-inline-start: 6px; border-radius: 6px; vertical-align: middle; background: var(--t-soft); color: var(--t); font-style: normal; }
.pr-tool svg { width: 14px; height: 14px; }
@media (max-width: 360px) {
  .tool .chip-btn { padding: 7px 10px; }
  .stepper.money-step b { font-size: 20px; }
  .tc-ic { width: 42px; height: 42px; }
}
/* 0.10 review: screen-reader text, calmer redraws, bigger link targets, readable locked labels */
.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; }
.tool.redraw .tm-bar .fill, .tool.redraw .plan-bar i { animation: none; }
.tool .tool-link, .tool .link { min-height: 44px; padding-block: 10px; }
.tool .tool-links { gap: 2px; }
.tool > h3:focus { outline: none; }
.chip.lvl, .tl-s, .tool-card.locked .tc-sub { color: var(--ink-2); }
.plan-bar.blank { gap: 4px; background: none; border-radius: 0; }
.plan-bar.blank i { flex: 1; border-radius: 999px; background: var(--surface-2); border: 2px dashed var(--line); animation: none; }
.tool-sample { padding-inline-end: 48px; }

/* ---------- 0.11: the streak multiplies points, the points hint ---------- */
.rules li.streak-x span svg, .streak-bonus > b svg { color: var(--flame); }
.rules li.streak-x b i { color: var(--ink-2); font-weight: 600; }
.streak-bonus { margin: 10px 0 12px; }
.streak-bonus > b { display: flex; align-items: center; gap: 6px; font-size: 17px; }
.streak-bonus > b svg { width: 20px; height: 20px; flex: none; }
.streak-bonus .fine { margin: 8px 0 0; }
.streak-bonus .chain { margin: 6px 0 0; font-size: 15px; }
.points-now .pn-next { color: var(--ink-2); font-size: 15px; }

/* ---------- 0.12: colors that open by level (Jonathan, 21.10: "נפתחים לפי שלב") ---------- */
/* AA fixes every color needs (some already fail today) */
.lesson-row.current .dot { color: var(--on-brand); }
.switch[aria-checked="true"]::after { background: var(--on-brand); }
.invite-bar { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: var(--on-brand); }
.seg button[aria-pressed="true"] small { color: var(--brand); }
/* the two gradient colors (נאון, זהב): main buttons, brand bars, the info toast and the logo */
.btn { background-image: var(--b-img, var(--brand-img)); }
.btn.ok, .btn.bad, .btn.gold, .btn.ghost, .btn:disabled { --b-img: none; }
.player[class*="qt"] .player-foot:not(.ok):not(.bad) .btn:not(:disabled) { --b-img: none; }
.bar:not(.gold) > i, .toast.info { background-image: var(--brand-img); }
.toast.info span { opacity: 1; } /* .85 fell to 4.47:1 on the נאון gradient */
.resume-card .bar > i { background-image: none; }
.brandmark { background-image: var(--mark-img); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--mark-fill); }
/* a preview of another color sets its own text color (inherited colors are already resolved) */
.sheet[data-skin], .skin-preview { color: var(--ink); }
/* the swatch: a glossy ball in a color's own tokens (it always carries its own data-skin) */
.sw {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; flex: none; color: var(--on-brand);
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .5), transparent 42%), var(--sw-img);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16), 0 3px 0 var(--brand-deep);
}
.sw > svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .18)); }
.sw-badge {
  position: absolute; bottom: -4px; left: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--ink-2); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); font-style: normal;
}
.sw-badge svg { width: 12px; height: 12px; }
.sw-badge.on { background: var(--brand); color: var(--on-brand); }
/* the profile card */
.skins-card .sk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.skins-card .chip { white-space: nowrap; }
.skin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 2px; }
.skin-opt {
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 8px 0 4px;
  border: 0; border-radius: var(--r-md); background: none; color: var(--ink); cursor: pointer; text-align: center;
  transition: transform .06s;
}
.skin-opt:active { transform: scale(.94); }
.skin-opt b { margin-top: 3px; font-size: 14px; font-weight: 700; line-height: 1.2; }
.skin-opt small { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ink-2); min-height: 1.2em; }
.skin-opt .chip { font-size: 11.5px; padding: 0 7px; line-height: 1.5; }
.skin-opt[aria-pressed="true"] .sw { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16), 0 3px 0 var(--brand-deep), 0 0 0 3px var(--surface), 0 0 0 6px var(--brand); }
.skin-opt[aria-pressed="true"] small { color: var(--brand); }
.skin-opt.locked .sw { opacity: .82; }
.skin-opt.pop .sw { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); }
/* the next color, at the end of a level bar */
.pr-skin {
  display: inline-block; width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; margin-inline-start: 6px; font-style: normal;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .55), transparent 45%), var(--sw-img); box-shadow: 0 2px 0 var(--brand-deep);
}
.rank-strip.has-skin { grid-template-columns: auto 1fr auto; grid-template-areas: "badge txt txt" "bar bar sw"; }
.rank-strip .pr-skin { grid-area: sw; margin: 0; }
/* the level-up coin of a color (the sheet carries the new color, so everything in it is a preview) */
.lvl-coin.skin {
  color: var(--on-brand);
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .5), transparent 45%), var(--sw-img);
  box-shadow: 0 6px 0 var(--brand-deep), 0 0 0 10px var(--brand-soft);
  animation: pop .6s cubic-bezier(.2, 1.6, .4, 1), glow-skin 1.8s ease-in-out .6s infinite;
}
@keyframes glow-skin { 0%, 100% { box-shadow: 0 6px 0 var(--brand-deep), 0 0 0 10px var(--brand-soft); } 50% { box-shadow: 0 6px 0 var(--brand-deep), 0 0 0 18px var(--brand-soft); } }
.level-up .skin-name { color: var(--brand); }
.lu-actions { display: flex; flex-direction: column; gap: 14px; }
/* "וגם צבע חדש" inside a tool's level-up */
.skin-row {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: right; cursor: pointer; color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: 0 3px 0 var(--line);
}
.skin-row .sw { width: 38px; height: 38px; }
.skin-row .sw > svg { width: 19px; height: 19px; }
.sr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sr-txt b { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.sr-txt small { font-size: 13.5px; color: var(--ink-2); }
.skin-row[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 3px 0 var(--brand); }
.skin-row[aria-pressed="true"] small { color: var(--brand); }
/* a locked color: the sheet is drawn in that color, with a slice of the app */
.skin-preview {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 16px; border-radius: var(--r-md);
  background: var(--bg); border: 2px solid var(--line); pointer-events: none;
}
.skin-preview .sp-top { display: flex; align-items: center; justify-content: space-between; }
.skin-preview .brandmark { font-size: 22px; }
.skin-preview .nudge { margin: 0; }
.skin-preview .btn { padding: 11px; font-size: 16px; }
/* the whole app glides to a new color */
@media (prefers-reduced-motion: no-preference) {
  html.skin-swap, html.skin-swap *, html.skin-swap *::before, html.skin-swap *::after {
    transition: background-color .45s ease, border-color .45s ease, color .45s ease, fill .45s ease, stroke .45s ease, box-shadow .45s ease !important;
  }
}

/* ---------- 0.12: color tokens (generated by tools/skins/gen-skins.js; do not edit by hand) ---------- */
/* light (and the base for dark): on <html> for the active color, and on any element that previews another color */
[data-skin="forest"]{--brand:#0E6E58;--brand-deep:#08503F;--brand-soft:#D7EDE5;--on-brand:#FFFFFF;--brand-2:#0B7480;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#F2F6F1;--surface:#FFFFFF;--surface-2:#E6EEE5;--line:#D3DFD4;--ink:#12302A;--ink-2:#4E655E;--ink-3:#7A8E87;--example-bg:#EEF5F1;--lock:#CBD5CC;--lock-deep:#A9B6AB}
[data-skin="sea"]{--brand:#1D5FCC;--brand-deep:#12438F;--brand-soft:#DCE7FA;--on-brand:#FFFFFF;--brand-2:#0E72A8;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#F2F5FA;--surface:#FFFFFF;--surface-2:#E6ECF5;--line:#D4DCE9;--ink:#1F2A3D;--ink-2:#566070;--ink-3:#808998;--example-bg:#EFF3F9;--lock:#CCD2DD;--lock-deep:#AAB3C0}
[data-skin="sunset"]{--brand:#A84A0C;--brand-deep:#763206;--brand-soft:#FCE6D6;--on-brand:#FFFFFF;--brand-2:#C02B4A;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#F9F3F0;--surface:#FFFFFF;--surface-2:#F4E9E3;--line:#E7D8D0;--ink:#392419;--ink-2:#6E5A51;--ink-3:#96847C;--example-bg:#F9F1EE;--lock:#DCCFC9;--lock-deep:#BEAEA7}
[data-skin="galaxy"]{--brand:#6A3DD6;--brand-deep:#4A2898;--brand-soft:#ECE4FC;--on-brand:#FFFFFF;--brand-2:#3B4FD8;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#F4F4FA;--surface:#FFFFFF;--surface-2:#EBEAF5;--line:#DAD9E8;--ink:#29273B;--ink-2:#5F5D6F;--ink-3:#888797;--example-bg:#F3F2F9;--lock:#D1D0DC;--lock-deep:#B1B0BF}
[data-skin="raspberry"]{--brand:#C2185B;--brand-deep:#8A0F40;--brand-soft:#FBE0EB;--on-brand:#FFFFFF;--brand-2:#9C27B0;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#FAF3F4;--surface:#FFFFFF;--surface-2:#F5E7EA;--line:#E8D6D9;--ink:#3A2227;--ink-2:#6F585D;--ink-3:#978386;--example-bg:#F9F1F2;--lock:#DCCED0;--lock-deep:#BFADB0}
[data-skin="neon"]{--brand:#0B6F8C;--brand-deep:#084E63;--brand-soft:#DCEFF4;--on-brand:#FFFFFF;--brand-2:#7A3BD0;--q-accent:var(--brand);--brand-img:linear-gradient(120deg,#08775C,var(--brand) 45%,var(--brand-2));--mark-img:linear-gradient(90deg,#08775C,var(--brand) 45%,var(--brand-2));--mark-fill:transparent;--sw-img:linear-gradient(135deg,#08775C,var(--brand) 50%,var(--brand-2));--bg:#EFF6F9;--surface:#FFFFFF;--surface-2:#E2EEF3;--line:#CEDEE5;--ink:#132E38;--ink-2:#4D636C;--ink-3:#798C94;--example-bg:#EDF4F8;--lock:#C7D4DA;--lock-deep:#A4B5BC}
[data-skin="gold"]{--brand:#1F262B;--brand-deep:#0A0D0F;--brand-soft:#F5EBD3;--on-brand:#F5C04A;--brand-2:#3B3428;--q-accent:var(--brand);--brand-img:linear-gradient(135deg,var(--brand),var(--brand-2));--mark-img:linear-gradient(90deg,#1F262B,#8C6107);--mark-fill:transparent;--sw-img:linear-gradient(135deg,#1F262B 40%,#B7820F);--bg:#F7F4EF;--surface:#FFFFFF;--surface-2:#F0EBE1;--line:#E1DBCD;--ink:#2E291F;--ink-2:#635F56;--ink-3:#8C8880;--example-bg:#F6F3EC;--lock:#D7D1C6;--lock-deep:#B8B1A3}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-skin="forest"], :root:not([data-theme="light"]) [data-skin="forest"]{--brand:#23A583;--brand-deep:#157A5F;--brand-soft:#112E27;--on-brand:#04120E;--brand-2:#2BB3A6;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#0C1714;--surface:#14221E;--surface-2:#1C2E29;--line:#26392F;--ink:#E7F1EC;--ink-2:#A9BDB5;--ink-3:#7C9188;--example-bg:#1A2C27;--lock:#2A3A35;--lock-deep:#1E2B27}
  :root:not([data-theme="light"])[data-skin="sea"], :root:not([data-theme="light"]) [data-skin="sea"]{--brand:#5B9BF2;--brand-deep:#2F64AD;--brand-soft:#15284A;--on-brand:#030F22;--brand-2:#4FB3E8;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#10151C;--surface:#191F29;--surface-2:#222A37;--line:#2B3444;--ink:#E9EFF7;--ink-2:#AFB8C8;--ink-3:#828C9D;--example-bg:#212835;--lock:#2F3642;--lock-deep:#222831}
  :root:not([data-theme="light"])[data-skin="sunset"], :root:not([data-theme="light"]) [data-skin="sunset"]{--brand:#FB8A4C;--brand-deep:#B2531F;--brand-soft:#3A1D10;--on-brand:#1C0A01;--brand-2:#FF7A8A;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#1B120E;--surface:#271C16;--surface-2:#35261F;--line:#412F27;--ink:#F6ECE7;--ink-2:#C6B3AB;--ink-3:#9A877D;--example-bg:#33241D;--lock:#40332C;--lock-deep:#302520}
  :root:not([data-theme="light"])[data-skin="galaxy"], :root:not([data-theme="light"]) [data-skin="galaxy"]{--brand:#A98BFA;--brand-deep:#6A4BB8;--brand-soft:#2A2050;--on-brand:#110628;--brand-2:#8EA2FF;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#14131C;--surface:#1E1D28;--surface-2:#292836;--line:#333243;--ink:#EEEDF6;--ink-2:#B7B5C7;--ink-3:#8B899B;--example-bg:#272634;--lock:#363441;--lock-deep:#272631}
  :root:not([data-theme="light"])[data-skin="raspberry"], :root:not([data-theme="light"]) [data-skin="raspberry"]{--brand:#F47BAA;--brand-deep:#B0406E;--brand-soft:#3D1528;--on-brand:#23030F;--brand-2:#D98BF2;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#1B1113;--surface:#271B1D;--surface-2:#352528;--line:#422E32;--ink:#F6EBED;--ink-2:#C6B1B5;--ink-3:#9B8589;--example-bg:#332326;--lock:#413134;--lock-deep:#302426}
  :root:not([data-theme="light"])[data-skin="neon"], :root:not([data-theme="light"]) [data-skin="neon"]{--brand:#45CBE0;--brand-deep:#167486;--brand-soft:#10323A;--on-brand:#03131A;--brand-2:#C29BFF;--q-accent:var(--brand);--brand-img:linear-gradient(120deg,#3DD68C,var(--brand) 45%,var(--brand-2));--mark-img:linear-gradient(90deg,#3DD68C,var(--brand) 45%,var(--brand-2));--mark-fill:transparent;--sw-img:linear-gradient(135deg,#3DD68C,var(--brand) 50%,var(--brand-2));--bg:#0C161A;--surface:#142126;--surface-2:#1C2D33;--line:#233740;--ink:#E6F0F5;--ink-2:#A8BBC4;--ink-3:#7A8F98;--example-bg:#1A2B31;--lock:#2A393F;--lock-deep:#1E2A2F}
  :root:not([data-theme="light"])[data-skin="gold"], :root:not([data-theme="light"]) [data-skin="gold"]{--brand:#F2C14E;--brand-deep:#7A5806;--brand-soft:#352A0E;--on-brand:#1F1703;--brand-2:#E9A92B;--q-accent:var(--brand);--brand-img:linear-gradient(135deg,#F7D774,#E9A92B);--mark-img:linear-gradient(90deg,#F7D774,#E9A92B);--mark-fill:transparent;--sw-img:linear-gradient(135deg,#F7D774 30%,#B88618);--bg:#18140B;--surface:#231E13;--surface-2:#30291B;--line:#3B3322;--ink:#F0EEEA;--ink-2:#BBB7AF;--ink-3:#8F8B82;--example-bg:#2E2719;--lock:#3B3529;--lock-deep:#2C271D}
}
:root[data-theme="dark"][data-skin="forest"], :root[data-theme="dark"] [data-skin="forest"]{--brand:#23A583;--brand-deep:#157A5F;--brand-soft:#112E27;--on-brand:#04120E;--brand-2:#2BB3A6;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#0C1714;--surface:#14221E;--surface-2:#1C2E29;--line:#26392F;--ink:#E7F1EC;--ink-2:#A9BDB5;--ink-3:#7C9188;--example-bg:#1A2C27;--lock:#2A3A35;--lock-deep:#1E2B27}
:root[data-theme="dark"][data-skin="sea"], :root[data-theme="dark"] [data-skin="sea"]{--brand:#5B9BF2;--brand-deep:#2F64AD;--brand-soft:#15284A;--on-brand:#030F22;--brand-2:#4FB3E8;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#10151C;--surface:#191F29;--surface-2:#222A37;--line:#2B3444;--ink:#E9EFF7;--ink-2:#AFB8C8;--ink-3:#828C9D;--example-bg:#212835;--lock:#2F3642;--lock-deep:#222831}
:root[data-theme="dark"][data-skin="sunset"], :root[data-theme="dark"] [data-skin="sunset"]{--brand:#FB8A4C;--brand-deep:#B2531F;--brand-soft:#3A1D10;--on-brand:#1C0A01;--brand-2:#FF7A8A;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#1B120E;--surface:#271C16;--surface-2:#35261F;--line:#412F27;--ink:#F6ECE7;--ink-2:#C6B3AB;--ink-3:#9A877D;--example-bg:#33241D;--lock:#40332C;--lock-deep:#302520}
:root[data-theme="dark"][data-skin="galaxy"], :root[data-theme="dark"] [data-skin="galaxy"]{--brand:#A98BFA;--brand-deep:#6A4BB8;--brand-soft:#2A2050;--on-brand:#110628;--brand-2:#8EA2FF;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#14131C;--surface:#1E1D28;--surface-2:#292836;--line:#333243;--ink:#EEEDF6;--ink-2:#B7B5C7;--ink-3:#8B899B;--example-bg:#272634;--lock:#363441;--lock-deep:#272631}
:root[data-theme="dark"][data-skin="raspberry"], :root[data-theme="dark"] [data-skin="raspberry"]{--brand:#F47BAA;--brand-deep:#B0406E;--brand-soft:#3D1528;--on-brand:#23030F;--brand-2:#D98BF2;--q-accent:var(--brand);--brand-img:none;--mark-img:none;--mark-fill:currentColor;--sw-img:linear-gradient(135deg,var(--brand) 35%,var(--brand-2));--bg:#1B1113;--surface:#271B1D;--surface-2:#352528;--line:#422E32;--ink:#F6EBED;--ink-2:#C6B1B5;--ink-3:#9B8589;--example-bg:#332326;--lock:#413134;--lock-deep:#302426}
:root[data-theme="dark"][data-skin="neon"], :root[data-theme="dark"] [data-skin="neon"]{--brand:#45CBE0;--brand-deep:#167486;--brand-soft:#10323A;--on-brand:#03131A;--brand-2:#C29BFF;--q-accent:var(--brand);--brand-img:linear-gradient(120deg,#3DD68C,var(--brand) 45%,var(--brand-2));--mark-img:linear-gradient(90deg,#3DD68C,var(--brand) 45%,var(--brand-2));--mark-fill:transparent;--sw-img:linear-gradient(135deg,#3DD68C,var(--brand) 50%,var(--brand-2));--bg:#0C161A;--surface:#142126;--surface-2:#1C2D33;--line:#233740;--ink:#E6F0F5;--ink-2:#A8BBC4;--ink-3:#7A8F98;--example-bg:#1A2B31;--lock:#2A393F;--lock-deep:#1E2A2F}
:root[data-theme="dark"][data-skin="gold"], :root[data-theme="dark"] [data-skin="gold"]{--brand:#F2C14E;--brand-deep:#7A5806;--brand-soft:#352A0E;--on-brand:#1F1703;--brand-2:#E9A92B;--q-accent:var(--brand);--brand-img:linear-gradient(135deg,#F7D774,#E9A92B);--mark-img:linear-gradient(90deg,#F7D774,#E9A92B);--mark-fill:transparent;--sw-img:linear-gradient(135deg,#F7D774 30%,#B88618);--bg:#18140B;--surface:#231E13;--surface-2:#30291B;--line:#3B3322;--ink:#F0EEEA;--ink-2:#BBB7AF;--ink-3:#8F8B82;--example-bg:#2E2719;--lock:#3B3529;--lock-deep:#2C271D}
/* ---------- end of generated color tokens ---------- */

/* 0.13: the daily check card and its "tomorrow" line, the onboarding calculator */
.daily-check { margin-top: 12px; }
.daily-check .m-ic { background: var(--gold-soft); color: var(--gold-ink); }
.check-next { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.check-next svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--brand); }
.check-next b { color: var(--ink); }
.check-next.done svg { color: var(--ok, var(--brand)); }
.check-steps { padding: 0; margin: 0; }
.check-steps li { list-style: none; display: flex; align-items: flex-start; gap: 12px; border: 2px solid var(--line); border-radius: var(--r-md); padding: 12px; counter-increment: s; }
.check-steps li::before { content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 14px; }
.onboard-calc .calc { margin-top: 2px; }
.calc-hook { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--gold-soft); color: var(--gold-ink); font-weight: 600; font-size: 15px; line-height: 1.45; }
.calc-hook svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }