:root { --bg:#f6f6f4; --card:#fff; --ink:#1d1d1b; --muted:#6b6b66; --line:#e3e3df; --accent:#1d4ed8; --ok:#15803d; --warn:#b45309; --bad:#b91c1c; --pill:#eeeeea; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--ink); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
header.top { display:flex; align-items:center; gap:24px; padding:10px 20px; background:#111; color:#fff; position:sticky; top:0; z-index:5; }
header .brand { color:#fff; font-weight:700; font-size:16px; letter-spacing:.3px; } header .brand span { color:#9ca3af; font-weight:400; }
header nav a { color:#d1d5db; margin-right:16px; padding:6px 0; border-bottom:2px solid transparent; } header nav a.on { color:#fff; border-color:#fff; }
header .who { margin-left:auto; display:flex; gap:12px; align-items:center; font-size:13px; } header .who a { color:#d1d5db; }
main { max-width:1500px; margin:0 auto; padding:18px 20px 60px; }
h1 { font-size:22px; margin:0 0 4px; } h2 { font-size:15px; margin:0 0 10px; } h3 { font-size:13px; margin:14px 0 6px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:14px; flex-wrap:wrap; }
.page-head .hero { width:96px; height:96px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:8px; }
.kpis { display:flex; gap:10px; flex-wrap:wrap; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 14px; min-width:120px; }
.kpi b { display:block; font-size:18px; } .kpi span { color:var(--muted); font-size:12px; } .kpi.small b { font-size:13px; }
.kpi.warn { border-color:#f59e0b; } .kpi.good { border-color:#22c55e; }
.filters { display:flex; gap:8px; align-items:center; margin:10px 0 14px; flex-wrap:wrap; }
input, select, textarea { font:inherit; padding:5px 8px; border:1px solid #cfcfca; border-radius:6px; background:#fff; }
input:focus, select:focus { outline:2px solid #bfdbfe; border-color:var(--accent); }
.btn { font:inherit; padding:6px 12px; border-radius:6px; border:1px solid #cfcfca; background:#fff; cursor:pointer; color:var(--ink); }
.btn:hover { background:#f0f0ec; } .btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); } .btn.primary:hover { background:#1e40af; }
.btn.tiny { padding:3px 8px; font-size:12px; } .btn.ghost { background:transparent; } .btn.danger { color:var(--bad); border-color:#fca5a5; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.badge { padding:2px 8px; border-radius:99px; background:#374151; font-size:12px; } .badge.admin { background:#7c3aed; } .badge.run { background:#b45309; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:14px; }
.card.slim { padding:8px 12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .cols.top { margin-bottom:14px; }
@media (max-width:1000px) { .cols { grid-template-columns:1fr; } }
table.grid { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
table.grid th, table.grid td { padding:7px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
table.grid th { font-size:12px; color:var(--muted); font-weight:600; background:#fafaf8; }
table.grid tr:last-child td { border-bottom:0; } table.grid.compact td, table.grid.compact th { padding:5px 7px; }
table.grid tr.overdue td { background:#fff5f5; } table.grid tr.unmatched td { background:#fffbea; } table.grid tr.cancelled td { color:var(--muted); text-decoration:line-through; }
table.grid tr.new td { background:#f8fafc; }
td.thumb img { width:44px; height:44px; object-fit:contain; border-radius:6px; background:#fff; border:1px solid var(--line); }
img.mini { width:24px; height:24px; object-fit:contain; vertical-align:middle; margin-right:4px; border:1px solid var(--line); border-radius:4px; }
.r { text-align:right !important; } .nowrap { white-space:nowrap; } .mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; }
.small { font-size:12px; } .muted { color:var(--muted); } .bad { color:var(--bad); } .inline { display:inline; }
.qty-cell { white-space:nowrap; } .qty-cell input.qty { width:64px; text-align:right; } .qty-cell.big input.qty { width:100px; font-size:18px; }
.qty-cell input.qty.dirty { border-color:var(--warn); background:#fffbeb; } .qty-msg.ok { color:var(--ok); } .qty-msg.err { color:var(--bad); }
.pill { display:inline-block; padding:1px 8px; border-radius:99px; background:var(--pill); font-size:12px; }
.pill.paid, .pill.ok, .pill.delivered, .pill.parsed { background:#dcfce7; color:#166534; }
.pill.unpaid, .pill.needs_review, .pill.warn, .pill.in_transit { background:#fef3c7; color:#92400e; }
.pill.partial { background:#e0e7ff; color:#3730a3; } .pill.disputed, .pill.bad, .pill.exception { background:#fee2e2; color:#991b1b; }
.flash { padding:8px 12px; border-radius:8px; margin-bottom:12px; background:#eef2ff; border:1px solid #c7d2fe; }
.flash.error { background:#fee2e2; border-color:#fca5a5; } .flash.ok { background:#dcfce7; border-color:#86efac; } .flash.note { background:#fffbeb; border-color:#fde68a; white-space:pre-line; }
.dims { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; } .dims label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:3px; }
.dims label input, .dims label select { width:110px; } .dims label.wide input { width:320px; }
.dims-inline input { width:52px; text-align:right; }
.login-box { max-width:360px; margin:80px auto; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:28px; }
.login-box label { display:block; margin:12px 0; } .login-box input { width:100%; margin-top:4px; } .login-box .btn { width:100%; margin-top:10px; }
.pager { display:flex; gap:8px; margin:12px 0; } .pager b { padding:2px 6px; background:#111; color:#fff; border-radius:4px; }
table.kv td { padding:5px 8px; border-bottom:1px solid var(--line); } table.kv tr.total td { font-weight:700; border-top:2px solid #111; }
.profit { background:#fdfcf7; }
.match-cell { position:relative; min-width:220px; } .suggest { position:absolute; z-index:4; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.12); width:360px; display:none; max-height:280px; overflow:auto; }
.suggest div { padding:6px 10px; cursor:pointer; border-bottom:1px solid var(--line); font-size:12.5px; } .suggest div:hover { background:#eef2ff; }
.chk { display:flex; gap:8px; align-items:center; margin-top:10px; }