/* Wall Street - stylesheet. Dark ledger by default, paper theme via [data-theme="light"].
   Desktop: sidebar + wide main. Phone (<= 860px): sticky top bar, fixed bottom tab bar, bottom-sheet forms. */

:root {
  color-scheme: dark;
  --bg: #0e0e12;
  --bg-2: #131318;
  --bg-3: #1a1a21;
  --line: #24242c;
  --line-2: #363642;
  --fg: #e8e7ee;
  --fg-2: #a3a2ad;
  --fg-3: #6f6e7a;
  --accent: #a88cf6;
  --accent-text: #b9a6f8;
  --accent-fg: #140d2a;
  --chart: #a88cf6;
  --pos: #63c78d;
  --neg: #e2665f;
  --font: "Bahnschrift", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", "Consolas", "SF Mono", "Menlo", monospace;
  --r: 3px;
  --nav-h: 54px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f1f6;
  --bg-2: #fcfbfe;
  --bg-3: #ebe9f1;
  --line: #dcdae5;
  --line-2: #c3c0d0;
  --fg: #1a1822;
  --fg-2: #5d5a69;
  --fg-3: #8c899b;
  --accent: #6b4fd8;
  --accent-text: #5a3fc4;
  --accent-fg: #ffffff;
  --chart: #6b4fd8;
  --pos: #1f8a4c;
  --neg: #c2423b;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--fg); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, .acct-row, .bucket { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
b, .strong { font-weight: 600; }
p { margin: 0; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.muted { color: var(--fg-2); }
.small { font-size: 12px; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--accent-text); }
.accent { color: var(--accent-text); }
.r { text-align: right; }
.grow { flex: 1; min-width: 0; }
.label { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: 212px minmax(0, 1fr); min-height: 100vh; }
.side { border-right: 1px solid var(--line); padding: 28px 0 24px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 24px 30px; }
.brand-mark { width: 12px; height: 12px; background: var(--accent); flex: none; }
.brand-name { font-weight: 700; letter-spacing: .22em; font-size: 13px; white-space: nowrap; }
.nav { display: flex; flex-direction: column; }
.nav-item { display: flex; align-items: center; padding: 9px 22px; color: var(--fg-2); border-left: 2px solid transparent; font-weight: 600; font-size: 14px; }
.nav-item.on { color: var(--fg); border-left-color: var(--accent); }
.nav-item .nav-label { flex: 1; }
.nav .ico { display: none; }
.nav .ico svg { width: 100%; height: 100%; display: block; }
.nav-n { font-size: 11px; color: var(--fg-3); }
.side-foot { margin-top: auto; padding: 0 24px; display: flex; flex-direction: column; gap: 7px; }
.side-status { font-size: 11px; color: var(--fg-3); margin-top: 10px; line-height: 1.5; }
.link { background: none; border: 0; padding: 0; color: var(--fg-2); cursor: pointer; text-align: left; font-size: 13px; font-weight: 600; }

.main { padding: 40px 48px 90px; max-width: 1180px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
h1 { font-size: 28px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; line-height: 1.1; }
h2 { font-size: 20px; font-weight: 600; margin: 0 0 10px; }
h3 { font-size: 18px; font-weight: 600; margin: 0 0 14px; }
.sub { color: var(--fg-2); max-width: 62ch; }

/* ---------- hero / stats ---------- */
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: 28px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.hero-num { font-size: 60px; font-weight: 500; line-height: 1; margin: 10px 0 12px; letter-spacing: -0.03em; }
.hero-delta { font-size: 14px; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hero-top .seg button { padding: 5px 10px; }
.hero-note { margin-top: 8px; }
.hero-note + .hero-note { margin-top: 3px; }
.hero-next { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.hero-num2 { font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; margin: 6px 0 8px; }
.hero-breakdown { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.hero-r { display: flex; gap: 36px; padding-bottom: 4px; }
.stat .num { font-size: 18px; margin-top: 4px; }
.stat .num.big { font-size: 24px; }
.summary-row { display: flex; gap: 44px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }

/* ---------- panels ---------- */
.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 18px; border-bottom: 1px solid var(--line); min-height: 44px; }
.panel-head .links { display: flex; gap: 14px; }
.panel .empty { padding: 22px 18px; color: var(--fg-3); }
.panel .pad { padding: 0 18px 14px; }
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }

.seg { display: flex; border: 1px solid var(--line-2); border-radius: 2px; overflow: hidden; }
.seg button { background: none; border: 0; padding: 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--fg-3); cursor: pointer; border-right: 1px solid var(--line-2); white-space: nowrap; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--bg-3); color: var(--fg); }

/* ---------- chart: the live line ---------- */
.chart-wrap { position: relative; padding: 14px 12px 0; }
.chart-tip { position: absolute; top: 6px; background: var(--bg); border: 1px solid var(--line-2); padding: 5px 10px; font-size: 12px; display: flex; gap: 10px; pointer-events: none; white-space: nowrap; border-radius: 2px; z-index: 2; }
.chart { width: 100%; height: auto; display: block; touch-action: pan-y; cursor: crosshair; overflow: visible; }
.chart .base { stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; opacity: .55; }
.chart .line { fill: none; stroke: var(--pos); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart.down .line { stroke: var(--neg); }
.chart .dot { fill: var(--pos); }
.chart.down .dot { fill: var(--neg); }
.chart .pulse { fill: var(--pos); opacity: .35; transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-out infinite; }
.chart.down .pulse { fill: var(--neg); }
@keyframes pulse { 0% { transform: scale(1); opacity: .45; } 70% { transform: scale(3.2); opacity: 0; } 100% { transform: scale(3.2); opacity: 0; } }
.chart .cross { stroke: var(--fg-3); stroke-width: 1; }
.chart .hover-dot { fill: var(--bg); stroke: var(--pos); stroke-width: 2.5; }
.chart.down .hover-dot { stroke: var(--neg); }
.ranges { display: flex; align-items: center; gap: 2px; padding: 4px 12px 12px; overflow-x: auto; scrollbar-width: none; }
.ranges::-webkit-scrollbar { display: none; }
.ranges button { background: none; border: 0; color: var(--fg-3); font-family: var(--font); font-weight: 700; font-size: 12px; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.ranges button.on { background: var(--pos); color: #fff; }
.chart-panel.down .ranges button.on { background: var(--neg); }
.live { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-3); font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 0 10px 0 4px; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); animation: blink 1.6s ease-in-out infinite; }
.chart-panel.down .live i { background: var(--neg); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- lists / rows ---------- */
.group { padding: 6px 0; border-bottom: 1px solid var(--line); }
.group:last-child { border-bottom: 0; }
.group-head { display: flex; justify-content: space-between; padding: 8px 18px 4px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); }
.row { display: flex; align-items: center; gap: 10px; }
.row.top { margin-top: 14px; }
.acct-row { padding: 7px 18px; cursor: pointer; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.w-date { width: 56px; flex: none; }
.w-amt { width: 84px; text-align: right; flex: none; }

/* ledger rows: accounts, bills, upcoming. The action buttons wrap onto their own line when narrow. */
.rrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 11px 18px; border-bottom: 1px solid var(--line); }
.rrow:last-child { border-bottom: 0; }
.rrow.dim { color: var(--fg-3); }
.rrow.dim .strong { color: var(--fg-2); }
.rrow .what { flex: 1 1 170px; min-width: 0; }
.rrow .what .strong { overflow-wrap: anywhere; }
.rrow .sub { color: var(--fg-2); font-size: 12px; margin-top: 1px; }
.rrow .amt { text-align: right; flex: 0 0 auto; min-width: 84px; }
.rrow .acts { display: flex; gap: 6px; flex: 0 0 auto; margin-left: auto; }

.tag { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; border: 1px solid var(--line-2); color: var(--fg-2); padding: 1px 5px; border-radius: 2px; white-space: nowrap; }
.pos-tag { color: var(--pos); border-color: var(--pos); }
.neg-tag { color: var(--neg); border-color: var(--neg); }

.bar { height: 4px; background: var(--line); margin: 8px 0 6px; }
.bar i { display: block; height: 100%; background: var(--accent); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.bar i.done { background: var(--pos); }
.mini-goal { padding: 10px 18px; border-bottom: 1px solid var(--line); }
.mini-goal:last-child { border-bottom: 0; }

/* ---------- tables (history, snapshots) ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); padding: 10px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th.r { text-align: right; }
.tbl td { padding: 11px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl.compact td { padding: 7px 18px; }
.tbl .w-tag { width: 44px; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border: 1px solid var(--line-2); background: transparent; color: var(--fg); border-radius: 2px; font-weight: 600; font-size: 13px; letter-spacing: .01em; cursor: pointer; white-space: nowrap; }
.btn:disabled { opacity: .4; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn-ghost { border-color: transparent; color: var(--fg-2); }
.btn-danger { border-color: var(--neg); color: var(--neg); }
.btn-sm { height: 26px; padding: 0 10px; font-size: 12px; }
.danger { color: var(--neg); }

.inp { height: 34px; width: 100%; background: var(--bg); border: 1px solid var(--line-2); border-radius: 2px; padding: 0 10px; outline: none; }
.inp:focus { border-color: var(--accent); }
select.inp { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23888888' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
input[type="number"].inp::-webkit-inner-spin-button { opacity: .5; }
/* Safari on iPhone draws its own date box unless told not to; keep it the same height and left-aligned as the other inputs */
input[type="date"].inp { -webkit-appearance: none; appearance: none; display: flex; align-items: center; min-height: 34px; }
input[type="date"].inp::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
.tag.rep { color: var(--accent-text); border-color: var(--accent); }
input[type="date"].inp { min-width: 0; }
.inp-money { position: relative; }
.inp-money span { position: absolute; left: 10px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--fg-3); font-family: var(--mono); pointer-events: none; }
.inp-money .inp { padding-left: 24px; }

/* ---------- forms in modals ---------- */
.mform { padding: 24px; }
.mform .intro { margin: -6px 0 16px; }
.fields { display: flex; flex-wrap: wrap; gap: 14px 12px; }
.field { flex: 1 1 100%; min-width: 0; }
.field.half { flex: 1 1 calc(50% - 6px); }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--fg-2); margin-bottom: 6px; }
.hint { font-size: 12px; color: var(--fg-3); margin-top: 6px; }
.checks { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 2px; max-height: 200px; overflow: auto; padding: 4px; }
.checks .none { padding: 8px; }
.check { display: flex; align-items: center; gap: 10px; padding: 6px 8px; cursor: pointer; }
.check input { accent-color: var(--accent); margin: 0; }
.check .grow { flex: 1; }
.mactions { display: flex; gap: 8px; margin-top: 22px; align-items: center; }

