:root { --bg:#f3f5f8; --card:#fff; --line:#e3e7ee; --text:#1c2230; --muted:#6b7280; --pri:#1a56db; --ok:#0e9f6e; --warn:#c27803; --err:#e02424; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--text); font-size:15px; }
.top { background:#111827; color:#fff; padding:12px 16px; display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; }
.top h1 { margin:0; font-size:1.25rem; }
.stats { display:flex; gap:14px; font-size:.9rem; color:#cbd5e1; }
.stat b { color:#fff; font-size:1.05rem; }
main { max-width: 1100px; margin: 0 auto; padding: 14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:14px; }
.hidden { display:none !important; }
.warn { background:#fdf6b2; border:1px solid #e3a008; color:#633112; padding:10px 14px; border-radius:10px; margin-bottom:14px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px; border-radius:9px; border:1px solid var(--line); background:#fff; color:var(--text); cursor:pointer; text-decoration:none; font-size:.95rem; }
.btn:hover { background:#f1f4f9; }
.btn.primary { background:var(--pri); border-color:var(--pri); color:#fff; }
.btn.primary:hover { background:#1445b8; }
.btn.big { padding:14px 22px; font-size:1.05rem; }
.btn.wide { width:100%; margin-top:10px; }
.btn.small { padding:5px 9px; font-size:.85rem; }
.btn.danger { color:var(--err); }
.upload { text-align:center; border:2px dashed #c4cbd8; }
.upload.drag { border-color:var(--pri); background:#eef3ff; }
.upload-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hint { color:var(--muted); font-size:.9rem; margin:10px 0 0; }
#queue { display:flex; flex-direction:column; gap:6px; margin-top:10px; text-align:left; }
.qitem { display:flex; align-items:center; gap:10px; font-size:.9rem; }
.qitem img { width:44px; height:44px; object-fit:cover; border-radius:6px; }
.qitem .bar { flex:1; height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; }
.qitem .bar i { display:block; height:100%; background:var(--pri); width:0; transition:width .3s; }
.check { display:grid; grid-template-columns: 200px 1fr; gap:14px; }
.check .img img { width:100%; border-radius:10px; cursor:zoom-in; border:1px solid var(--line); }
.check .fields { display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap:8px 14px; }
.f label { display:block; font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.f .v { font-weight:500; word-break:break-all; }
.f.hero .v { font-size:1.5rem; font-weight:700; color:var(--pri); }
.f.wide { grid-column: 1 / -1; }
.f input, .f textarea { width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:7px; font:inherit; }
.badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.badge { font-size:.78rem; padding:2px 8px; border-radius:999px; background:#eef2f7; color:#374151; }
.badge.ok { background:#def7ec; color:#03543f; }
.badge.warn { background:#fdf6b2; color:#723b13; }
.badge.err { background:#fde8e8; color:#9b1c1c; }
.actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.items { margin:0; padding-left:18px; }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.toolbar input[type=search] { flex:1; min-width:200px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; font:inherit; }
.toolbar input[type=date] { padding:7px 8px; border:1px solid var(--line); border-radius:9px; font:inherit; }
.list-meta { color:var(--muted); font-size:.85rem; margin:8px 0; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:.75rem; color:var(--muted); text-transform:uppercase; }
tr.row { cursor:pointer; }
tr.row:hover { background:#f8fafc; }
td .code { font-weight:700; color:var(--pri); }
.mono { font-family: ui-monospace, Menlo, monospace; font-size:.88rem; }
.muted { color:var(--muted); }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:50; cursor:zoom-out; }
.lightbox img { max-width:96vw; max-height:96vh; border-radius:8px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#111827; color:#fff; padding:10px 16px; border-radius:10px; z-index:60; font-size:.92rem; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.toast.err { background:var(--err); }
@media (max-width: 640px) {
  .check { grid-template-columns: 1fr; }
  .check .img img { max-height:260px; object-fit:contain; background:#f8fafc; }
}