/* Flat Nordic: cool neutrals, hairline borders instead of shadows, one calm accent.
   Layout: summary row, category filters, entry list left, detail panel right (bottom sheet on phones) */
:root{
  --bg:#f5f6f8; --card:#ffffff; --sunk:#eef0f3; --ink:#1b2430; --muted:#6a7482; --line:#e2e6eb;
  --accent:#2f5d7c; --accent-soft:#e6eef4; --on-accent:#ffffff;
  --leaf:#2d7356; --leaf-soft:#e3f1ea; --berry:#b54f3a; --berry-soft:#f8e7e2; --warn:#8f6210; --warn-soft:#f7efdc;
  --f-display:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-card:8px; --r-ctrl:6px; --r-chip:999px;
}

:root[data-theme="dark"]{
  --bg:#0f1317; --card:#171c22; --sunk:#1f252c; --ink:#e7ebf0; --muted:#8e98a5; --line:#283039;
  --accent:#86b7d3; --accent-soft:#1d2b36; --on-accent:#0f1317;
  --leaf:#7fc49b; --leaf-soft:#18291f; --berry:#e58d74; --berry-soft:#34211c; --warn:#e2b466; --warn-soft:#332a1a;
  color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding-block:20px 50px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:24px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* prefs: language + theme */
.prefs{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;width:100%}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:-12px}
.topbar .prefs{width:auto}
.topbar .btn{padding:6px 12px;font-size:13px}
.topbar #themeSel{background:transparent;padding:0}
.topbar #themeSel button{min-width:26px;height:26px;padding:0}
.topbar #themeSel button svg{width:14px;height:14px}
.mini{display:flex;background:var(--sunk);border-radius:var(--r-chip);padding:3px;gap:2px}
.mini button{border:0;background:transparent;border-radius:var(--r-chip);min-width:38px;height:30px;padding:0 10px;font-weight:600;font-size:12px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.mini button svg{width:16px;height:16px}
.mini button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
header.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px}
h1{font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;font-size:clamp(28px,4.5vw,36px);line-height:1.1;margin:0;text-wrap:balance}
.sub{color:var(--muted);margin:4px 0 0}
.monthnav{display:flex;align-items:center;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-chip);padding:4px}
.monthnav button{border:0;background:transparent;width:32px;height:32px;border-radius:50%;font-size:18px;line-height:1;color:var(--muted)}
.monthnav button:hover{background:var(--sunk);color:var(--ink)}
.monthnav .lbl{min-width:132px;text-align:center;font-weight:600}
.topbar .monthnav{background:transparent;border:0;padding:0;gap:0}
.topbar .monthnav button{width:26px;height:26px;font-size:16px}
.topbar .monthnav .lbl{min-width:0;font-size:13px;font-weight:500;color:var(--muted)}