.modal-root { position: fixed; inset: 0; display: none; z-index: 50; }
.modal-root.open { display: block; }
.modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.modal { position: absolute; left: 50%; top: 10vh; transform: translateX(-50%); width: min(470px, calc(100vw - 32px)); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r); max-height: 82vh; overflow: auto; }

.toast-root { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--fg); color: var(--bg); padding: 8px 14px; font-size: 13px; font-weight: 600; border-radius: 2px; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.toast.in { opacity: 1; transform: none; }

/* ---------- page-specific ---------- */
.welcome { padding: 28px; }
.welcome p { max-width: 62ch; color: var(--fg-2); margin: 0 0 18px; }
.welcome .row { gap: 10px; flex-wrap: wrap; }

.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.goal { padding: 18px; margin: 0; }
.goal-nums { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.goal-nums .big { font-size: 24px; }
.goal .bar { margin: 12px 0 8px; }
.goal .row.top { gap: 8px; }
.goal-line { font-size: 12px; color: var(--fg-2); margin-top: 6px; }
.mg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 28px; align-items: center; padding: 18px; }
.mg-name { font-size: 18px; font-weight: 600; }
.mg-pct { font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.meter { display: flex; gap: 3px; height: 12px; margin: 10px 0 8px; position: relative; }
.meter .token { display: none; }
.meter i { flex: 1; display: block; background: var(--line); position: relative; overflow: hidden; }
.meter i b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.meter.done i b { background: var(--pos); }

.bucket { padding: 14px 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
.bucket:last-child { border-bottom: 0; }
.bucket.unassigned { cursor: default; }
.bucket .row + .row { margin-top: 2px; }
.tbar { position: relative; height: 6px; background: var(--line); margin: 9px 0; }
.tbar .fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.tbar .mark { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--fg); margin-left: -1px; }
.income-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.income-row .inp-money { width: 150px; }
.kv { display: flex; justify-content: space-between; padding: 8px 18px; border-bottom: 1px solid var(--line); }
.data-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.data-row:last-child { border-bottom: 0; }
.data-row .muted { max-width: 60ch; }
.data-row .acts { flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex: none; }
.data-row .copies { margin-top: 10px; border: 1px solid var(--line); border-radius: 2px; }
.data-row .copies li { padding: 8px 12px; }

/* hover only where a pointer can hover, so taps on a phone do not leave rows stuck highlighted */
@media (hover: hover) {
  .nav-item:hover { color: var(--fg); background: var(--bg-2); }
  .link:hover { color: var(--accent-text); }
  .seg button:hover { color: var(--fg); }
  .acct-row:hover, .bucket:hover, .check:hover { background: var(--bg-3); }
  .bucket.unassigned:hover { background: none; }
  .btn:hover { border-color: var(--fg-3); background: var(--bg-3); }
  .btn-primary:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.08); }
  .btn-ghost:hover { border-color: transparent; color: var(--fg); }
  .btn-danger:hover { background: var(--neg); border-color: var(--neg); color: #fff; }
  .tbl tbody tr:hover { background: var(--bg-3); }
}
.btn:active { filter: brightness(.92); }

/* ======================================================================
   phone
   ====================================================================== */
@media (max-width: 860px) {
  body { font-size: 15px; }
  .app { display: block; }
  .side { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; padding-top: calc(11px + env(safe-area-inset-top)); background: var(--bg); border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; flex-direction: row; background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item { flex: 1 0 auto; justify-content: center; padding: 0 7px; height: var(--nav-h); font-size: 11.5px; border-left: 0; border-top: 2px solid transparent; white-space: nowrap; }
  .nav-item .nav-label { flex: none; }
  .nav-item.on { border-top-color: var(--accent); background: none; }
  .nav-n { display: none; }
  .side-foot { margin: 0; flex-direction: row; gap: 16px; padding: 0; }
  .side-status { display: none; }
  .link { font-size: 12px; }
  .main { padding: 20px 16px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); max-width: none; }

  .page-head { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 20px; }
  .page-head .row { flex-wrap: wrap; }
  .page-head .row .btn { flex: 1; height: 40px; }
  h1 { font-size: 24px; }
  .sub { font-size: 13px; }
  .hero { flex-direction: column; align-items: stretch; gap: 18px; padding-bottom: 20px; margin-bottom: 20px; }
  .ranges { justify-content: space-between; padding: 4px 8px 10px; } .ranges button { padding: 6px 8px; } .live { padding-right: 4px; }
  .chart-wrap { padding: 12px 6px 0; }
  .hero-num { font-size: 44px; margin: 8px 0 10px; }
  .hero-r { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; padding: 0; }
  .hero-num2 { font-size: 30px; }
  .mg { grid-template-columns: 1fr; gap: 14px; padding: 16px 14px; }
  .mg-act .btn { width: 100%; height: 40px; }
  .summary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding-bottom: 20px; margin-bottom: 20px; }
  .stat .num.big { font-size: 20px; }
  .grid-2 { grid-template-columns: 1fr; gap: 16px; }
  .panel { margin-bottom: 16px; }
  .panel-head { padding: 10px 14px; flex-wrap: wrap; }
  .panel .empty, .panel .pad { padding-left: 14px; padding-right: 14px; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { padding: 7px 10px; }
  /* the History filter has too many choices for one row: on phones it wraps into chips instead of running off the edge */
  .panel .panel-head .seg.wrap { flex: 1 0 100%; flex-wrap: wrap; gap: 6px; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible; padding: 0; }
  .panel .panel-head .seg.wrap button { flex: 0 0 auto; border: 1px solid var(--line-2) !important; border-radius: 3px; padding: 6px 10px; }
  .group-head, .acct-row, .list li, .mini-goal, .bucket, .income-row, .kv, .data-row, .rrow { padding-left: 14px; padding-right: 14px; }
  .acct-row { padding-top: 10px; padding-bottom: 10px; }
  .rrow .what { flex-basis: 40px; }
  .rrow .amt { min-width: 0; }
  .rrow .acts { flex: 1 0 100%; justify-content: flex-end; }
  .btn { height: 38px; }
  .btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
  .inp { height: 42px; font-size: 16px; }
  .income-row { flex-wrap: wrap; }
  .income-row .inp-money { width: 100%; }
  .tbl th, .tbl td { padding-left: 12px; padding-right: 12px; }
  .tbl.compact td { padding: 9px 12px; }
  .hide-sm { display: none !important; }
  .goal-grid { grid-template-columns: 1fr; }
  .data-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .data-row .btn { height: 40px; }
  .data-row .acts .btn { flex: 1; }

  .modal { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 10px 10px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); animation: sheet .22s cubic-bezier(.2,.7,.2,1); }
  .mform { padding: 20px 16px 24px; }
  .mactions { flex-wrap: wrap; gap: 10px; }
  .mactions .grow { display: none; }
  .mactions .btn { height: 42px; flex: 1; }
  .mactions [data-danger] { flex: 1 0 100%; order: 5; }
  .toast-root { left: 16px; right: 16px; bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); align-items: center; }
  .toast { max-width: 100%; text-align: center; }
}
@keyframes sheet { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ======================================================================
   look picker + shared hooks for the themed looks
   ====================================================================== */
.looks { display: flex; flex-direction: column; gap: 8px; }
.look { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-2); background: var(--bg); border-radius: var(--r); text-align: left; cursor: pointer; color: var(--fg); width: 100%; font: inherit; }
.look.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.look .grow { display: flex; flex-direction: column; gap: 2px; }
.look .sw { display: flex; gap: 4px; flex: none; }
.look .sw i { display: block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(128,128,128,.45); }
.lvl { display: none; }
:root:is([data-theme="arcade"],[data-theme="tycoon"],[data-theme="heist"],[data-theme="comic"],[data-theme="casino"],[data-theme="passbook"]) .nav .ico { display: inline-flex; width: 18px; height: 18px; margin-right: 10px; }
@media (max-width: 860px) {
  :root:is([data-theme="arcade"],[data-theme="tycoon"],[data-theme="heist"],[data-theme="comic"],[data-theme="casino"],[data-theme="passbook"]) .nav-item { flex-direction: column; gap: 3px; font-size: 10.5px; padding: 0 5px; height: 60px; border-top: 0; }
  :root:is([data-theme="arcade"],[data-theme="tycoon"],[data-theme="heist"],[data-theme="comic"],[data-theme="casino"],[data-theme="passbook"]) .nav .ico { display: block; width: 20px; height: 20px; margin: 0; }
  :root:is([data-theme="arcade"],[data-theme="tycoon"],[data-theme="heist"],[data-theme="comic"],[data-theme="casino"],[data-theme="passbook"]) .main { padding-bottom: calc(60px + 28px + env(safe-area-inset-bottom)); }
  :root:is([data-theme="arcade"],[data-theme="tycoon"],[data-theme="heist"],[data-theme="comic"],[data-theme="casino"],[data-theme="passbook"]) .toast-root { bottom: calc(60px + 14px + env(safe-area-inset-bottom)); }
}

/* ======================================================================
   arcade: neon HUD on near-black. Brackets, glow, XP bars, your level.
   ====================================================================== */
