:root{
  --page:#060D17; --sunk:#030910; --card:#0D1724; --lift:#111E2E;
  --rule:#1A2A3D; --rule-soft:#14212F; --edge:#24405C;
  --ink:#DFE8F2; --ink-2:#8698AC; --ink-3:#5A6C80; --ink-4:#46586B;
  --in:#35D6C8; --out:#FF5C9E; --flag:#F2BC5B; --flag-2:#C69A44; --flag-bg:#2A2110;
  --link:#7FB2E8;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
html{color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--page);color:var(--ink);font-family:var(--sans);font-size:16px;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:var(--link);text-decoration:none}
.hide{display:none !important}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.in{color:var(--in)} .out{color:var(--out)} .flagged{color:var(--flag)}

/* ---------------------------------------------------------------- shell */
#app{max-width:620px;margin:0 auto;padding-bottom:calc(92px + var(--safe-b));min-height:100%}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
.title{
  font-family:var(--serif);font-size:22px;letter-spacing:.01em;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.title.title-sm{font-size:18px}
.title.title-xs{font-size:16px}
.title.title-sm .mark,.title.title-xs .mark{width:22px;height:22px;vertical-align:-4px;margin-right:7px}
.title.sm{font-size:17px}
.title .mark{
  width:26px;height:26px;border-radius:6px;vertical-align:-5px;margin-right:9px;
}
.title.sm .mark{display:none}
.top select{
  background:transparent;border:none;color:var(--ink-2);font-size:13px;
  padding:4px 2px;cursor:pointer;
}
.top select option{background:var(--card);color:var(--ink)}
select option{background-color:var(--card);color:var(--ink)}

/* ----------------------------------------------------------------- tabs */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:center;gap:8px;
  padding:9px 12px calc(10px + var(--safe-b));
  border-top:1px solid var(--rule);background:var(--sunk);
}
.tab{
  flex:1 1 0;max-width:116px;min-height:58px;padding:8px 4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1px solid var(--rule);border-radius:10px;
  background:var(--card);color:var(--ink-3);
  font-size:11px;line-height:1.2;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.tab .gl{font-size:18px;line-height:1}
.tab[aria-current="page"]{background:#12283E;border-color:#31597F;color:var(--ink)}
.tab:active{background:#16324C;transform:translateY(1px)}

/* --------------------------------------------------------------- blocks */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 10px}
.stat{
  display:block;width:100%;text-align:left;
  background:var(--card);border:1px solid transparent;border-radius:8px;padding:11px 13px;
  transition:border-color .12s ease,background .12s ease;
}
.stat .k{display:block;font-size:12px;color:var(--ink-2);margin-bottom:4px}
.stat .v{display:block;font-family:var(--mono);font-size:19px;font-variant-numeric:tabular-nums}
.stat:active{transform:translateY(1px)}
.stat[aria-pressed="true"]{background:#12283E;border-color:#31597F}
.stat[aria-pressed="true"] .k{color:var(--ink)}
.band{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:12px 16px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.band+.band{border-top:none}
.band .k{font-size:13px;color:var(--ink-2)}
.band .v{font-family:var(--mono);font-size:17px;font-variant-numeric:tabular-nums}
.band.strong{background:var(--card)}
.owed{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  width:100%;text-align:left;padding:11px 16px;
  background:var(--flag-bg);border-bottom:1px solid var(--rule);
}
.owed .k{font-size:13px;color:var(--flag)}
.owed .k span{color:var(--flag-2)}
.owed .v{font-family:var(--mono);font-size:15px;color:var(--flag)}

/* ----------------------------------------------------------------- rows */
.row{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:11px 16px;border-bottom:1px solid var(--rule-soft);min-height:56px;
}
.row:active{background:var(--card)}
.row .d{font-family:var(--mono);font-size:12px;color:var(--ink-3);width:48px;flex:none;white-space:nowrap}
.row .b{flex:1;min-width:0}
.row .n{
  display:block;font-size:14px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.row .s{
  display:block;font-size:12px;color:var(--ink-2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.row .a{
  font-family:var(--mono);font-size:14px;width:78px;text-align:right;flex:none;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.row .clip{font-size:13px;color:var(--ink-3);flex:none}
.row.flag{background:var(--flag-bg)}
.row.flag .d,.row.flag .s{color:var(--flag-2)}
.row.flag .n,.row.flag .a,.row.flag .clip{color:var(--flag)}
.row.done .d{color:var(--ink-4)}
.row.done .n,.row.done .a{color:#7C8DA0}
.row.done .s{color:var(--in)}

.sub{
  font-size:11px;color:var(--ink-4);letter-spacing:.07em;text-transform:uppercase;
  padding:16px 16px 7px;border-top:1px solid var(--rule);
}
.search{padding:12px 16px 10px}
.search input{
  width:100%;background:var(--card);border:1px solid var(--rule);border-radius:8px;
  padding:11px 12px;font-size:15px;outline:none;color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
.search input::placeholder{color:var(--ink-4)}
.search input:focus{border-color:var(--edge)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.filterbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 16px;background:var(--card);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-size:13px;color:var(--ink-2);
}
.quiet{padding:14px 16px;font-size:13px;color:var(--ink-3);line-height:1.5}
.act{
  display:block;width:calc(100% - 32px);margin:12px 16px;
  min-height:44px;padding:11px 12px;
  border:1px solid var(--rule);border-radius:8px;background:var(--card);
  color:var(--link);font-size:13px;text-align:center;
}
.act:active{background:#0D1B2B;transform:translateY(1px)}
.empty{padding:44px 24px;text-align:center;color:var(--ink-3);font-size:14px;line-height:1.6}

/* -------------------------------------------------------------- repeat */
.repeat{
  display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;
  /* <button> resolves width:auto as shrink-to-fit, so long client names would
     stretch the card past the column. Pin it to the column minus margins. */
  width:calc(100% - 32px);
  margin:0 16px 10px;padding:13px 14px;border-radius:8px;min-height:58px;
  border:1px solid var(--edge);background:#0D1B2B;
}
.repeat:last-of-type{margin-bottom:16px}
.repeat:active{background:#12283E;transform:translateY(1px)}
.repeat .b{flex:1;min-width:0}
.repeat .n{
  display:block;font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.repeat .s{
  display:block;font-size:12px;color:var(--ink-2);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.repeat .a{font-family:var(--mono);font-size:15px;flex:none;white-space:nowrap}
.repeat[disabled]{opacity:.5}

/* --------------------------------------------------------------- forms */
.fld{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--rule-soft);min-height:54px;
}
.fld label{font-size:13px;color:var(--ink-2);flex:none;width:96px}
.fld .ctl{flex:1;text-align:right;min-width:0}
.fld input,.fld select,.fld textarea{
  width:100%;background:transparent;border:none;text-align:right;
  font-size:15px;padding:6px 0;outline:none;
}
.fld textarea{resize:vertical;min-height:44px;text-align:left}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  box-shadow:0 1px 0 0 var(--link);
}
.fld input[type=date]{color-scheme:dark}
.fld input[type=checkbox]{
  width:22px;height:22px;accent-color:#31597F;cursor:pointer;margin-left:auto;display:block;
}
.fld select{color-scheme:dark;cursor:pointer}
.fld .money{font-family:var(--mono);font-size:19px}
.fld .hint{font-size:11px;color:var(--ink-3);margin-top:2px}
.fld.locked{background:var(--sunk)}
.fld.locked label{color:var(--ink-4)}
.fld.locked input,.fld.locked .seg button{color:var(--ink-3);cursor:default}
.fld.locked .seg{border-color:var(--rule)}
.fld.locked .seg button[aria-pressed="true"]{background:#101E2E;color:var(--ink-2)}
.fld.col{display:block}
.fld.col label{width:auto;display:block;margin-bottom:6px}
.fld.col .ctl{text-align:left}
.fld.col input,.fld.col textarea{text-align:left}

.acts{display:flex;gap:8px;padding:16px}
.btn{
  flex:1;font-size:14px;color:var(--ink);background:transparent;
  border:1px solid var(--edge);border-radius:8px;padding:12px 10px;text-align:center;
  min-height:46px;
}
.btn:active{background:#0D1B2B;transform:translateY(1px)}
.btn.sm{
  flex:0 0 auto;min-height:38px;padding:0 15px;font-size:13px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.btn.icon{flex:0 0 auto;min-height:34px;min-width:34px;padding:0 9px;border-radius:8px;font-size:15px}
.btn.primary{background:#12283E;border-color:#31597F}
.btn.primary:active{background:#17334E}
.btn.danger{color:var(--out);border-color:#4E2A3C}
.btn.ghost{border-color:transparent;color:var(--ink-3)}
.btn[disabled]{opacity:.5}

.seg{display:flex;gap:0;border:1px solid var(--edge);border-radius:8px;overflow:hidden}
.seg button{flex:1;padding:11px 8px;font-size:14px;color:var(--ink-2);min-height:44px}
.seg button[aria-pressed="true"]{background:#12283E;color:var(--ink)}

.drop{
  display:block;width:calc(100% - 32px);margin:14px 16px;
  border:1px dashed var(--edge);border-radius:8px;padding:26px 16px;
  text-align:center;color:var(--ink-3);font-size:13px;line-height:1.6;
}
.shot{display:block;width:calc(100% - 32px);margin:14px 16px;border-radius:8px;border:1px solid var(--rule)}

/* -------------------------------------------------------------- notice */
.notice{
  margin:14px 16px;padding:11px 13px;border-radius:8px;
  background:var(--flag-bg);color:var(--flag);font-size:13px;line-height:1.5;
}
.notice.bad{background:#2E1422;color:var(--out)}
.notice.good{background:#0B2A28;color:var(--in)}
#toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(86px + var(--safe-b));
  z-index:60;max-width:calc(100% - 32px);padding:11px 16px;border-radius:8px;
  background:#12283E;border:1px solid var(--edge);font-size:13px;line-height:1.4;
}
#toast.bad{background:#2E1422;border-color:#4E2A3C;color:var(--out)}

/* ------------------------------------------------------------- overlay */
.sheet{
  position:fixed;inset:0;z-index:50;background:var(--page);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(24px + var(--safe-b));
}
.sheet-in{max-width:620px;margin:0 auto}
.sheet .top{position:sticky;top:0;background:var(--page);border-bottom:1px solid var(--rule);z-index:2}
.viewer{
  position:fixed;inset:0;z-index:70;background:#000;
  display:flex;align-items:center;justify-content:center;
}
.viewer img{max-width:100%;max-height:100%;object-fit:contain}
.viewer .close{
  position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;
  background:#0009;border-radius:8px;padding:10px 14px;font-size:14px;
}

/* ---------------------------------------------------------------- login */
#login{max-width:360px;margin:0 auto;padding:14vh 20px 40px}
#login .title{font-size:26px;margin-bottom:6px}
#login .logo-hero{display:block;width:190px;max-width:70%;margin:0 auto 20px;border-radius:14px}
#login p{color:var(--ink-2);font-size:14px;margin-bottom:26px}
#login .lf{margin-bottom:14px}
#login label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:6px}
#login input{
  width:100%;background:var(--card);border:1px solid var(--rule);border-radius:8px;
  padding:13px 12px;font-size:16px;outline:none;
}
#login input:focus{border-color:var(--edge)}

/* --------------------------------------------------------------- print */
.paper{background:#fff;color:#111;padding:32px 28px;font-size:13px;line-height:1.55}
.paper h1{font-family:var(--sans);font-size:13px;font-weight:600;margin-bottom:1px}
.paper-logo{width:132px;height:auto;border-radius:8px;display:block;margin-bottom:12px}
.paper .muted{color:#666}
.paper table{width:100%;border-collapse:collapse;margin:22px 0 0}
.paper th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:#666;font-weight:400;border-bottom:1px solid #ccc;padding:0 0 7px;
}
.paper td{padding:9px 0;border-bottom:1px solid #eee;vertical-align:top}
.paper .r{text-align:right;font-family:var(--mono);white-space:nowrap;padding-left:14px}
.paper .tot td{border-bottom:none;border-top:2px solid #111;font-size:16px;padding-top:11px}
.paper .head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.paper .terms{margin-top:26px;color:#666;font-size:12px}

#print-root{display:none}

@media print{
  @page{margin:14mm}
  /* color-scheme:dark is set globally so native selects render dark, but it
     also makes Chrome paint the print canvas dark. Reset it for print. */
  html{color-scheme:light}
  html,body{background:#fff !important;color:#111}

  /* Print only the rendered invoice. Everything else in the app shell
     is hidden outright rather than reshaped, so nothing inherits the
     dark theme or the app's width constraints. */
  body > *{display:none !important}
  #print-root{display:block !important}

  .paper{padding:0 2mm;width:100%;max-width:100%;background:#fff;color:#111}
  .paper .r{font-family:"Courier New",monospace}
  .paper-logo{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    width:112px;
  }
}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}