:root{
  --bg:#f4f6fa;--card:#fff;--ink:#14202e;--muted:#66748a;--line:#e2e7ef;--soft:#eef2f7;
  --accent:#229ED9;--accent-ink:#fff;--good:#14894e;--good-bg:#e3f5ec;--bad:#c4372f;--bad-bg:#fbe9e7;
  --warn:#a26300;--warn-bg:#fff3dc;--dup:#7046c2;--dup-bg:#efe8fb;
  --gap:clamp(10px,2vw,16px);--pad-page:clamp(12px,3vw,28px);--card-pad:clamp(12px,2.2vw,18px);
  --radius:14px;--shadow:0 1px 2px rgba(20,32,46,.06),0 4px 14px rgba(20,32,46,.05);
  --lift:0 6px 24px rgba(20,32,46,.14);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e141b;--card:#161e28;--ink:#e6edf5;--muted:#8d9aab;--line:#253140;--soft:#1c2632;
  --good:#3ecf8a;--good-bg:#12321f;--bad:#ff7a6e;--bad-bg:#3a1815;--warn:#f3b44b;--warn-bg:#33270f;
  --dup:#b79bff;--dup-bg:#271d3d;--shadow:0 1px 2px rgba(0,0,0,.4);--lift:0 8px 28px rgba(0,0,0,.5);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0e141b;--card:#161e28;--ink:#e6edf5;--muted:#8d9aab;--line:#253140;--soft:#1c2632;
  --good:#3ecf8a;--good-bg:#12321f;--bad:#ff7a6e;--bad-bg:#3a1815;--warn:#f3b44b;--warn-bg:#33270f;
  --dup:#b79bff;--dup-bg:#271d3d;--shadow:0 1px 2px rgba(0,0,0,.4);--lift:0 8px 28px rgba(0,0,0,.5);color-scheme:dark}
*{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,sans-serif}
a{color:var(--accent);cursor:pointer;text-decoration:none}
.hidden{display:none!important}
.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--card-pad)}
.brand{display:flex;align-items:center;gap:8px;font-size:17px;white-space:nowrap}
.logo{width:26px;height:26px;border-radius:8px;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 21l5-6 4 4 7-9' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}

.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:var(--gap);padding:10px var(--pad-page);
  background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
#nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
#nav::-webkit-scrollbar{display:none}
#nav a{padding:7px 12px;border-radius:10px;color:var(--muted);white-space:nowrap;font-weight:500}
#nav a.on{background:var(--soft);color:var(--ink)}
.badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;text-align:center}
.badge:empty{display:none}
.banner{background:var(--warn-bg);color:var(--warn);padding:10px var(--pad-page);font-weight:500}
main{padding:var(--pad-page);max-width:1400px;margin:0 auto;display:grid;gap:var(--gap)}

.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.good{background:var(--good);border-color:var(--good);color:#fff}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad)}
.btn.sm{padding:6px 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
@media (hover:hover) and (pointer:fine){
  .btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:var(--lift)}
  .tile:hover{transform:translateY(-2px);box-shadow:var(--lift)}
}

.row{display:flex;gap:var(--gap);flex-wrap:wrap;align-items:center}
.spread{justify-content:space-between}
h1{font-size:clamp(19px,2.6vw,24px);margin:0}
h2{font-size:16px;margin:0 0 10px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:var(--gap)}
.stat b{display:block;font-size:24px}
.stat span{color:var(--muted);font-size:13px}

.filters{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:5px 12px;font-size:13px;cursor:pointer;color:var(--muted)}
.chip.on{background:var(--ink);color:var(--card);border-color:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:var(--gap)}
.tile{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.tile .ph{aspect-ratio:4/5;background:var(--soft) center/cover no-repeat;cursor:zoom-in;position:relative}
.tile .ph .st{position:absolute;top:8px;left:8px}
.tile .bd{padding:10px 12px;display:grid;gap:6px;flex:1}
.tile .amt{font-size:20px;font-weight:700}
.amt.pos{color:var(--good)} .amt.neg{color:var(--bad)}
.tile .meta{font-size:13px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.tile .why{font-size:12.5px;color:var(--muted);min-height:1.2em}
.tile .acts{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 12px}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;background:var(--soft);color:var(--muted)}
.pill.match,.pill.posted{background:var(--good-bg);color:var(--good)}
.pill.reject,.pill.error{background:var(--bad-bg);color:var(--bad)}
.pill.check{background:var(--warn-bg);color:var(--warn)}
.pill.dup{background:var(--dup-bg);color:var(--dup)}
.pill.queued{background:var(--accent);color:#fff}
.empty{padding:40px 10px;text-align:center;color:var(--muted)}

form.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--gap)}
label{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;width:100%}
textarea{min-height:90px;resize:vertical}
input[type=checkbox]{width:auto}
.cb{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink)}
.help{font-weight:400;font-size:12.5px;color:var(--muted)}
.list{display:grid;gap:6px}
.list .it{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.scroll-soft{max-height:340px;overflow:auto;scrollbar-width:none}
.scroll-soft::-webkit-scrollbar{display:none}

table{width:100%;border-collapse:collapse;font-size:13.5px}
td,th{padding:8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:600}

.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-card{width:min(380px,100%);display:grid;gap:14px}
.err{color:var(--bad);margin:0;min-height:1em}

.sheet{position:fixed;inset:0;z-index:50;background:rgba(5,10,16,.6);display:grid;place-items:center;padding:16px}
.sheet-body{width:min(980px,100%);max-height:92vh;overflow:auto;scrollbar-width:none}
.detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--gap)}
.detail img{width:100%;border-radius:10px;border:1px solid var(--line)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
pre{white-space:pre-wrap;font-size:12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;max-height:220px;overflow:auto;margin:0}
@media (max-width:760px){
  .detail{grid-template-columns:1fr}
  .hide-sm{display:none}
  .top{flex-wrap:wrap}
  .top .brand{flex:1}
  #nav{order:3;flex-basis:100%}
}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(120px);background:var(--ink);color:var(--card);padding:10px 16px;border-radius:12px;transition:transform .25s;z-index:60;max-width:calc(100% - 32px)}
.toast.on{transform:translateX(-50%) translateY(0)}