[hidden]{display:none!important}
/* B-Tracking — neon on deep ink (reconhub family). Skins in app.js override the main tokens per theme. */
:root{
  --bg:#06161d; --surface:#0a222b; --surface2:#0e2c37; --line:#17414e; --fg:#e9f8f9; --muted:#8db4bb;
  --accent:#17e3d5; --accent-ink:#02201f; --accent-bg:rgba(23,227,213,.14); --glow1:rgba(23,227,213,.24); --glow2:rgba(40,120,255,.16);
  --ok:#5ef0a8; --ok-bg:rgba(94,240,168,.14); --warn:#ffd166; --warn-bg:rgba(255,209,102,.14); --bad:#ff7b93; --bad-bg:rgba(255,123,147,.15);
  --blue:#7cc4ff; --blue-bg:rgba(124,196,255,.14); --pink:#ff8fd8; --pink-bg:rgba(255,143,216,.15);
  --shadow:0 10px 30px rgba(0,0,0,.35); --r:18px; --f:"Anuphan",system-ui,sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#eef8f8; --surface:#ffffff; --surface2:#e2f3f3; --line:#c6e3e3; --fg:#0c2a30; --muted:#4c7077;
  --accent:#06aea3; --accent-ink:#fff; --accent-bg:rgba(6,174,163,.10); --glow1:rgba(6,174,163,.14); --glow2:rgba(40,120,255,.08);
  --ok:#14915a; --ok-bg:rgba(20,145,90,.11); --warn:#a66b00; --warn-bg:rgba(230,160,20,.16); --bad:#d23a5a; --bad-bg:rgba(210,58,90,.10);
  --blue:#2d6fd0; --blue-bg:rgba(45,111,208,.10); --pink:#c23a98; --pink-bg:rgba(194,58,152,.10);
  --shadow:0 8px 24px rgba(10,60,70,.08); color-scheme:light}}
:root[data-theme="light"]{
  --bg:#eef8f8; --surface:#ffffff; --surface2:#e2f3f3; --line:#c6e3e3; --fg:#0c2a30; --muted:#4c7077;
  --accent:#06aea3; --accent-ink:#fff; --accent-bg:rgba(6,174,163,.10); --glow1:rgba(6,174,163,.14); --glow2:rgba(40,120,255,.08);
  --ok:#14915a; --ok-bg:rgba(20,145,90,.11); --warn:#a66b00; --warn-bg:rgba(230,160,20,.16); --bad:#d23a5a; --bad-bg:rgba(210,58,90,.10);
  --blue:#2d6fd0; --blue-bg:rgba(45,111,208,.10); --pink:#c23a98; --pink-bg:rgba(194,58,152,.10);
  --shadow:0 8px 24px rgba(10,60,70,.08); color-scheme:light}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font:15px/1.55 var(--f);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
svg{width:18px;height:18px;flex:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
h1,h2{margin:0;font-weight:600}
h1{font-size:26px;letter-spacing:-.2px}
h2{font-size:16px;display:flex;align-items:center;gap:8px}
.sub,.hint{color:var(--muted);font-size:13.5px;margin:2px 0 0}
.hint{margin:0 0 10px}

/* ---------- PIN ---------- */
#lock{min-height:100%;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(60% 45% at 15% 0%,var(--accent-bg),transparent 70%),var(--bg)}
.pin-card{width:min(340px,100%);background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:30px 26px;box-shadow:var(--shadow);display:grid;gap:20px;text-align:center}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.brand.big{justify-content:center;font-size:24px}
.mark{width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center}
.mark svg{width:20px;height:20px}
.dots{display:flex;gap:12px;justify-content:center}
.dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);transition:.15s}
.dot.on{background:var(--accent);border-color:var(--accent)}
.dots.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.key{height:56px;border-radius:16px;border:1px solid var(--line);background:var(--surface2);font-size:20px}
.key:active{transform:scale(.96)}
.key.ghost{background:none;border-color:transparent;font-size:13px;color:var(--muted)}
.pin-msg{min-height:20px;font-size:13px;color:var(--muted)}
.pin-msg.err{color:var(--bad)}

