:root{--bg:#f6f7f9;--card:#fff;--text:#1d2330;--muted:#6b7385;--line:#e3e6ec;--accent:#1f6feb;--accent-text:#fff;--good:#1a7f4b;--bad:#c62828;--warn:#b26a00}
@media (prefers-color-scheme:dark){:root{--bg:#12151c;--card:#1b2029;--text:#e6e9f0;--muted:#97a0b3;--line:#2a3140;--accent:#4c8dff;--good:#4cc38a;--bad:#ff6b6b;--warn:#f0b04a}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;overscroll-behavior-y:none;font:15px/1.5 -apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh}
#nav{width:210px;background:var(--card);border-right:1px solid var(--line);padding:1rem .75rem;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;flex-shrink:0}
#nav .brand{font-weight:700;font-size:18px;padding:.25rem .6rem 1rem}
#nav a{color:var(--text);text-decoration:none;padding:.45rem .6rem;border-radius:6px}
#nav a:hover{background:var(--bg)}#nav a.active{background:var(--accent);color:var(--accent-text)}
#timer{margin-top:auto;font-size:13px;border-top:1px solid var(--line);padding-top:.75rem}
main{flex:1;padding:1.5rem;max-width:1100px;min-width:0}
h1{margin:0 0 1rem;font-size:24px}h2{font-size:17px;margin:1.5rem 0 .5rem}
.bar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}.bar h1{margin:0;margin-right:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem;margin-bottom:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.75rem;margin-bottom:1rem}
.stat .l{color:var(--muted);font-size:13px}.stat .v{font-size:24px;font-weight:700}
.good{color:var(--good)}.bad{color:var(--bad)}.warn{color:var(--warn)}.muted{color:var(--muted)}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
th,td{padding:.55rem .7rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--bg)}
tr:last-child td{border-bottom:0}tr.click{cursor:pointer}tr.click:hover td{background:var(--bg)}
.n{text-align:right;white-space:nowrap}
button,.btn{font:inherit;min-height:40px;touch-action:manipulation;padding:.4rem .85rem;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;text-decoration:none;display:inline-block}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}button.danger{color:var(--bad)}
button:hover,.btn:hover{filter:brightness(.96)}
input,select,textarea{font:inherit;font-size:16px;min-height:42px;touch-action:manipulation;padding:.4rem .5rem;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--text);width:100%}
textarea{min-height:70px}label{display:block;font-size:13px;color:var(--muted);margin-bottom:.8rem}
label input[type=checkbox]{width:auto;min-height:0;margin-right:.4rem;transform:scale(1.25)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem}
.badge{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;border:1px solid var(--line);text-transform:capitalize}
.badge.paid,.badge.accepted{color:var(--good);border-color:var(--good)}.badge.overdue,.badge.declined{color:var(--bad);border-color:var(--bad)}
.badge.partial,.badge.sent{color:var(--accent);border-color:var(--accent)}.badge.void{text-decoration:line-through}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:4vh 1rem;overflow:auto;z-index:10}
#modal[hidden],#toast[hidden]{display:none}
#modal .box{background:var(--card);border-radius:12px;padding:1.25rem;width:100%;max-width:560px}
#modal .box.wide{max-width:760px}
#toast{position:fixed;bottom:1rem;right:1rem;background:var(--text);color:var(--bg);padding:.6rem 1rem;border-radius:8px;z-index:20}
.tabs{display:flex;gap:.25rem;margin-bottom:1rem;flex-wrap:wrap}.tabs button.on{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.chart{display:flex;align-items:flex-end;gap:6px;height:140px;margin-top:.5rem}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:11px;color:var(--muted)}
.chart .bars{display:flex;gap:2px;align-items:flex-end;height:100%;width:100%}.chart .bars i{flex:1;border-radius:3px 3px 0 0;min-height:1px}
.chart .inc{background:var(--good)}.chart .exp{background:var(--bad);opacity:.75}
.totals{margin-left:auto;width:min(320px,100%)}.totals div{display:flex;justify-content:space-between;padding:.2rem 0}.totals .t{font-weight:700;font-size:17px;border-top:2px solid var(--text);margin-top:.3rem;padding-top:.4rem}

#tabbar,#fab,#timerbar{display:none}
input[type=checkbox]{width:auto;min-height:0}
#nav-quick{margin:0 0 .6rem}
#nav button{width:100%}
.menu{display:grid;gap:.5rem}.menu .menuitem{width:100%;text-align:left;min-height:48px;display:flex;align-items:center}