.summary{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;min-width:0}
.stat .k{font-size:13px;font-weight:500;color:var(--muted)}
.stat .v{font-size:clamp(20px,3vw,26px);font-weight:600;letter-spacing:-.02em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat.out .v{color:var(--berry)} .stat.in .v{color:var(--leaf)}
.bar{height:6px;border-radius:99px;background:var(--sunk);margin-top:12px;overflow:hidden;display:flex}
.bar i{display:block;height:100%}
@media (max-width:620px){
  .summary{grid-template-columns:minmax(0,1fr)}
  .summary .in,.summary .net{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 20px}
  .summary .in .v,.summary .net .v{font-size:20px;margin:0}
}
.khead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.linkbtn{border:0;background:transparent;color:var(--accent);font-weight:600;font-size:13px;padding:2px 6px;margin-right:-6px;border-radius:8px}
.linkbtn:hover{background:var(--accent-soft)}
.limitline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--muted);margin-top:10px}
.limitline b{font-weight:600;color:var(--ink)}
.pill{font-size:12px;font-weight:600;border-radius:99px;padding:2px 9px}
.pill.ok{background:var(--leaf-soft);color:var(--leaf)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.over{background:var(--berry-soft);color:var(--berry)}

.bar.over{box-shadow:inset 0 0 0 1.5px var(--berry)}
#limitForm{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.amountbox.small input{font-size:20px;padding:6px 10px}
.chk{display:flex;align-items:center;gap:8px;font-size:14px}
.chk input{accent-color:var(--accent);width:16px;height:16px}

.fab{position:fixed;right:calc(max(16px,env(safe-area-inset-right,0px)) + 4px);bottom:calc(env(safe-area-inset-bottom,0px) + 22px);z-index:30;width:56px;height:56px;border-radius:12px;border:0;background:url(../assets/img/bg.jpg) center/cover;display:grid;place-items:center}
.fab svg{width:24px;height:24px}
.fab:active{transform:scale(.96)}
body.sheet-open .fab{opacity:0;pointer-events:none}
.scrim{position:fixed;inset:0;background:rgba(15,20,26,.4);z-index:35;opacity:0;pointer-events:none}
body.sheet-open .scrim{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:520px;z-index:40;background:var(--card);border-top:1px solid var(--line);border-radius:12px 12px 0 0;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;
  padding:10px max(20px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 20px) max(20px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px;transform:translateY(105%);visibility:hidden}
.sheet.open{transform:none;visibility:visible}
.grab{width:36px;height:4px;border-radius:99px;background:var(--line);align-self:center;margin-bottom:2px}
.sheethead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sheethead h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0}
.xbtn{border:0;background:var(--sunk);width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1;color:var(--muted)}
.quick .amountbox input{font-size:36px;padding:10px 14px;font-weight:500}
.quick .qcats{flex-wrap:wrap;overflow:visible}
.quick .qcats .chip{padding:8px 14px;font-size:14px}
.qactions{display:grid;grid-template-columns:auto 1fr;gap:10px}
.qactions .btn{justify-content:center;min-height:48px;font-size:15px}
.more{align-self:center}
.toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 14px);z-index:45;background:var(--ink);color:var(--bg);border-radius:var(--r-ctrl);padding:10px 10px 10px 16px;display:flex;align-items:center;gap:12px;font-size:14px;width:max-content;max-width:calc(100% - 32px)}
.toast b{font-weight:600}
.toast .linkbtn{color:var(--bg);background:transparent;border:1px solid currentColor;padding:6px 12px;border-radius:99px;opacity:.9}
.toast .linkbtn:hover{background:rgba(127,127,127,.2)}
@media (prefers-reduced-motion:no-preference){.sheet{transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s}.scrim{transition:opacity .2s}.fab{transition:opacity .2s,transform .1s}}
.qcats{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.qcats .chip{flex:none;padding:5px 12px;font-size:13px}
.qthumb{width:22px;height:22px;border-radius:6px;object-fit:cover}
.qmsg{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.qmsg:empty{display:none}
.qmsg .err{font-size:14px}
.qmsg b{color:var(--ink);font-weight:600}

.chips{display:flex;flex-wrap:wrap;gap:6px}
#chips{display:none}
.chip{border:1px solid var(--line);background:var(--card);border-radius:var(--r-chip);padding:6px 12px;display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:14px}
.chip .amt{color:var(--muted);font-weight:500}
.chip:hover{border-color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip[aria-pressed="true"] .amt{color:inherit;opacity:.8}
.dot{width:8px;height:8px;border-radius:50%;flex:none}

.main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:24px;align-items:start}
@media (max-width:860px){.main{grid-template-columns:minmax(0,1fr)}}
.piggy{display:block;align-self:center;width:160px;height:auto;margin-bottom:-48px}
@media (max-width:620px){.piggy{width:auto;max-width:50vw}}

.listhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.listhead h2{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0}
.btn{border:1px solid transparent;border-radius:var(--r-ctrl);padding:9px 16px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;background:var(--sunk);color:var(--ink)}
.btn:hover{background:var(--line)}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{opacity:.9}
.btn.danger{background:var(--berry-soft);color:var(--berry)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{background:var(--sunk)}
.btn:disabled{opacity:.5;cursor:default}

.entries{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.day{font-size:12px;font-weight:600;color:var(--muted);padding:10px 12px 4px;border-top:1px solid var(--line)}
.entries>:first-child{border-top:0}
.day+.entry{border-top:0}
.entry{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;background:var(--card);border:0;border-top:1px solid var(--line);border-radius:0;padding:8px 12px}
.entry:hover{background:var(--sunk)}
.entry[aria-current="true"]{background:var(--accent-soft)}
@media (max-width:860px){.entry{padding:8px 12px;grid-template-columns:36px minmax(0,1fr) auto}.thumb{width:36px;height:36px}.searchbar input{padding:11px 0}}
.thumb{width:32px;height:32px;border-radius:6px;background:var(--sunk);display:grid;place-items:center;overflow:hidden;color:var(--muted)}
.thumb img{width:100%;height:100%;object-fit:cover}
.entry .t{font-size:14px;line-height:1.3;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entry .m{font-size:12px;line-height:1.3;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.entry .a{font-size:14px;font-weight:600;white-space:nowrap}
.entry .a.out{color:var(--ink)} .entry .a.in{color:var(--leaf)}


.empty{padding:36px 22px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:16px;font-weight:600;margin-bottom:4px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:860px){
  .panel{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:40;border-radius:12px 12px 0 0;border-width:1px 0 0;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;
    padding:10px max(20px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 22px) max(20px,env(safe-area-inset-left,0px));
    transform:translateY(105%);visibility:hidden}
  body.panel-open .panel{transform:none;visibility:visible}
  .panel::before{content:"";width:36px;height:4px;border-radius:99px;background:var(--line);align-self:center;flex:none}
  .panel .btn{min-height:46px}
  .headbtns #newBtn{display:none}
  .wrap{padding-bottom:110px}
  @media (prefers-reduced-motion:no-preference){.panel{transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s}}
}
.panel h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0;text-wrap:balance;overflow-wrap:anywhere}
.panel .big{font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1}
.panel .big.out{color:var(--berry)} .panel .big.in{color:var(--leaf)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;font-size:14px;margin:0}
.kv dt{color:var(--muted);font-weight:500}
.kv dd{margin:0;overflow-wrap:anywhere}
.photo{border-radius:var(--r-ctrl);overflow:hidden;background:var(--sunk);border:1px solid var(--line);position:relative}
.photo img{display:block;width:100%;max-height:360px;object-fit:contain;cursor:zoom-in;background:var(--sunk)}
.nophoto{border:1px dashed var(--line);border-radius:var(--r-ctrl);padding:16px;text-align:center;color:var(--muted);font-size:14px}
.row{display:flex;flex-wrap:wrap;gap:8px}
.hint{font-size:13px;color:var(--muted)}

form{display:flex;flex-direction:column;gap:14px}
label.f{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:13px}
label.f span.opt{font-weight:500;color:var(--muted)}
:is(input,textarea,select).in{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-ctrl);padding:10px 12px;font-weight:500;min-width:0}
:is(input,textarea,select).in:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.amountbox{display:flex;align-items:center;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-ctrl);padding-right:12px}
.amountbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.amountbox input{border:0;background:transparent;outline:none;font-family:var(--f-display);font-weight:500;font-size:24px;padding:8px 12px;width:100%;min-width:0}
.amountbox .cur{font-weight:600;color:var(--muted)}

.seg{display:flex;background:var(--sunk);border-radius:var(--r-ctrl);padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;border-radius:9px;padding:7px 10px;font-weight:600;font-size:14px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.catpick{display:flex;flex-wrap:wrap;gap:6px}
.catpick .chip{padding:5px 12px;font-size:13px}
.err{color:var(--berry);font-weight:600;font-size:14px}
.confirm{background:var(--berry-soft);border-radius:var(--r-ctrl);padding:14px;display:flex;flex-direction:column;gap:10px}

.notice{background:var(--accent-soft);border-radius:var(--r-ctrl);padding:10px 14px;font-size:14px;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}

.searchbar{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-chip);padding:4px 6px 4px 16px;margin-bottom:12px}
.searchbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.searchbar svg{flex:none;color:var(--muted)}
.searchbar input{flex:1;min-width:0;border:0;background:transparent;outline:none;padding:8px 0}
.searchbar input::-webkit-search-cancel-button{display:none}
.searchbar .clear{border:0;background:var(--sunk);border-radius:99px;padding:5px 12px;font-weight:600;font-size:13px;color:var(--muted)}
.qinfo{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.qinfo .totals{font-size:14px;color:var(--muted)}
.qinfo .totals b{color:var(--ink);font-weight:600}
.headbtns{display:flex;gap:8px;flex-wrap:wrap}
.catlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.catrow{display:flex;flex-direction:column;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-ctrl);padding:8px 8px 8px 10px}
.catrow .line{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto auto;gap:6px;align-items:center}
.swatch{width:24px;height:24px;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line)}
.catname{border:1px solid transparent;background:transparent;border-radius:8px;padding:6px 8px;font-weight:500;min-width:0;width:100%}
.catname:hover{border-color:var(--line)}
.catname:focus{border-color:var(--accent);outline:none;background:var(--card)}
.cnt{font-size:12px;color:var(--muted);white-space:nowrap;padding:0 4px}
.iconbtn{border:0;background:transparent;border-radius:8px;padding:6px 8px;color:var(--muted);font-weight:600;font-size:13px}
.iconbtn:hover{background:var(--sunk);color:var(--ink)}
.iconbtn.del:hover{background:var(--berry-soft);color:var(--berry)}
.iconbtn:disabled{opacity:.35;cursor:default;background:transparent}
.palette{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 2px 2px}
.palette button{width:24px;height:24px;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line)}
.palette button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.addcat{display:flex;gap:8px}
.addcat input{flex:1;min-width:0}
.movebox{display:flex;flex-direction:column;gap:8px;background:var(--berry-soft);border-radius:var(--r-ctrl);padding:10px 12px;font-size:14px}
.lightbox{position:fixed;inset:0;background:rgba(10,14,18,.9);display:grid;place-items:center;z-index:50;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lightbox img{max-width:100%;max-height:100%;border-radius:var(--r-ctrl)}
.lightbox button{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:calc(env(safe-area-inset-right,0px) + 14px);background:var(--card);color:var(--ink);border:0;border-radius:99px;padding:8px 14px;font-weight:600}
@media (prefers-reduced-motion:no-preference){.entry,.chip,.btn{transition:background-color .15s,border-color .15s,opacity .15s}}
@media (max-width:620px){.chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chips .chip{flex:none}}

/* base */
.dbtools{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;padding:0 16px 8px}
.user{font-size:13px;color:var(--muted)}
.gate{position:fixed;inset:0;z-index:60;background:var(--bg);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overflow-y:auto}
.gatecard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;width:min(380px,100%)}
.gatecard h1{font-size:28px}
#gateReset{display:block;margin:14px auto 0}
.logout{display:flex;justify-content:center;padding:0 16px 120px}
.logout button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}