:root { --bg:#f7f8fa; --fg:#1d2330; --muted:#6b7280; --line:#e2e5ea; --card:#fff; --accent:#2563eb; --danger:#dc2626; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111418; --fg:#e6e8ec; --muted:#9aa3b2; --line:#2a2f38; --card:#181c22; --accent:#60a5fa; --danger:#f87171; }
}
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--fg); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
.topbar { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; padding:12px 24px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; }
.brand { font-weight:700; font-size:18px; color:var(--fg); }
.search { flex:1; display:flex; gap:6px; min-width:260px; }
.search input { flex:1; }
nav a { margin-left:14px; font-weight:500; }
main { max-width:1100px; margin:0 auto; padding:24px; }
footer { max-width:1100px; margin:0 auto; padding:24px; color:var(--muted); font-size:13px; }
h1 { font-size:26px; margin:0 0 16px; } h2 { font-size:18px; margin:28px 0 10px; }
.count { font-weight:400; color:var(--muted); font-size:14px; margin-left:6px; }
.muted { color:var(--muted); } .pre { white-space:pre-wrap; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
tr:last-child td { border-bottom:0; }
input, select, textarea, button { font:inherit; color:inherit; }
input:not([type=checkbox]):not([type=radio]), select, textarea { width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:6px; background:var(--card); }
textarea { resize:vertical; }
.form { max-width:760px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:20px; }
.form.inline { max-width:none; }
.form label { display:block; margin-bottom:14px; font-weight:500; font-size:13px; }
.form label.check { display:flex; align-items:center; gap:8px; } .form label.check input { width:auto; }
.form .row { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.btn { display:inline-block; padding:7px 14px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.danger { color:var(--danger); border-color:var(--danger); }
.btn.small { padding:4px 10px; font-size:13px; }
.actions { display:flex; gap:8px; align-items:center; } .actions form { display:inline; }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.details { display:grid; grid-template-columns: 180px 1fr; gap:8px 16px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px 20px; margin:0; }
.details dt { color:var(--muted); font-size:13px; } .details dd { margin:0; }
.flash { padding:10px 14px; border-radius:6px; margin-bottom:16px; background:#dcfce7; color:#166534; }
.flash.error { background:#fee2e2; color:#991b1b; }
@media (max-width:640px) { .details { grid-template-columns:1fr; } table { display:block; overflow-x:auto; } }
.locbar { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 14px; margin-bottom:16px; font-size:14px; }
.locbar .inline-form { display:flex; gap:6px; } .locbar input { width:220px; padding:5px 8px; }
td.dist { white-space:nowrap; color:var(--muted); font-variant-numeric:tabular-nums; }
.viewbar { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin:0 0 6px; }
.segmented { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--card); }
.segmented a { padding:7px 16px; color:var(--fg); font-weight:500; }
.segmented a:hover { text-decoration:none; background:var(--bg); }
.segmented a.active { background:var(--accent); color:#fff; }
/* Column picker */
.tablebar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:28px 0 10px; }
.tablebar h2 { margin:0; }
.tablebar-end { justify-content:flex-end; margin-top:0; }
.colpicker { position:relative; }
.colpicker > summary { list-style:none; display:inline-flex; align-items:center; gap:6px; user-select:none; }
.colpicker > summary::-webkit-details-marker { display:none; }
.colpicker > summary:hover { border-color:var(--muted); }
.colpicker[open] > summary { border-color:var(--accent); color:var(--accent); }
.colpicker-count { margin-left:2px; padding:0 7px; border-radius:999px; background:var(--bg); color:var(--muted); font-size:12px; line-height:18px; }
.colpicker-panel { position:absolute; z-index:20; top:calc(100% + 6px); right:0; width:220px; background:var(--card);
  border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06); overflow:hidden; }
.colpicker-title { padding:10px 14px 6px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.colpicker-list { padding:2px 6px 6px; }
.colpicker-list label { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:6px; font-size:14px; cursor:pointer; }
.colpicker-list label:hover { background:var(--bg); }
.colpicker-list input[type=checkbox] { width:16px; height:16px; margin:0; padding:0; flex:none; accent-color:var(--accent); cursor:pointer; }
.colpicker-foot { display:flex; justify-content:space-between; padding:8px 14px; border-top:1px solid var(--line); background:var(--bg); }
.linkbtn { border:0; background:none; padding:0; color:var(--accent); font-size:13px; cursor:pointer; }
.linkbtn:hover { text-decoration:underline; }
a[href^="tel:"] { white-space:nowrap; }
/* Header search button matches the rest of the UI */
.search button { padding:7px 16px; border:1px solid var(--accent); border-radius:6px; background:var(--accent); color:var(--on-accent); font-weight:500; cursor:pointer; }
.search button:hover { filter:brightness(1.08); }
/* Text on accent backgrounds stays readable in both themes */
:root { --on-accent:#fff; }
@media (prefers-color-scheme: dark) { :root { --on-accent:#0b1220; } }
.btn.primary, .segmented a.active { color:var(--on-accent); }
/* Checkbox rows anywhere in the column menu: box beside its label, never stacked. */
.colpicker-panel label { display:flex; align-items:center; gap:10px; }
.colpicker-panel input[type=checkbox] { width:16px; height:16px; margin:0; flex:none; }
.locbar .inline-form input { width:220px; }
.tablebar .tools { display:flex; align-items:center; gap:8px; }
.typefilter .colpicker-panel { width:250px; }
.typefilter .colpicker-list label span:first-of-type { flex:1; }
.typecount { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }