:root{--bg:#f6f7f9;--card:#fff;--ink:#1b1f24;--mute:#6b7280;--line:#e5e7eb;--blue:#2563eb;--blue-bg:#e8f0fe;--green:#15803d;--green-bg:#e6f4ea;--red:#b91c1c;--red-bg:#fdecec;--amber:#b45309;--amber-bg:#fff4e0;--gray-bg:#f0efec;--r:12px}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans SC","Noto Sans",sans-serif}
button,input,select,textarea{font:inherit}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700}.logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--blue);color:#fff;font-size:12px}
.tabs{display:flex;gap:4px;margin-left:8px}.tab{border:0;background:transparent;padding:8px 12px;border-radius:999px;color:var(--mute);cursor:pointer}.tab.active{background:var(--blue-bg);color:var(--blue);font-weight:600}
.right{margin-left:auto;display:flex;align-items:center;gap:10px}.lang{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer;font-weight:600}.who{color:var(--mute);font-size:12px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{font-size:12px;color:var(--mute)}.badge.warn{color:var(--amber)}
main{max-width:1180px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.grow{flex:1}.mt{margin-top:14px}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer;color:var(--ink)}.chip.active{background:var(--blue-bg);border-color:var(--blue);color:var(--blue);font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;cursor:pointer}.kpi .l{color:var(--mute);font-size:13px}.kpi .v{font-size:22px;font-weight:700;margin-top:4px}.kpi .s{color:var(--mute);font-size:12px}
.kpi.red .v{color:var(--red)}.kpi.amber .v{color:var(--amber)}.kpi.green .v{color:var(--green)}
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.todo{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer}.todo:last-child{border-bottom:0}.todo b{font-variant-numeric:tabular-nums}
.chart{display:flex;align-items:flex-end;gap:3px;height:150px;margin-top:10px}.bar{flex:1;background:#cfd8e3;border-radius:3px 3px 0 0;min-width:4px;position:relative}.bar.hi{background:var(--blue)}.bar span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:10px;color:var(--mute)}
.aging{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}.aging div{background:var(--gray-bg);border-radius:8px;padding:8px;text-align:center}.aging .l{font-size:11px;color:var(--mute)}.aging .v{font-weight:600;font-size:13px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}th{color:var(--mute);font-weight:500;font-size:13px}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.clickable{cursor:pointer}tr.clickable:hover{background:#fafbfc}tr.sel{background:var(--blue-bg)}
.st{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.st-unmarked{background:var(--gray-bg);color:#444}.st-unmarked_late{background:var(--amber-bg);color:var(--amber)}.st-credit{background:var(--blue-bg);color:var(--blue)}.st-partial{background:var(--blue-bg);color:var(--blue)}.st-overdue{background:var(--red-bg);color:var(--red)}.st-settled{background:var(--green-bg);color:var(--green)}.st-paid{background:var(--green-bg);color:var(--green)}.st-cancelled{background:#eee;color:#777;text-decoration:line-through}.st-quote{background:#eee;color:#777}
.btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 14px;cursor:pointer;font-weight:600}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.green{background:var(--green);border-color:var(--green);color:#fff}.btn.red{background:#fff;border-color:var(--red);color:var(--red)}.btn.sm{padding:5px 10px;font-size:13px;font-weight:500}.btn:disabled{opacity:.5;cursor:default}.btn.on{outline:3px solid var(--blue-bg);border-color:var(--blue)}
input[type=text],input[type=number],input[type=date],input[type=search],select,textarea{border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:#fff;width:100%}
.bulk{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:15;width:min(960px,calc(100% - 32px));box-shadow:0 8px 24px rgba(0,0,0,.25);background:#1b1f24;color:#fff;border-radius:12px;padding:10px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}.bulk select{width:auto}
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:20;display:flex;justify-content:flex-end}.drawer.hidden{display:none!important}.drawer-inner{width:min(520px,100%);height:100%;overflow:auto;background:#fff;padding:18px 20px}
.h{display:flex;justify-content:space-between;align-items:center}.h h2{margin:0;font-size:18px}.x{border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--mute)}
.kv{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0}.kv div{background:var(--gray-bg);border-radius:10px;padding:8px 10px}.kv .l{font-size:12px;color:var(--mute)}.kv .v{font-weight:700;font-size:16px}
.sec{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}.sec h3{margin:0 0 8px;font-size:14px;color:var(--mute);font-weight:600}
.decide{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.credit-box{background:var(--blue-bg);border-radius:10px;padding:10px;margin-top:8px;display:grid;gap:8px}
.pay{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);font-size:14px}.pay.void{opacity:.5;text-decoration:line-through}
.warn{background:var(--amber-bg);color:var(--amber);border-radius:10px;padding:8px 10px;font-size:13px;margin-top:8px}
.muted{color:var(--mute);font-size:13px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1b1f24;color:#fff;padding:10px 16px;border-radius:10px;z-index:50}.toast.hidden{display:none!important}.toast.err{background:var(--red)}
.empty{padding:30px;text-align:center;color:var(--mute)}
.form{display:grid;gap:10px;max-width:520px}.form label{display:grid;gap:4px;font-size:13px;color:var(--mute)}
@media (max-width:760px){.kpis{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.tabs{margin-left:0}.who{display:none}th.opt,td.opt{display:none}.decide{grid-template-columns:1fr}.kv{grid-template-columns:1fr 1fr}}

.hidden{display:none!important}
html,body{overflow-x:hidden}
.card{overflow-x:auto}
@media (max-width:760px){.top{flex-wrap:wrap;gap:8px;padding:8px 12px}.brand{white-space:nowrap}.tabs{order:3;width:100%;overflow-x:auto;justify-content:space-around}.tab{padding:6px 10px}.right{margin-left:auto}.aging{grid-template-columns:repeat(3,1fr)}.drawer-inner{padding:14px}}
.st-history{background:var(--gray-bg);color:var(--mute)}

td.acts{white-space:nowrap;position:relative;text-align:right}th.acts{text-align:right}
.ib{border:1px solid var(--line);background:#fff;border-radius:7px;padding:4px 8px;font-size:12px;cursor:pointer;margin-left:4px;color:var(--ink)}
.ib.g{background:var(--green-bg);color:var(--green);border-color:#bfe3c9}.ib.b{background:var(--blue-bg);color:var(--blue);border-color:#c6d8fb}.ib.r{background:var(--red-bg);color:var(--red);border-color:#f3c2c2}
.ib:hover{filter:brightness(.96)}
.pop{position:absolute;right:0;top:50%;transform:translateY(-50%);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;z-index:6;min-width:280px;justify-content:flex-end}
.pop input{padding:6px 8px;border:1px solid var(--line);border-radius:7px}
@media (max-width:760px){th.acts,td.acts{display:none}}
td.num,th.num{white-space:nowrap}

.mt-s{margin-top:8px}
.chips.dates .chip{padding:5px 10px;font-size:13px}
td.cust .cn{font-size:13px;line-height:1.25;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.cust .cd{font-size:11px}
tbody td{padding:9px 8px}
.ib{padding:7px 12px;font-size:14px;font-weight:600;border-radius:8px;margin-left:5px;min-height:34px}
.ib.g{background:var(--green);color:#fff;border-color:var(--green)}
.ib.b{background:var(--blue);color:#fff;border-color:var(--blue)}
.ib.r{background:#fff;color:var(--red);border-color:#f3c2c2}
td.acts{width:1%}
tbody td:first-child,tbody td:nth-child(2),td.opt,td.st-cell{white-space:nowrap}
tbody td .muted{white-space:nowrap}

tr.cancelled td, tr.cancelled td .muted, tr.cancelled td .cn{color:var(--red)!important;font-weight:700}
tr.cancelled .st{background:var(--red-bg);color:var(--red);font-weight:700}
tfoot td{background:var(--gray-bg);border-top:2px solid var(--line)}
.print-head{display:none}
@media print{
  @page{size:A4;margin:12mm}
  html,body{background:#fff;font-size:11px;overflow:visible}
  .top,.chips,#q,#printBtn,#customRange,.acts,th.acts,td.acts,.sel-col,.bulk,#bulk,.drawer,.toast{display:none!important}
  main{max-width:none;padding:0}
  .row{display:none}
  .print-head{display:block;margin-bottom:8px}.print-head h1{font-size:16px;margin:0 0 4px}
  .card{border:0;padding:0;overflow:visible;box-shadow:none}
  table{font-size:10.5px}th,td{padding:4px 5px}td.opt,th.opt{display:table-cell!important}
  th.opt,td.opt{white-space:nowrap}
  td.sel-col,th.sel-col,td.acts,th.acts{display:none!important}
  tr{break-inside:avoid}
  td.cust .cn{max-width:none;white-space:normal}
  tr.cancelled td{color:#b91c1c!important}
  .kpis,.grid2{break-inside:avoid}
}

.ib{padding:6px 9px;margin-left:3px;font-size:13px}
td.cust .cn{max-width:230px}
th,td{padding:8px 6px}
.chips.dates .chip,.chips .chip{padding:5px 10px}

.login{max-width:380px;margin:60px auto;display:grid;gap:12px}.login h2{margin:0 0 4px}.login label{display:grid;gap:4px;font-size:13px;color:var(--mute)}.login input{padding:10px;border:1px solid var(--line);border-radius:8px;font-size:15px}