:root {
    --bg: #f1f5f9;
    --panel: #ffffff;
    --ink: #0f172a;
    --ink-soft: #475569;
    --muted: #94a3b8;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    --primary: #4f46e5;
    --primary-ink: #ffffff;
    --primary-soft: #eef2ff;
    --ok: #16a34a;
    --bad: #dc2626;
    --shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
    --shadow-lg: 0 4px 16px rgba(15,23,42,.08);
    --radius: 12px;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    --appbar-h: 56px;
    --footer-h: 48px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.appmain { flex: 1 0 auto; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .3rem; }
h3 { font-size: .95rem; font-weight: 650; margin: 0 0 .75rem; color: var(--ink); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- App bar ---------- */
.appbar {
    display: flex; align-items: center; gap: 1.5rem;
    height: 56px; padding: 0 1.25rem;
    background: var(--panel); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 1000;
}
.brand { display: flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 750; font-size: 1.05rem; }
.brand:hover { text-decoration: none; }
.brand-mark { font-size: 1.25rem; }
.appnav { display: flex; gap: .25rem; }
.appnav a {
    padding: .4rem .75rem; border-radius: 8px; color: var(--ink-soft); font-weight: 550;
}
.appnav a:hover { background: var(--bg); text-decoration: none; color: var(--ink); }
.appnav a.active { background: var(--primary-soft); color: var(--primary); }
.appbar-spacer { flex: 1; }
.appbar-src { color: var(--muted); font-size: .82rem; }

/* ---------- Search layout ---------- */
.search-layout { display: grid; grid-template-columns: 290px 1fr; gap: 0; height: calc(100vh - var(--appbar-h) - var(--footer-h)); }
.filters {
    background: var(--panel); border-right: 1px solid var(--line);
    padding: 1.1rem; overflow-y: auto;
}
.results-area { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* ---------- Filters ---------- */
.field { margin-bottom: .95rem; }
.field > label, .check { display: block; font-size: .72rem; font-weight: 650; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-soft); margin-bottom: .3rem; }
.filters input[type=search], .filters input[type=number], .filters select {
    width: 100%; padding: .5rem .6rem; border: 1px solid var(--line-strong); border-radius: 8px;
    background: #fff; color: var(--ink); font-size: .9rem; font-family: inherit;
}
.filters input:focus, .filters select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.check { text-transform: none; font-size: .9rem; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; cursor: pointer; }
.check input { width: auto; }

.seg { display: flex; background: var(--bg); border-radius: 8px; padding: 3px; gap: 2px; }
.seg-opt { flex: 1; text-align: center; font-size: .8rem !important; font-weight: 550 !important; text-transform: none !important;
    letter-spacing: 0 !important; color: var(--ink-soft) !important; padding: .35rem .2rem; border-radius: 6px; cursor: pointer; margin: 0 !important; }
.seg-opt input { display: none; }
.seg-opt.on { background: #fff; color: var(--primary) !important; box-shadow: var(--shadow); }

.near .row2 { grid-template-columns: 1fr auto; }
.btn-locate { padding: .5rem .7rem; border: 1px solid var(--line-strong); background: #fff; border-radius: 8px;
    cursor: pointer; font-size: .85rem; white-space: nowrap; }
.btn-locate:hover { background: var(--bg); }
.hint { font-size: .78rem; color: var(--ok); margin-top: .35rem; }

.filter-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.btn-reset { font-size: .85rem; color: var(--ink-soft); }
.htmx-indicator { opacity: 0; transition: opacity .2s; color: var(--primary); letter-spacing: 2px; font-size: .7rem; }
.htmx-request .htmx-indicator, .htmx-indicator.htmx-request { opacity: 1; }

/* ---------- Map ---------- */
.map { height: 42%; min-height: 240px; width: 100%; background: #e8eef3; z-index: 0; }
.results-area > .map { flex: 0 0 42%; }
.mpop a { font-weight: 600; }

/* ---------- Results ---------- */
#resultwrap { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.results-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.count strong { font-size: 1.05rem; }
.count .muted { margin-left: .35rem; }
.export { font-size: .82rem; font-weight: 600; color: var(--ink-soft); padding: .3rem .6rem; border: 1px solid var(--line-strong); border-radius: 8px; }
.export:hover { background: var(--bg); text-decoration: none; color: var(--primary); }
.table-wrap { flex: 1; overflow-y: auto; }
.rtable { width: 100%; border-collapse: collapse; background: var(--panel); }
.rtable thead th {
    position: sticky; top: 0; background: #f8fafc; z-index: 1;
    text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
    padding: .5rem .75rem; border-bottom: 1px solid var(--line-strong); font-weight: 650;
}
.rrow { border-bottom: 1px solid var(--line); cursor: pointer; }
.rrow:hover { background: var(--primary-soft); }
.rtable td { padding: .55rem .75rem; vertical-align: middle; }
.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .45rem; vertical-align: middle; }
.dot.on { background: var(--ok); } .dot.off { background: var(--bad); }
.call { font-weight: 650; color: var(--ink); }
.c-freq { font-weight: 600; }
.band { font-size: .72rem; color: var(--muted); margin-left: .35rem; }
.more { font-size: .7rem; color: var(--primary); font-weight: 600; margin-left: .2rem; }
.c-loc .city { display: block; }
.c-loc .country { font-size: .78rem; color: var(--muted); }

.cat-pill { display: inline-block; padding: .1rem .45rem; border-radius: 6px; font-size: .74rem; font-weight: 650; }
.cat-analog { background: #ecfdf5; color: #047857; }
.cat-digital { background: #eef2ff; color: #4338ca; }
.cat-mixed { background: #fef3c7; color: #b45309; }
.cat-data { background: #f1f5f9; color: #475569; }
.cat-atv { background: #fce7f3; color: #be185d; }
.cat-unknown { background: #f1f5f9; color: #94a3b8; }

.pager { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; background: var(--panel); border-top: 1px solid var(--line); }
.pg { padding: .4rem .8rem; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); font-weight: 550; }
.pg:hover { background: var(--bg); text-decoration: none; }
.pg.disabled { opacity: .4; pointer-events: none; }
.pg-info { font-size: .85rem; color: var(--ink-soft); }
.empty { padding: 3rem 1rem; text-align: center; color: var(--ink-soft); }

/* ---------- Detail ---------- */
.detail { max-width: 980px; margin: 0 auto; padding: 1.5rem 1.25rem; }
.back { font-size: .85rem; color: var(--ink-soft); }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; margin: .75rem 0 1.25rem; gap: 1rem; }
.detail-head .sub { color: var(--ink-soft); margin: .15rem 0 0; }
.status-badges { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.badge { padding: .25rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 650; }
.badge.ok { background: #dcfce7; color: #15803d; } .badge.bad { background: #fee2e2; color: #b91c1c; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); }
.card.wide, .card.map-card { grid-column: 1 / -1; }
.card.map-card { padding: 0; overflow: hidden; }
.card .map { height: 320px; border-radius: var(--radius); }
.no-map { padding: 2rem; text-align: center; color: var(--muted); }
dl { margin: 0; display: grid; grid-template-columns: 9rem 1fr; gap: .5rem .75rem; }
dt { color: var(--ink-soft); font-size: .85rem; }
dd { margin: 0; }
dd.big { font-size: 1.05rem; font-weight: 650; }
dd .cat-pill { margin: 0 .25rem .25rem 0; }
.desc { white-space: pre-wrap; color: var(--ink-soft); margin: 0; }

/* ---------- Pages (stats/about) ---------- */
.page-pad { max-width: 1100px; margin: 0 auto; padding: 1.75rem 1.25rem; }
.page-pad.narrow { max-width: 760px; }
.page-pad.center { text-align: center; }
.lead { font-size: 1.05rem; color: var(--ink-soft); }
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.25rem 0 2rem; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); }
.stat .n { font-size: 1.9rem; font-weight: 750; letter-spacing: -.02em; }
.stat .n.ok { color: var(--ok); }
.stat .l { color: var(--ink-soft); font-size: .85rem; }
.stat-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.bar { display: flex; align-items: center; gap: .6rem; padding: .25rem 0; color: inherit; }
.bar:hover { text-decoration: none; }
.bar:hover .bl { color: var(--primary); }
.bl { flex: 0 0 6.5rem; text-align: right; font-size: .85rem; color: var(--ink-soft); }
.bt { flex: 1; height: 1.1rem; background: var(--bg); border-radius: 6px; overflow: hidden; }
.bf { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
.bc { flex: 0 0 4rem; text-align: right; font-size: .82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

code { background: #f1f5f9; padding: .1rem .35rem; border-radius: 4px; font-family: var(--mono); font-size: .85em; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .search-layout { grid-template-columns: 1fr; height: auto; }
    .filters { border-right: none; border-bottom: 1px solid var(--line); }
    .results-area { height: auto; overflow: visible; }
    .results-area > .map { flex: none; height: 300px; }
    .table-wrap { overflow-x: auto; }
    .detail-grid, .stat-cols { grid-template-columns: 1fr; }
    .stat-cards { grid-template-columns: repeat(2, 1fr); }
    .appbar-src { display: none; }
}

/* ---------- Dense grid / table page ---------- */
.grid-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem;
    padding:.85rem 1.25rem; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.grid-toolbar-left { display:flex; align-items:center; gap:.6rem; }
.grid-search { width:300px; max-width:50vw; padding:.5rem .7rem; border:1px solid var(--line-strong);
    border-radius:8px; font-size:.9rem; }
.grid-search:focus, .gfilter input:focus, .gfilter select:focus, .grid-pagesize:focus {
    outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.grid-pagesize { padding:.5rem .5rem; border:1px solid var(--line-strong); border-radius:8px; font-size:.85rem; }

.grid-info { display:flex; justify-content:space-between; align-items:center; gap:1rem;
    padding:.6rem 1.25rem; background:var(--bg); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.grid-info-right { display:flex; align-items:center; gap:1rem; }
.pgctl { display:inline-flex; align-items:center; gap:.5rem; }
.pgctl .pg { padding:.2rem .6rem; }

.grid-scroll { overflow:auto; max-height:calc(100vh - var(--appbar-h) - 56px - 49px - var(--footer-h)); background:var(--panel); }
.gtable { width:100%; border-collapse:separate; border-spacing:0; font-size:.82rem; }
.gtable thead th, .gtable thead td { position:sticky; background:#f8fafc; z-index:2; }
.ghead th { top:0; text-align:left; padding:.5rem .7rem; white-space:nowrap; font-size:.7rem;
    text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); font-weight:650;
    border-bottom:1px solid var(--line-strong); }
.ghead th.sortable { cursor:pointer; user-select:none; }
.ghead th.sortable:hover { background:#eef2f7; color:var(--primary); }
.ghead th .arr { color:var(--muted); font-size:.62rem; margin-left:.15rem; }
.ghead th.sorted { color:var(--primary); }
.ghead th.sorted .arr { color:var(--primary); }
.gfilter td { top:1.95rem; background:#fbfcfd; padding:.25rem .35rem; border-bottom:1px solid var(--line); }
.gfilter input, .gfilter select { width:100%; min-width:64px; padding:.2rem .35rem; font-size:.78rem;
    border:1px solid var(--line-strong); border-radius:6px; background:#fff; }

.grow { cursor:pointer; border-bottom:1px solid var(--line); }
.grow:hover { background:var(--primary-soft); }
.gtable td { padding:.4rem .7rem; vertical-align:middle; white-space:nowrap; }
.gtable td.b { font-weight:650; }
.gtable td.trunc { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gempty { text-align:center; color:var(--muted); padding:2rem; }

/* ---------- Footer ---------- */
.appfooter {
    flex-shrink: 0;
    min-height: var(--footer-h);
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
    padding: 0 1.25rem;
    background: var(--panel);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .82rem;
}
.appfooter a { color: var(--ink-soft); }
.appfooter a:hover { color: var(--primary); }
.foot-brand { font-weight: 650; color: var(--ink-soft); }
.foot-dot { color: var(--line-strong); }
.foot-spacer { flex: 1; }
@media (max-width: 640px) {
    .appfooter { font-size: .75rem; padding: .6rem 1rem; }
    .foot-dot { display: none; }
}

.grid-toolbar-right { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.near-inline { display:inline-flex; align-items:center; gap:.4rem; }

/* ---------- Freshness badge ---------- */
.appbar-fresh { display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--ink-soft);
    background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:.2rem .6rem; }
.fresh-dot { width:.5rem; height:.5rem; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(22,163,74,.15); }
@media (max-width:760px){ .appbar-fresh{ display:none; } }

.export-group { display:inline-flex; gap:.4rem; }
.gtable td.small { font-size:.74rem; color:var(--ink-soft); }

/* ---------- Live AllStar status ---------- */
.live-badge { display:inline-flex; align-items:center; padding:.25rem .6rem; border-radius:999px;
    font-size:.78rem; font-weight:650; border:1px solid var(--line-strong); color:var(--ink-soft); background:var(--bg); }
.live-badge.live-loading { color:var(--muted); }
.live-badge.live-keyed { background:#fef2f2; border-color:#fecaca; color:#dc2626; animation:livepulse 1.4s ease-in-out infinite; }
.live-badge.live-online { background:#ecfdf5; border-color:#bbf7d0; color:#16a34a; }
.live-badge.live-offline { background:#f8fafc; border-color:var(--line); color:var(--muted); }
.live-badge.live-unknown { display:none; }   /* hide when AllStar status couldn't be fetched */

.live-dot { display:inline-block; width:.5rem; height:.5rem; border-radius:50%; margin-left:.35rem;
    vertical-align:middle; background:var(--line-strong); }
.live-dot.live-loading { background:var(--line-strong); opacity:.5; }
.live-dot.live-keyed { background:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.18); animation:livepulse 1.4s ease-in-out infinite; }
.live-dot.live-online { background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.15); }
.live-dot.live-offline { background:#cbd5e1; }
.live-dot.live-unknown { display:none; }

@keyframes livepulse { 0%,100%{opacity:1;} 50%{opacity:.45;} }