/* Light minimalist UI */
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --muted: #6b7280;
  --text: #111827;
  --accent: #2563eb;
  --ok: #16a34a;
  --fail: #dc2626;
  --warn: #d97706;
  --border: #e5e7eb;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Arial, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  background: var(--bg);
  color: var(--text);
}

.container { max-width: 1200px; margin: 0 auto; padding: 32px 20px 60px; }
.header h1 { margin: 0 0 6px; font-size: 28px; letter-spacing: .5px; }
.header p { margin: 0; color: var(--muted); }
.header { border-bottom: 2px solid var(--border); padding-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header-right .logo { max-height: 36px; width: auto; }

.uploader { margin-top: 24px; border: 1px dashed var(--border); background: #f9fafb; }
.uploader-inner { padding: 26px 20px; text-align: center; color: var(--muted); }
.uploader .icon { width: 36px; height: 36px; margin-bottom: 8px; color: var(--accent); }
.uploader .btn { display: inline-block; color: var(--text); background: #ffffff; border: 1px solid var(--border); padding: 6px 12px; cursor: pointer; margin: 0 6px; }
.btn { background: #ffffff; color: var(--text); border: 1px solid var(--border); padding: 6px 12px; cursor: pointer; }
.btn:hover { background: #f3f4f6; }
.btn-primary { background: #ffffff; color: var(--text); border: 1px solid var(--accent); }
.btn-primary:hover { background: #eff6ff; }
.btn-sm { padding: 4px 8px; font-size: 12px; }
.uploader .btn:hover { background: #f3f4f6; }
.uploader.dragover { background: #eef2ff; }

.panel { margin-top: 24px; }
.hidden { display: none; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.stats .k { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.stats .v { font-size: 18px; font-weight: 700; }
.stats .ok { color: var(--ok); }
.stats .fail { color: var(--fail); }

.progress { width: 100%; height: 10px; background: #f3f4f6; border: 1px solid var(--border); overflow: hidden; }
.progress .bar { height: 100%; background: var(--accent); width: 0%; transition: width .2s ease; }

.current { margin-top: 10px; color: var(--muted); font-size: 13px; }

.grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
.card { background: var(--card); border: 1px solid var(--border); }
.card-header { padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.table-wrap { overflow: auto; max-height: 520px; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: center; }
.table thead th { position: sticky; top: 0; z-index: 1; background: #f9fafb; color: #374151; border-top: 1px solid var(--border); border-bottom: 2px solid var(--border); }
.card + .card { border-top: 2px solid var(--border); }
.table tbody tr:hover { background: #f9fafb; }

.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--ok); }
.dot.fail { background: var(--fail); }
.dot.pending { background: var(--warn); }

.failures { width: 100%; height: 520px; background: #ffffff; color: #111827; border: 1px solid var(--border); padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.footer { margin-top: 26px; color: var(--muted); text-align: center; }

@media (max-width: 980px) { .grid { grid-template-columns: 1fr; } }

/* Subtle scrollbar styling */
/* WebKit */
.table-wrap::-webkit-scrollbar, .failures::-webkit-scrollbar { width: 10px; height: 10px; }
.table-wrap::-webkit-scrollbar-thumb, .failures::-webkit-scrollbar-thumb { background: #cbd5e1; border: 2px solid transparent; background-clip: padding-box; }
.table-wrap::-webkit-scrollbar-track, .failures::-webkit-scrollbar-track { background: #f3f4f6; }

/* Firefox */
.table-wrap { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f3f4f6; }
.failures { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f3f4f6; }