/* =========================================================================
   AXIOM DNA — MTT Digital Twin · v0.4 (3-col layout, every building)
   ========================================================================= */

:root {
  --paper:    #0a0e1a;
  --panel:    #14141f;
  --panel-2:  #1c1c2a;
  --ink:      #f0f0f5;
  --ink-2:    #9a9ab0;
  --ink-3:    #5a5a6c;
  --line:     #1f1f2a;
  --line-2:   #2a2a3a;

  --blue:     #4361ee;
  --red:      #f0594e;
  --neon:     #f6c90e;
  --green:    #5cb85c;
  --orange:   #f0ad4e;
  --cyan:     #5bc0de;

  --ff:       'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --pad-out:  18px;
  --pad-cell: 11px 13px;
  --gap-1:    6px;
  --gap-2:    13px;
  --gap-3:    21px;
  --gap-4:    34px;

  --hair:     1px solid var(--line);
  --hair-2:   1px solid var(--line-2);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff);
  font-variant-numeric: tabular-nums;
  font-size: 13px; line-height: 1.42;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }

::selection { background: var(--neon); color: #0a0e1a; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button {
  font: inherit; font-family: var(--ff);
  background: transparent;
  border: var(--hair-2);
  color: var(--ink);
  padding: 6px 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: background 80ms, color 80ms, border-color 80ms;
}
button:hover { background: var(--panel-2); border-color: var(--neon); color: var(--neon); }
button.is-active {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
input[type="text"] {
  font: inherit; font-family: var(--ff);
  background: var(--panel);
  border: var(--hair-2);
  color: var(--ink);
  padding: 7px 11px;
  outline: none;
  width: 100%;
}
input[type="text"]::placeholder { color: var(--ink-3); }
input[type="text"]:focus { border-color: var(--neon); }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .28; } }
.live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--red);
  animation: pulse 2.4s ease-in-out infinite;
  flex: none;
}

/* =========================================================================
   0. TOP BAR + NEWS TICKER
   ========================================================================= */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad-out);
  height: 36px;
  background: var(--paper);
  border-bottom: var(--hair-2);
}
.topbar__tabs { display: flex; gap: 0; }
.tab {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 12px; height: 36px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.tab:hover { color: var(--ink); border-bottom-color: var(--line-2); }
.tab--active { color: var(--neon); border-bottom-color: var(--neon); }
.topbar__time {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--ink-2);
}
.topbar__time #topbar-date { color: var(--neon); letter-spacing: 0.14em; }
.topbar__live { color: var(--red); display: inline-flex; align-items: center; gap: 5px; }

.news-ticker {
  display: flex; align-items: stretch;
  background: var(--paper);
  border-bottom: 1px solid var(--red);
  font-size: 11px;
  height: 28px;
  overflow: hidden;
}
.news-ticker__label {
  background: var(--red); color: var(--paper);
  font-weight: 700;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0 13px;
  display: inline-flex; align-items: center; flex: none;
}
.news-ticker__stream {
  display: flex; gap: 38px;
  align-items: center;
  padding-left: 22px;
  white-space: nowrap;
  overflow: hidden;
  color: var(--ink-2);
  flex: 1;
}
.news-ticker__stream span { font-weight: 500; }
.news-ticker__stream span:first-child::before { content: '▶'; color: var(--neon); margin-right: 8px; }

/* =========================================================================
   1. MASTHEAD
   ========================================================================= */
.masthead {
  background: rgba(10, 14, 26, 0.96);
  border-bottom: 2px solid var(--neon);
}
.masthead__row {
  display: grid;
  grid-template-columns: 280px 1fr 360px;
  align-items: stretch;
}
.brand {
  display: flex; align-items: center; gap: var(--gap-2);
  padding: 14px var(--pad-out);
}
.brand__disc {
  width: 40px; height: 40px;
  background: var(--neon); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  flex: none;
}
.brand__disc--hub { background: var(--ink); }
.brand__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand__eyebrow {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--neon); text-transform: uppercase;
}
.brand__title {
  font-size: 20px; font-weight: 600; letter-spacing: -0.005em;
  line-height: 1; color: var(--ink);
}
.brand__sub {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase;
}
.vitals {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border-left: var(--hair-2);
  border-right: var(--hair-2);
}
.vital {
  background: var(--panel);
  padding: 11px 13px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.vital__label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--neon); text-transform: uppercase;
}
.vital__value {
  font-size: 17px; font-weight: 600; line-height: 1.05;
  color: var(--ink);
}
.vital__value--red { color: var(--red); }
.vital__sub { font-size: 9px; font-weight: 600; letter-spacing: 0.10em; color: var(--ink-2); text-transform: uppercase; }