/* ---------- shell ---------- */
#app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100%}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;padding:22px 14px;background:var(--surface);border-right:1px solid var(--line)}
.side .brand{padding:0 8px}
.nav{display:grid;gap:4px}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:0;background:none;text-align:left;color:var(--muted);font-weight:500;position:relative}
.nav-item:hover:not(:disabled){background:var(--surface2);color:var(--fg)}
.nav-item.on{background:var(--accent-bg);color:var(--accent)}
.nav-item.soon{opacity:.55;cursor:default}
.nav-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item em{margin-left:auto;font-style:normal;font-size:10.5px;padding:1px 7px;border-radius:99px;background:var(--surface2);white-space:nowrap;flex:none}
.lockbtn{margin-top:auto}
.badge{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font:600 12px/20px var(--f);font-style:normal;text-align:center}
.main{padding:28px clamp(16px,3vw,40px) 120px;max-width:1320px;width:100%;margin:0 auto;display:grid;gap:18px;align-content:start}
.view{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0}
#roundsWrap,#allWrap,.main{grid-template-columns:minmax(0,1fr)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.head-act{display:flex;gap:8px;flex-wrap:wrap}
.tabbar{display:none}

/* ---------- cards / tiles ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);min-width:0}
.card.flat{padding:0;overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);display:grid;gap:4px;text-align:left;min-width:0}
button.tile:hover{border-color:var(--accent)}
.tile small{color:var(--muted);font-size:13px}
.tile b{font-size:24px;font-weight:600;letter-spacing:-.3px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile span{font-size:12.5px;color:var(--muted)}
.tile.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tile.accent small,.tile.accent span{color:inherit;opacity:.85}
.tiles.sm .tile{padding:12px 14px}
.tiles.sm .tile b{font-size:19px}
.empty{color:var(--muted);font-size:14px;padding:14px 0;text-align:center}

/* ---------- buttons / inputs ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:500;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad)}
.btn.sm{height:34px;padding:0 12px;font-size:14px;border-radius:10px}
.btn .badge{margin-left:2px}
.btn:disabled{opacity:.5;cursor:default}
.link{border:0;background:none;color:var(--accent);font-weight:500;padding:0}
input,select,textarea{height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);min-width:0}
textarea{height:auto;padding:10px 12px;resize:vertical}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);padding:0;margin:0;cursor:pointer}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;padding:4px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);gap:2px;justify-self:start}
.seg button{border:0;background:none;padding:6px 16px;border-radius:9px;font-weight:500;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}

/* ---------- expense ---------- */
#roundsWrap,#allWrap{display:grid;gap:14px;min-width:0}
.mpills{display:flex;gap:6px;flex-wrap:wrap}
.mpill{border:1px solid var(--line);background:var(--surface);padding:5px 14px;border-radius:99px;font-size:14px;font-weight:500;color:var(--muted)}
.mpill.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.round{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin-bottom:12px}
.round-h{display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;flex-wrap:wrap}
.round-h .when{display:grid;line-height:1.2}
.round-h .when b{font-size:17px}
.round-h .when small{color:var(--muted);font-size:12.5px}
.round-h .chips{display:flex;gap:6px;flex-wrap:wrap}
.round-h .sum{margin-left:auto;font-weight:600;font-size:17px}
@media (max-width:600px){.round-h{gap:8px 12px;padding:12px 14px}.round-h .chips{order:5;width:100%;padding-left:32px}}
.round-h .chev{transition:transform .15s;color:var(--muted)}
.round.open .chev{transform:rotate(90deg)}
.round-b{border-top:1px solid var(--line)}
.round-act{display:flex;gap:8px;padding:10px 14px;flex-wrap:wrap;border-top:1px solid var(--line);background:var(--surface2)}
.chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:99px;font-size:12.5px;font-weight:500;white-space:nowrap;border:0}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.mute{background:var(--surface2);color:var(--muted)}
.chip.blue{background:var(--blue-bg);color:var(--blue)}
button.chip:hover{filter:brightness(.96);outline:1px solid currentColor}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-weight:500;color:var(--muted);font-size:12.5px;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
th.sort{cursor:pointer;user-select:none}
th.sort:hover{color:var(--fg)}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface2)}
tr.sel td{background:var(--accent-bg)!important}
td.r,th.r{text-align:right}
td.c,th.c{text-align:center}
td.no{white-space:nowrap;font-weight:500}
td.who{min-width:180px}
td.desc{color:var(--muted);font-size:13px;min-width:200px;max-width:320px}
td.desc div{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
td.cb,th.cb{width:36px;padding-right:0}
.rowbtn{cursor:pointer}
.ico{border:0;background:none;color:var(--muted);padding:4px;border-radius:8px;display:inline-grid}
.ico:hover{color:var(--accent);background:var(--accent-bg)}
tfoot td{font-weight:600;border-top:1px solid var(--line);background:var(--surface2)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar .grow{flex:1}
.search{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);flex:1 1 240px;max-width:360px;color:var(--muted)}
.search input{border:0;height:100%;padding:0;background:none;flex:1;color:var(--fg);outline:0}
.range{display:inline-flex;align-items:center;gap:4px}
.range b{color:var(--muted);font-weight:400}
.more{text-align:center;padding:10px}
.bulk{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:20;display:flex;gap:6px;align-items:center;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;
  background:var(--fg);color:var(--bg);padding:8px 10px 8px 16px;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.25);max-width:calc(100vw - 24px)}
