:root { --fg:#1d2330; --muted:#6b7280; --line:#e3e6ea; --bg:#f6f7f9; --card:#fff; --accent:#1f4e78; --accent2:#2563eb; --ok:#e7f6ec; --okfg:#17603a; --err:#fdecec; --errfg:#9b1c1c; --warn:#fff6db; --warnfg:#7a5a00; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--accent2); }
h1 { font-size:22px; margin:0; } h2 { font-size:16px; margin:0 0 10px; } h3 { font-size:14px; margin:14px 0 6px; }
.top { display:flex; align-items:center; gap:18px; padding:10px 20px; background:var(--accent); color:#fff; flex-wrap:wrap; }
.top a { color:#dfe9f5; text-decoration:none; } .top a.on, .top a:hover { color:#fff; text-decoration:underline; }
.top .brand { font-weight:700; color:#fff; font-size:16px; }
.top nav { display:flex; gap:14px; flex:1; flex-wrap:wrap; }
.top .logout { display:flex; gap:8px; align-items:center; margin:0; } .top .who { opacity:.8; }
.top button.link { color:#fff; }
main { max-width:1100px; margin:20px auto; padding:0 16px; } main.wide { max-width:none; }
.bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; } .bar .spacer { flex:1; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:16px; }
.card.subtle { background:transparent; } .card.center { max-width:560px; margin:40px auto; text-align:center; }
.cards3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.auth { max-width:380px; margin:60px auto; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:24px; }
.auth form label { display:block; margin-bottom:12px; } .auth input { width:100%; }
label { display:block; font-weight:500; } label small { display:block; font-weight:400; color:var(--muted); }
input, textarea, select { font:inherit; padding:6px 8px; border:1px solid #cfd4da; border-radius:5px; background:#fff; margin-top:3px; }
input[readonly] { background:#f1f3f5; color:#555; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px 16px; margin-bottom:12px; }
.grid2 input, .grid2 textarea { width:100%; } .grid2 .span2 { grid-column:1 / -1; }
button, .btn { font:inherit; padding:7px 14px; border:1px solid #cfd4da; border-radius:5px; background:#fff; cursor:pointer; text-decoration:none; color:var(--fg); display:inline-block; }
button:hover, .btn:hover { border-color:#9aa3ad; }
button.primary, .btn.primary { background:var(--accent2); border-color:var(--accent2); color:#fff; }
button.link { background:none; border:none; padding:0; color:var(--accent2); } button.danger, button.link.danger { color:#b42318; }
button:disabled { opacity:.5; cursor:default; }
form.inline { display:inline; margin-right:8px; } .inline-form { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.search { display:flex; gap:6px; flex:1; } .search input { flex:1; max-width:340px; margin:0; }
table.list { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:6px; margin-bottom:16px; }
table.list th, table.list td { padding:7px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
table.list th { background:#f1f3f5; font-weight:600; font-size:13px; }
.num { text-align:right !important; } .mono, code { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12.5px; }
td.actions { white-space:nowrap; } td.actions form { display:inline; margin-left:8px; }
.muted { color:var(--muted); } .small { font-size:12.5px; }
.ok, .err, .warn { padding:9px 12px; border-radius:6px; } .ok { background:var(--ok); color:var(--okfg); } .err { background:var(--err); color:var(--errfg); } .warn { background:var(--warn); color:var(--warnfg); }
p.err[hidden], p.ok[hidden] { display:none; }
.empty { text-align:center; padding:40px; background:#fff; border:1px dashed var(--line); border-radius:8px; }
.pager { display:flex; gap:14px; justify-content:center; }
.builder { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:8px; }
.scroll { overflow-x:auto; }
table.matrix { border-collapse:collapse; } table.matrix th, table.matrix td { padding:3px; font-size:12.5px; white-space:nowrap; }
table.matrix th { text-align:left; font-weight:600; } table.matrix input { width:92px; margin:0; padding:4px 6px; } table.matrix input.wide { width:220px; } table.matrix input.sku { width:210px; }
table.matrix tr.setall input { background:#f8fafc; border-style:dashed; }
tr.bad td, tr.bad { background:var(--err); }
.rowlabel { display:flex; gap:10px; align-items:center; margin:4px 0; } .rowlabel input.wide { flex:1; max-width:600px; }
.savebar { position:sticky; bottom:0; background:var(--bg); padding:12px 0; display:flex; gap:12px; align-items:center; }
.src-default { background:#e8f1fb !important; } .src-ai { background:#fff4cc !important; }
.legend { display:flex; gap:8px; align-items:center; } .legend .sw { display:inline-block; width:14px; height:14px; border:1px solid #ccc; border-radius:3px; margin-left:8px; } .legend .sw.bad { background:var(--err); }
.stats { display:flex; gap:12px; flex-wrap:wrap; margin:12px 0; } .stats div { background:#fff; border:1px solid var(--line); border-radius:6px; padding:10px 14px; } .stats div.bad { background:var(--err); }
.stats b { font-size:18px; display:block; }
@media (max-width:640px) { .top { gap:10px; } table.list { font-size:13px; } td.actions form { display:block; margin:2px 0; } }