/* ==================================================================
   Moikeha & Co. — design system v2
   Benchmark properties (docs/BUILD-SPEC.md §6):
   ≤12 color tokens · 2 typefaces · one icon style · one geometry ·
   tactile physics · celebration ladder · instant response.
   ================================================================== */

:root {
  /* --- the locked palette (12) --- */
  --paper:   #FBF6ED;   /* warm canvas, never pure white page bg */
  --card:    #FFFFFF;
  --ink:     #3B3A4A;   /* charcoal text, never #000 */
  --ink-2:   #8B8798;
  --line:    #EBE3D3;
  --coral:   #F2693D;   /* hero — work & energy */
  --gold:    #F5A623;   /* money & celebration only */
  --leaf:    #3FA34D;
  --sky:     #2D9CDB;
  --grape:   #8E5BD1;
  --teal:    #13A89E;
  --navy:    #2B2A45;   /* sunset mode + footer */

  /* geometry */
  --r-s: 10px; --r-m: 14px; --r-l: 20px;
  --shadow-card: 0 1px 2px rgba(59, 58, 74, .05), 0 10px 28px rgba(59, 58, 74, .07);

  /* motion tokens */
  --snap: 180ms cubic-bezier(.4, 0, .2, 1);
  --bounce: 350ms cubic-bezier(.34, 1.56, .64, 1);
  --gentle: 420ms ease-out;

  --display: 'Fredoka', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background:
    radial-gradient(rgba(59, 58, 74, .035) 1px, transparent 1px) 0 0/22px 22px,
    var(--paper);
  min-height: 100vh;
}

#app { max-width: 760px; margin: 0 auto; padding: 18px 16px 96px; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 1200; }
.hidden { display: none !important; }

h1, h2, h3, p { margin: 0; }