.claim { display: flex; border-left: var(--hair-2); }
.claim__chip {
  background: var(--red); color: var(--paper);
  padding: 0 14px;
  display: flex; align-items: center;
  font-size: 10px; letter-spacing: 0.18em; font-weight: 700;
  text-transform: uppercase; flex: none;
}
.claim__body {
  padding: 10px 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: var(--panel);
}
.claim__body strong { font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--ink); }
.claim__body small { color: var(--ink-2); font-size: 11px; }

/* =========================================================================
   2. MAIN LAYOUT — left panel | map | right panel
   ========================================================================= */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 0;
  border-bottom: var(--hair-2);
  background: var(--paper);
}
.lpanel, .rpanel {
  background: var(--panel);
  border-right: var(--hair-2);
  display: flex; flex-direction: column;
  max-height: 760px;
  overflow-y: auto;
}
.rpanel { border-right: none; border-left: var(--hair-2); }

/* L/R panel sections */
.lpanel__section, .rpanel__section {
  border-bottom: var(--hair-2);
  padding: 14px var(--pad-out);
  display: flex; flex-direction: column; gap: 9px;
}
.lpanel__section--scroll, .rpanel__section--scroll {
  max-height: 260px; overflow-y: auto;
}
.lpanel__section--scroll::-webkit-scrollbar,
.rpanel__section--scroll::-webkit-scrollbar { width: 4px; }
.lpanel__section--scroll::-webkit-scrollbar-thumb { background: var(--line-2); }

.lpanel__head, .rpanel__head {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 8px;
  border-bottom: var(--hair);
}
.lpanel__disc, .rpanel__disc {
  width: 18px; height: 18px;
  background: var(--blue); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex: none;
}
.lpanel__title, .rpanel__title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--neon);
}
.lpanel__meta, .rpanel__meta {
  margin-left: auto;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.10em; color: var(--ink-3); text-transform: uppercase;
}
.rpanel__tab {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--ink-3);
  padding: 3px 7px;
  border: var(--hair);
  cursor: pointer;
  text-transform: uppercase;
}
.rpanel__tab.is-active { color: var(--neon); border-color: var(--neon); }