:root[data-theme="arcade"] {
  color-scheme: dark;
  --bg: #07080f; --bg-2: #0d1020; --bg-3: #141a30; --line: #1c2340; --line-2: #34407a;
  --fg: #e8ecff; --fg-2: #9aa3c7; --fg-3: #667099;
  --accent: #b388ff; --accent-text: #c9a8ff; --accent-fg: #0b0720;
  --pos: #2ee6a6; --neg: #ff5c7a; --chart: #7cf2ff;
  --font: "Nunito", "Segoe UI", system-ui, sans-serif;
  --mono: "Chakra Petch", "Consolas", monospace;
  --r: 4px; --hud: #7cf2ff;
}
[data-theme="arcade"] body { background-color: var(--bg); background-image: linear-gradient(rgba(124,242,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(124,242,255,.045) 1px, transparent 1px); background-size: 28px 28px; }
[data-theme="arcade"] .label, [data-theme="arcade"] h1, [data-theme="arcade"] h2, [data-theme="arcade"] h3, [data-theme="arcade"] .mg-name, [data-theme="arcade"] .btn, [data-theme="arcade"] .tag, [data-theme="arcade"] .nav-item, [data-theme="arcade"] .seg button, [data-theme="arcade"] .brand-name, [data-theme="arcade"] .link { font-family: "Chakra Petch", var(--font); }
[data-theme="arcade"] .label { color: var(--hud); letter-spacing: .14em; }
[data-theme="arcade"] .num { letter-spacing: 0; font-weight: 600; }
[data-theme="arcade"] .hero-num { text-shadow: 0 0 22px rgba(179,136,255,.45); }
[data-theme="arcade"] .panel, [data-theme="arcade"] .hero, [data-theme="arcade"] .summary-row { position: relative; background: rgba(13,16,32,.92); border: 1px solid rgba(179,136,255,.35); border-radius: var(--r); box-shadow: 0 0 0 1px rgba(124,242,255,.06), 0 0 28px rgba(179,136,255,.08); }
[data-theme="arcade"] .hero, [data-theme="arcade"] .summary-row { padding: 18px 20px; }
[data-theme="arcade"] .panel::before, [data-theme="arcade"] .panel::after, [data-theme="arcade"] .hero::before, [data-theme="arcade"] .hero::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; }
[data-theme="arcade"] .panel::before, [data-theme="arcade"] .hero::before { top: -1px; left: -1px; border-top: 2px solid var(--hud); border-left: 2px solid var(--hud); }
[data-theme="arcade"] .panel::after, [data-theme="arcade"] .hero::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--hud); border-right: 2px solid var(--hud); }
[data-theme="arcade"] .panel-head { border-bottom: 1px solid rgba(124,242,255,.25); background: linear-gradient(90deg, rgba(124,242,255,.08), transparent); }
[data-theme="arcade"] .btn { border-radius: 3px; border: 1px solid rgba(179,136,255,.6); background: rgba(179,136,255,.08); color: var(--fg); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
[data-theme="arcade"] .btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: 0 0 14px rgba(179,136,255,.55); border-color: var(--accent); }
[data-theme="arcade"] .btn-ghost { border-color: transparent; background: none; color: var(--fg-2); }
[data-theme="arcade"] .btn-danger { border-color: var(--neg); color: var(--neg); background: none; }
[data-theme="arcade"] .tag { border-radius: 2px; border-color: rgba(124,242,255,.5); color: var(--hud); letter-spacing: .1em; }
[data-theme="arcade"] .pos-tag { color: var(--pos); border-color: var(--pos); }
[data-theme="arcade"] .neg-tag { color: var(--neg); border-color: var(--neg); }
[data-theme="arcade"] .lvl { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid var(--hud); color: var(--hud); border-radius: 2px; font-size: 10px; letter-spacing: .14em; box-shadow: 0 0 8px rgba(124,242,255,.35); vertical-align: 1px; }
[data-theme="arcade"] .hero-delta .pos::before { content: "+XP"; display: inline-block; border: 1px solid var(--pos); color: var(--pos); border-radius: 2px; padding: 0 6px; margin-right: 8px; font-family: "Chakra Petch", var(--font); font-size: 11px; letter-spacing: .12em; box-shadow: 0 0 8px rgba(46,230,166,.35); }
[data-theme="arcade"] .meter { height: 14px; gap: 3px; }
[data-theme="arcade"] .meter i { background: rgba(255,255,255,.06); border: 1px solid rgba(124,242,255,.25); }
[data-theme="arcade"] .meter i b { background: linear-gradient(90deg, var(--hud), var(--accent)); box-shadow: 0 0 8px rgba(124,242,255,.5); }
[data-theme="arcade"] .meter.done i b { background: var(--pos); box-shadow: 0 0 8px rgba(46,230,166,.5); }
[data-theme="arcade"] .bar i, [data-theme="arcade"] .tbar .fill { background: linear-gradient(90deg, var(--hud), var(--accent)); }
[data-theme="arcade"] .inp { background: #090b16; border-color: rgba(179,136,255,.4); border-radius: 3px; }
[data-theme="arcade"] .modal { background: var(--bg-2); border: 1px solid rgba(179,136,255,.5); box-shadow: 0 0 40px rgba(179,136,255,.15); }
[data-theme="arcade"] .nav-item.on { color: var(--hud); border-left-color: var(--hud); text-shadow: 0 0 10px rgba(124,242,255,.6); }
[data-theme="arcade"] .brand-name { letter-spacing: .3em; }
[data-theme="arcade"] .brand-mark { background: var(--hud); box-shadow: 0 0 10px var(--hud); }
[data-theme="arcade"] .toast { background: var(--hud); color: #06121a; border-radius: 2px; font-family: "Chakra Petch", var(--font); letter-spacing: .06em; }
@media (max-width: 860px) {
  [data-theme="arcade"] .nav { background: rgba(7,8,15,.96); border-top: 1px solid rgba(124,242,255,.3); }
  [data-theme="arcade"] .nav-item.on { border-top: 0; }
}

/* ======================================================================
   comic pop: halftone, thick outlines, big shadows. Ka-ching.
   ====================================================================== */
:root[data-theme="comic"] {
  color-scheme: light;
  --bg: #fff3c4; --bg-2: #ffffff; --bg-3: #fff7d6; --line: #e8dfbd; --line-2: #111111;
  --fg: #111111; --fg-2: #444444; --fg-3: #7a7a7a;
  --accent: #ff3b6b; --accent-text: #d61f52; --accent-fg: #ffffff;
  --pos: #12b886; --neg: #e8323c; --chart: #2f80ff;
  --font: "Nunito", system-ui, sans-serif;
  --mono: "Fredoka", "Nunito", sans-serif;
  --r: 12px; --pow: #ffd23f;
}
[data-theme="comic"] body { background-color: var(--bg); background-image: radial-gradient(rgba(233,182,44,.55) 1.2px, transparent 1.4px); background-size: 10px 10px; }
[data-theme="comic"] .label, [data-theme="comic"] h1, [data-theme="comic"] h2, [data-theme="comic"] h3, [data-theme="comic"] .mg-name, [data-theme="comic"] .brand-name, [data-theme="comic"] .nav-item, [data-theme="comic"] .btn, [data-theme="comic"] .tag, [data-theme="comic"] .link, [data-theme="comic"] .seg button { font-family: "Bangers", "Impact", sans-serif; letter-spacing: .05em; font-weight: 400; }
[data-theme="comic"] .label { font-size: 15px; color: var(--fg); text-transform: none; }
[data-theme="comic"] h1 { font-size: 38px; text-shadow: 3px 3px 0 var(--pow); }
[data-theme="comic"] h2 { font-size: 24px; } [data-theme="comic"] h3 { font-size: 22px; } [data-theme="comic"] .mg-name { font-size: 22px; }
[data-theme="comic"] .num { font-weight: 700; letter-spacing: 0; }
[data-theme="comic"] .hero-num { font-family: "Bangers", "Impact", sans-serif; font-weight: 400; letter-spacing: .03em; color: var(--pow); -webkit-text-stroke: 1.5px #111; text-shadow: 4px 4px 0 #111; }
[data-theme="comic"] .panel, [data-theme="comic"] .hero, [data-theme="comic"] .summary-row { background: #fff; border: 3px solid var(--line-2); border-radius: var(--r); box-shadow: 6px 6px 0 var(--line-2); }
[data-theme="comic"] .panel { overflow: hidden; }
[data-theme="comic"] .hero, [data-theme="comic"] .summary-row { padding: 18px 20px; }
[data-theme="comic"] .panel-head { border-bottom: 3px solid var(--line-2); background: var(--pow); }
[data-theme="comic"] .panel:nth-of-type(5n+2) .panel-head { background: #7ad3ff; }
[data-theme="comic"] .panel:nth-of-type(5n+3) .panel-head { background: #ff9ecf; }
[data-theme="comic"] .panel:nth-of-type(5n+4) .panel-head { background: #b3f0a1; }
[data-theme="comic"] .panel:nth-of-type(5n+5) .panel-head { background: #ffb347; }
[data-theme="comic"] .panel-head .label { font-size: 19px; }
[data-theme="comic"] .panel-head .link, [data-theme="comic"] .panel-head .muted { color: var(--fg); }
[data-theme="comic"] .btn { border-radius: 999px; border: 3px solid var(--line-2); background: #fff; color: var(--fg); font-size: 15px; box-shadow: 3px 3px 0 var(--line-2); }
[data-theme="comic"] .btn:active { box-shadow: 1px 1px 0 var(--line-2); filter: none; }
[data-theme="comic"] .btn-primary { background: var(--accent); color: #fff; }
[data-theme="comic"] .btn-ghost { border-color: transparent; box-shadow: none; background: none; }
[data-theme="comic"] .btn-danger { color: var(--neg); }
[data-theme="comic"] .tag { border-radius: 999px; border: 2px solid var(--line-2); background: #fff; color: var(--fg); font-size: 12px; letter-spacing: .06em; padding: 1px 8px; }
[data-theme="comic"] .pos-tag { background: var(--pos); color: #fff; }
[data-theme="comic"] .neg-tag { background: var(--neg); color: #fff; }
[data-theme="comic"] .hero-delta .pos::before { content: "KA-CHING!"; display: inline-block; font-family: "Bangers", "Impact", sans-serif; background: var(--pow); border: 2px solid #111; color: #111; padding: 1px 8px; border-radius: 999px; margin-right: 8px; transform: rotate(-4deg); letter-spacing: .06em; font-size: 13px; }
[data-theme="comic"] .meter { height: 16px; gap: 3px; }
[data-theme="comic"] .meter i { background: #fff; border: 2px solid var(--line-2); border-radius: 4px; }
[data-theme="comic"] .meter i b { background: var(--accent); }
[data-theme="comic"] .meter.done i b { background: var(--pos); }
[data-theme="comic"] .bar, [data-theme="comic"] .tbar { height: 12px; border: 2px solid var(--line-2); border-radius: 999px; background: #fff; overflow: hidden; }
[data-theme="comic"] .bar i, [data-theme="comic"] .tbar .fill { background: var(--accent); }
[data-theme="comic"] .tbar .mark { background: var(--line-2); }
[data-theme="comic"] .inp { border: 3px solid var(--line-2); border-radius: 10px; background: #fff; }
[data-theme="comic"] .modal { border: 3px solid var(--line-2); border-radius: var(--r); box-shadow: 8px 8px 0 var(--line-2); background: #fff; }
[data-theme="comic"] .modal-bg { background: rgba(60,40,0,.45); }
[data-theme="comic"] .seg { border: 2px solid var(--line-2); border-radius: 999px; overflow: hidden; }
[data-theme="comic"] .seg button { color: var(--fg-2); border-right-color: var(--line-2); font-size: 13px; }
[data-theme="comic"] .seg button.on { background: var(--line-2); color: #fff; }
[data-theme="comic"] .side { border-color: var(--line-2); }
[data-theme="comic"] .brand-name { font-size: 22px; letter-spacing: .08em; text-shadow: 2px 2px 0 var(--pow); }
[data-theme="comic"] .brand-mark { background: var(--accent); border: 2px solid #111; border-radius: 50%; width: 14px; height: 14px; }
[data-theme="comic"] .nav-item { font-size: 17px; }
[data-theme="comic"] .nav-item.on { color: var(--accent-text); border-left-color: var(--accent); }
[data-theme="comic"] .link { color: var(--fg-2); font-size: 15px; }
[data-theme="comic"] .toast { background: #111; color: var(--pow); border-radius: 999px; font-family: "Bangers", "Impact", sans-serif; letter-spacing: .05em; font-size: 15px; }
@media (max-width: 860px) {
  [data-theme="comic"] .side { background: var(--bg); }
  [data-theme="comic"] .nav { background: #fff; border-top: 3px solid var(--line-2); }
  [data-theme="comic"] .nav-item { font-size: 13px; }
}

/* ======================================================================
   casino night: black and gold, poker-chip tags, velvet glow.
   ====================================================================== */
:root[data-theme="casino"] {
  color-scheme: dark;
  --bg: #0b0b0d; --bg-2: #141316; --bg-3: #1d1b20; --line: #2a262e; --line-2: #c9a24a;
  --fg: #f3ede0; --fg-2: #b9b0a0; --fg-3: #7d7669;
  --accent: #d4af37; --accent-text: #e6c25c; --accent-fg: #1a1400;
  --pos: #3fd68c; --neg: #e0455a; --chart: #d4af37;
  --font: "Nunito", system-ui, sans-serif;
  --mono: "Bebas Neue", "Oswald", sans-serif;
  --r: 10px; --gold: #d4af37;
}
[data-theme="casino"] body { background-color: var(--bg); background-image: radial-gradient(ellipse at 50% -10%, rgba(212,175,55,.16), transparent 55%), repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 6px, transparent 6px 12px); }
[data-theme="casino"] .label, [data-theme="casino"] h1, [data-theme="casino"] h2, [data-theme="casino"] h3, [data-theme="casino"] .mg-name, [data-theme="casino"] .btn, [data-theme="casino"] .tag, [data-theme="casino"] .nav-item, [data-theme="casino"] .brand-name, [data-theme="casino"] .seg button { font-family: "Bebas Neue", "Oswald", sans-serif; letter-spacing: .08em; font-weight: 400; }
[data-theme="casino"] .label { font-size: 14px; color: var(--accent-text); }
[data-theme="casino"] h1 { font-size: 40px; } [data-theme="casino"] h2 { font-size: 26px; } [data-theme="casino"] h3 { font-size: 24px; } [data-theme="casino"] .mg-name { font-size: 26px; }
[data-theme="casino"] .num { letter-spacing: .02em; font-size: 1.12em; font-weight: 400; }
[data-theme="casino"] .hero-num { font-size: 72px; background: linear-gradient(180deg, #f7e08a, #c9a24a); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="casino"] .panel, [data-theme="casino"] .hero, [data-theme="casino"] .summary-row { background: linear-gradient(180deg, #17161a, #111013); border: 1px solid rgba(212,175,55,.55); border-radius: var(--r); box-shadow: inset 0 0 0 4px #111013, inset 0 0 0 5px rgba(212,175,55,.28), 0 10px 30px rgba(0,0,0,.5); }
[data-theme="casino"] .hero, [data-theme="casino"] .summary-row { padding: 22px 24px; }
[data-theme="casino"] .panel-head { border-bottom: 1px solid rgba(212,175,55,.35); background: none; padding: 12px 22px; }
[data-theme="casino"] .panel .empty, [data-theme="casino"] .panel .pad, [data-theme="casino"] .group-head, [data-theme="casino"] .acct-row, [data-theme="casino"] .list li, [data-theme="casino"] .mini-goal, [data-theme="casino"] .bucket, [data-theme="casino"] .income-row, [data-theme="casino"] .kv, [data-theme="casino"] .data-row, [data-theme="casino"] .rrow, [data-theme="casino"] .mg, [data-theme="casino"] .goal, [data-theme="casino"] .welcome, [data-theme="casino"] .chart-wrap { padding-left: 22px; padding-right: 22px; }
[data-theme="casino"] .tbl th, [data-theme="casino"] .tbl td { padding-left: 22px; padding-right: 22px; }
[data-theme="casino"] .btn { border-radius: 999px; border: 1px solid var(--gold); background: transparent; color: var(--accent-text); font-size: 15px; letter-spacing: .1em; }
[data-theme="casino"] .btn-primary { background: linear-gradient(180deg, #f0d275, #b8902c); color: var(--accent-fg); border-color: #f0d275; box-shadow: 0 0 16px rgba(212,175,55,.35); }
[data-theme="casino"] .btn-ghost { border-color: transparent; color: var(--fg-2); }
[data-theme="casino"] .btn-danger { border-color: var(--neg); color: var(--neg); }
[data-theme="casino"] .tag { border-radius: 999px; border: 2px dashed var(--gold); color: var(--accent-text); background: #1d1b20; padding: 2px 8px; font-size: 11px; letter-spacing: .12em; }
[data-theme="casino"] .pos-tag { border-color: var(--pos); color: var(--pos); }
[data-theme="casino"] .neg-tag { border-color: var(--neg); color: var(--neg); }
[data-theme="casino"] .hero-delta .pos::before { content: "WIN"; display: inline-block; background: var(--gold); color: var(--accent-fg); border-radius: 999px; padding: 1px 8px; margin-right: 8px; font-family: "Bebas Neue", "Oswald", sans-serif; letter-spacing: .14em; font-size: 12px; }
[data-theme="casino"] .meter { height: 14px; gap: 3px; }
[data-theme="casino"] .meter i { background: #0b0b0d; border: 1px solid rgba(212,175,55,.35); border-radius: 3px; }
[data-theme="casino"] .meter i b { background: linear-gradient(180deg, #f0d275, #b8902c); }
[data-theme="casino"] .meter.done i b { background: var(--pos); }
[data-theme="casino"] .bar i, [data-theme="casino"] .tbar .fill { background: linear-gradient(180deg, #f0d275, #b8902c); }
[data-theme="casino"] .inp { background: #0b0b0d; border: 1px solid rgba(212,175,55,.5); border-radius: 8px; }
[data-theme="casino"] .modal { background: #141316; border: 1px solid rgba(212,175,55,.6); box-shadow: inset 0 0 0 4px #141316, inset 0 0 0 5px rgba(212,175,55,.3), 0 20px 60px rgba(0,0,0,.7); }
[data-theme="casino"] .seg { border-color: rgba(212,175,55,.5); border-radius: 999px; overflow: hidden; }
[data-theme="casino"] .seg button { border-right-color: rgba(212,175,55,.3); font-size: 12px; }
[data-theme="casino"] .seg button.on { background: var(--gold); color: var(--accent-fg); }
[data-theme="casino"] .brand-name { color: var(--accent-text); font-size: 18px; letter-spacing: .3em; }
[data-theme="casino"] .brand-mark { background: var(--gold); transform: rotate(45deg); }
[data-theme="casino"] .nav-item { font-size: 17px; letter-spacing: .12em; }
[data-theme="casino"] .nav-item.on { color: var(--accent-text); border-left-color: var(--gold); }
[data-theme="casino"] .toast { background: var(--gold); color: var(--accent-fg); border-radius: 999px; }
@media (max-width: 860px) {
  [data-theme="casino"] .nav { background: #0b0b0d; border-top: 1px solid rgba(212,175,55,.5); }
  [data-theme="casino"] .nav-item { font-size: 12px; }
  [data-theme="casino"] .hero, [data-theme="casino"] .summary-row { padding: 18px; }
}

/* ======================================================================
   passbook: kraft paper, navy ink, typewriter numbers, rubber stamps.
   ====================================================================== */
:root[data-theme="passbook"] {
  color-scheme: light;
  --bg: #e9dfcc; --bg-2: #fbf7ef; --bg-3: #f1ebdd; --line: #d9ccb2; --line-2: #1e2a44;
  --fg: #1e2a44; --fg-2: #4c5670; --fg-3: #7d8598;
  --accent: #1e2a44; --accent-text: #1e2a44; --accent-fg: #fbf7ef;
  --pos: #2f7a4f; --neg: #b3342e; --chart: #1e2a44;
  --font: "Nunito", system-ui, sans-serif;
  --mono: "Courier Prime", "Courier New", monospace;
  --r: 4px; --stamp: #b3342e;
}
[data-theme="passbook"] body { background-color: var(--bg); background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(30,42,68,.07) 27px 28px), radial-gradient(rgba(120,90,40,.09) 1px, transparent 1.5px); background-size: auto, 6px 6px; }
[data-theme="passbook"] h1, [data-theme="passbook"] h2, [data-theme="passbook"] h3, [data-theme="passbook"] .mg-name, [data-theme="passbook"] .brand-name, [data-theme="passbook"] .panel-head .label { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: 0; }
[data-theme="passbook"] h1 { font-size: 34px; font-style: italic; }
[data-theme="passbook"] .label { letter-spacing: .12em; color: var(--fg-2); }
[data-theme="passbook"] .num { font-weight: 700; letter-spacing: 0; }
[data-theme="passbook"] .panel, [data-theme="passbook"] .hero, [data-theme="passbook"] .summary-row { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 3px 3px 0 rgba(30,42,68,.18); }
[data-theme="passbook"] .panel { overflow: hidden; }
[data-theme="passbook"] .hero, [data-theme="passbook"] .summary-row { padding: 18px 20px; }
[data-theme="passbook"] .panel-head { background: var(--line-2); color: var(--accent-fg); border-bottom: 1px solid var(--line-2); }
[data-theme="passbook"] .panel-head .label, [data-theme="passbook"] .panel-head .muted, [data-theme="passbook"] .panel-head .link, [data-theme="passbook"] .panel-head .num { color: var(--accent-fg); }
[data-theme="passbook"] .panel-head .label { font-size: 16px; text-transform: none; letter-spacing: .01em; font-style: italic; }
[data-theme="passbook"] .panel-head .seg { border-color: rgba(251,247,239,.6); }
[data-theme="passbook"] .panel-head .seg button { color: rgba(251,247,239,.8); border-right-color: rgba(251,247,239,.4); }
[data-theme="passbook"] .panel-head .seg button.on { background: var(--accent-fg); color: var(--fg); }
[data-theme="passbook"] .btn { border-radius: 3px; border: 1.5px solid var(--line-2); background: var(--bg-2); color: var(--fg); font-family: "Courier Prime", "Courier New", monospace; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
[data-theme="passbook"] .btn-primary { background: var(--line-2); color: var(--accent-fg); }
[data-theme="passbook"] .btn-ghost { border-color: transparent; background: none; color: var(--fg-2); }
[data-theme="passbook"] .btn-danger { color: var(--neg); border-color: var(--neg); }
[data-theme="passbook"] .tag { border-radius: 2px; border: 1.5px solid var(--line-2); color: var(--fg); font-family: "Courier Prime", "Courier New", monospace; font-weight: 700; letter-spacing: .08em; background: var(--bg-2); }
[data-theme="passbook"] .pos-tag, [data-theme="passbook"] .neg-tag { border: 2px solid currentColor; background: transparent; transform: rotate(-4deg); text-transform: uppercase; padding: 2px 8px; font-size: 11px; }
[data-theme="passbook"] .pos-tag { color: var(--pos); }
[data-theme="passbook"] .neg-tag { color: var(--stamp); }
[data-theme="passbook"] .hero-delta .pos::before { content: "DEPOSIT"; display: inline-block; border: 2px solid var(--stamp); color: var(--stamp); font-family: "Courier Prime", "Courier New", monospace; font-weight: 700; letter-spacing: .12em; padding: 1px 8px; border-radius: 2px; transform: rotate(-4deg); margin-right: 10px; font-size: 11px; }
[data-theme="passbook"] .hero-num { font-family: "Courier Prime", "Courier New", monospace; font-weight: 700; letter-spacing: -.02em; }
[data-theme="passbook"] .meter { height: 12px; gap: 2px; }
[data-theme="passbook"] .meter i { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 1px; }
[data-theme="passbook"] .meter i b { background: var(--line-2); }
[data-theme="passbook"] .meter.done i b { background: var(--pos); }
[data-theme="passbook"] .bar, [data-theme="passbook"] .tbar { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 2px; overflow: hidden; height: 8px; }
[data-theme="passbook"] .bar i, [data-theme="passbook"] .tbar .fill { background: var(--line-2); }
[data-theme="passbook"] .tbar .mark { background: var(--stamp); }
[data-theme="passbook"] .inp { background: #fff; border: 1.5px solid var(--line-2); border-radius: 3px; font-family: "Courier Prime", "Courier New", monospace; }
[data-theme="passbook"] .modal { background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 4px 4px 0 rgba(30,42,68,.2); }
[data-theme="passbook"] .seg { border-color: var(--line-2); }
[data-theme="passbook"] .seg button { border-right-color: var(--line-2); }
[data-theme="passbook"] .seg button.on { background: var(--line-2); color: var(--accent-fg); }
[data-theme="passbook"] .side { border-color: rgba(30,42,68,.25); }
[data-theme="passbook"] .brand-name { font-size: 16px; letter-spacing: .04em; font-style: italic; }
[data-theme="passbook"] .brand-mark { background: var(--stamp); border-radius: 50%; }
[data-theme="passbook"] .nav-item.on { color: var(--fg); border-left-color: var(--stamp); }
[data-theme="passbook"] .toast { background: var(--line-2); color: var(--accent-fg); border-radius: 3px; font-family: "Courier Prime", "Courier New", monospace; }
@media (max-width: 860px) {
  [data-theme="passbook"] .side { background: var(--bg); border-bottom-color: rgba(30,42,68,.25); }
  [data-theme="passbook"] .nav { background: var(--bg-2); border-top: 1px solid var(--line-2); }
  [data-theme="passbook"] .nav-item.on { color: var(--stamp); }
}

/* ======================================================================
   tycoon: a glossy mobile board-game HUD. Sky-blue table, cream cards, red ribbon
   headers, gold coins, fat green buttons. (Replaces the pixel look.)
   ====================================================================== */
:root[data-theme="tycoon"] {
  color-scheme: light;
  --bg: #1f8fe0; --bg-2: #fff8e8; --bg-3: #ffefcf; --line: #eddcb4; --line-2: #1b2a4a;
  --fg: #1b2a4a; --fg-2: #4a5878; --fg-3: #7d8aa8;
  --accent: #ff3d3d; --accent-text: #d42a2a; --accent-fg: #ffffff;
  --pos: #1fa64a; --neg: #e03131; --chart: #1fa64a;
  --font: "Nunito", system-ui, sans-serif;
  --mono: "Baloo 2", "Nunito", sans-serif;
  --r: 16px;
  --navy: #1b2a4a; --gold: #ffc531; --gold-dark: #b07a00;
}
[data-theme="tycoon"] body { background-color: #2aa7e8; background-image: repeating-conic-gradient(from 0deg at 50% -30%, rgba(255,255,255,.09) 0 5deg, transparent 5deg 10deg), radial-gradient(ellipse at 50% -20%, #8fe4ff 0%, #2aa7e8 45%, #1b6fd1 100%); }
[data-theme="tycoon"] .label, [data-theme="tycoon"] h1, [data-theme="tycoon"] h2, [data-theme="tycoon"] h3, [data-theme="tycoon"] .mg-name, [data-theme="tycoon"] .btn, [data-theme="tycoon"] .tag, [data-theme="tycoon"] .nav-item, [data-theme="tycoon"] .brand-name, [data-theme="tycoon"] .seg button, [data-theme="tycoon"] .lvl, [data-theme="tycoon"] .link, [data-theme="tycoon"] .strong { font-family: "Lilita One", "Fredoka", sans-serif; font-weight: 400; letter-spacing: .02em; }
[data-theme="tycoon"] .label { color: var(--fg-2); font-size: 12px; letter-spacing: .06em; }
[data-theme="tycoon"] .num { font-weight: 800; letter-spacing: 0; }
[data-theme="tycoon"] h1 { font-size: 36px; }
[data-theme="tycoon"] .page-head h1, [data-theme="tycoon"] .page-head .sub { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
[data-theme="tycoon"] .page-head h1 { -webkit-text-stroke: 1px var(--navy); text-shadow: 0 3px 0 var(--navy); }
/* the HUD panel: net worth as a cash counter */
[data-theme="tycoon"] .hero { background: linear-gradient(180deg, #3b8fe8, #1d55b5); border: 3px solid #fff; border-radius: var(--r); padding: 18px 20px; box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 12px 24px rgba(0,0,0,.2); color: #fff; margin-bottom: 20px; }
[data-theme="tycoon"] .hero .label, [data-theme="tycoon"] .hero .muted, [data-theme="tycoon"] .hero .hero-note { color: #d7ecff; }
[data-theme="tycoon"] .hero .num { color: #fff; }
[data-theme="tycoon"] .hero .pos { color: #8dff9a; } [data-theme="tycoon"] .hero .neg { color: #ff9b9b; }
[data-theme="tycoon"] .hero-num { font-family: "Lilita One", sans-serif; font-weight: 400; color: #fff; -webkit-text-stroke: 1.5px var(--navy); text-shadow: 0 4px 0 var(--navy), 0 7px 14px rgba(0,0,0,.3); letter-spacing: .01em; }
[data-theme="tycoon"] .hero-top .seg { border: 2px solid #fff; border-radius: 999px; overflow: hidden; background: rgba(0,0,0,.2); }
[data-theme="tycoon"] .hero-top .seg button { color: #d7ecff; border-right: 0; font-size: 12px; text-transform: none; letter-spacing: .02em; }
[data-theme="tycoon"] .hero-top .seg button.on { background: #fff; color: var(--navy); }
[data-theme="tycoon"] .lvl { display: inline-block; margin-left: 8px; background: linear-gradient(#ffe27a, #ffb800); color: var(--navy); border: 2px solid var(--gold-dark); border-radius: 999px; padding: 1px 8px; font-size: 11px; vertical-align: 2px; }
[data-theme="tycoon"] .hero-delta .pos::before { content: "GO!"; display: inline-block; background: linear-gradient(#ff5a5a, #d81e1e); color: #fff; border: 2px solid #fff; border-radius: 8px; padding: 0 7px; margin-right: 8px; font-family: "Lilita One", sans-serif; font-size: 12px; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
/* cards and ribbons */
[data-theme="tycoon"] .panel, [data-theme="tycoon"] .summary-row { background: var(--bg-2); border: 3px solid #fff; border-radius: var(--r); box-shadow: 0 6px 0 rgba(0,0,0,.22), 0 10px 24px rgba(0,0,0,.15); }
[data-theme="tycoon"] .panel { overflow: hidden; }
[data-theme="tycoon"] .summary-row { padding: 18px 20px; }
[data-theme="tycoon"] .panel-head { background: linear-gradient(180deg, #ff5a5a, #d81e1e); color: #fff; border-bottom: 3px solid #fff; padding: 11px 18px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
[data-theme="tycoon"] .panel-head .label, [data-theme="tycoon"] .panel-head .muted, [data-theme="tycoon"] .panel-head .link, [data-theme="tycoon"] .panel-head .num { color: #fff; }
[data-theme="tycoon"] .panel-head .label { font-size: 18px; text-transform: none; letter-spacing: .02em; }
[data-theme="tycoon"] .panel:nth-of-type(6n+2) .panel-head { background: linear-gradient(180deg, #4fd66c, #1d8f3a); }
[data-theme="tycoon"] .panel:nth-of-type(6n+3) .panel-head { background: linear-gradient(180deg, #ffd54a, #e0a300); color: var(--navy); text-shadow: 0 1px 0 rgba(255,255,255,.4); }
[data-theme="tycoon"] .panel:nth-of-type(6n+3) .panel-head .label, [data-theme="tycoon"] .panel:nth-of-type(6n+3) .panel-head .link, [data-theme="tycoon"] .panel:nth-of-type(6n+3) .panel-head .muted, [data-theme="tycoon"] .panel:nth-of-type(6n+3) .panel-head .num { color: var(--navy); }
[data-theme="tycoon"] .panel:nth-of-type(6n+4) .panel-head { background: linear-gradient(180deg, #3ad0e0, #159bb0); }
[data-theme="tycoon"] .panel:nth-of-type(6n+5) .panel-head { background: linear-gradient(180deg, #a27bff, #6f3fd6); }
[data-theme="tycoon"] .panel:nth-of-type(6n+6) .panel-head { background: linear-gradient(180deg, #ffa63d, #e0761a); }
[data-theme="tycoon"] .panel-head .seg { border: 2px solid rgba(255,255,255,.8); border-radius: 999px; overflow: hidden; background: rgba(0,0,0,.15); }
[data-theme="tycoon"] .panel-head .seg button { color: #fff; border-right: 0; text-shadow: none; }
[data-theme="tycoon"] .panel-head .seg button.on { background: #fff; color: var(--navy); }
[data-theme="tycoon"] .goal-grid .goal { border-top: 10px solid #ff5a5a; }
[data-theme="tycoon"] .goal-grid .goal:nth-child(6n+2) { border-top-color: #4fd66c; }
[data-theme="tycoon"] .goal-grid .goal:nth-child(6n+3) { border-top-color: #ffd54a; }
[data-theme="tycoon"] .goal-grid .goal:nth-child(6n+4) { border-top-color: #3ad0e0; }
[data-theme="tycoon"] .goal-grid .goal:nth-child(6n+5) { border-top-color: #a27bff; }
[data-theme="tycoon"] .goal-grid .goal:nth-child(6n+6) { border-top-color: #ffa63d; }
/* glossy buttons */
[data-theme="tycoon"] .btn { border-radius: 14px; border: 2px solid #1560b0; background: linear-gradient(180deg, #63d9ff, #2b8fe0); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); box-shadow: 0 4px 0 #0f4a8a, inset 0 2px 0 rgba(255,255,255,.55); font-size: 15px; letter-spacing: .03em; }
[data-theme="tycoon"] .btn:active { box-shadow: 0 1px 0 #0f4a8a, inset 0 2px 0 rgba(255,255,255,.55); filter: none; }
[data-theme="tycoon"] .btn-primary { background: linear-gradient(180deg, #6ee86e, #23a83b); border-color: #157a2a; box-shadow: 0 4px 0 #0f5f1f, inset 0 2px 0 rgba(255,255,255,.55); color: #fff; }
[data-theme="tycoon"] .btn-primary:active { box-shadow: 0 1px 0 #0f5f1f, inset 0 2px 0 rgba(255,255,255,.55); }
[data-theme="tycoon"] .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--fg-2); text-shadow: none; }
[data-theme="tycoon"] .btn-danger { background: linear-gradient(180deg, #ff6b6b, #d81e1e); border-color: #9c1414; color: #fff; box-shadow: 0 4px 0 #7a0f0f, inset 0 2px 0 rgba(255,255,255,.45); }
[data-theme="tycoon"] .btn:disabled { box-shadow: none; }
[data-theme="tycoon"] .tag { border-radius: 999px; background: linear-gradient(#ffe27a, #ffb800); border: 2px solid var(--gold-dark); color: var(--navy); font-size: 11px; letter-spacing: .03em; padding: 1px 8px; }
[data-theme="tycoon"] .pos-tag { background: linear-gradient(#6ee86e, #23a83b); border-color: #157a2a; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
[data-theme="tycoon"] .neg-tag { background: linear-gradient(#ff6b6b, #d81e1e); border-color: #9c1414; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
/* the goal track is a gold tube with a coin token */
[data-theme="tycoon"] .meter { height: 22px; gap: 0; background: #d9e6f5; border: 3px solid var(--navy); border-radius: 999px; padding: 2px; margin: 14px 0 12px; box-shadow: inset 0 3px 4px rgba(0,0,0,.25); }
[data-theme="tycoon"] .meter i { background: transparent; border: 0; border-radius: 0; }
[data-theme="tycoon"] .meter i:first-child, [data-theme="tycoon"] .meter i:first-child b { border-radius: 999px 0 0 999px; }
[data-theme="tycoon"] .meter i:nth-last-child(2), [data-theme="tycoon"] .meter i:nth-last-child(2) b { border-radius: 0 999px 999px 0; }
[data-theme="tycoon"] .meter i b { background: linear-gradient(180deg, #ffe27a, #ffb800 60%, #e09a00); }
[data-theme="tycoon"] .meter.done i b { background: linear-gradient(180deg, #8df58d, #23a83b); }
[data-theme="tycoon"] .meter .token { display: block; position: absolute; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a8, #ffc531 55%, #d99a12); border: 3px solid var(--gold-dark); box-shadow: 0 3px 0 #7a5200, 0 5px 10px rgba(0,0,0,.3); transition: left .6s cubic-bezier(.2,.7,.2,1); }
[data-theme="tycoon"] .meter .token::before { content: "$"; display: flex; align-items: center; justify-content: center; height: 100%; font-family: "Lilita One", sans-serif; color: #7a5200; font-size: 16px; }
[data-theme="tycoon"] .meter.done .token { background: radial-gradient(circle at 35% 30%, #c8ffd0, #4fd66c 55%, #1d8f3a); border-color: #157a2a; box-shadow: 0 3px 0 #0f5f1f; }
[data-theme="tycoon"] .meter.done .token::before { color: #0f5f1f; }
[data-theme="tycoon"] .bar, [data-theme="tycoon"] .tbar { height: 12px; border: 2px solid var(--navy); border-radius: 999px; background: #d9e6f5; overflow: hidden; }
[data-theme="tycoon"] .bar i, [data-theme="tycoon"] .tbar .fill { background: linear-gradient(180deg, #8df58d, #23a83b); }
[data-theme="tycoon"] .bar i.done { background: linear-gradient(180deg, #ffe27a, #e09a00); }
[data-theme="tycoon"] .tbar .mark { background: var(--navy); }
[data-theme="tycoon"] .mg-pct { font-family: "Lilita One", sans-serif; color: var(--navy); }
/* controls, dialogs, chrome */
[data-theme="tycoon"] .inp { background: #fff; border: 2px solid var(--navy); border-radius: 12px; }
[data-theme="tycoon"] .inp:focus { border-color: #1f8fe0; box-shadow: 0 0 0 3px rgba(31,143,224,.25); }
[data-theme="tycoon"] .modal { background: var(--bg-2); border: 3px solid #fff; border-radius: var(--r); box-shadow: 0 8px 0 rgba(0,0,0,.25), 0 16px 40px rgba(0,0,0,.35); }
[data-theme="tycoon"] .modal-bg { background: rgba(10, 40, 90, .55); }
[data-theme="tycoon"] .seg { border: 2px solid var(--navy); border-radius: 999px; overflow: hidden; }
[data-theme="tycoon"] .seg button { border-right-color: var(--navy); }
[data-theme="tycoon"] .seg button.on { background: var(--navy); color: #fff; }
[data-theme="tycoon"] .toast { background: linear-gradient(#ffe27a, #ffb800); color: var(--navy); border: 2px solid var(--gold-dark); border-radius: 999px; font-family: "Lilita One", sans-serif; }
[data-theme="tycoon"] .side { border-color: rgba(255,255,255,.35); }
[data-theme="tycoon"] .brand-mark { display: none; }
[data-theme="tycoon"] .brand-name { background: linear-gradient(180deg, #ff5a5a, #d81e1e); color: #fff; padding: 6px 12px; border-radius: 10px; border: 2px solid #fff; letter-spacing: .1em; text-shadow: 0 2px 0 rgba(0,0,0,.35); box-shadow: 0 3px 0 rgba(0,0,0,.3); }
[data-theme="tycoon"] .link { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
[data-theme="tycoon"] .side-status { color: rgba(255,255,255,.8); }
[data-theme="tycoon"] .nav-item { color: rgba(255,255,255,.85); text-shadow: 0 1px 0 rgba(0,0,0,.3); font-size: 15px; }
[data-theme="tycoon"] .nav-item.on { color: var(--gold); background: rgba(0,0,0,.15); border-left-color: var(--gold); }
[data-theme="tycoon"] .look { background: #fff; }
[data-theme="tycoon"] .list li, [data-theme="tycoon"] .rrow, [data-theme="tycoon"] .mini-goal, [data-theme="tycoon"] .bucket, [data-theme="tycoon"] .data-row, [data-theme="tycoon"] .kv, [data-theme="tycoon"] .tbl td, [data-theme="tycoon"] .tbl th { border-color: var(--line); }
@media (hover: hover) {
  [data-theme="tycoon"] .btn:hover { filter: brightness(1.06); border-color: #1560b0; background: linear-gradient(180deg, #63d9ff, #2b8fe0); }
  [data-theme="tycoon"] .btn-primary:hover { background: linear-gradient(180deg, #6ee86e, #23a83b); border-color: #157a2a; }
  [data-theme="tycoon"] .link:hover { color: var(--gold); }
  [data-theme="tycoon"] .nav-item:hover { background: rgba(0,0,0,.12); color: #fff; }
}
@media (max-width: 860px) {
  [data-theme="tycoon"] .side { background: linear-gradient(180deg, #1d55b5, #2a7fd8); border-bottom: 3px solid #fff; }
  [data-theme="tycoon"] .nav { background: linear-gradient(180deg, #22407a, #16305e); border-top: 3px solid #fff; }
  [data-theme="tycoon"] .nav-item { font-size: 11px; color: #cfe3ff; text-shadow: none; }
  [data-theme="tycoon"] .nav-item.on { color: var(--gold); background: none; }
  [data-theme="tycoon"] .hero, [data-theme="tycoon"] .summary-row { padding: 16px; }
}

/* tycoon art: generated icons (art/tycoon-*.png) used as emblems */
[data-theme="tycoon"] .brand-mark { display: block; width: 30px; height: 30px; background: url(art/tycoon-shield.png) center / contain no-repeat; margin-right: -2px; }
[data-theme="tycoon"] .hero-top .label::before { content: ""; display: inline-block; width: 26px; height: 26px; margin: -6px 6px -6px 0; background: url(art/tycoon-cash.png) center / contain no-repeat; vertical-align: middle; }
[data-theme="tycoon"] .meter .token { background: url(art/tycoon-coin.png) center / contain no-repeat; border: 0; box-shadow: none; width: 40px; height: 40px; margin: -20px 0 0 -20px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
[data-theme="tycoon"] .meter .token::before { content: none; }
[data-theme="tycoon"] .meter.done .token { background-image: url(art/tycoon-coin.png); }
[data-theme="tycoon"] .page-head h1::before { content: ""; display: inline-block; width: 40px; height: 40px; margin: -8px 8px -8px 0; vertical-align: middle; background: center / contain no-repeat; }
[data-theme="tycoon"] [data-view="upcoming"] .page-head h1::before { background-image: url(art/tycoon-dice.png); }
[data-theme="tycoon"] [data-view="accounts"] .page-head h1::before { background-image: url(art/tycoon-cash.png); }
[data-theme="tycoon"] [data-view="goals"] .page-head h1::before { background-image: url(art/tycoon-shield.png); }
[data-theme="tycoon"] [data-view="plan"] .page-head h1::before, [data-theme="tycoon"] [data-view="history"] .page-head h1::before { background-image: url(art/tycoon-coin.png); }
.look .emblem { width: 40px; height: 40px; object-fit: contain; flex: none; }

/* a finished main goal gets the trophy in the looks that show a token */
[data-theme="tycoon"] .meter.done .token { background: url(art/trophy.png) center / contain no-repeat; border: 0; box-shadow: none; width: 40px; height: 40px; margin: -20px 0 0 -20px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.look .emblem { background: rgba(128,128,128,.08); border-radius: 10px; padding: 3px; }

/* decoration never catches a tap: the finger always hits the control underneath */
.meter .token, .nav .ico, .look .emblem, .lvl, .brand-mark, .hero-top .label::before, .page-head h1::before { pointer-events: none; }
@media (max-width: 860px) {
  .rrow .acts { gap: 10px; }
  .mactions { gap: 12px; }
}
.toast.tap { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ======================================================================
   heist: pause-menu black, white uppercase tabs, orange highlights, green outlined cash.
   (Replaces the board look.)
   ====================================================================== */
:root[data-theme="heist"] {
  color-scheme: dark;
  --bg: #0c0c0e; --bg-2: #131316; --bg-3: #1c1c20; --line: #26262b; --line-2: #3a3a40;
  --fg: #f2f2f2; --fg-2: #b8b8bc; --fg-3: #7a7a80;
  --accent: #f0a53a; --accent-text: #f7b955; --accent-fg: #141008;
  --pos: #7bd66a; --neg: #e5484d; --chart: #7bd66a;
  --font: "Nunito", "Segoe UI", system-ui, sans-serif;
  --mono: "Anton", "Oswald", "Impact", sans-serif;
  --r: 2px; --orange: #f0a53a;
}
[data-theme="heist"] body { background-color: var(--bg); background-image: radial-gradient(ellipse at 50% -10%, rgba(240,165,58,.22), transparent 55%), linear-gradient(180deg, #17121b 0%, #0c0c0e 45%), repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px); }
[data-theme="heist"] .label, [data-theme="heist"] .btn, [data-theme="heist"] .tag, [data-theme="heist"] .nav-item, [data-theme="heist"] .seg button, [data-theme="heist"] .lvl, [data-theme="heist"] .link, [data-theme="heist"] .group-head, [data-theme="heist"] .tbl th { font-family: "Oswald", "Roboto Condensed", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; }
[data-theme="heist"] .label { color: #d0d0d4; font-size: 11px; letter-spacing: .18em; }
[data-theme="heist"] h1, [data-theme="heist"] h2, [data-theme="heist"] h3, [data-theme="heist"] .mg-name, [data-theme="heist"] .brand-name { font-family: "Anton", "Oswald", "Impact", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .03em; }
[data-theme="heist"] h1 { font-size: 40px; }
[data-theme="heist"] .mg-name { font-size: 22px; letter-spacing: .04em; }
[data-theme="heist"] .num { font-weight: 400; letter-spacing: .02em; font-size: 1.08em; }
[data-theme="heist"] .hero-num { font-family: "Anton", "Impact", sans-serif; color: #8ee08a; -webkit-text-stroke: 1px #0b2a0b; text-shadow: 0 3px 0 #000, 0 0 18px rgba(123,214,106,.25); letter-spacing: .02em; }
[data-theme="heist"] .hero-num2 { color: #8ee08a; }
/* panels: translucent black with a hairline, the header carries an orange bar */
[data-theme="heist"] .panel, [data-theme="heist"] .hero, [data-theme="heist"] .summary-row { background: rgba(10,10,12,.86); border: 1px solid rgba(255,255,255,.14); border-top: 2px solid rgba(255,255,255,.4); border-radius: var(--r); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
[data-theme="heist"] .hero, [data-theme="heist"] .summary-row { padding: 18px 20px; }
[data-theme="heist"] .panel-head { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.12); box-shadow: inset 4px 0 0 var(--orange); }
[data-theme="heist"] .panel-head .label { color: #fff; font-size: 12px; }
[data-theme="heist"] .panel-head .link { color: var(--accent-text); }
[data-theme="heist"] .seg { border: 1px solid rgba(255,255,255,.5); border-radius: 0; }
[data-theme="heist"] .seg button { color: #d0d0d4; border-right-color: rgba(255,255,255,.3); font-size: 11px; letter-spacing: .1em; }
[data-theme="heist"] .seg button.on { background: #fff; color: #000; }
/* controls: pause-menu items, the highlight is white on black, the go button is orange */
[data-theme="heist"] .btn { border-radius: 2px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.04); color: #fff; font-size: 13px; }
[data-theme="heist"] .btn-primary { background: var(--orange); border-color: var(--orange); color: var(--accent-fg); }
[data-theme="heist"] .btn-ghost { border-color: transparent; background: none; color: var(--fg-2); }
[data-theme="heist"] .btn-danger { border-color: var(--neg); color: var(--neg); background: none; }
[data-theme="heist"] .tag { border-radius: 0; border: 1px solid rgba(255,255,255,.55); color: #fff; font-size: 10px; padding: 1px 6px; letter-spacing: .14em; }
[data-theme="heist"] .pos-tag { border-color: var(--pos); color: var(--pos); }
[data-theme="heist"] .neg-tag { border-color: var(--neg); color: var(--neg); }
[data-theme="heist"] .lvl { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid #fff; color: #fff; font-size: 10px; letter-spacing: .16em; vertical-align: 1px; }
[data-theme="heist"] .hero-delta .pos::before { content: "EARNED"; display: inline-block; background: var(--orange); color: var(--accent-fg); padding: 1px 7px; margin-right: 8px; font-family: "Oswald", sans-serif; font-weight: 500; font-size: 10px; letter-spacing: .16em; }
/* stat bars and wanted stars */
[data-theme="heist"] .meter { height: 10px; gap: 3px; margin: 12px 0 8px; }
[data-theme="heist"] .meter i { background: rgba(255,255,255,.12); border: 0; border-radius: 0; }
[data-theme="heist"] .meter i b { background: #fff; }
[data-theme="heist"] .meter.done i b { background: var(--pos); }
[data-theme="heist"] .bar, [data-theme="heist"] .tbar { height: 6px; background: rgba(255,255,255,.12); border-radius: 0; }
[data-theme="heist"] .bar i, [data-theme="heist"] .tbar .fill { background: #fff; }
[data-theme="heist"] .bar i.done { background: var(--pos); }
[data-theme="heist"] .tbar .mark { background: var(--orange); }
[data-theme="heist"] .mg-pct { font-family: "Anton", "Impact", sans-serif; letter-spacing: .02em; }
.stars { display: none; gap: 5px; margin: 2px 0 8px; }
.stars i { width: 20px; height: 20px; display: block; background: rgba(255,255,255,.18); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars i.on { background: #fff; }
[data-theme="heist"] .stars { display: flex; }
[data-theme="heist"] .stars i.on { filter: drop-shadow(0 0 5px rgba(255,255,255,.55)); }
/* dialogs, chrome */
[data-theme="heist"] .inp { background: #0c0c0e; border: 1px solid rgba(255,255,255,.4); border-radius: 2px; }
[data-theme="heist"] .inp:focus { border-color: var(--orange); }
[data-theme="heist"] .modal { background: rgba(12,12,14,.97); border: 1px solid rgba(255,255,255,.3); border-top: 2px solid #fff; border-radius: 2px; }
[data-theme="heist"] .modal-bg { background: rgba(0,0,0,.65); }
[data-theme="heist"] .toast { background: var(--orange); color: var(--accent-fg); border-radius: 0; font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .12em; }
[data-theme="heist"] .brand-name { font-size: 16px; letter-spacing: .12em; border-bottom: 2px solid var(--orange); padding-bottom: 2px; }
[data-theme="heist"] .brand-mark { background: var(--orange); }
[data-theme="heist"] .link { color: var(--fg-2); font-size: 12px; }
[data-theme="heist"] .nav-item { color: #b8b8bc; font-size: 13px; }
[data-theme="heist"] .nav-item.on { color: #000; background: #fff; border-left-color: #fff; }
[data-theme="heist"] .nav .ico { display: none !important; }
[data-theme="heist"] .list li, [data-theme="heist"] .rrow, [data-theme="heist"] .mini-goal, [data-theme="heist"] .bucket, [data-theme="heist"] .data-row, [data-theme="heist"] .kv, [data-theme="heist"] .tbl td, [data-theme="heist"] .tbl th { border-color: rgba(255,255,255,.1); }
[data-theme="heist"] .look { background: #0c0c0e; border-color: rgba(255,255,255,.3); }
@media (hover: hover) {
  [data-theme="heist"] .btn:hover { background: #fff; color: #000; border-color: #fff; }
  [data-theme="heist"] .btn-primary:hover { background: var(--orange); color: var(--accent-fg); border-color: var(--orange); filter: brightness(1.08); }
  [data-theme="heist"] .nav-item:hover { background: rgba(255,255,255,.1); color: #fff; }
  [data-theme="heist"] .link:hover { color: var(--accent-text); }
}
@media (max-width: 860px) {
  [data-theme="heist"] .side { background: rgba(12,12,14,.96); border-bottom: 1px solid rgba(255,255,255,.2); }
  [data-theme="heist"] .nav { background: rgba(12,12,14,.98); border-top: 1px solid rgba(255,255,255,.3); }
  [data-theme="heist"] .nav-item { flex-direction: row; height: var(--nav-h); font-size: 10px; letter-spacing: .08em; padding: 0 6px; }
  [data-theme="heist"] .nav-item.on { color: #000; background: #fff; }
  [data-theme="heist"] .main { padding-bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); }
}

[data-theme="heist"] .hero-num { font-size: 76px; }
[data-theme="heist"] .stat .num { font-size: 21px; }
@media (max-width: 860px) {
  [data-theme="heist"] .hero-num { font-size: 58px; }
}

/* heist art: generated icons (art/heist-*.png) */
[data-theme="heist"] .brand-mark { width: 26px; height: 26px; background: url(art/heist-shield.png) center / contain no-repeat; }
[data-theme="heist"] .hero-top .label::before { content: ""; display: inline-block; width: 26px; height: 26px; margin: -7px 8px -7px 0; background: url(art/heist-cash.png) center / contain no-repeat; vertical-align: middle; }
[data-theme="heist"] .stars i { clip-path: none; background: url(art/heist-star.png) center / contain no-repeat; opacity: .22; width: 24px; height: 24px; }
[data-theme="heist"] .stars i.on { opacity: 1; filter: drop-shadow(0 0 6px rgba(255,255,255,.5)); }
[data-theme="heist"] .page-head h1::before { content: ""; display: inline-block; width: 38px; height: 38px; margin: -8px 10px -8px 0; vertical-align: middle; background: center / contain no-repeat; }
[data-theme="heist"] [data-view="goals"] .page-head h1::before { background-image: url(art/heist-bag.png); }
[data-theme="heist"] [data-view="accounts"] .page-head h1::before { background-image: url(art/heist-cash.png); }
[data-theme="heist"] [data-view="upcoming"] .page-head h1::before { background-image: url(art/heist-star.png); }
[data-theme="heist"] [data-view="plan"] .page-head h1::before, [data-theme="heist"] [data-view="history"] .page-head h1::before { background-image: url(art/heist-shield.png); }
[data-theme="heist"] .goal.done .row:first-child::after, [data-theme="heist"] .meter.done ~ .stars::after { content: ""; display: inline-block; width: 26px; height: 26px; margin-left: 8px; background: url(art/heist-bag.png) center / contain no-repeat; vertical-align: middle; }

/* the phone tab bar must fit seven tabs in every look: equal widths, no letter-spacing, size scales with the screen */
@media (max-width: 860px) {
  .nav { justify-content: space-between; padding-bottom: max(env(safe-area-inset-bottom), 4px); }
  .nav-item { flex: 1 1 0 !important; min-width: 0 !important; padding: 0 2px !important; letter-spacing: 0 !important; font-size: clamp(8px, 2.6vw, 11px) !important; white-space: nowrap; }
  .nav-label { display: block; max-width: 100%; overflow: hidden; }
  .nav .ico { flex: none; }
}

/* casino: velvet hero and generated icons (art/casino-*.png) */
[data-theme="casino"] .hero { background: linear-gradient(180deg, #2c0d13, #170a0d 70%, #120a0c); border-color: rgba(212,175,55,.7); box-shadow: inset 0 0 0 4px #170a0d, inset 0 0 0 5px rgba(212,175,55,.4), 0 14px 34px rgba(0,0,0,.6); }
[data-theme="casino"] .hero .label { color: #e6c25c; }
[data-theme="casino"] .brand-mark { width: 28px; height: 28px; background: url(art/casino-chips.png) center / contain no-repeat; transform: none; }
[data-theme="casino"] .hero-top .label::before { content: ""; display: inline-block; width: 28px; height: 28px; margin: -8px 8px -8px 0; background: url(art/casino-chips.png) center / contain no-repeat; vertical-align: middle; }
[data-theme="casino"] .meter { position: relative; }
[data-theme="casino"] .meter .token { display: block; position: absolute; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; background: url(art/casino-chip.png) center / contain no-repeat; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); transition: left .6s cubic-bezier(.2,.7,.2,1); }
[data-theme="casino"] .meter.done .token { background-image: url(art/casino-gem.png); }
[data-theme="casino"] .page-head h1::before { content: ""; display: inline-block; width: 40px; height: 40px; margin: -8px 10px -8px 0; vertical-align: middle; background: center / contain no-repeat; }
[data-theme="casino"] [data-view="accounts"] .page-head h1::before { background-image: url(art/casino-chips.png); }
[data-theme="casino"] [data-view="goals"] .page-head h1::before { background-image: url(art/casino-gem.png); }
[data-theme="casino"] [data-view="upcoming"] .page-head h1::before { background-image: url(art/casino-cards.png); }
[data-theme="casino"] [data-view="plan"] .page-head h1::before, [data-theme="casino"] [data-view="history"] .page-head h1::before { background-image: url(art/casino-chip.png); }
[data-theme="casino"] .goal.done .row:first-child::after { content: ""; display: inline-block; width: 26px; height: 26px; margin-left: 8px; background: url(art/casino-gem.png) center / contain no-repeat; vertical-align: middle; }
[data-theme="casino"] .panel-head { background: linear-gradient(90deg, rgba(212,175,55,.10), transparent 60%); }

/* arcade art: generated icons (art/arcade-*.png) */
[data-theme="arcade"] .brand-mark { width: 26px; height: 26px; background: url(art/arcade-badge.png) center / contain no-repeat; border: 0; border-radius: 0; box-shadow: none; transform: none; }
[data-theme="arcade"] .hero-top .label::before { content: ""; display: inline-block; width: 26px; height: 26px; margin: -7px 8px -7px 0; background: url(art/arcade-coin.png) center / contain no-repeat; vertical-align: middle; }
[data-theme="arcade"] .meter { position: relative; }
[data-theme="arcade"] .meter .token { display: block; position: absolute; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; background: url(art/arcade-gem.png) center / contain no-repeat; border: 0; box-shadow: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(124,242,255,.6)); transition: left .6s cubic-bezier(.2,.7,.2,1); }
[data-theme="arcade"] .meter .token::before { content: none; }
[data-theme="arcade"] .meter.done .token { background-image: url(art/arcade-crown.png); }
[data-theme="arcade"] .page-head h1::before { content: ""; display: inline-block; width: 38px; height: 38px; margin: -8px 10px -8px 0; vertical-align: middle; background: center / contain no-repeat; }
[data-theme="arcade"] [data-view="accounts"] .page-head h1::before { background-image: url(art/arcade-coin.png); }
[data-theme="arcade"] [data-view="goals"] .page-head h1::before { background-image: url(art/arcade-crown.png); }
[data-theme="arcade"] [data-view="upcoming"] .page-head h1::before { background-image: url(art/arcade-gem.png); }
[data-theme="arcade"] [data-view="plan"] .page-head h1::before, [data-theme="arcade"] [data-view="history"] .page-head h1::before { background-image: url(art/arcade-badge.png); }
[data-theme="arcade"] .goal.done .row:first-child::after { content: ""; display: inline-block; width: 26px; height: 26px; margin-left: 8px; background: url(art/arcade-crown.png) center / contain no-repeat; vertical-align: middle; }

/* comic art: generated icons (art/comic-*.png) */
[data-theme="comic"] .brand-mark { width: 28px; height: 28px; background: url(art/comic-burst.png) center / contain no-repeat; border: 0; border-radius: 0; box-shadow: none; transform: none; }
[data-theme="comic"] .hero-top .label::before { content: ""; display: inline-block; width: 26px; height: 26px; margin: -7px 8px -7px 0; background: url(art/comic-cash.png) center / contain no-repeat; vertical-align: middle; }
[data-theme="comic"] .meter { position: relative; }
[data-theme="comic"] .meter .token { display: block; position: absolute; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; background: url(art/comic-star.png) center / contain no-repeat; border: 0; box-shadow: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); transition: left .6s cubic-bezier(.2,.7,.2,1); }
[data-theme="comic"] .meter .token::before { content: none; }
[data-theme="comic"] .meter.done .token { background-image: url(art/comic-trophy.png); }
[data-theme="comic"] .page-head h1::before { content: ""; display: inline-block; width: 38px; height: 38px; margin: -8px 10px -8px 0; vertical-align: middle; background: center / contain no-repeat; }
[data-theme="comic"] [data-view="accounts"] .page-head h1::before { background-image: url(art/comic-cash.png); }
[data-theme="comic"] [data-view="goals"] .page-head h1::before { background-image: url(art/comic-trophy.png); }
[data-theme="comic"] [data-view="upcoming"] .page-head h1::before { background-image: url(art/comic-star.png); }
[data-theme="comic"] [data-view="plan"] .page-head h1::before, [data-theme="comic"] [data-view="history"] .page-head h1::before { background-image: url(art/comic-burst.png); }
[data-theme="comic"] .goal.done .row:first-child::after { content: ""; display: inline-block; width: 26px; height: 26px; margin-left: 8px; background: url(art/comic-trophy.png) center / contain no-repeat; vertical-align: middle; }

/* passbook art: generated icons (art/passbook-*.png) */
[data-theme="passbook"] .brand-mark { width: 24px; height: 24px; background: url(art/passbook-book.png) center / contain no-repeat; border: 0; border-radius: 0; box-shadow: none; transform: none; }
[data-theme="passbook"] .hero-top .label::before { content: ""; display: inline-block; width: 26px; height: 26px; margin: -7px 8px -7px 0; background: url(art/passbook-notes.png) center / contain no-repeat; vertical-align: middle; }
[data-theme="passbook"] .meter { position: relative; }
[data-theme="passbook"] .meter .token { display: block; position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; background: url(art/passbook-coin.png) center / contain no-repeat; border: 0; box-shadow: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); transition: left .6s cubic-bezier(.2,.7,.2,1); }
[data-theme="passbook"] .meter .token::before { content: none; }
[data-theme="passbook"] .meter.done .token { background-image: url(art/passbook-nib.png); }
[data-theme="passbook"] .page-head h1::before { content: ""; display: inline-block; width: 38px; height: 38px; margin: -8px 10px -8px 0; vertical-align: middle; background: center / contain no-repeat; }
[data-theme="passbook"] [data-view="accounts"] .page-head h1::before { background-image: url(art/passbook-notes.png); }
[data-theme="passbook"] [data-view="goals"] .page-head h1::before { background-image: url(art/passbook-nib.png); }
[data-theme="passbook"] [data-view="upcoming"] .page-head h1::before { background-image: url(art/passbook-coin.png); }
[data-theme="passbook"] [data-view="plan"] .page-head h1::before, [data-theme="passbook"] [data-view="history"] .page-head h1::before { background-image: url(art/passbook-book.png); }
[data-theme="passbook"] .goal.done .row:first-child::after { content: ""; display: inline-block; width: 26px; height: 26px; margin-left: 8px; background: url(art/passbook-nib.png) center / contain no-repeat; vertical-align: middle; }

/* help: the round ? in the top bar, and the home-screen guide */
.link.help { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 14px; line-height: 1; text-align: center; opacity: .85; }
.link.help:hover { opacity: 1; }
.help-os { align-self: flex-start; margin: 0 0 14px; }
.help-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.step { text-align: center; }
.step .phone { width: 100%; max-width: 96px; height: auto; display: block; margin: 0 auto 8px; }
.step .small { text-align: left; }
.phone .frame { fill: var(--fg); opacity: .9; }
.phone .screen { fill: var(--bg-2); }
.phone .dim { fill: var(--fg-3); opacity: .5; }
.phone .dimfill { fill: var(--fg-3); opacity: .25; }
.phone .bar { fill: var(--bg-3); }
.phone .sheet { fill: var(--bg-2); stroke: var(--line-2); stroke-width: 1; }
.phone .hl { fill: var(--accent); opacity: .9; }
.phone .ring { fill: none; stroke: var(--accent); stroke-width: 2; }
.phone .glyph { fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.phone .glyphl { fill: none; stroke: var(--accent-fg); stroke-width: 1.2; stroke-linecap: round; }
.phone rect.glyph { fill: var(--accent-fg); stroke: none; }
.phone circle.glyph { fill: var(--fg); stroke: none; }
.phone .glyphbar { fill: var(--accent-fg); opacity: .9; }
.phone .glyphd { fill: var(--accent-fg); }
.help-steps.four { grid-template-columns: repeat(2, 1fr); }
.help-steps.four .phone { max-width: 110px; }
.help-box .install { width: 100%; margin: 0 0 14px; }
.phone .app { fill: #a88cf6; }
.phone .big { fill: var(--fg); opacity: .85; }
.phone .card { fill: var(--bg-3); stroke: var(--line-2); stroke-width: .8; }
.phone .appw { fill: none; stroke: #140d2a; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.help-share { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.help-share .row { margin: 8px 0 6px; gap: 8px; }
.help-share .inp { font-size: 12px; }
@media (max-width: 860px) {
  .side-foot [data-action="export"], .side-foot [data-action="import"] { display: none; }
  .help-steps { gap: 12px 8px; }
  .step .phone { max-width: 84px; }
  .step .small { font-size: 12px; }
}