:root {
  --bg: #f4f7fb;
  --panel: rgba(255,255,255,.88);
  --panel-2: #eef3f9;
  --line: rgba(15,23,42,.12);
  --text: #0f172a;
  --muted: #5b6475;
  --brand: #3b82f6;
  --brand-2: #16a34a;
  --warn: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 18px 50px rgba(15,23,42,.10);
}
body[data-theme="dark"] {
  --bg: #0b1220;
  --panel: #101a2f;
  --panel-2: #0f172a;
  --line: rgba(148,163,184,.22);
  --text: #e5eefc;
  --muted: #9db0cf;
  --brand: #5b8cff;
  --brand-2: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 18px 50px rgba(2,8,23,.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(1000px 600px at 20% 0%, rgba(37,99,235,.10), transparent 60%),
              radial-gradient(800px 500px at 90% 10%, rgba(22,163,74,.08), transparent 55%),
              var(--bg);
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.container { width: min(1200px, calc(100% - 24px)); margin: 0 auto; padding: 18px 0 40px; }
.headerbar, .topbar { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.title { margin: 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.05; }
.subtitle { color: var(--muted); margin-top: 8px; }
.card, .panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.card, .panel { padding: 18px; }
.section { margin-top: 18px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 160px; flex: 1 1 220px; }
.field label { color: var(--muted); font-size: 13px; }
.field input, .field select, .search {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
}
.field input:focus, .field select:focus, .search:focus { border-color: rgba(91,140,255,.8); box-shadow: 0 0 0 3px rgba(91,140,255,.16); }
.btn {
  border: 1px solid transparent;
  background: var(--brand);
  color: white;
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
  font-weight: 600;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn.secondary { background: rgba(148,163,184,.15); border-color: var(--line); color: var(--text); }
.btn.ok { background: var(--brand-2); }
.btn.warn { background: var(--warn); color: #111827; }
.btn.bad { background: var(--danger); }
.small { font-size: 12px; }
.muted { color: var(--muted); }
.kpi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.box { padding: 14px; border-radius: 18px; background: rgba(148,163,184,.08); border: 1px solid var(--line); }
.num { font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin-top: 8px; }
.help, .status, .hint { color: var(--muted); line-height: 1.6; }
.status.ok { color: #15803d; }
.status.err { color: #dc2626; }
.dropzone {
  border: 1.8px dashed rgba(157,176,207,.34);
  border-radius: 22px;
  padding: 22px;
  text-align: center;
  background: rgba(148,163,184,.06);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.dropzone.active { border-color: rgba(91,140,255,.95); background: rgba(91,140,255,.1); transform: scale(1.01); }
.dropzone .icon { font-size: 48px; margin-bottom: 10px; }
.progress-wrap { margin-top: 12px; }
.progress-bar { width: 100%; height: 12px; background: rgba(148,163,184,.20); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand), #8b5cf6); transition: width .15s linear; }
.progress-fill.indeterminate { width: 25%; animation: indeterminate 1.1s linear infinite; }
@keyframes indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(420%); }
}
.list { display: grid; gap: 12px; }
.filechip, .batchchip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(148,163,184,.08);
}
.filechip strong, .batchchip strong { display: block; }
.filechip .meta, .batchchip .meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.pending { background: rgba(245,158,11,.18); color: #b45309; }
.badge.approved { background: rgba(34,197,94,.16); color: #15803d; }
.badge.rejected { background: rgba(239,68,68,.16); color: #b91c1c; }
.badge.other { background: rgba(148,163,184,.14); color: #475569; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 860px; }
.table th, .table td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: left; vertical-align: top; }
.table th { color: #64748b; font-size: 13px; font-weight: 700; }
.table td { color: var(--text); }
.table tr:hover td { background: rgba(148,163,184,.04); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; } }
.preview-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .preview-grid { grid-template-columns: 1fr; } }
.preview-card {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: rgba(148,163,184,.08);
}
.preview-thumb {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; background: rgba(15,23,42,.08);
}
.preview-body { padding: 12px; }
.preview-title { font-weight: 700; word-break: break-word; }
.preview-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.qrbox { display: grid; place-items: center; }
.qrbox img { width: min(260px, 72vw); height: min(260px, 72vw); border-radius: 18px; background: white; padding: 10px; }
.copyable { word-break: break-all; background: rgba(148,163,184,.08); border: 1px solid var(--line); padding: 12px 14px; border-radius: 14px; }
.hr { height: 1px; background: var(--line); margin: 16px 0; }
.empty { color: var(--muted); text-align: center; padding: 24px 0; }
.file-link { display: block; color: inherit; }
.file-link:hover { transform: translateY(-1px); }
.file-blank { display: grid; place-items: center; gap: 10px; padding: 20px; min-height: 180px; text-align: center; background: rgba(148,163,184,.06); }
.file-ico { font-size: 42px; }
.file-note { color: var(--muted); font-size: 13px; line-height: 1.5; padding: 0 16px 6px; }
.preview-card.file-link { text-decoration: none; }
.preview-card.file-link:active { transform: scale(.995); }

.clean-file-card { min-height: 180px; }
.clean-file-card .preview-body { display: none; }
.clean-file-card .preview-thumb { border-radius: 0; }
.clean-thumb { object-fit: cover; background: rgba(15,23,42,.08); }
.clean-blank { display: grid; place-items: center; padding: 20px; min-height: 180px; }
.empty.pending { color: #b45309; }
.empty.err { color: #dc2626; }


.batchchip { align-items: flex-start; }
.batchchip-main { min-width: 0; flex: 1 1 auto; }
.batch-title { display: block; word-break: break-all; line-height: 1.35; }
.batchchip-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; flex: 0 1 auto; max-width: 100%; }
@media (max-width: 680px) {
  .batchchip { flex-direction: column; align-items: stretch; }
  .batchchip-actions { justify-content: flex-start; }
}
.preview-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 520px) { .preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .preview-grid { grid-template-columns: 1fr; } }
.media-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.media-card-image { padding: 0; }
.media-stage { position: relative; aspect-ratio: 4 / 3; background: rgba(148,163,184,.06); overflow: hidden; }
.media-stage-icon { display: grid; place-items: center; padding: 24px 0; }
.media-thumb { width: 100%; height: 100%; object-fit: cover; display: block; background: rgba(15,23,42,.08); }
.media-thumb-placeholder { object-fit: cover; }
.media-frame { width: 100%; height: 100%; border: 0; background: rgba(15,23,42,.08); }
.media-overlay { position: absolute; inset: auto 12px 12px auto; font-size: 42px; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,.18); pointer-events: none; }
.media-icon-big { font-size: 54px; line-height: 1; opacity: .96; }
.media-meta { padding: 12px; display: grid; gap: 4px; }
.media-name { font-weight: 700; line-height: 1.35; word-break: break-all; }
.media-sub { color: var(--muted); font-size: 12px; line-height: 1.5; word-break: break-word; }
.preview-card:hover .media-thumb, .preview-card:hover .media-stage { filter: saturate(1.02); }