.lpanel__foot, .rpanel__foot {
  margin-top: 5px;
  padding-top: 9px;
  border-top: var(--hair);
  font-size: 9.5px; color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Alert */
.alert {
  background: rgba(240, 89, 78, 0.08);
  border: 1px solid var(--red);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.alert__head { display: flex; gap: 6px; }
.alert__tag {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 6px;
  background: var(--ink-3); color: var(--paper);
}
.alert__tag--red { background: var(--red); color: var(--paper); }
.alert__title { font-size: 12px; font-weight: 600; color: var(--ink); }
.alert__body { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
.alert__link {
  font-size: 11px; font-weight: 600;
  color: var(--red); letter-spacing: 0.04em;
}

/* Bars */
.bar-row { display: flex; flex-direction: column; gap: 4px; }
.bar-row__top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
}
.bar-row__top b { font-weight: 600; color: var(--ink); }
.bar-row__num { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar {
  position: relative;
  background: var(--panel-2);
  height: 6px;
  overflow: hidden;
}
.bar__fill { height: 100%; }
.bar__mute {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 9px; color: var(--ink-3);
}

/* Hall list */
.hall-list { display: flex; flex-direction: column; }
.hall-row {
  display: grid;
  grid-template-columns: 6px 56px 1fr 64px 64px;
  align-items: center;
  border-bottom: var(--hair);
  cursor: pointer;
  position: relative;
}
.hall-row:last-child { border-bottom: none; }
.hall-row:hover { background: var(--panel-2); }
.hall-row.is-selected { background: var(--panel-2); }
.hall-row.is-selected::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--neon);
}
.hall-row__bar { height: 36px; align-self: stretch; }
.hall-row[data-status="LIVE"]      .hall-row__bar { background: var(--red); }
.hall-row[data-status="SETUP"]     .hall-row__bar { background: var(--blue); }
.hall-row[data-status="BOOKED"]    .hall-row__bar { background: var(--ink-2); }
.hall-row[data-status="AVAILABLE"] .hall-row__bar { background: var(--ink-3); }
.hall-row[data-status="CLOSED"]    .hallall-row__bar, .hall-row[data-status="CLOSED"] .hall-row__bar { background: var(--ink-3); }
.hall-row__code {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; color: var(--neon);
  padding: 10px 11px;
}
.hall-row__name {
  padding: 7px 0;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.hall-row__name b { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hall-row__name small { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; }
.hall-row__capacity { font-size: 11px; font-weight: 600; text-align: right; padding: 0 9px; color: var(--ink-2); }
.hall-row__status {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  text-align: right; padding: 0 9px;
}
.hall-row[data-status="LIVE"]      .hall-row__status { color: var(--red); }
.hall-row[data-status="SETUP"]     .hall-row__status { color: var(--blue); }
.hall-row[data-status="BOOKED"]    .hall-row__status { color: var(--ink-2); }
.hall-row[data-status="AVAILABLE"] .hall-row__status { color: var(--ink-3); }
.hall-row[data-status="CLOSED"]    .hall-row__status { color: var(--ink-3); }

/* Legend grid */
.legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-size: 11px;
  color: var(--ink-2);
}
.legend-grid__cell { display: flex; align-items: center; gap: 7px; }
.legend-grid__cell i {
  width: 10px; height: 10px; display: inline-block; flex: none;
}

/* =========================================================================
   3. MAP AREA
   ========================================================================= */
.map-area {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border-right: var(--hair-2);
}
.map-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--gap-2);
  padding: 11px var(--pad-out);
  border-bottom: var(--hair-2);
}
.map-header__group { display: flex; gap: 0; }
.map-toggle {
  background: var(--panel);
  border: var(--hair-2);
  border-right: none;
  padding: 7px 14px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em;
}
.map-toggle:last-child { border-right: var(--hair-2); }
.map-toggle.is-active {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

.map-canvas {
  position: relative;
  flex: 1;
  min-height: 580px;
  background: var(--paper);
  overflow: hidden;
}
.map-canvas--2d { display: none; }

/* MapLibre fills #twin-3d-wrap directly (no separate canvas) */
#twin-3d-wrap { position: absolute; inset: 0; }
#twin-3d-wrap .maplibregl-canvas { outline: none; }
#twin-3d-wrap .maplibregl-ctrl-group { background: rgba(10, 14, 26, 0.92); border: 1px solid var(--line-2); border-radius: 0; }
#twin-3d-wrap .maplibregl-ctrl-group button { background: transparent; color: var(--ink-2); border-radius: 0; }
#twin-3d-wrap .maplibregl-ctrl-group button:hover { background: var(--ink); color: var(--paper); }
#twin-3d-wrap .maplibregl-ctrl-attrib { background: rgba(10, 14, 26, 0.78); color: var(--ink-3); }
#twin-3d-wrap .maplibregl-ctrl-attrib a { color: var(--ink-2); }

.twin-overlay {
  position: absolute;
  background: rgba(10, 14, 26, 0.96);
  border: 1px solid var(--neon);
  padding: 9px 11px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 80ms ease;
  min-width: 200px;
}
.twin-overlay.is-active { opacity: 1; }
.twin-overlay__code { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; color: var(--neon); text-transform: uppercase; }
.twin-overlay__name { font-size: 14px; font-weight: 600; margin-top: 1px; color: var(--ink); }
.twin-overlay__event { font-size: 11px; color: var(--ink-2); margin-top: 3px; line-height: 1.3; }
.twin-overlay__status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 5px; padding: 3px 7px;
  border: var(--hair-2);
}
.twin-overlay__status[data-status="LIVE"]      { color: var(--red); border-color: var(--red); }
.twin-overlay__status[data-status="SETUP"]     { color: var(--blue); border-color: var(--blue); }
.twin-overlay__status[data-status="BOOKED"]    { color: var(--ink); border-color: var(--ink); }
.twin-overlay__status[data-status="AVAILABLE"] { color: var(--ink-2); border-color: var(--line-2); }
.twin-overlay__status[data-status="CLOSED"]    { color: var(--ink-3); border-color: var(--ink-3); }
.twin-overlay__status .live-dot { background: currentColor; }

