:root {
  --bg:#080f1c; --panel:#111d2e; --line:#293c54; --text:#eef7ff;
  --muted:#9eb5c5; --cyan:#55d6ff; --green:#56d89a; --amber:#f3c96b; --red:#ff7f86;
  color-scheme:dark; font:14px/1.5 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
}
* { box-sizing:border-box }
body { margin:0; min-height:100vh; min-height:100dvh; color:var(--text); background:var(--bg) }
a,button,input { -webkit-tap-highlight-color:transparent }
:focus-visible { outline:2px solid var(--cyan); outline-offset:3px }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:.75rem 1.25rem; border-bottom:1px solid var(--line); background:#081927 }
.eyebrow,.section-label { margin:0; color:var(--cyan); font-size:.75rem; font-weight:800; letter-spacing:.12em }
.brand h1 { margin:.2rem 0; font-size:1.8rem }
.subtitle,.clock { margin:0; color:var(--muted) }
.top-actions { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap }
.button { display:inline-flex; align-items:center; justify-content:center; padding:.65rem 1rem; border-radius:9px; background:#2cc3ee; color:#00111a; text-decoration:none; font-weight:750 }
.button.secondary { color:var(--text); background:transparent; border:1px solid var(--line) }
main { max-width:1900px; margin:auto; padding:1.2rem 1.5rem 2rem }
.card,.metric { min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.15rem }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr); gap:1rem; margin-top:1rem }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.8rem; margin-bottom:.8rem }
.card-head h2 { font-size:1.1rem; margin:.2rem 0 }
.card-head p { font-size:.85rem; color:var(--muted); margin:.25rem 0 }
.pill { display:inline-flex; padding:.25rem .6rem; border-radius:99px; background:#153c35; color:var(--green); font-size:.75rem; font-weight:700; white-space:nowrap }
.pill.muted { background:#163044; color:var(--muted) }
.pill.bad,.bad { color:var(--red) }
.callsign { font-size:clamp(1.7rem,3vw,2.8rem); font-weight:900; letter-spacing:.035em; line-height:1.15; margin:.6rem 0; overflow-wrap:anywhere }
.phonetic { color:var(--cyan); min-height:1.5rem }
.fact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; margin-top:.5rem }
.fact-grid>div,.kv-list>div { border:1px solid var(--line); border-radius:9px; padding:.4rem .55rem; min-width:0; overflow-wrap:anywhere }
.fact-grid span,.kv-list span,.metric span { display:block; color:var(--muted); font-size:.8rem }
.fact-grid strong,.kv-list strong { display:block; margin-top:.2rem }
.status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem }
.status-item { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; border:1px solid var(--line); border-radius:9px; padding:.7rem; min-width:0 }
.status-item strong,.status-item small { display:block }
.status-item small { font-size:.78rem; color:var(--muted); margin-top:.2rem }
.status-item>span { font-size:.75rem; white-space:nowrap; color:inherit }
.status-item.good>span { color:var(--green) }
.status-item.neutral>span { color:var(--muted) }
.truth-note { font-size:.8rem; color:var(--muted); margin:.8rem 0 0 }
.station-strip-card { margin-top:.75rem }
.main-tables { margin-top:1rem }
.contact-evidence,.details-panel { margin:1rem 0; color:var(--muted) }
summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:.5rem }
summary::before { content:"＋"; color:var(--cyan) }
details[open]>summary::before { content:"－" }
.details-panel h2 { font-size:1.1rem }
.station-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap:.75rem }
.station-mini { min-width:0; border:1px solid #334d61; background:#091c2b; border-radius:11px; padding:.7rem; display:flex; flex-direction:column; gap:.4rem }
.station-top { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; min-height:2.8rem }
.station-top>div { min-width:0 }
.node-id { display:block; font-weight:800; color:var(--cyan) }
.device-alias { display:block; overflow-wrap:anywhere; font-size:.85rem }
.alias-source { display:block; color:var(--muted); font-size:.7rem }
.activity-badge { display:flex; align-items:center; gap:.35rem; flex-shrink:0; border:1px solid #465d6d; background:#152c3b; border-radius:8px; padding:.3rem .5rem; font-style:normal; color:#a0b1be }
.activity-text { font-size:1.05rem; white-space:nowrap }
.activity-dot { width:.45rem; height:.45rem; border-radius:50%; background:currentColor }
.station-mini.tx-active { border-color:var(--red); background:#321723 }
.station-mini.tx-active .activity-badge { color:#ff9ca6; border-color:var(--red); background:#521c2a }
.station-mini.rx-active { border-color:var(--cyan); background:#0d2836 }
.station-mini.rx-active .activity-badge { color:var(--cyan); border-color:var(--cyan) }
.station-mini.offline .activity-badge { color:#b98f80 }
.station-signal-row { border:1px solid var(--line); border-radius:9px; padding:.45rem; margin-top:auto }
.station-signal-row>div>span { color:var(--muted); font-size:.75rem; display:block }
.station-rssi { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,7.5rem),1fr)); gap:.65rem; margin:.4rem 0; font-variant-numeric:tabular-nums }
.rssi-slot { display:block; min-width:0; padding:.45rem .55rem; border:1px solid var(--line); border-radius:8px; background:#09131f }
.rssi-slot small { display:block; font-size:.7rem; color:var(--muted) }
.rssi-slot strong { display:flex; align-items:baseline; gap:.2rem; white-space:nowrap; font-size:clamp(1.55rem,2.1vw,2.15rem); font-weight:850; line-height:1.25 }
.rssi-slot { color:var(--muted) }
.station-rssi .rssi-slot.live { color:var(--green); border-color:#287357; background:#0b2b23 }
.station-rssi.realtime .rssi-slot small { color:inherit }
.station-rssi.historical .rssi-slot { border-style:dashed }
.rssi-slot em { font-size:.68rem; font-style:normal; font-weight:500 }
.signal-age,.power-age { display:block; color:var(--muted); font-size:.72rem; min-height:1.1rem }
.realtime { color:var(--text) }
.historical,.historical b { color:#91a7b7 }
.idle-value { color:var(--muted) }
.station-power-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem }
.station-power-grid>div { border:1px solid var(--line); border-radius:8px; padding:.45rem .25rem; text-align:center; min-width:0 }
.station-power-grid span,.station-power-grid small { display:block; color:var(--muted); font-size:.7rem }
.station-power-grid b { display:block; font-size:1.2rem; font-variant-numeric:tabular-nums }
.station-mini.tx-active .station-power-grid.realtime b { color:var(--red) }
.metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin:1rem 0 0 }
.metric { padding:.8rem 1rem }
.metric strong { font-size:1.6rem; display:block }
.two-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:9px }
.table-wrap.compact { max-height:24rem }
table { width:100%; min-width:32rem; border-collapse:collapse; font-size:.83rem }
th { position:sticky; top:0; background:#143149; color:#bad2df; font-size:.75rem; text-align:left; padding:.6rem; white-space:nowrap }
td { padding:.6rem; border-top:1px solid var(--line); white-space:nowrap; vertical-align:top }
td.location-cell { white-space:normal; min-width:17rem; line-height:1.65; overflow-wrap:anywhere }
.empty { text-align:center; color:var(--muted); padding:1.5rem }
.qa-list { display:grid; grid-template-columns:1fr; gap:.5rem; max-height:21rem; overflow:auto }
.qa-row { border:1px solid var(--line); border-radius:10px; padding:.8rem; min-width:0 }
.qa-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.72rem; color:var(--muted) }
.qa-meta span { color:var(--cyan); font-weight:800 }
.qa-meta i { font-style:normal; color:var(--green) }
.qa-row p { margin:.6rem 0 0; overflow-wrap:anywhere }
.qa-row b { color:var(--cyan); margin-right:.4rem }
.qa-row .a b { color:var(--green) }
.lower-grid { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem }
.kv-list { display:grid; gap:.5rem }
footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; padding:1rem 1.5rem; color:var(--muted); border-top:1px solid var(--line); font-size:.75rem }
.login-body { display:grid; place-items:center }
.login-shell { width:min(460px,calc(100% - 32px)); margin:10vh auto }
.login-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:2rem }
.login-card h1 { margin:.5rem 0 }
.login-card p,.login-card label { color:var(--muted) }
.login-card label { display:block; margin:1rem 0 }
.login-card input { width:100%; margin-top:.4rem; padding:.8rem; background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--text); font:inherit }
.login-button { width:100%; border:0; cursor:pointer }
.login-error { color:var(--red)!important }
.login-note { font-size:.8rem }
@media(max-width:1350px) {
  .station-strip,.lower-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .two-column { grid-template-columns:1fr }
}
@media(max-width:850px) {
  .hero-grid { grid-template-columns:1fr }
  .topbar { flex-direction:column; align-items:flex-start }
  .fact-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:560px) {
  main { padding:.75rem }
  .station-strip,.lower-grid { grid-template-columns:1fr }
  .metric-grid,.status-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .card { padding:.85rem }
  .status-item { flex-direction:column }
}

