:root{
  --bg:#F4F5F2;--surface:#FFFFFF;--sunk:#ECEDE8;--ink:#1E2833;--muted:#59646E;--line:#DADBD5;
  --wheat:#94650C;--wheat-bg:#F3E6C8;--red:#A63426;--red-bg:#F6DFDA;--green:#2B6942;--green-bg:#DCEEE2;
  --slate:#27333E;--chalk:#F1F2EE;--chalk-dim:#AEB8BC;--chalk-up:#F4AA9D;--chalk-down:#A3DAB4;
  --btn-bg:#27333E;--btn-ink:#F4F5F2;
  --serif:"Young Serif",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141A1F;--surface:#1C242B;--sunk:#243039;--ink:#E6E8E3;--muted:#9EA9B1;--line:#313C46;
  --wheat:#E2AE45;--wheat-bg:#3A301C;--red:#EE8F81;--red-bg:#3F2723;--green:#86CC9D;--green-bg:#1E3427;
  --slate:#0E1418;--chalk:#EEF0EC;--chalk-dim:#98A3A8;--btn-bg:#E2AE45;--btn-ink:#1B1406;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141A1F;--surface:#1C242B;--sunk:#243039;--ink:#E6E8E3;--muted:#9EA9B1;--line:#313C46;
  --wheat:#E2AE45;--wheat-bg:#3A301C;--red:#EE8F81;--red-bg:#3F2723;--green:#86CC9D;--green-bg:#1E3427;
  --slate:#0E1418;--chalk:#EEF0EC;--chalk-dim:#98A3A8;--btn-bg:#E2AE45;--btn-ink:#1B1406;color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans);font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.2;margin:0}
h1{font-size:30px}h2{font-size:21px;margin-bottom:10px}h3{font-size:17px}
.muted{color:var(--muted)}
.app{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;padding:26px 14px;border-right:1px solid var(--line);background:var(--surface)}
.brand{font-family:var(--serif);font-size:26px;padding:0 10px 22px;display:flex;align-items:center;gap:8px}
.brand svg{color:var(--wheat)}
#nav{display:flex;flex-direction:column;gap:2px}
#nav a{text-decoration:none;padding:8px 10px;border-radius:6px;color:var(--muted);font-weight:500}
#nav a:hover{background:var(--sunk);color:var(--ink)}
#nav a.on{background:var(--wheat-bg);color:var(--ink);font-weight:600}
#nav .s{display:none}
.mode{margin-top:auto;font-size:12.5px;color:var(--muted);padding:0 10px}
main{padding:30px clamp(16px,4vw,44px) 60px;max-width:1180px;width:100%}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:22px}
.head p{margin:6px 0 0;max-width:64ch}
section{margin:0 0 34px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{font:inherit;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:8px 14px;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;line-height:1.3}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--btn-bg);color:var(--btn-ink);border-color:transparent}
.btn.danger{color:var(--red)}
.btn.sm{padding:4px 10px;font-size:13.5px}
.btn:disabled{opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--wheat);outline-offset:2px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:7px 9px;min-width:0}
textarea{resize:vertical}
label.f{display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--muted);font-weight:500}
label.f input,label.f select{color:var(--ink);font-size:15px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-weight:600;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line);padding:8px;white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
td input,td select{width:100%}
.num{text-align:right;white-space:nowrap}
tr.click{cursor:pointer}tr.click:hover td{background:var(--sunk)}
.sub{font-size:12.5px;color:var(--muted)}
.pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pill.up{background:var(--red-bg);color:var(--red)}.pill.down{background:var(--green-bg);color:var(--green)}.pill.flat{background:var(--sunk);color:var(--muted)}
.up{color:var(--red)}.down{color:var(--green)}
.spark polyline{stroke:var(--muted)}.spark polyline.up{stroke:var(--red)}.spark polyline.down{stroke:var(--green)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:30px}
.stat{padding:14px 16px;border-left:1px solid var(--line)}
.stat:first-child{border-left:none;padding-left:0}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2}
.stat span{font-size:13.5px;color:var(--muted)}
.slate{background:var(--slate);color:var(--chalk);border-radius:8px;padding:22px clamp(16px,3vw,28px);margin-bottom:34px}
.slate h2{color:var(--chalk);font-size:24px}
.slate .hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.slate ul{list-style:none;margin:0;padding:0}
.slate li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:12px 0;border-top:1px dashed rgba(241,242,238,.22)}
.slate li:first-child{border-top:none}
.slate .nm{font-family:var(--serif);font-size:18px}
.slate .meta{font-size:13px;color:var(--chalk-dim)}
.slate .pr{text-align:right;white-space:nowrap}
.slate .pc{font-family:var(--serif);font-size:20px}
.slate .pc.up{color:var(--chalk-up)}.slate .pc.down{color:var(--chalk-down)}
.slate li.new .nm::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--chalk-up);margin-left:8px;vertical-align:middle}
.slate .btn{background:transparent;color:var(--chalk);border-color:rgba(241,242,238,.35)}
.slate .empty-s{color:var(--chalk-dim);margin:6px 0 0}
.drop{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;border:2px dashed var(--line);border-radius:8px;padding:30px 18px;background:var(--surface);cursor:pointer;margin-bottom:14px}
.drop strong{font-family:var(--serif);font-weight:400;font-size:20px}
.drop:hover,.drop.over{border-color:var(--wheat);background:var(--wheat-bg)}
.note{background:var(--sunk);border-radius:6px;padding:12px 14px;margin-bottom:14px}
.warn{background:var(--red-bg);color:var(--red);border-radius:6px;padding:10px 14px;margin-bottom:12px;font-weight:500}
.progress{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;background:var(--wheat-bg);border-radius:6px;margin-bottom:14px}
.spin{width:16px;height:16px;border:2px solid var(--wheat);border-right-color:transparent;border-radius:50%;animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.bars{display:grid;grid-template-columns:minmax(110px,200px) minmax(0,1fr) auto;gap:8px 12px;align-items:center}
.bar{height:12px;background:var(--wheat);border-radius:2px;min-width:2px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:34px}
dialog{border:none;border-radius:10px;padding:0;width:min(820px,96vw);max-height:92vh;background:var(--surface);color:var(--ink)}
dialog::backdrop{background:rgba(8,12,16,.55)}
.dlg{padding:22px clamp(14px,3vw,26px)}
.dlg .ft{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;margin-top:20px}
.totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;background:var(--sunk);border-radius:6px;padding:12px 14px;margin-top:14px}
.totals div span{display:block;font-size:12.5px;color:var(--muted)}
.totals div b{font-size:17px}
.chat{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.msg{max-width:72ch;white-space:pre-wrap;padding:12px 14px;border-radius:8px;line-height:1.55}
.msg.user{align-self:flex-end;background:var(--wheat-bg)}
.msg.assistant{background:var(--surface);border:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chips button{font:inherit;font-size:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:99px;padding:6px 12px;cursor:pointer}
.ask{display:flex;gap:8px;align-items:flex-end}
.ask textarea{flex:1;min-height:48px}
.empty{max-width:62ch}
.empty p{font-size:17px}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--btn-bg);color:var(--btn-ink);padding:10px 16px;border-radius:6px;font-weight:500;z-index:50;max-width:min(560px,92vw);display:none}
@media (max-width:820px){
  .app{display:block}
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;flex-direction:row;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));border-right:none;border-top:1px solid var(--line);z-index:20}
  .brand,.mode{display:none}
  #nav{flex-direction:row;overflow-x:auto;width:100%}
  #nav a{flex:0 0 auto;font-size:14px}
  #nav .l{display:none}#nav .s{display:inline}
  main{padding-bottom:110px}
  h1{font-size:26px}
  .stat{border-left:none;padding-left:0}
  #toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}