.twin-legend {
  position: absolute; bottom: 11px; left: 11px;
  background: rgba(10, 14, 26, 0.92);
  padding: 7px 11px;
  border: 1px solid var(--line-2);
  z-index: 5;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  max-width: calc(100% - 320px);
}
.map-legend__sep {
  width: 1px; height: 12px; background: var(--line-2);
}
.map-legend__item {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 4px;
}
.map-legend__swatch {
  width: 11px; height: 11px;
  border: 1px solid var(--line-2);
  display: inline-block;
}

.twin-help {
  position: absolute; top: 11px; right: 11px;
  background: rgba(10, 14, 26, 0.92);
  padding: 7px 11px;
  border: 1px solid var(--line-2);
  z-index: 5;
  font-size: 10px; font-weight: 500;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 7px;
}
.twin-help b { font-weight: 700; color: var(--neon); letter-spacing: 0.08em; text-transform: uppercase; font-size: 9px; }
.twin-help__sep { color: var(--ink-3); }
.twin-help__btn {
  padding: 4px 9px !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
  background: var(--panel) !important;
  border-color: var(--neon) !important;
  color: var(--neon) !important;
  text-transform: uppercase;
}
.twin-help__btn:hover { background: var(--neon) !important; color: var(--paper) !important; }

/* 2D SVG */
.fp-svg { width: 100%; height: 100%; display: block; background: var(--paper); }
.fp-svg text { font-family: var(--ff); }
.fp-svg .bldg { fill: var(--panel-2); stroke: var(--line-2); stroke-width: 0.6; }
.fp-svg .bldg-commercial { fill: #f0c84a; }
.fp-svg .bldg-retail      { fill: #f5a06a; }
.fp-svg .bldg-hotel       { fill: #f5a06a; }
.fp-svg .bldg-office      { fill: #c4a060; }
.fp-svg .bldg-mall        { fill: #e0d050; }
.fp-svg .bldg-industrial  { fill: #5a5a64; }
.fp-svg .bldg-warehouse   { fill: #5a5a64; }
.fp-svg .bldg-public      { fill: #6a9bc8; }
.fp-svg .bldg-school      { fill: #6a9bc8; }
.fp-svg .bldg-hospital    { fill: #c0c0c8; }
.fp-svg .bldg-parking     { fill: #3a3a44; }
.fp-svg .bldg-stadium     { fill: #a06030; }
.fp-svg .bldg-train_station { fill: #4361ee; }
.fp-svg .bldg-terrace     { fill: #7a7a82; }
.fp-svg .bldg-apartments  { fill: #888890; }
.fp-svg .bldg-residential { fill: #787880; }
.fp-svg .bldg-house       { fill: #787880; }

.fp-svg .site { fill: var(--panel); stroke: var(--line-2); stroke-width: 1; }
.fp-svg .road { fill: none; stroke: var(--neon); stroke-width: 5; stroke-linecap: square; }
.fp-svg .road--faint { opacity: 0.5; stroke-width: 3; }
.fp-svg .lake { fill: #1a3550; opacity: 0.7; stroke: none; }
.fp-svg .pink { fill: none; stroke: var(--blue); stroke-width: 6; stroke-dasharray: 8 4; }
.fp-svg .station { fill: var(--blue); }
.fp-svg .hall { stroke: var(--ink); stroke-width: 2; cursor: pointer; }
.fp-svg .hall[data-status="LIVE"]      { fill: #A8322B; }
.fp-svg .hall[data-status="SETUP"]     { fill: #4361ee; }
.fp-svg .hall[data-status="BOOKED"]    { fill: #6f6c63; }
.fp-svg .hall[data-status="AVAILABLE"] { fill: #e7e5dd; stroke: #bcb9af; }
.fp-svg .hall[data-status="CLOSED"]    { fill: #a9a59a; }
.fp-svg .hall.is-selected { stroke-width: 3; stroke: var(--neon); }
.fp-svg .hall-label {
  fill: var(--ink);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.10em;
  pointer-events: none;
}
.fp-svg .hall-label[data-status="LIVE"]      { fill: var(--paper); }
.fp-svg .hall-label[data-status="SETUP"]     { fill: var(--paper); }
.fp-svg .hall-label[data-status="BOOKED"]    { fill: var(--paper); }
.fp-svg .hall-label[data-status="AVAILABLE"] { fill: var(--ink); }
.fp-svg .hall-label[data-status="CLOSED"]    { fill: var(--paper); }
.fp-svg .compass-text { font-size: 22px; font-weight: 700; fill: var(--neon); }
.fp-svg .building-count {
  fill: var(--ink-3); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}

/* Detail panel (overlay on map area) */
.detail {
  position: absolute;
  right: 13px; bottom: 60px;
  width: 360px;
  background: var(--panel);
  border: 1px solid var(--neon);
  z-index: 6;
}
.detail__head {
  background: var(--neon); color: var(--paper);
  padding: 11px 14px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--gap-2);
}
.detail__head b { font-size: 17px; font-weight: 600; letter-spacing: -0.005em; }
.detail__head small { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.detail__body { padding: 11px 14px; display: flex; flex-direction: column; gap: 8px; }
.detail__row {
  display: grid; grid-template-columns: 76px 1fr; gap: 11px;
  align-items: baseline; padding-bottom: 6px;
  border-bottom: var(--hair);
}
.detail__row:last-child { border-bottom: none; padding-bottom: 0; }
.detail__label { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon); }
.detail__value { font-size: 12px; font-weight: 500; display: flex; align-items: baseline; gap: 7px; min-width: 0; color: var(--ink); }
.detail__value b { font-weight: 600; }
.detail__value small { color: var(--ink-2); font-size: 11px; }
.detail__value i { color: var(--ink-3); font-style: italic; }
.detail__pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 8px;
  border: var(--hair-2);
}
.detail__pill .live-dot { background: currentColor; }
.detail__pill[data-status="LIVE"]      { color: var(--red); border-color: var(--red); }
.detail__pill[data-status="SETUP"]     { color: var(--blue); border-color: var(--blue); }
.detail__pill[data-status="BOOKED"]    { color: var(--ink); border-color: var(--ink); }
.detail__pill[data-status="AVAILABLE"] { color: var(--ink-2); border-color: var(--line-2); }
.detail__pill[data-status="CLOSED"]    { color: var(--ink-3); border-color: var(--ink-3); }

/* =========================================================================
   4. RIGHT PANEL — trends, news, lens, layers, counts
   ========================================================================= */
.trends { display: flex; flex-direction: column; gap: 7px; }
.trends__search {
  background: var(--panel-2); padding: 7px 11px;
  font-size: 11px; color: var(--ink-2);
  border: var(--hair);
}
.trends__chart {
  background: var(--panel-2);
  padding: 11px;
}
.trends__chart svg { width: 100%; height: 60px; display: block; }
.trends__axis {
  display: flex; justify-content: space-between;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--ink-3);
  margin-top: 5px;
}

.news-card {
  background: var(--panel-2);
  border-left: 2px solid var(--red);
  padding: 9px 11px;
  display: flex; flex-direction: column; gap: 4px;
}
.news-card__head { display: flex; align-items: center; gap: 8px; }
.news-card__tag {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 6px; background: var(--red); color: var(--paper);
}
.news-card__rel { font-size: 9px; color: var(--ink-3); letter-spacing: 0.10em; }
.news-card__title { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.news-card__source {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.10em; color: var(--ink-3);
  text-transform: uppercase;
}

.lens-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: var(--hair-2);
}
.lens-btn {
  background: var(--panel-2); color: var(--ink-2);
  border: none;
  padding: 11px 0;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
}
.lens-btn:hover { background: var(--panel); color: var(--ink); }
.lens-btn.is-active {
  background: var(--blue); color: var(--paper);
}
.lens-help {
  font-size: 11px; color: var(--ink-2);
  line-height: 1.35;
  margin: 0;
  padding: 9px 11px;
  background: var(--panel-2);
  border: var(--hair);
}

.layer-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0;
  border-bottom: var(--hair);
  font-size: 11px;
}
.layer-row:last-child { border-bottom: none; }
.layer-row__name { color: var(--ink-2); }

/* Switch */
.switch { position: relative; display: inline-block; width: 30px; height: 16px; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; inset: 0;
  background: var(--ink-3);
  transition: background 100ms;
}
.switch span::before {
  content: ''; position: absolute;
  width: 12px; height: 12px;
  left: 2px; top: 2px;
  background: var(--paper);
  transition: transform 100ms;
}
.switch input:checked + span { background: var(--neon); }
.switch input:checked + span::before { transform: translateX(14px); }

.rpanel__section--last { border-bottom: none; }
.rpanel__counts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: var(--hair-2);
}
.rpanel__counts > div {
  background: var(--panel-2);
  padding: 9px 11px;
  display: flex; flex-direction: column; gap: 2px;
}
.rpanel__counts b {
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.rpanel__counts span {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.10em; color: var(--ink-3); text-transform: uppercase;
}

/* =========================================================================
   5. TRAFFIC BAND
   ========================================================================= */
.traffic {
  padding: var(--pad-out) var(--pad-out) 0;
  background: var(--paper);
  border-bottom: var(--hair-2);
}
.traffic__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: var(--hair);
}
.traffic__head-l { display: flex; align-items: baseline; gap: 9px; }
.traffic__title {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}
.traffic__sub { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--neon); }
.traffic__head-r { display: flex; align-items: center; gap: 9px; }
.traffic__time { font-size: 14px; font-weight: 600; color: var(--neon); }
.traffic__loc { font-size: 10px; color: var(--ink-3); letter-spacing: 0.10em; text-transform: uppercase; }
.traffic__dow {
  padding: 5px 9px;
  font-size: 10px; letter-spacing: 0.14em; font-weight: 700;
}
.traffic__hour {
  width: 160px;
  accent-color: var(--neon);
}
.traffic-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  border: var(--hair-2);
  background: var(--panel);
  margin-bottom: var(--pad-out);
}
.gmap { height: 360px; background: var(--paper); }
.gmap--placeholder {
  display: flex; align-items: center; justify-content: center;
  border-right: var(--hair-2);
  padding: 24px;
  background: repeating-linear-gradient(
    45deg, var(--panel) 0px, var(--panel) 8px,
    rgba(10,14,26,0.6) 8px, rgba(10,14,26,0.6) 16px);
}
.gmap__placeholder-inner {
  max-width: 460px; padding: 18px 22px;
  background: rgba(10, 14, 26, 0.92);
  border: 1px solid var(--neon);
  font-size: 11px; line-height: 1.55;
  color: var(--ink-2);
}
.gmap__placeholder-title {
  font-size: 13px; font-weight: 700; color: var(--neon);
  letter-spacing: 0.10em; text-transform: uppercase;
  margin-bottom: 9px;
}
.gmap__placeholder-body { margin-bottom: 9px; }
.gmap__placeholder-body code {
  background: rgba(255,255,255,0.04); padding: 1px 4px;
  font-size: 10px; color: var(--neon);
}
.gmap__placeholder-mod {
  font-size: 10px; color: var(--ink-3);
  border-top: 1px solid var(--line-2); padding-top: 8px;
}
.traffic-side { border-left: var(--hair-2); }
.traffic-stat {
  padding: 10px 14px;
  border-bottom: var(--hair);
  display: flex; flex-direction: column; gap: 2px;
}
.traffic-stat:last-child { border-bottom: none; }
.traffic-stat__label { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--neon); text-transform: uppercase; }
.traffic-stat__value { font-size: 17px; font-weight: 600; line-height: 1.05; color: var(--ink); }
.traffic-stat__sub { font-size: 11px; font-weight: 500; color: var(--ink-2); }
.traffic-stat--gap .traffic-stat__value { color: var(--ink-3); font-style: italic; font-size: 13px; font-weight: 600; }
.traffic-stat--gap { background: rgba(240, 89, 78, 0.08); }

/* =========================================================================
   6. DATA SHADOW + ENV
   ========================================================================= */
.shadow {
  padding: var(--pad-out);
  background: var(--paper);
  border-bottom: var(--hair-2);
}
.shadow__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--blue);
  padding-bottom: 11px;
}
.shadow__title { display: flex; align-items: baseline; gap: 11px; }
.shadow__title b {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}
.shadow__title small { font-size: 11px; color: var(--ink-2); }
.shadow__counts {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red);
  display: inline-flex; align-items: center; gap: 6px;
}
.shadow__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: var(--hair-2);
}
.shadow__cell {
  background: var(--panel);
  padding: 11px 13px;
  display: flex; flex-direction: column; gap: 3px;
  min-height: 64px;
}
.shadow__num { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--neon); }
.shadow__label { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.shadow__status {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--red);
  display: inline-flex; align-items: center; gap: 5px;
}
.shadow__status .live-dot { background: var(--red); }
.shadow__why { font-size: 11px; color: var(--ink-2); line-height: 1.3; }

.env {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: var(--hair-2);
  border-bottom: 1px solid var(--neon);
}
.env__cell {
  background: var(--panel);
  padding: 11px 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.env__label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--neon);
}
.env__value {
  font-size: 19px; font-weight: 600;
  display: flex; align-items: baseline; gap: 5px;
  color: var(--ink);
}
.env__value small { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.env__vs { font-size: 11px; color: var(--ink-2); }
.env__cell[data-status="red"]  .env__value { color: var(--red); }
.env__cell[data-status="warn"] .env__value { color: var(--ink); }
.env__cell[data-status="ok"]   .env__value { color: var(--ink); }
.env__cell[data-status="mute"] .env__value { color: var(--ink-3); font-style: italic; }

/* =========================================================================
   7. FOOTER
   ========================================================================= */
.footer {
  padding: 11px var(--pad-out);
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11px; color: var(--ink-2);
}
.footer b { font-weight: 600; color: var(--ink); }

/* =========================================================================
   8. RESPONSIVE
   ========================================================================= */
@media (max-width: 1380px) {
  .layout { grid-template-columns: 240px 1fr 280px; }
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .lpanel, .rpanel { max-height: none; border-right: none; border-left: none; border-top: var(--hair-2); }
  .map-area { border-right: none; }
  .vitals { grid-template-columns: repeat(3, 1fr); }
  .masthead__row { grid-template-columns: 1fr; }
  .claim { border-left: none; border-top: var(--hair-2); }
  .traffic-wrap { grid-template-columns: 1fr; }
  .traffic-side { border-left: none; border-top: var(--hair-2); }
  .gmap { height: 280px; }
  .shadow__grid { grid-template-columns: repeat(2, 1fr); }
  .env { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .vitals { grid-template-columns: repeat(2, 1fr); }
  .shadow__grid { grid-template-columns: 1fr; }
  .env { grid-template-columns: repeat(2, 1fr); }
  .legend-grid { grid-template-columns: 1fr; }
}

/* Hard ban: no rogue radius */
* { border-radius: 0 !important; }
input, textarea, select, button { border-radius: 0 !important; }
.live-dot, .brand__disc, .lpanel__disc, .rpanel__disc { border-radius: 50% !important; }
.hall-row__bar { border-radius: 0 !important; }
.legend-grid__cell i { border-radius: 0 !important; }