/* V6: readable state colors, safe areas and mobile cards without hidden columns. */
html { scroll-padding-top:1rem; -webkit-text-size-adjust:100% }
main { padding-left:max(1.5rem,env(safe-area-inset-left)); padding-right:max(1.5rem,env(safe-area-inset-right)) }
body { background:radial-gradient(ellipse at 20% 0%,#142842 0,transparent 60%),var(--bg) }
.topbar { background:rgba(8,15,28,.96); padding-top:max(.75rem,env(safe-area-inset-top)) }
.button,button { min-height:44px }
.card { box-shadow:0 5px 24px #00000018 }
.overview-bar,.legend,.source-ages { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem }
.overview-bar { justify-content:space-between; margin-bottom:.6rem }
.legend { gap:1rem; font-size:.8rem }
.legend-online,.legend-rx { color:var(--green) }.pill.info { color:var(--cyan) }
.legend-tx { color:var(--red) }.legend-bad { color:var(--red) }.legend-stale { color:var(--muted) }
.release-label { font-size:.7rem; letter-spacing:.1em; color:var(--muted) }
.source-ages { margin-bottom:1rem }
.source-chip { padding:.3rem .65rem; border:1px solid var(--line); border-radius:6px; font-size:.72rem; color:var(--muted) }
.source-chip.fresh { color:var(--green) }.source-chip.stale { color:var(--amber); border-style:dashed }
.source-chip time { margin-left:.3rem; font-variant-numeric:tabular-nums }
.source-stale { border-left:3px dashed var(--amber); padding-left:.7rem }
.source-stale::before { content:'历史数据 · 来源待更新'; display:block; color:var(--amber); font-size:.75rem; grid-column:1/-1; margin-bottom:.4rem }
.pill.bad { background:#421d2c; color:#ffabb1 }.pill.info { background:#13364b }
.status-item.neutral { border-style:dashed }.status-item.good { border-left:3px solid var(--green) }.status-item.bad { border-left:3px solid var(--red) }
.station-mini.stale { border-style:dashed }
.status-item small,.phonetic,.card-head p,.kv-list,.qa-meta,.source-chip { overflow-wrap:anywhere }
footer { padding-bottom:max(1rem,env(safe-area-inset-bottom)) }
.login-card input { font-size:16px; min-height:46px }
@media(max-width:640px) {
 main { padding:.75rem max(.75rem,env(safe-area-inset-right)) .75rem max(.75rem,env(safe-area-inset-left)) }
 .topbar { padding:1rem; gap:.75rem }.brand h1 { font-size:1.45rem }.subtitle { font-size:.8rem }
 .top-actions { width:100%; gap:.5rem }.clock { flex-basis:100%; font-size:.8rem }
 .legend { gap:.65rem; font-size:.7rem }.release-label { display:none }
 .table-wrap,.table-wrap.compact { border:0; overflow:visible; max-height:none }
 table,tbody { display:block; min-width:0; width:100% }
 thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
 tbody tr { display:grid; grid-template-columns:minmax(0,1fr); border:1px solid var(--line); border-radius:9px; margin-bottom:.65rem; padding:.5rem .7rem }
 td,td.location-cell { display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:.5rem; min-width:0; padding:.3rem 0; white-space:normal; overflow-wrap:anywhere; border:0 }
 td::before { content:attr(data-label); color:var(--muted); font-size:.73rem }
 td.empty { display:block; padding:.75rem } td.empty::before { content:none }
 .qa-list { grid-template-columns:1fr }.login-card { padding:1.3rem }
}
@media(max-width:360px) {
 .status-grid { grid-template-columns:1fr }.fact-grid { gap:.4rem }.callsign { font-size:2rem }
 .client-row { grid-template-columns:minmax(0,1fr) }.client-row small { grid-column:1 }
 .card-head { flex-wrap:wrap }.button { padding:.55rem .75rem }.station-power-grid b { font-size:1rem }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important } }

.client-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:10px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}.client-row small{grid-column:1/-1;color:var(--muted)}.fact-grid strong{overflow-wrap:anywhere}