.bulk b{margin-right:6px;font-weight:600}
.bulk button{border:0;background:rgba(255,255,255,.12);color:inherit;height:34px;padding:0 12px;border-radius:10px;font-size:14px}
:root[data-theme="dark"] .bulk button{background:rgba(0,0,0,.08)}
.bulk button:hover{background:var(--accent);color:#fff}
.inbox .card-h p{margin:0}
.inbox-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}

/* ---------- memo / reminders ---------- */
.rem{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.rem:last-child{border-bottom:0}
.rem .d{width:52px;flex:none;text-align:center;border-radius:12px;padding:6px 0;background:var(--surface2);line-height:1.1}
.rem .d b{display:block;font-size:18px}
.rem .d small{font-size:11px;color:var(--muted)}
.rem .d.today{background:var(--bad-bg);color:var(--bad)}
.rem .d.soon{background:var(--warn-bg);color:var(--warn)}
.rem .t{flex:1;min-width:0}
.rem .t b{display:block;font-weight:500}
.rem .t small{color:var(--muted);font-size:12.5px}
.memo-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.memo-row:last-child{border-bottom:0}
.memo-row .t{flex:1;min-width:0}
.memo-row .t small{color:var(--muted);display:block;font-size:12.5px}
.nr{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.nr:last-child{border-bottom:0}
.nr b{font-weight:500}
.nr .r{margin-left:auto;text-align:right;font-weight:600}
.nr small{display:block;color:var(--muted);font-weight:400;font-size:12.5px}

/* ---------- dialog ---------- */
dialog{border:0;padding:0;border-radius:20px;background:var(--surface);color:var(--fg);box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(620px,calc(100vw - 24px));max-height:calc(100vh - 32px)}
dialog::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}
.dlg{padding:22px;display:grid;gap:16px}
.dlg-h{display:flex;align-items:center;gap:10px}
.dlg-h h2{font-size:18px;flex:1}
.x{border:0;background:var(--surface2);width:32px;height:32px;border-radius:50%;font-size:16px;color:var(--muted)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form label{display:grid;gap:4px;font-size:13px;color:var(--muted);min-width:0}
.form label.full{grid-column:1/-1}
.form input,.form select,.form textarea{width:100%;color:var(--fg)}
.form .with{display:flex;gap:6px}
.form .with input{flex:1}
.total-box{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;background:var(--accent-bg);color:var(--accent);font-weight:600}
.total-box b{font-size:20px}
.dlg-f{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.dlg-f .left{margin-right:auto}

.toast{position:fixed;left:50%;top:20px;transform:translateX(-50%);z-index:50;background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:12px;font-size:14px;box-shadow:var(--shadow);max-width:calc(100vw - 32px)}
#print{display:none}

/* ---------- phone ---------- */
@media (max-width:900px){
  #app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .main{padding:18px 16px 110px}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:15;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar button{flex:1;border:0;background:none;display:grid;justify-items:center;gap:2px;font-size:11.5px;color:var(--muted);padding:4px 0}
  .tabbar button.on{color:var(--accent)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .bulk{bottom:84px;left:12px;right:12px;transform:none}
  .tile b{font-size:19px}
  h1{font-size:22px}
  .search{max-width:none}
}
@media (max-width:520px){.form{grid-template-columns:minmax(0,1fr)} .tile b{font-size:20px}}

/* ---------- print ---------- */
@media print{
  body>*:not(#print){display:none!important}
  #print{display:block;color:#000;font:12px/1.45 var(--f)}
  #print h1{font-size:18px;margin:0 0 2px}
  #print p{margin:0 0 10px;color:#555}
  #print table{font-size:11.5px}
  #print th,#print td{padding:5px 6px;border-bottom:1px solid #ccc;color:#000;background:none}
  #print tfoot td{border-top:2px solid #000}
  @page{size:A4 landscape;margin:12mm}
}

/* ---------- neon ---------- */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;width:55vw;height:55vw;border-radius:50%;filter:blur(70px);opacity:.85}
.aurora i:nth-child(1){background:var(--glow1);top:-22vw;left:-8vw;animation:float1 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){background:var(--glow2);bottom:-25vw;right:-10vw;animation:float2 26s ease-in-out infinite alternate}
.aurora i:nth-child(3){background:var(--glow1);top:35%;left:45%;width:28vw;height:28vw;opacity:.45;animation:float1 30s ease-in-out infinite alternate-reverse}
@keyframes float1{to{transform:translate(16vw,10vh) scale(1.15)}}
@keyframes float2{to{transform:translate(-14vw,-10vh) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.aurora i{animation:none}}
.main{position:relative;z-index:1}
.side,.tabbar{z-index:15}
.side{position:sticky}
.card,.tile,.round{background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(6px)}
.mark{background:transparent;color:var(--accent);filter:drop-shadow(0 0 8px var(--glow1))}
.mark svg{width:28px;height:28px}
.nav-item.on{background:linear-gradient(90deg,var(--accent-bg),transparent 130%);color:var(--fg);box-shadow:inset 3px 0 0 var(--accent),0 0 22px -12px var(--accent)}
.nav-item.on svg{color:var(--accent)}
.btn.primary,.mpill.on{box-shadow:0 0 0 1px var(--accent),0 0 18px -2px var(--glow1)}
.mpill.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tile{transition:transform .2s,border-color .2s,box-shadow .2s}
button.tile:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--glow1)}
.tile.accent{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 24px -4px var(--glow1)}
.tile.alert b{color:var(--bad)}
.tile.warnt b{color:var(--warn)}
h1 b,.eyebrow{color:var(--accent)}
.eyebrow{margin:0;font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;text-shadow:0 0 18px var(--glow1)}
.chip.pink{background:var(--pink-bg);color:var(--pink)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-top:14px}
.sw{border:0;background:none;padding:0;display:grid;gap:6px;font-size:12px;color:var(--muted);text-align:center}
.sw i{display:block;height:44px;border-radius:12px;border:1px solid var(--line)}
.sw.on{color:var(--fg)}
.sw.on i{outline:2px solid var(--accent);outline-offset:2px}
.sec-h td{background:var(--surface2)!important;font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 12px}
.nw{white-space:nowrap}
.muted{color:var(--muted);font-weight:400}
h2 small{font-size:12.5px}