:root{
  --border:#E3E6EA;
  --border-soft:#EDEFF2;
  --ink:#1F2328;
  --ink-muted:#6B7280;
  --ink-faint:#9CA3AF;
  --bg:#FFFFFF;
  --bg-soft:#F7F8FA;
  --blue:#2563EB;
  --blue-soft:#EEF2FF;
  --green:#16A34A;
  --green-soft:#EAF7EE;
  --red:#DC2626;
  --red-soft:#FDECEC;
  --purple:#7C3AED;
  --purple-soft:#F3EEFE;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}
*{box-sizing:border-box;}
body{ margin:0; font-family:var(--font); color:var(--ink); background:var(--bg); font-size:14px; }

/* ---------- public site header ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:18px 24px; border-bottom:1px solid var(--border);
}
.site-title h1{ margin:0; font-size:20px; font-weight:700; }
.site-title .subtitle{ font-size:12px; color:var(--ink-muted); }
.site-stats{ display:flex; gap:20px; }
.site-stats .stat{ text-align:right; }
.site-stats .n{ display:block; font-size:18px; font-weight:700; }
.site-stats .l{ display:block; font-size:11px; color:var(--ink-faint); }

/* ---------- toolbar ---------- */
.toolbar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 24px; border-bottom:1px solid var(--border); background:var(--bg-soft);
}
.search-box{
  border:1px solid var(--border); border-radius:6px; padding:7px 12px; font-size:13px;
  width:200px; background:#fff;
}
.search-box:focus{ outline:none; border-color:var(--blue); }
.filter-group{ display:flex; align-items:center; gap:8px; }
.filter-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); }
.pill-row{ display:flex; gap:6px; flex-wrap:wrap; }
.pill{
  border:1px solid var(--border); background:#fff; border-radius:14px; padding:4px 11px;
  font-size:12px; cursor:pointer; color:var(--ink-muted);
}
.pill:hover{ border-color:var(--blue); color:var(--blue); }
.pill.active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.plain-select, .plain-btn{
  border:1px solid var(--border); background:#fff; border-radius:6px; padding:6px 10px;
  font-size:12px; color:var(--ink); cursor:pointer;
}
.plain-btn.muted-btn{ color:var(--ink-faint); border:none; text-decoration:underline; }
.columns-panel{
  display:flex; flex-wrap:wrap; gap:10px 18px; padding:12px 24px; border-bottom:1px solid var(--border);
  background:#fff; font-size:12px;
}
.col-toggle{ display:flex; align-items:center; gap:6px; color:var(--ink-muted); white-space:nowrap; }

/* ---------- table ---------- */
.table-scroll{ overflow:auto; max-height:calc(100vh - 220px); }
table{ border-collapse:collapse; width:100%; }
thead th{
  position:sticky; top:0; background:var(--bg-soft); z-index:2;
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-faint);
  padding:9px 12px; border-bottom:1px solid var(--border); white-space:nowrap;
}
thead th.sortable{ cursor:pointer; }
thead th.sortable:hover{ color:var(--ink); }
tbody td{ padding:8px 12px; border-bottom:1px solid var(--border-soft); white-space:nowrap; }
tbody tr:hover{ background:var(--bg-soft); }
.sticky-col{ position:sticky; left:0; background:#fff; z-index:1; }
tbody tr:hover .sticky-col{ background:var(--bg-soft); }
td.sym{ font-family:var(--mono); font-weight:600; }
td.muted, span.muted{ color:var(--ink-muted); }
td.center{ text-align:center; }
th.col-idx, td.col-idx{ text-align:center; min-width:44px; }
.dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--blue); }

.tag{
  display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:5px; font-size:12px; font-weight:700;
}
.tag-yes{ background:var(--green-soft); color:var(--green); }
.tag-no{ background:var(--red-soft); color:var(--red); }
.tag-unk{ background:var(--bg-soft); color:var(--ink-faint); }

.empty-state{ padding:60px 20px; text-align:center; color:var(--ink-faint); font-size:13px; }
.site-footer{ padding:14px 24px; font-size:11px; color:var(--ink-faint); border-top:1px solid var(--border); }

/* ---------- admin ---------- */
.admin-body{ background:var(--bg-soft); }
.admin-header{
  display:flex; align-items:center; justify-content:space-between; padding:14px 24px;
  background:#fff; border-bottom:1px solid var(--border);
}
.admin-header h1{ font-size:16px; margin:0; }
.admin-header a{ color:var(--blue); text-decoration:none; }
.admin-header nav a{ margin-left:16px; font-size:13px; }
.admin-header nav a.muted{ color:var(--ink-faint); }
.admin-main{ padding:24px; max-width:1000px; margin:0 auto; }
.admin-main.narrow{ max-width:640px; }
.stat-row{ display:flex; gap:14px; margin-bottom:24px; flex-wrap:wrap; }
.stat-card{ background:#fff; border:1px solid var(--border); border-radius:8px; padding:14px 18px; min-width:130px; }
.stat-card .n{ font-size:22px; font-weight:700; }
.stat-card .l{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; }
.stat-card.ok .n{ color:var(--green); }
.stat-card.bad .n{ color:var(--red); }
.stat-card.muted-card .n{ color:var(--ink-faint); }
.admin-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:24px; }
.admin-table th{ text-align:left; font-size:11px; text-transform:uppercase; color:var(--ink-faint); padding:8px 12px; border-bottom:1px solid var(--border); background:var(--bg-soft); }
.admin-table td{ padding:8px 12px; border-bottom:1px solid var(--border-soft); font-size:13px; }
.pill.pill-blue{ background:var(--blue-soft); color:var(--blue); border:none; }
.pill.pill-purple{ background:var(--purple-soft); color:var(--purple); border:none; }
.callout{ background:var(--blue-soft); border:1px solid #C7D7FE; padding:12px 16px; border-radius:8px; margin-bottom:20px; font-size:13px; }
.callout.ok{ background:var(--green-soft); border-color:#B7E4C7; }
form{ display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid var(--border); border-radius:8px; padding:18px; margin-bottom:20px; }
form label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink-muted); }
form textarea, form input[type=text], form input[type=password], form select{
  border:1px solid var(--border); border-radius:6px; padding:8px 10px; font-size:13px; font-family:var(--mono);
}
form input[type=password]{ font-family:var(--font); }
form button{ align-self:flex-start; background:var(--blue); color:#fff; border:none; border-radius:6px; padding:9px 18px; font-size:13px; cursor:pointer; }
form button:hover{ filter:brightness(1.05); }
.filebtn{ font-family:var(--font) !important; border:1px dashed var(--border); border-radius:6px; padding:8px 10px; cursor:pointer; }
.edit-row{ flex-direction:row; align-items:center; flex-wrap:wrap; padding:10px 14px; }
.edit-sym{ min-width:160px; font-family:var(--mono); font-weight:600; }
.login-body{ display:flex; align-items:center; justify-content:center; height:100vh; }
.login-box{ width:280px; }
.login-box h1{ font-size:16px; margin:0 0 4px; }
.error{ color:var(--red); font-size:12px; margin:0; }