:root{
  --bg:#f5f6f8; --card:#fff; --ink:#1d2430; --muted:#6b7380; --line:#e3e6ea;
  --acc:#2457a6; --acc-ink:#fff; --ok:#1f7a3f; --okbg:#e7f4ec; --warn:#a56200; --warnbg:#fff3dc;
  --bad:#b3261e; --badbg:#fdecea; --draft:#eef0f3;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#14171c; --card:#1d2128; --ink:#e7eaee; --muted:#9aa3ae; --line:#2e343d;
    --acc:#6a9be8; --acc-ink:#0d1117; --ok:#6fcf8f; --okbg:#173022; --warn:#f0b357; --warnbg:#3a2c12;
    --bad:#ff8a80; --badbg:#3b1a18; --draft:#262b33; }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif}
a{color:var(--acc);text-decoration:none} a:hover{text-decoration:underline}
h1{font-size:20px;margin:8px 0 12px} h2{font-size:16px;margin:0 0 10px}
.wrap{max-width:1180px;margin:0 auto;padding:12px 16px 40px}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.brand{font-weight:700;color:var(--ink)}
.menu{display:flex;flex-wrap:wrap;gap:4px 14px;flex:1}
.menu a{color:var(--muted);padding:4px 0;border-bottom:2px solid transparent}
.menu a.on{color:var(--ink);border-color:var(--acc)}
.who{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.testbar{background:var(--warnbg);color:var(--warn);text-align:center;padding:4px;font-size:13px}
.foot{color:var(--muted);font-size:12px;text-align:center;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 0 14px}
.card.narrow{max-width:420px;margin:40px auto}
.login h1{margin-bottom:0}.sub{color:var(--muted);margin-top:2px}
.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between;flex-wrap:wrap}.gap{gap:10px;flex-wrap:wrap}
.wrapline{flex-wrap:wrap}
.inline{display:inline-flex;align-items:center;gap:6px;margin:0}
label{display:block;margin:0 0 10px;font-size:13px;color:var(--muted)}
label.inline{margin:0}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:7px;padding:8px 10px;width:100%;margin-top:3px}
label.inline input,label.inline select{width:auto;margin-top:0}
input[type=checkbox]{width:auto;margin:0}
textarea{resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 14px}
.btn{display:inline-block;font:inherit;font-size:14px;padding:8px 14px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;text-decoration:none}
.btn:hover{text-decoration:none;border-color:var(--muted)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.small{padding:4px 8px;font-size:12px}
.btn.wide{width:100%;margin-top:6px}
.btn.link,button.link{border:0;background:none;color:var(--acc);padding:0;cursor:pointer;font:inherit;font-size:13px}
.err{background:var(--badbg);color:var(--bad);padding:8px 10px;border-radius:7px;margin:0 0 10px}
.okbox{background:var(--okbg);color:var(--ok);padding:8px 10px;border-radius:7px}
.badbox{background:var(--badbg);color:var(--bad);padding:8px 10px;border-radius:7px}
.muted{color:var(--muted)} .small{font-size:12px} .mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.pre{white-space:pre-wrap} .big{font-size:18px} code.big{font-size:20px;letter-spacing:1px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.filters select,.filters input{width:auto;margin:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.kpi{border:1px solid var(--line);border-radius:8px;padding:10px}
.kpi .k{font-size:12px;color:var(--muted)} .kpi .v{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.kpi.main .v{font-size:22px} .kpi .d{font-size:12px;color:var(--muted)}
.kpi.bad{border-color:var(--bad)} .kpi.bad .v{color:var(--bad)}
.links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:14px}
.pill{padding:3px 10px;border-radius:20px;font-size:13px}.pill.warn{background:var(--warnbg);color:var(--warn)}
table.grid{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 14px}
.grid th,.grid td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.grid th{font-size:12px;color:var(--muted);font-weight:600;background:var(--bg)}
.num{text-align:right!important;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.subtotal td{font-weight:600;background:var(--bg)}
tr.st-draft td{background:var(--draft)} tr.st-disputed td{background:var(--badbg)} tr.st-reversed td{color:var(--muted);text-decoration:line-through}
.badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;white-space:nowrap}
.badge.big{font-size:14px;padding:3px 12px}
.b-draft{background:var(--draft);color:var(--muted)} .b-pending{background:var(--warnbg);color:var(--warn)}
.b-confirmed{background:var(--okbg);color:var(--ok)} .b-disputed{background:var(--badbg);color:var(--bad)}
.b-reversed{background:var(--draft);color:var(--muted)} .b-overdue{background:var(--bad);color:#fff}
.bulkbar{display:flex;gap:14px;align-items:center;margin:0 0 8px}
dl.fields{display:grid;grid-template-columns:200px 1fr;gap:6px 14px;margin:12px 0}
dl.fields dt{color:var(--muted);font-size:13px} dl.fields dd{margin:0}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
details.sub{margin-top:12px} details.sub summary{cursor:pointer;color:var(--acc)} details.sub form{margin-top:10px;max-width:520px}
.att{padding:4px 0}
.cmt{border-left:3px solid var(--line);padding:4px 10px;margin:0 0 8px} .cmt.mine{border-color:var(--acc)}
.hist{margin:0;padding-left:18px;font-size:13px}
@media (max-width:720px){
  .wrap{padding:10px 12px 30px}
  dl.fields{grid-template-columns:1fr} dl.fields dt{margin-top:6px}
  table.grid thead{display:none}
  table.grid,table.grid tbody,table.grid tr,table.grid td{display:block;width:100%}
  table.grid tr{border-bottom:1px solid var(--line);padding:6px 0}
  table.grid td{border:0;padding:2px 10px;display:flex;justify-content:space-between;gap:10px;text-align:right}
  table.grid td::before{content:attr(data-l);color:var(--muted);font-size:12px;text-align:left}
  table.grid td.num{text-align:right}
  .top{gap:6px 12px}
  .brand{order:1}
  .who{order:2;margin-left:auto}
  .menu{order:3;flex:0 0 100%;gap:2px 14px}
  table.grid td.e{display:none}
}
.warnbox{background:var(--warnbg);color:var(--ink);border-left:4px solid var(--warn);padding:10px 12px;border-radius:7px;margin:12px 0}
.amt-hint{font-size:12px;color:var(--muted);margin-top:3px;min-height:16px}
.kpi.small .v{font-size:15px;font-weight:500}