/* ---- quick log ---- */
.qin{position:relative}.qin textarea{padding-right:64px;min-height:96px}
.mic{position:absolute;right:8px;top:8px;width:48px;height:48px;border-radius:50%;padding:0;font-size:22px;display:flex;align-items:center;justify-content:center}
.mic.on{background:var(--bad);border-color:var(--bad);color:#fff;animation:pulse 1.1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(198,40,40,.25)}}
.hint{font-size:13px;color:var(--muted);margin:.4rem 0 .8rem}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0}.chips button{border-radius:99px;padding:.25rem .8rem;min-height:36px}
.qcard{border:1px solid var(--line);border-radius:12px;padding:.8rem;margin:.7rem 0;background:var(--bg)}
.qcard.invalid{border-color:var(--bad)}
.qtop{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start;margin-bottom:.4rem}.qsrc{font-size:13px;overflow-wrap:anywhere}
.qx{padding:0;width:36px;min-height:36px;flex:0 0 36px;color:var(--bad)}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.4rem}
.qhours{display:flex;gap:.3rem}.qhours input{text-align:center;min-width:0}.qhours button{width:44px;padding:0;flex:0 0 44px;font-size:20px}
.qissues{font-size:13px;color:var(--warn);margin:.3rem 0}.qissues:empty{display:none}
.qfoot{position:sticky;bottom:-1px;background:var(--card);padding:.7rem 0 .2rem;margin-top:.5rem;display:flex;gap:.5rem;justify-content:flex-end;align-items:center;border-top:1px solid var(--line)}
.qfoot .tot{margin-right:auto;color:var(--muted)}

@media (max-width:760px){
  body{display:block}
  #nav{display:none}
  main{padding:12px 12px calc(84px + env(safe-area-inset-bottom));max-width:none;width:100%;overflow-x:hidden}
  h1{font-size:22px}
  .bar{gap:.4rem}.bar h1{flex:1 1 100%;margin-bottom:.2rem}
  .bar select,.bar input{width:auto;flex:1 1 140px}
  .row{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr;gap:.5rem}.stat .v{font-size:20px}.card{padding:.8rem}
  .tabs button{flex:1 1 auto}

  #tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  #tabbar a,#tabbar button{flex:1;display:flex;align-items:center;justify-content:center;min-height:56px;padding:0;border:0;border-radius:0;background:none;color:var(--muted);font-size:12px;text-decoration:none}
  #tabbar .active{color:var(--accent);font-weight:700}
  #fab{display:flex;align-items:center;justify-content:center;flex:0 0 58px!important;width:58px;height:58px;min-height:58px!important;margin:-22px 6px 0;padding:0!important;border-radius:50%!important;background:var(--accent)!important;border:0!important;color:var(--accent-text)!important;font-size:32px!important;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.3)}
  #timerbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;position:fixed;z-index:6;left:8px;right:8px;bottom:calc(64px + env(safe-area-inset-bottom));background:var(--text);color:var(--bg);border-radius:12px;padding:.4rem .6rem .4rem .9rem}
  #timerbar[hidden]{display:none}#timerbar button{min-height:36px}
  #toast{left:12px;right:12px;bottom:calc(140px + env(safe-area-inset-bottom));text-align:center}

  /* dialogs become bottom sheets */
  #modal{align-items:flex-end;padding:0}
  #modal .box,#modal .box.wide{max-width:none;border-radius:16px 16px 0 0;max-height:92vh;max-height:92dvh;overflow-y:auto;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom))}

  /* wide tables become stacked cards */
  table.stack{display:block;border:0;background:none}
  table.stack thead,table.stack tr.hdr{display:none}
  table.stack tbody{display:block}
  table.stack tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:.6rem;padding:.3rem .8rem}
  table.stack td,table.stack th{display:flex;justify-content:space-between;align-items:center;gap:.8rem;border:0;padding:.35rem 0;text-align:right;width:auto!important;background:none;text-transform:none;letter-spacing:0;font-size:inherit;color:inherit}
  table.stack td[data-label]:not([data-label=""])::before{content:attr(data-label);color:var(--muted);font-size:12px;text-align:left;flex:0 0 auto}
  table.stack td:first-child{font-weight:600;text-align:left;justify-content:flex-start}
  table.stack td:first-child::before{display:none}
  table.stack td input[type=text],table.stack td input:not([type]){width:100%}
  table.stack td input[type=number]{width:55%;text-align:right}
  table.stack td input[type=checkbox]{transform:scale(1.4);margin:0 .4rem}
  table.stack td:empty{display:none}
  table.stack tr.click:active{background:var(--bg)}
  table.stack button{min-height:40px}
  .totals{width:100%}
  .chart{height:110px}
}
@media (min-width:761px){.qfoot{position:static}}