/* ═══════════════════════════════════════════
       VAULT TRACKER v2 — Mario Pro Edition
       Design: deep-space night + gold coins
    ═══════════════════════════════════════════ */
    :root {
      --bg:        #04040f;
      --surface:   #0a0a26;
      --surface2:  #111136;
      --surface3:  #1a1a4a;
      --border:    #252580;
      --border2:   #3838b0;
      --border-hi: #5555d8;

      --gold:      #ffd700;
      --gold-d:    #9a6e00;
      --gold-m:    #c8a000;
      --gold-l:    #fff2aa;

      --red:       #c41c1c;
      --red-h:     #e84040;
      --green:     #008844;
      --green-h:   #00bb66;
      --blue-sky:  #4488ee;

      --text:      #eeeeff;
      --text-dim:  #aaaacc;
      --muted:     #666699;

      --danger:    #dd2222;
      --warning:   #ee8800;
      --success:   #00994d;

      --glow-gold: 0 0 10px rgba(255,215,0,.45), 0 0 30px rgba(255,215,0,.18);
      --glow-red:  0 0 12px rgba(200,28,28,.5);
      --glow-blue: 0 0 12px rgba(56,56,176,.6);

      --font-px:   'Press Start 2P', monospace;
      --font-num:  'Outfit', system-ui, sans-serif;
      --tab-h:     70px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

    html, body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-num);
      height: 100%;
      overscroll-behavior: none;
    }

    /* Scanlines */
    body::after {
      content: '';
      position: fixed; inset: 0; pointer-events: none; z-index: 9999;
      background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.055) 3px, rgba(0,0,0,.055) 4px);
    }

    #app {
      max-width: 390px; margin: 0 auto;
      height: 100dvh; display: flex; flex-direction: column;
      position: relative; overflow: hidden;
    }

    /* ─── LOCK SCREEN ─────────────────────────── */
    #lock {
      position: fixed; inset: 0; z-index: 100;
      background: var(--bg);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 18px; padding: 28px;
      /* star field */
      background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 38% 72%, rgba(255,255,255,.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 30%, rgba(255,255,255,.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 82% 55%, rgba(255,255,255,.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 12%, rgba(255,255,255,.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 95%, rgba(255,255,255,.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.4) 0%, transparent 100%);
    }

    .lock-coin-wrap {
      position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
    }
    .lock-coin {
      width: 56px; height: 56px; border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, var(--gold-l), var(--gold) 50%, var(--gold-m));
      box-shadow: var(--glow-gold), 4px 4px 0 var(--gold-d), inset 0 2px 4px rgba(255,255,255,.3);
      display: flex; align-items: center; justify-content: center;
      animation: coinBob 2.2s ease-in-out infinite;
      font-family: var(--font-px); font-size: 18px; color: var(--gold-d);
      text-shadow: 1px 1px 0 rgba(0,0,0,.3);
    }
    @keyframes coinBob {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-7px); box-shadow: var(--glow-gold), 4px 8px 0 var(--gold-d), inset 0 2px 4px rgba(255,255,255,.3); }
    }

    .lock-title {
      font-family: var(--font-px); font-size: 11px; color: var(--gold);
      text-shadow: 3px 3px 0 var(--gold-d), 0 0 20px rgba(255,215,0,.3);
      letter-spacing: .05em; text-align: center; line-height: 1.9;
    }
    .lock-subtitle {
      font-family: var(--font-px); font-size: 7px; color: var(--muted);
      text-align: center; line-height: 2.2; letter-spacing: .04em;
    }

    .pin-dots { display: flex; gap: 16px; }
    .pin-dot {
      width: 18px; height: 18px;
      border: 3px solid var(--border2);
      box-shadow: 2px 2px 0 #000, 0 0 6px rgba(56,56,176,.25);
      transition: background .1s, box-shadow .15s, border-color .1s;
    }
    .pin-dot.filled {
      background: var(--gold); border-color: var(--gold-m);
      box-shadow: 2px 2px 0 var(--gold-d), var(--glow-gold);
    }
    .pin-error { font-family: var(--font-px); color: var(--danger); font-size: 7px; min-height: 20px; text-align: center; line-height: 2; }

    .pinpad { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; width: 100%; max-width: 268px; }
    .pinpad button {
      background: var(--surface2); border: 3px solid var(--border2);
      box-shadow: 4px 4px 0 #000;
      color: var(--text); font-family: var(--font-px); font-size: 13px;
      height: 60px; cursor: pointer;
      transition: transform .08s, box-shadow .08s, background .08s;
    }
    .pinpad button:hover { background: var(--surface3); border-color: var(--border-hi); }
    .pinpad button:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 #000; background: var(--surface3); }
    .pinpad button.clear { font-size: 6px; color: var(--muted); }
    .pinpad button.zero { grid-column: 2; }

    /* ─── HUD HEADER ──────────────────────────── */
    #hud {
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px 14px 8px;
      background: var(--surface);
      border-bottom: 3px solid var(--border2);
      box-shadow: 0 3px 0 #000, 0 4px 16px rgba(0,0,0,.5);
    }
    .hud-logo {
      font-family: var(--font-px); font-size: 7px; color: var(--gold);
      text-shadow: 2px 2px 0 var(--gold-d);
      letter-spacing: .04em; line-height: 1.7;
    }
    .hud-logo span { display: block; font-size: 5px; color: var(--muted); text-shadow: none; margin-top: 1px; }
    .hud-right { display: flex; align-items: center; gap: 8px; }
    .hud-vault-lbl { font-family: var(--font-px); font-size: 5px; color: var(--muted); line-height: 2; }
    .hud-vault-val {
      font-family: var(--font-num); font-size: 16px; font-weight: 700; color: var(--gold);
      text-shadow: 2px 2px 0 var(--gold-d);
      display: flex; align-items: center; gap: 6px;
    }
    .hud-coin-dot {
      width: 12px; height: 12px; border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, var(--gold-l), var(--gold));
      box-shadow: 1px 1px 0 var(--gold-d), 0 0 6px rgba(255,215,0,.4);
      flex-shrink: 0;
    }

    /* ─── TABS ────────────────────────────────── */
    #tab-bar {
      flex-shrink: 0; display: flex;
      background: var(--surface);
      border-top: 4px solid var(--border2);
      box-shadow: 0 -3px 0 #000;
      height: var(--tab-h);
      padding-bottom: env(safe-area-inset-bottom);
    }
    .tab-btn {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 5px; border: none; background: none;
      color: var(--muted); font-family: var(--font-px); font-size: 5.5px;
      cursor: pointer; transition: color .15s, background .15s;
      letter-spacing: .03em; line-height: 1.8;
      border-right: 2px solid rgba(37,37,128,.5);
      position: relative; overflow: hidden;
    }
    .tab-btn:last-child { border-right: none; }
    .tab-btn .ti { font-size: 20px; line-height: 1; transition: transform .15s; }
    .tab-btn:hover .ti { transform: translateY(-2px); }
    .tab-btn.active { color: var(--gold); background: rgba(255,215,0,.07); }
    .tab-btn.active::after {
      content: '';
      position: absolute; top: -4px; left: 0; right: 0; height: 4px;
      background: var(--gold);
      box-shadow: 0 0 8px rgba(255,215,0,.6), 0 0 20px rgba(255,215,0,.3);
    }

    /* ─── PANELS ──────────────────────────────── */
    #panels { flex: 1; overflow: hidden; position: relative; }
    .panel {
      position: absolute; inset: 0; overflow-y: auto; display: none;
      padding: 14px 13px calc(14px + env(safe-area-inset-bottom));
      scrollbar-width: thin; scrollbar-color: var(--border2) var(--bg);
    }
    .panel.active { display: block; }
    .panel::-webkit-scrollbar { width: 3px; }
    .panel::-webkit-scrollbar-track { background: transparent; }
    .panel::-webkit-scrollbar-thumb { background: var(--border2); }

    /* ─── SECTION TITLES ──────────────────────── */
    .sec-title {
      font-family: var(--font-px); font-size: 6.5px; color: var(--muted);
      text-transform: uppercase; letter-spacing: .12em;
      margin-bottom: 10px; line-height: 2;
      display: flex; align-items: center; gap: 8px;
    }
    .sec-title::before {
      content: ''; display: inline-block;
      width: 6px; height: 6px;
      background: var(--gold); box-shadow: 1px 1px 0 var(--gold-d);
      flex-shrink: 0;
    }
    .sec-title::after {
      content: ''; flex: 1; height: 2px;
      background: linear-gradient(90deg, var(--border2) 0%, transparent 100%);
    }

    /* ─── CARDS ───────────────────────────────── */
    .card {
      background: var(--surface);
      border: 3px solid var(--border2);
      box-shadow: 4px 4px 0 #000, inset 0 1px 0 rgba(255,255,255,.05);
      padding: 14px; margin-bottom: 14px; position: relative;
    }
    .card::before {
      content: ''; position: absolute;
      top: 0; left: 3px; right: 3px; height: 1px;
      background: rgba(255,255,255,.06);
    }

    /* ─── BALANCE / AMOUNT DISPLAYS ──────────── */
    .bal-label {
      font-family: var(--font-px); font-size: 6px; color: var(--muted);
      text-transform: uppercase; letter-spacing: .1em; line-height: 2.5;
    }
    .bal-amount {
      font-family: var(--font-num); font-size: 32px; font-weight: 800; line-height: 1.1;
      color: var(--gold);
      text-shadow: 3px 3px 0 var(--gold-d), 0 0 24px rgba(255,215,0,.25);
      letter-spacing: -0.01em;
    }
    .bal-amount.neutral { color: var(--text); text-shadow: 2px 2px 0 #000; }
    .bal-amount.ok  { color: var(--success); text-shadow: 2px 2px 0 #002211; }
    .bal-amount.warn { color: var(--warning); text-shadow: 2px 2px 0 #3d2000; }
    .bal-amount.over { color: var(--danger);  text-shadow: 2px 2px 0 #3d0000; }

    /* ─── BUTTONS ─────────────────────────────── */
    .btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      border: 3px solid; font-family: var(--font-px); font-size: 8px;
      height: 46px; cursor: pointer; width: 100%;
      text-transform: uppercase; letter-spacing: .05em;
      transition: transform .08s, box-shadow .08s;
      position: relative; overflow: hidden; box-shadow: 4px 4px 0 #000;
    }
    /* gloss */
    .btn::after {
      content: ''; position: absolute;
      top: 0; left: 0; right: 0; height: 38%;
      background: rgba(255,255,255,.07); pointer-events: none;
    }
    .btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 #000; }
    .btn-primary   { background: var(--red);    color: #fff; border-color: var(--red-h); }
    .btn-primary:hover { box-shadow: 4px 4px 0 #000, var(--glow-red); }
    .btn-secondary { background: var(--green);  color: #fff; border-color: var(--green-h); }
    .btn-gold      { background: var(--gold); color: #3d2b00; border-color: var(--gold-l); box-shadow: 4px 4px 0 var(--gold-d); }
    .btn-gold:hover { box-shadow: 4px 4px 0 var(--gold-d), var(--glow-gold); }
    .btn-gold:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--gold-d); }
    .btn-ghost     { background: var(--surface2); color: var(--muted); border-color: var(--border2); }
    .btn-sm        { height: 40px; font-size: 7px; }
    .btn:disabled  { opacity: .3; pointer-events: none; }

    /* ─── VAULT PANEL ─────────────────────────── */
    .vault-hero {
      text-align: center; padding: 18px 0 24px; position: relative;
    }
    .vault-chest {
      font-size: 54px; line-height: 1;
      display: inline-block;
      filter: drop-shadow(4px 4px 0 rgba(0,0,0,.9));
      animation: chestFloat 3.4s ease-in-out infinite;
    }
    @keyframes chestFloat {
      0%,100% { transform: translateY(0) rotate(-.5deg); }
      30% { transform: translateY(-5px) rotate(.5deg); }
      70% { transform: translateY(-3px) rotate(-.3deg); }
    }

    .withdraw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
    .wbtn {
      background: var(--surface2); border: 3px solid var(--border2);
      box-shadow: 4px 4px 0 #000;
      color: var(--text); padding: 13px 11px;
      cursor: pointer; text-align: left; min-height: 78px;
      display: flex; flex-direction: column; gap: 6px;
      transition: transform .08s, box-shadow .08s, border-color .12s;
      position: relative;
    }
    .wbtn .wdest { font-family: var(--font-px); font-size: 7px; line-height: 1.8; }
    .wbtn .wsub  { font-family: var(--font-px); color: var(--muted); font-size: 5.5px; line-height: 2; }
    .wbtn .wico  { font-size: 22px; line-height: 1; margin-bottom: 2px; }
    .wbtn::after {
      content: '▶'; position: absolute; bottom: 10px; right: 10px;
      font-family: var(--font-px); font-size: 6px; color: var(--border-hi); opacity: .6;
    }
    .wbtn:hover  { border-color: var(--gold); }
    .wbtn:hover::after { color: var(--gold); opacity: 1; }
    .wbtn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 #000; }

    /* ─── POCKET HERO ─────────────────────────── */
    .pocket-hero {
      background: var(--surface);
      border: 3px solid var(--border2);
      box-shadow: 4px 4px 0 #000, inset 0 1px 0 rgba(255,255,255,.05);
      padding: 10px 12px 10px; margin-bottom: 10px;
    }
    .pocket-bal-row {
      display: flex; align-items: flex-start; justify-content: space-between;
      margin-bottom: 14px;
    }
    .pocket-bal-lbl { font-family: var(--font-px); font-size: 5.5px; color: var(--muted); line-height: 2.5; letter-spacing: .08em; }
    .pocket-bal-val { font-family: var(--font-px); font-size: 22px; line-height: 1.2; margin-top: 2px; }
    .pocket-stats-mini { display: flex; gap: 10px; margin-bottom: 14px; }
    .psm {
      flex: 1; background: var(--surface2);
      border: 2px solid var(--border); box-shadow: 2px 2px 0 #000;
      padding: 9px 10px;
    }
    .psm-lbl { font-family: var(--font-px); font-size: 5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; line-height: 2.2; }
    .psm-val { font-family: var(--font-num); font-size: 15px; font-weight: 700; margin-top: 3px; line-height: 1.2; }

    /* ─── BUDGET BAR ──────────────────────────── */
    .bbar-meta {
      display: flex; justify-content: space-between;
      font-family: var(--font-px); font-size: 5.5px; color: var(--muted);
      margin-bottom: 7px; line-height: 2;
    }
    .bbar-track {
      height: 14px; background: var(--surface2);
      border: 2px solid var(--border2);
      box-shadow: inset 2px 2px 0 rgba(0,0,0,.4);
      position: relative; overflow: visible;
    }
    .bbar-fill {
      height: 100%; transition: width .4s ease, background .3s;
      background: repeating-linear-gradient(90deg, var(--success) 0, var(--success) 9px, rgba(0,0,0,.2) 9px, rgba(0,0,0,.2) 11px);
    }
    .bbar-fill.warn { background: repeating-linear-gradient(90deg, var(--warning) 0, var(--warning) 9px, rgba(0,0,0,.2) 9px, rgba(0,0,0,.2) 11px); }
    .bbar-fill.over { background: repeating-linear-gradient(90deg, var(--danger) 0, var(--danger) 9px, rgba(0,0,0,.2) 9px, rgba(0,0,0,.2) 11px); }
    .bbar-theor {
      position: absolute; top: -5px;
      width: 2px; height: calc(100% + 10px);
      background: rgba(255,255,255,.55); transform: translateX(-50%);
      box-shadow: 0 0 5px rgba(255,255,255,.4);
    }
    .bbar-foot {
      display: flex; justify-content: space-between;
      font-family: var(--font-px); font-size: 5.5px; color: var(--muted);
      margin-top: 7px; line-height: 2;
    }

    /* ─── NUMPAD ──────────────────────────────── */
    .np-display {
      text-align: center; font-family: var(--font-num); font-size: 32px; font-weight: 800;
      color: var(--gold); text-shadow: 3px 3px 0 var(--gold-d), 0 0 20px rgba(255,215,0,.2);
      padding: 4px 0; min-height: 38px; line-height: 1.1; letter-spacing: -0.01em;
    }
    .np-display .cur { font-family: var(--font-px); font-size: 9px; color: var(--muted); vertical-align: super; margin-right: 4px; text-shadow: none; font-weight: 400; }
    .numpad { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: 4px 0; }
    .numpad button {
      background: var(--surface2); border: 3px solid var(--border2);
      box-shadow: 3px 3px 0 #000;
      color: var(--text); font-family: var(--font-px); font-size: 12px;
      height: 42px; cursor: pointer;
      transition: transform .07s, box-shadow .07s, background .07s;
    }
    .numpad button:hover { background: var(--surface3); border-color: var(--border-hi); }
    .numpad button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #000; }

    /* ─── CATEGORY GRID ───────────────────────── */
    .cat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 10px 0; }
    .cat-btn {
      background: var(--surface2); border: 3px solid var(--border2);
      box-shadow: 3px 3px 0 #000;
      color: var(--text); padding: 12px 8px;
      cursor: pointer; display: flex; flex-direction: column; align-items: center;
      gap: 7px; min-height: 80px; justify-content: center;
      transition: transform .08s, box-shadow .08s, border-color .1s;
      position: relative;
    }
    .cat-btn::after {
      content: '?'; position: absolute; top: 5px; right: 8px;
      font-family: var(--font-px); font-size: 6px; color: var(--border-hi); opacity: .45;
    }
    .cat-btn .ce { font-size: 30px; filter: drop-shadow(2px 2px 0 #000); line-height: 1; }
    .cat-btn .cl { font-family: var(--font-px); font-size: 5.5px; text-align: center; line-height: 2; text-transform: uppercase; letter-spacing: .08em; }
    .cat-btn.sel {
      border-color: var(--gold); background: rgba(255,215,0,.1);
      box-shadow: 3px 3px 0 var(--gold-d), var(--glow-gold);
    }
    .cat-btn.sel::after { content: '★'; color: var(--gold); opacity: 1; }
    .cat-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #000; }

    /* ─── STEPS ───────────────────────────────── */
    .steps { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
    .sdot {
      width: 10px; height: 10px;
      background: var(--surface2); border: 2px solid var(--border2);
    }
    .sdot.active { background: var(--gold); border-color: var(--gold-m); box-shadow: var(--glow-gold); }

    /* ─── CONFIRM ROW ─────────────────────────── */
    .confirm-card {
      background: var(--surface2); border: 3px solid var(--border2);
      box-shadow: 4px 4px 0 #000;
      padding: 13px 14px; margin-bottom: 12px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .confirm-left { display: flex; align-items: center; gap: 10px; }
    .confirm-em  { font-size: 26px; }
    .confirm-cat { font-family: var(--font-px); font-size: 7px; line-height: 1.9; }
    .confirm-amt { font-family: var(--font-num); font-size: 22px; font-weight: 800; color: var(--gold); text-shadow: 2px 2px 0 var(--gold-d); }

    /* ─── TRANSACTION LIST ────────────────────── */
    .tx-item {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 0; border-bottom: 2px solid var(--border);
    }
    .tx-item:last-child { border-bottom: none; }
    .tx-em  { font-size: 20px; width: 30px; text-align: center; flex-shrink: 0; }
    .tx-info { flex: 1; min-width: 0; }
    .tx-lbl { font-family: var(--font-num); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tx-dt  { font-family: var(--font-px); font-size: 5.5px; color: var(--muted); margin-top: 4px; line-height: 2; }
    .tx-nt  { font-size: 11px; color: var(--text-dim); font-style: italic; margin-top: 2px; }
    .tx-amt { font-family: var(--font-num); font-size: 14px; font-weight: 700; flex-shrink: 0; }
    .tx-amt.cr { color: var(--success); }
    .tx-amt.db { color: var(--danger); }
    .tx-del {
      background: var(--surface2); border: 2px solid var(--border);
      box-shadow: 2px 2px 0 #000; color: var(--muted);
      font-size: 12px; width: 30px; height: 30px;
      cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      transition: border-color .1s;
    }
    .tx-del:hover  { border-color: var(--gold); }
    .tx-del:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #000; }

    /* ─── MODAL ───────────────────────────────── */
    #modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 50;
      display: none; align-items: flex-end; justify-content: center;
    }
    #modal-overlay.open { display: flex; }
    .modal {
      background: var(--surface);
      border: 4px solid var(--border2); border-bottom: none;
      box-shadow: 0 -6px 0 #000, 0 0 40px rgba(56,56,176,.2);
      width: 100%; max-width: 390px;
      padding: 22px 15px calc(22px + env(safe-area-inset-bottom));
      max-height: 92dvh; overflow-y: auto;
    }
    .modal-title {
      font-family: var(--font-px); font-size: 10px; color: var(--gold);
      text-shadow: 2px 2px 0 var(--gold-d);
      text-align: center; margin-bottom: 18px; line-height: 2;
    }
    .modal-sub {
      font-family: var(--font-px); font-size: 7px; color: var(--muted);
      text-align: center; margin-bottom: 12px; line-height: 2;
    }

    /* ─── FORM ────────────────────────────────── */
    .fg { margin-bottom: 14px; }
    .fl { font-family: var(--font-px); font-size: 6px; color: var(--muted); margin-bottom: 8px; display: block; line-height: 2; letter-spacing: .04em; }
    .fi {
      width: 100%; background: var(--surface2);
      border: 3px solid var(--border2);
      box-shadow: inset 2px 2px 0 rgba(0,0,0,.35);
      color: var(--text); font-family: var(--font-num); font-size: 15px;
      height: 48px; padding: 0 12px; outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .fi:focus {
      border-color: var(--gold);
      box-shadow: inset 2px 2px 0 rgba(0,0,0,.35), 0 0 0 2px rgba(255,215,0,.15);
    }

    /* ─── STATS ───────────────────────────────── */
    .chart-wrap { position: relative; height: 200px; margin: 8px 0 14px; }
    .stats-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
    .stats-tbl th { font-family: var(--font-px); font-size: 6px; color: var(--muted); text-align: left; padding: 10px 0; border-bottom: 3px solid var(--border2); line-height: 2; letter-spacing: .08em; }
    .stats-tbl td { padding: 9px 0; border-bottom: 2px solid var(--border); font-family: var(--font-num); font-size: 14px; font-weight: 600; }
    .stats-tbl tr:last-child td { border-bottom: none; }
    .stats-tbl td:last-child, .stats-tbl th:last-child { text-align: right; }

    /* ─── CONFIG ──────────────────────────────── */
    .cfg-sec { margin-bottom: 22px; }
    .cat-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 2px solid var(--border); }
    .cat-row:last-child { border-bottom: none; }
    .cat-row-em  { font-size: 22px; }
    .cat-row-lbl { flex: 1; font-size: 13px; }
    .cat-row-del { background: none; border: 2px solid var(--border); box-shadow: 2px 2px 0 #000; color: var(--danger); width: 32px; height: 32px; cursor: pointer; font-size: 14px; transition: border-color .1s; }
    .cat-row-del:hover { border-color: var(--danger); }

    /* ─── MISC ────────────────────────────────── */
    .err   { font-family: var(--font-px); color: var(--danger); font-size: 6px; margin-top: 8px; min-height: 20px; line-height: 2; }
    .empty { font-family: var(--font-px); text-align: center; color: var(--muted); font-size: 7px; padding: 28px 12px; line-height: 2.8; }
    .divider { height: 0; border: none; border-top: 2px solid var(--border); margin: 16px 0; }
    .row2 { display: flex; gap: 8px; }

    /* ─── ANIMATIONS ──────────────────────────── */
    @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
    @keyframes coinSpin { 0%,100%{transform:translateX(-50%) scaleX(1)} 50%{transform:translateX(-50%) scaleX(.06)} }
    @keyframes scoreFloat {
      0%   { transform: translateX(-50%) translateY(0); opacity: 1; }
      100% { transform: translateX(-50%) translateY(-70px); opacity: 0; }
    }

    .net-coin {
      position: fixed; top: 14px; left: 50%;
      width: 20px; height: 20px; border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, var(--gold-l), var(--gold));
      box-shadow: var(--glow-gold);
      z-index: 300; opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    .net-coin.spinning { opacity: 1; animation: coinSpin .4s linear infinite; }

    .score-pop {
      position: fixed; bottom: 96px; left: 50%;
      font-family: var(--font-px); font-size: 13px;
      color: var(--gold); text-shadow: 2px 2px 0 var(--gold-d), var(--glow-gold);
      pointer-events: none; z-index: 250; white-space: nowrap;
      animation: scoreFloat 1.4s ease-out forwards;
    }