/* ---------- type scale ---------- */
.t-display { font-family: var(--display); font-weight: 600; }
.t-money   { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- icons ---------- */
.ic { width: 22px; height: 22px; flex-shrink: 0; display: inline-block; vertical-align: -4px; }
.ic-lg { width: 30px; height: 30px; }
.ic-xl { width: 44px; height: 44px; }

/* ---------- the tactile button (Duolingo press physics) ---------- */
button {
  font-family: var(--body); font-weight: 800; font-size: .95rem;
  color: var(--ink); border: none; cursor: pointer;
  border-radius: var(--r-m);
  background: #F3EDDF;
  box-shadow: 0 4px 0 #DDD3BC;
  padding: 13px 18px; min-height: 50px;
  letter-spacing: .01em;
  transition: transform 80ms ease, box-shadow 80ms ease, filter var(--snap);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
button:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
button:disabled { opacity: .45; cursor: default; }
button:disabled:active { transform: none; box-shadow: 0 4px 0 #DDD3BC; }

.btn-hero  { background: var(--coral); box-shadow: 0 4px 0 #C2491F; color: #fff; }
.btn-hero:disabled:active { box-shadow: 0 4px 0 #C2491F; }
.btn-go    { background: var(--leaf);  box-shadow: 0 4px 0 #2C7E38; color: #fff; }
.btn-go:disabled:active { box-shadow: 0 4px 0 #2C7E38; }
.btn-gold  { background: var(--gold);  box-shadow: 0 4px 0 #C97F08; color: #fff; }
.btn-quiet { background: var(--card);  box-shadow: 0 4px 0 var(--line); border: 1.5px solid var(--line); }
.btn-navy  { background: var(--navy);  box-shadow: 0 4px 0 #161526; color: #fff; }
.btn-big   { width: 100%; font-size: 1.1rem; min-height: 62px; border-radius: var(--r-l);
             font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* kid-view tap targets: 64px floor */
.kidview button { min-height: 64px; }
.kidview .speak, .kidview .checkbox { min-height: 0; }

/* ---------- cards ---------- */
.card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  padding: 20px;
  margin-bottom: 18px;
}
.card-h {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.card-h .t {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem;
}
.card-h .sub { font-size: .82rem; color: var(--ink-2); font-weight: 700; margin-left: auto; text-align: right; }
.card-h .ic { color: var(--ink-2); }

/* unpaid basics get the QUIET treatment; paid work gets the GOLD edge */
.card.basics { background: #FDFBF5; box-shadow: none; }
.card.paidwork { border-color: color-mix(in srgb, var(--gold), white 45%); }
.card.paidwork .card-h .ic { color: var(--gold); }

/* sunset mode: the evening card */
.card.sunset { background: var(--navy); border-color: #3E3D5E; color: #EDEAF6; }
.card.sunset .card-h .ic { color: #A9A4D4; }
.card.sunset .sub { color: #A9A4D4; }
.card.sunset .task { border-color: rgba(255,255,255,.09); }
.card.sunset .task .label { color: #EDEAF6; }
.card.sunset .task.done .label { color: #6F6B96; }
.card.sunset .checkbox { background: #38365A; border-color: #4A4875; }
.card.sunset .speak { background: #38365A; color: #A9A4D4; }

/* ---------- masthead ---------- */
.masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 2px 18px; }
.masthead .co {
  font-family: var(--display); font-weight: 600; font-size: 1.45rem; letter-spacing: .01em;
  display: flex; align-items: center; gap: 9px;
}
.masthead .co .ic { color: var(--coral); }
.masthead .date { font-size: .85rem; font-weight: 800; color: var(--ink-2); }

/* ---------- kid roster (home) ---------- */
.roster { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.kid-tile {
  display: flex; align-items: center; gap: 16px; text-align: left;
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-l); box-shadow: var(--shadow-card);
  padding: 16px 18px; min-height: 100px; width: 100%;
}
.kid-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }

.monogram {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 1.5rem; color: #fff;
  position: relative; flex-shrink: 0;
}
.monogram .ring { position: absolute; inset: -5px; border-radius: 50%; border: 3px solid; opacity: .35; }
.monogram .badge-ic {
  position: absolute; right: -6px; bottom: -6px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.monogram .badge-ic .ic { width: 15px; height: 15px; }

.kid-tile .info { flex: 1; min-width: 0; }
.kid-tile .nm { font-family: var(--display); font-weight: 600; font-size: 1.3rem; }
.kid-tile .st { font-size: .88rem; font-weight: 700; color: var(--ink-2); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.kid-tile .st .ic { width: 16px; height: 16px; }
.kid-tile .go { color: var(--line); }
.kid-tile .go .ic { width: 26px; height: 26px; transform: rotate(180deg); }

.gatebar { display: flex; gap: 4px; margin-top: 9px; }
.gatebar i { height: 7px; flex: 1; max-width: 26px; border-radius: 4px; background: var(--line); }
.gatebar i.on { background: var(--leaf); }

/* ---------- meter ---------- */
.meter { background: #F3EDDF; border-radius: 99px; height: 22px; overflow: hidden; }
.meter > i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), var(--coral));
  min-width: 10px; transition: width .7s var(--gentle);
}
.meter-cap { font-size: .82rem; font-weight: 800; color: var(--ink-2); margin-top: 8px; display: flex; justify-content: space-between; }

/* ---------- task rows ---------- */
.task {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 2px; min-height: 64px;
  border-bottom: 1.5px solid #F4EFE3;
}
.task:last-of-type { border-bottom: none; }
.task .tic {
  width: 42px; height: 42px; border-radius: var(--r-s); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.task .tic .ic { width: 24px; height: 24px; }
.task .label { flex: 1; font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.task.done .label { color: #BDB7CC; text-decoration: line-through; text-decoration-thickness: 2px; }
.task.done .tic { opacity: .4; }

.speak {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  background: #F3EDDF; box-shadow: none; color: var(--ink-2);
  min-height: 40px;
}
.speak .ic { width: 18px; height: 18px; }
.speak:active { transform: scale(.92); }

.checkbox {
  width: 56px; height: 56px; border-radius: var(--r-m); flex-shrink: 0;
  border: 2.5px solid var(--line); background: #FDFBF5;
  box-shadow: 0 3px 0 var(--line); padding: 0; color: transparent;
}
.checkbox .ic { width: 28px; height: 28px; }
.checkbox.on {
  background: var(--leaf); border-color: var(--leaf); color: #fff;
  box-shadow: 0 3px 0 #2C7E38;
  animation: pop var(--bounce);
}
@keyframes pop { 0% { transform: scale(.7); } 55% { transform: scale(1.18, .88); } 100% { transform: scale(1); } }

/* ---------- job banner: the ID badge ---------- */
.jobcard {
  border-radius: var(--r-l); overflow: hidden;
  border: 1.5px solid var(--line); margin-bottom: 14px;
  background: var(--card);
}
.jobcard .banner {
  padding: 20px 18px 18px; text-align: center; color: #fff; position: relative;
}
.jobcard .banner .holes {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 8px; border-radius: 6px; background: rgba(255,255,255,.3);
}
.jobcard .you-are { font-size: .72rem; font-weight: 800; letter-spacing: .22em; opacity: .85; margin-top: 10px; }
.jobcard .prof { font-family: var(--display); font-weight: 600; font-size: 1.7rem; margin: 4px 0 2px; }
.jobcard .prof .ic { width: 30px; height: 30px; vertical-align: -5px; margin-right: 6px; }
.jobcard .tagline { font-size: .88rem; font-weight: 700; opacity: .9; }
.jobcard .chips { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.chip {
  background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 99px; padding: 5px 13px; font-size: .82rem; font-weight: 800;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip .ic { width: 15px; height: 15px; }
.chip.pay { background: #fff; color: var(--ink); border-color: #fff; font-family: var(--display); }
.chip.pay .ic { color: var(--gold); }
.jobcard .body { padding: 8px 18px 18px; }
.jobcard .tools { font-size: .8rem; font-weight: 700; color: var(--ink-2); text-align: center; padding: 10px 0 4px; }

.locked-slab {
  text-align: center; padding: 26px 16px; color: var(--ink-2); font-weight: 700;
}
.locked-slab .ic { width: 38px; height: 38px; color: var(--line); display: block; margin: 0 auto 10px; }
.locked-slab b { color: var(--ink); }

.punchlist {
  background: #FFF4E8; border: 2px dashed var(--coral);
  border-radius: var(--r-m); padding: 12px 15px; margin: 10px 0 4px;
  font-weight: 800; font-size: .92rem; color: #B14A1F;
  display: flex; gap: 9px; align-items: center;
}
.punchlist .ic { width: 19px; height: 19px; flex-shrink: 0; }

.stamp-done {
  margin: 14px auto 6px; width: max-content; max-width: 100%;
  border: 3.5px solid var(--leaf); color: var(--leaf);
  border-radius: var(--r-m); padding: 10px 22px;
  font-family: var(--display); font-weight: 600; font-size: 1.2rem;
  transform: rotate(-3deg);
  display: flex; align-items: center; gap: 9px;
  animation: stampIn .45s cubic-bezier(.2, 2.2, .4, 1);
}
@keyframes stampIn { from { transform: rotate(-3deg) scale(2.4); opacity: 0; } }

.waitline {
  text-align: center; color: var(--ink-2); font-weight: 800; padding: 16px 8px 8px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.waitline .ic { width: 19px; height: 19px; }

/* ---------- wallet ---------- */
.payline { text-align: center; padding: 6px 0 2px; }
.payline .amt { font-family: var(--display); font-weight: 600; font-size: 2.7rem; color: var(--ink); }
.payline .lbl { font-size: .82rem; font-weight: 800; color: var(--ink-2); letter-spacing: .06em; text-transform: uppercase; }

.jars { display: flex; gap: 10px; margin-top: 14px; }
.jar {
  flex: 1; text-align: center; border-radius: var(--r-m);
  border: 1.5px solid var(--line); background: #FDFBF5; padding: 12px 6px 10px;
}
.jar .ic { width: 22px; height: 22px; }
.jar .amt { font-family: var(--display); font-weight: 600; font-size: 1.05rem; margin-top: 3px; }
.jar .nm { font-size: .68rem; font-weight: 800; letter-spacing: .1em; color: var(--ink-2); }

/* week path Mon→payday */
.weekpath { display: flex; align-items: center; gap: 4px; margin-top: 16px; }
.weekpath .stop {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 800; color: var(--ink-2);
}
.weekpath .dot {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--line); background: var(--card);
  display: flex; align-items: center; justify-content: center; color: transparent;
}
.weekpath .dot .ic { width: 14px; height: 14px; }
.weekpath .stop.hit .dot { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.weekpath .stop.today .dot { border-color: var(--coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral), white 75%); }
.weekpath .stop.vault .dot { width: 34px; height: 34px; border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold), white 88%); }
.weekpath .stop.vault .dot .ic { width: 19px; height: 19px; }

/* ---------- passport / certs ---------- */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cert {
  border: 1.5px solid var(--line); border-radius: var(--r-m);
  padding: 12px 8px 10px; text-align: center; background: #FDFBF5;
}
.cert.locked { opacity: .42; }
.cert .ic { width: 26px; height: 26px; }
.cert .nm { font-size: .72rem; font-weight: 800; margin-top: 5px; line-height: 1.25; }
.cert .lv { font-size: .66rem; font-weight: 800; color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.cert .pips { display: flex; gap: 3px; justify-content: center; margin-top: 6px; }
.cert .pips i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.cert .pips i.on { background: var(--gold); }

.passport {
  display: flex; align-items: center; gap: 13px;
  border: 1.5px solid var(--line); border-radius: var(--r-m);
  background: #FDFBF5; padding: 13px 15px; margin-bottom: 13px;
}
.passport .ic { color: var(--gold); }
.passport .rk { font-family: var(--display); font-weight: 600; font-size: 1.04rem; }
.passport .ct { font-size: .8rem; font-weight: 700; color: var(--ink-2); }

/* ---------- greeting ---------- */
.greet { display: flex; align-items: center; gap: 15px; margin: 6px 2px 18px; }
.greet .hi { font-family: var(--display); font-weight: 600; font-size: 1.4rem; }
.greet .tag { font-size: .86rem; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.greet .tag .ic { width: 16px; height: 16px; color: var(--gold); }

.navrow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.navrow .back-btn { min-height: 46px; padding: 9px 16px; }
.navrow .back-btn .ic { width: 17px; height: 17px; }

/* ---------- parent office ---------- */
.tabs { display: flex; gap: 7px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  flex: 1; min-height: 48px; min-width: 100px; padding: 8px 6px; font-size: .85rem;
  background: transparent; box-shadow: none; border: 1.5px solid var(--line);
  color: var(--ink-2); border-radius: var(--r-m);
}
.tab .ic { width: 17px; height: 17px; }
.tab.active { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 3px 0 #161526; }

.inspect-item { padding: 16px; margin-bottom: 14px; }
.inspect-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.inspect-head .who { font-weight: 800; }
.inspect-head .what { font-size: .85rem; color: var(--ink-2); font-weight: 700; }
.inspect-head .due { margin-left: auto; font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.inspect-tasks { font-size: .85rem; color: var(--ink-2); font-weight: 600; line-height: 1.6; margin: 6px 0 14px; }
.inspect-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.inspect-actions button { flex: 1; min-width: 130px; }

table.sched { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.sched th, table.sched td { padding: 9px 4px; text-align: center; border-bottom: 1.5px solid #F4EFE3; }
table.sched th { color: var(--ink-2); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
table.sched td:first-child, table.sched th:first-child { text-align: left; font-weight: 800; }
table.sched .ic { width: 19px; height: 19px; }
table.sched .pname { display: block; font-size: .72rem; font-weight: 700; color: var(--ink-2); margin-top: 2px; }

/* paystub document */
.stub {
  background: #FFFDF8; border: 1.5px solid var(--line); border-radius: var(--r-s);
  padding: 16px; margin-top: 12px; font-size: .9rem;
  box-shadow: 0 2px 0 var(--line);
  color: var(--ink);
}
.stub .stub-co { font-family: var(--display); font-weight: 600; font-size: .95rem; display: flex; justify-content: space-between; align-items: center; }
.stub .stub-co .num { color: var(--ink-2); font-size: .78rem; font-weight: 700; font-family: var(--body); }
.stub hr { border: none; border-top: 1.5px dashed var(--line); margin: 10px 0; }
.stub .line { display: flex; justify-content: space-between; padding: 2.5px 0; font-weight: 600; color: var(--ink); }
.stub .line .l { color: var(--ink-2); }
.stub .line.match .l { color: var(--leaf); }
.stub .line.match .v { color: var(--leaf); font-weight: 800; }
.stub .total { display: flex; justify-content: space-between; font-family: var(--display); font-weight: 600; font-size: 1.15rem; padding-top: 6px; }
.stub .splitrow { display: flex; gap: 8px; margin-top: 10px; }
.stub .splitrow .s {
  flex: 1; text-align: center; font-size: .78rem; font-weight: 800;
  border: 1.5px solid var(--line); border-radius: var(--r-s); padding: 7px 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.stub .splitrow .ic { width: 15px; height: 15px; margin: 0 auto; }

/* ---------- forms ---------- */
.field { margin-bottom: 15px; }
.field label { display: block; font-weight: 800; font-size: .85rem; margin-bottom: 7px; color: var(--ink); }
.field input[type="text"], .field input[type="number"], .field select, .field textarea {
  width: 100%; font-family: var(--body); font-weight: 700; font-size: 1rem;
  padding: 13px 14px; border-radius: var(--r-m);
  border: 1.5px solid var(--line); background: #FDFBF5; color: var(--ink);
  min-height: 52px;
}
.field input:focus, .field select:focus { outline: 2.5px solid color-mix(in srgb, var(--coral), white 55%); border-color: var(--coral); }
.frow { display: flex; gap: 9px; align-items: center; }
.frow > * { flex: 1; min-width: 0; }
.frow > .fix { flex: 0 0 auto; }

.day-pick { display: flex; gap: 7px; flex-wrap: wrap; }
.day-pick button {
  min-height: 48px; width: 52px; padding: 0; font-size: .82rem;
  background: #FDFBF5; border: 1.5px solid var(--line); box-shadow: none;
}
.day-pick button.sel { background: var(--navy); border-color: var(--navy); color: #fff; }

.hue-pick { display: flex; gap: 8px; }
.hue-pick button { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; box-shadow: none; border: 3px solid transparent; }
.hue-pick button.sel { border-color: var(--ink); }

/* ---------- overlays ---------- */
#overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(43, 42, 69, .9);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.ov-box { width: 100%; max-width: 430px; text-align: center; color: #fff; }
.ov-title { font-family: var(--display); font-weight: 600; font-size: 1.35rem; margin-bottom: 20px; }

/* wheel */
.wheel-stage { position: relative; width: min(310px, 78vw); margin: 0 auto; }
.pointer {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 0; height: 0;
  border-left: 15px solid transparent; border-right: 15px solid transparent;
  border-top: 26px solid var(--gold);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.wheel {
  width: 100%; aspect-ratio: 1; border-radius: 50%; position: relative;
  border: 9px solid #fff;
  box-shadow: 0 0 0 5px rgba(255,255,255,.18), 0 18px 44px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.5);
  transition: transform 4.4s cubic-bezier(.13, .82, .16, 1);
}
.wheel .hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; background: #fff; z-index: 3;
  display: flex; align-items: center; justify-content: center; color: var(--navy);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.wheel .hub .ic { width: 26px; height: 26px; }
.wheel .slice-ic { position: absolute; left: 50%; top: 50%; color: #fff; }
.wheel .slice-ic .ic { width: 34px; height: 34px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }

.reveal-card {
  margin-top: 22px; background: var(--card); color: var(--ink);
  border-radius: var(--r-l); padding: 20px;
  animation: stampIn .5s cubic-bezier(.2, 1.9, .4, 1);
}
.reveal-card .you-are { font-size: .72rem; font-weight: 800; letter-spacing: .22em; color: var(--ink-2); }
.reveal-card .prof { font-family: var(--display); font-weight: 600; font-size: 1.9rem; margin: 4px 0; }
.reveal-card .tg { font-weight: 700; color: var(--ink-2); font-size: .92rem; margin-bottom: 14px; }

/* payday ceremony */
.ceremony .stub { text-align: left; animation: rise .5s var(--gentle); }
@keyframes rise { from { transform: translateY(36px); opacity: 0; } }

/* pin pad */
.pin-dots { font-size: 1.7rem; letter-spacing: 10px; min-height: 38px; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 78px); gap: 10px; justify-content: center; margin-top: 12px; }
.pin-pad button { min-height: 64px; font-size: 1.3rem; font-family: var(--display); background: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.25); }

/* ---------- training game ---------- */
.train-box, .career-box { max-width: 480px; }
.career-box .jobcard { background: var(--card); }

.tr-dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 14px; }
.tr-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.25); }
.tr-dots i.done { background: var(--leaf); }
.tr-dots i.now { background: var(--gold); box-shadow: 0 0 0 3px rgba(245,166,35,.3); }

.tr-prompt {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem;
  margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
}
.tr-prompt .speak { background: rgba(255,255,255,.18); color: #fff; }

.tr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tr-opt {
  min-height: 92px; padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--card); color: var(--ink);
  border-radius: var(--r-m); box-shadow: 0 4px 0 rgba(0,0,0,.28);
  font-weight: 700; font-size: .92rem; line-height: 1.25;
  position: relative; text-align: center;
}
.tr-opt .ic { width: 28px; height: 28px; }
.tr-opt.good { background: var(--leaf); color: #fff; box-shadow: 0 4px 0 #2C7E38; animation: pop var(--bounce); }
.tr-opt.bad { opacity: .35; filter: grayscale(.8); }
.tr-opt:disabled { cursor: default; }
.tr-badge {
  position: absolute; top: -9px; left: -9px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold); color: #fff; font-family: var(--display); font-weight: 600;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
  box-shadow: 0 2px 0 #C97F08;
}

.tr-learn { background: var(--card); color: var(--ink); border-radius: var(--r-l); padding: 22px 18px; }
.tr-learn-ic {
  width: 96px; height: 96px; border-radius: 26px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}
.tr-learn-label { font-family: var(--display); font-weight: 600; font-size: 1.3rem; margin-bottom: 18px; }

.cert-seal { margin-bottom: 6px; animation: stampIn .5s cubic-bezier(.2, 1.9, .4, 1); }

/* career ladder */
.lad-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1.5px solid #F4EFE3;
}
.lad-row:last-of-type { border-bottom: none; }
.lad-ic { width: 40px; height: 40px; border-radius: var(--r-s); background: #FDFBF5; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lad-info { flex: 1; min-width: 0; }
.lad-nm { font-weight: 800; }
.lad-bl { font-size: .78rem; color: var(--ink-2); font-weight: 600; }
.lad-done { color: var(--leaf); font-weight: 800; font-size: .85rem; display: flex; gap: 4px; align-items: center; }
.lad-done .ic, .lad-wait .ic { width: 16px; height: 16px; }
.lad-wait { color: var(--ink-2); font-weight: 800; font-size: .82rem; }
.lad-btn { min-height: 44px; padding: 8px 20px; }
.lad-row.next { background: color-mix(in srgb, var(--gold), white 90%); border-radius: var(--r-m); border-bottom-color: transparent; padding-left: 10px; padding-right: 10px; }

/* career tiles are buttons now */
.cert { display: flex; flex-direction: column; align-items: center; box-shadow: none; min-height: 0; font-family: var(--body); }
.cert:active { transform: scale(.96); }
.cert .nm { color: var(--ink); }
.cert.trainee { border-style: dashed; background: var(--card); }
.cert .train-tag {
  margin-top: 7px; font-size: .64rem; font-weight: 800; letter-spacing: .08em;
  background: var(--coral); color: #fff; border-radius: 99px; padding: 3px 10px;
  display: inline-flex; align-items: center; gap: 4px;
}
.cert .train-tag .ic { width: 11px; height: 11px; }

.acad-btns { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
@media (min-width: 520px) { .acad-btns { flex-direction: row; } }

/* ---------- training mini-games ---------- */
.tr-count {
  background: rgba(255,255,255,.18); border-radius: 99px;
  padding: 3px 12px; font-size: .78rem; font-weight: 800; font-family: var(--body);
}
.tr-sort-item { padding: 16px; margin-bottom: 12px; }
.tr-sort-item .tr-learn-ic { width: 72px; height: 72px; margin-bottom: 8px; }
.tr-sort-item .tr-learn-label { font-size: 1.1rem; margin-bottom: 0; }
.tr-bins { display: flex; gap: 10px; }
.tr-bin { flex: 1; min-height: 84px; }

.tr-clean-grid { grid-template-columns: repeat(3, 1fr); }
.tr-smudge { min-height: 84px; }
.tr-smudge .ic { opacity: .65; }
.tr-smudge.shined {
  background: var(--gold); color: #fff; box-shadow: 0 4px 0 #C97F08;
  animation: pop var(--bounce);
}
.tr-smudge.shined .ic { opacity: 1; }

.fill-wrap { background: var(--card); color: var(--ink); border-radius: var(--r-l); padding: 20px 18px; }
.fill-meter {
  position: relative; height: 38px; border-radius: 99px;
  background: #F3EDDF; border: 2px solid var(--line);
  overflow: hidden; margin-bottom: 10px;
}
.fill-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%; z-index: 1;
  background: linear-gradient(90deg, var(--sky), var(--teal));
  border-radius: 99px 0 0 99px;
}
.fill-zone {
  position: absolute; top: 0; bottom: 0; z-index: 2;
  background: color-mix(in srgb, var(--leaf) 38%, transparent);
  border-left: 3px dashed var(--leaf); border-right: 3px dashed var(--leaf);
}
.fill-zonelabel {
  font-size: .85rem; font-weight: 800; color: var(--leaf);
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 6px;
}
.fill-zonelabel .ic { width: 15px; height: 15px; }
.fill-msg { min-height: 26px; font-weight: 800; font-size: .92rem; color: var(--ink-2); margin-bottom: 10px; }

.tr-why {
  background: color-mix(in srgb, var(--gold), white 86%);
  border: 1.5px solid color-mix(in srgb, var(--gold), white 40%);
  border-radius: var(--r-m); padding: 11px 14px; margin-bottom: 16px;
  font-weight: 700; font-size: .92rem; color: #8a5c00;
  display: flex; align-items: center; gap: 9px; text-align: left;
}
.tr-why .ic { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); }

/* item pictures (Twemoji SVG set, CDN with glyph fallback) */
.emi { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; }
.emi img { width: 100%; height: 100%; }
.emi .emi-alt { display: none; font-size: 26px; line-height: 1; }
.emi.emi-fail img { display: none; }
.emi.emi-fail .emi-alt { display: inline; }
.emi.emi-md { width: 36px; height: 36px; }
.emi.emi-md .emi-alt { font-size: 28px; }
.emi.emi-xl { width: 64px; height: 64px; }
.emi.emi-xl .emi-alt { font-size: 52px; }
.ic-sm { width: 26px; height: 26px; }
.wheel .slice-ic .ic-sm { width: 27px; height: 27px; }

/* ---------- daily tasks: N/A + states ---------- */
.na-btn {
  min-height: 0; height: 44px; padding: 0 12px; border-radius: var(--r-m);
  background: #FDFBF5; border: 1.5px solid var(--line); box-shadow: none;
  font-size: .78rem; font-weight: 800; color: var(--ink-2);
}
.na-btn.on { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.task.na .label { color: #BDB7CC; text-decoration: line-through dotted; }
.task.na .tic { opacity: .4; }
.card.sunset .na-btn { background: #38365A; border-color: #4A4875; color: #A9A4D4; }
.card.sunset .na-btn.on { background: #A9A4D4; color: var(--navy); }

.gatebar i.na { background: #D9D3EC; }

.daily-pay {
  margin-top: 12px; padding: 11px 14px; border-radius: var(--r-m);
  background: #FDFBF5; border: 1.5px solid var(--line);
  font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.daily-pay .ic { width: 18px; height: 18px; color: var(--gold); }
.daily-pay.locked { background: color-mix(in srgb, var(--leaf), white 88%); border-color: color-mix(in srgb, var(--leaf), white 55%); }

/* ---------- daily spins (home) ---------- */
.spin-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1.5px solid #F4EFE3; }
.spin-row:last-of-type { border-bottom: none; }
.spin-row .gi { width: 44px; height: 44px; border-radius: var(--r-s); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.spin-row .info { flex: 1; min-width: 0; }
.spin-row .nm { font-weight: 800; }
.spin-row .ds { font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.who-chip {
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  background: color-mix(in srgb, var(--leaf), white 84%); color: var(--leaf);
  border-radius: 99px; padding: 6px 16px; white-space: nowrap;
}
.who-chip.parent { background: color-mix(in srgb, var(--gold), white 82%); color: #9a6500; }

.wheel .slice-name { font-family: var(--display); font-weight: 600; font-size: .8rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }

/* ---------- scratch-off contract ---------- */
.scratch-teaser {
  width: 100%; min-height: 120px; padding: 0; margin-bottom: 12px;
  border: none; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow-card);
}
.scratch-teaser .foil {
  height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: repeating-linear-gradient(135deg, #C9C4D6 0 14px, #ECE8F3 14px 28px);
  color: #6B6383; font-family: var(--display); font-weight: 600; font-size: 1.05rem;
}
.scratch-teaser .foil .ic { color: #8B84A6; }
.scratch-teaser:active { transform: translateY(2px); }

.scratch-wrap {
  position: relative; width: 100%; max-width: 360px; height: 180px;
  margin: 0 auto 14px; border-radius: var(--r-l); overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.scratch-prize {
  position: absolute; inset: 0; color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.scratch-prize .prof { font-family: var(--display); font-weight: 600; font-size: 1.5rem; }
.scratch-prize .tagline { font-size: .9rem; font-weight: 700; opacity: .92; }
#scratch-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; cursor: grab; transition: opacity .4s ease;
}
#scratch-canvas.cleared { opacity: 0; pointer-events: none; }
.scratch-hint { color: #fff; font-weight: 700; font-size: .95rem; opacity: .9; display: flex; align-items: center; justify-content: center; gap: 8px; }
.scratch-hint .ic { width: 16px; height: 16px; color: var(--gold); }

/* ---------- settings toggle rows ---------- */
.toggle-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1.5px solid #F4EFE3; }
.toggle-row:last-of-type { border-bottom: none; }
.toggle-row .gi { width: 40px; height: 40px; border-radius: var(--r-s); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toggle-row .info { flex: 1; min-width: 0; }
.toggle-row .nm { font-weight: 700; font-size: .95rem; }
.toggle-row .ds { font-size: .78rem; color: var(--ink-2); font-weight: 600; }
.toggle {
  width: 56px; height: 32px; border-radius: 999px; padding: 0; flex-shrink: 0;
  background: var(--line); box-shadow: none; border: none; position: relative;
  transition: background var(--snap);
}
.toggle span { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left var(--snap); }
.toggle.on { background: var(--leaf); }
.toggle.on span { left: 27px; }
.toggle:active { transform: none; }

/* ---------- get out the door ---------- */
.god-clock { font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.god-clock span { color: var(--gold); }
.god-steps { display: flex; flex-direction: column; gap: 9px; }
.god-steps .tr-opt { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 60px; text-align: left; }

/* ---------- misc ---------- */
.fab {
  position: fixed; bottom: 16px; right: 16px; z-index: 50;
  border-radius: 99px; min-height: 52px; padding: 10px 20px;
  background: var(--navy); box-shadow: 0 4px 0 #161526; color: #fff;
  font-size: .88rem;
}
.fab .ic { width: 18px; height: 18px; }

.muted { color: var(--ink-2); font-size: .85rem; font-weight: 600; line-height: 1.55; }
.mt { margin-top: 12px; }
.center { text-align: center; }
.shake { animation: shake .4s ease; }
@keyframes shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } }

.gig-tile { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1.5px solid #F4EFE3; }
.gig-tile:last-child { border-bottom: none; }
.gig-tile .gi {
  width: 44px; height: 44px; border-radius: var(--r-s); flex-shrink: 0;
  background: color-mix(in srgb, var(--gold), white 85%); color: #C97F08;
  display: flex; align-items: center; justify-content: center;
}
.gig-tile .nm { font-weight: 800; }
.gig-tile .ds { font-size: .82rem; color: var(--ink-2); font-weight: 600; }
.gig-tile .pay { margin-left: auto; font-family: var(--display); font-weight: 600; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 1ms !important; }
}
@media (max-width: 460px) {
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  #app { padding: 14px 12px 96px; }
}