:root {
  --bg:            #020409;
  --bg-2:          #070b14;
  --bg-3:          #0b111d;
  --line:          #14203a;
  --line-2:        #1c2b48;
  --ink:           #dfe7f5;
  --ink-2:         #96a3bf;
  --ink-3:         #5a6a89;
  --accent:        #38f0c9;
  --accent-2:      #ff5b9c;
  --accent-3:      #ffb547;
  --accent-4:      #6ea8ff;
  --red:           #ff4e4e;
  --sans:          'Inter', system-ui, sans-serif;
  --mono:          'JetBrains Mono', ui-monospace, monospace;
  --sh-panel:      0 6px 20px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.02) inset;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans);
  background: radial-gradient(1200px 800px at 30% 10%, #0a1424 0%, var(--bg) 60%);
  color: var(--ink); overflow: hidden;
  font-feature-settings: 'ss01','cv02','cv11';
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }


/* Topbar */
#topbar {
  height: 44px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 18px;
  background: linear-gradient(180deg, #0b1220 0%, #060a12 100%);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand a { font: 700 14px var(--mono); letter-spacing: .18em; color: var(--ink); }
.brand-sub { color: var(--ink-3); font-size: 11px; letter-spacing: .05em; }
.dot { width: 10px; height: 10px; border-radius: 50%;
       background: var(--accent);
       box-shadow: 0 0 12px var(--accent), 0 0 2px #fff inset;
       animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1;} 50% { opacity: .55; } }
.topbar-nav { display: flex; align-items: center; gap: 18px; }
.topbar-nav a { color: var(--ink-2); font-size: 12px; letter-spacing: .06em;
                text-transform: uppercase; }
.topbar-nav a:hover { color: var(--accent); text-decoration: none; }
.lens-btn { background: transparent; border: 1px solid var(--line-2);
  color: var(--ink); padding: 6px 10px; border-radius: 3px;
  font: 500 11px var(--mono); letter-spacing: .06em; cursor: pointer; }
.lens-btn:hover { border-color: var(--accent); color: var(--accent); }

#app { display: grid; grid-template-columns: 380px 1fr 380px;
       height: calc(100vh - 44px); overflow: hidden; }

/* Sidepanel */
#sidepanel { background: var(--bg-2); border-right: 1px solid var(--line);
             display: flex; flex-direction: column; overflow: hidden; }
.panel-hd { padding: 16px 18px 8px; }
.panel-hd h1 { margin: 0 0 6px; font: 700 15px var(--mono);
               letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.panel-hd p { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
             margin: 12px 12px 12px; background: var(--line); border: 1px solid var(--line); }
.stat-cell { padding: 10px 12px; background: var(--bg-3); }
.stat-cell .n { font: 700 22px var(--mono); color: var(--ink);
                letter-spacing: -.02em; line-height: 1; }
.stat-cell .l { font: 500 9px var(--mono); letter-spacing: .12em;
                text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

.filters { padding: 6px 12px 8px; }
.filters input { width: 100%; background: var(--bg); color: var(--ink);
                 border: 1px solid var(--line-2); padding: 8px 10px;
                 font: 400 13px var(--sans); border-radius: 3px; }
.filters input:focus { outline: none; border-color: var(--accent); }
.chip-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.chip { font: 500 10px var(--mono); letter-spacing: .05em;
        padding: 3px 8px; background: transparent; border: 1px solid var(--line-2);
        color: var(--ink-2); border-radius: 2px; cursor: pointer; }
.chip.on { background: var(--accent); color: #041712; border-color: var(--accent); }
.chip:hover { border-color: var(--accent); color: var(--ink); }

.detail { flex: 1; overflow: auto; padding: 0 12px 12px; }
.detail .empty { padding: 22px; color: var(--ink-3);
  border: 1px dashed var(--line-2); border-radius: 3px;
  font-size: 12px; line-height: 1.5; text-align: center; }

.card { border: 1px solid var(--line); background: var(--bg-3);
        padding: 12px 14px; margin-top: 10px;
        border-left: 3px solid var(--accent); }
.card h3 { margin: 0 0 4px; font: 700 15px var(--sans);
           color: var(--ink); letter-spacing: -.005em; }
.card .sub { font-size: 11px; color: var(--ink-2); }

.kv { display: grid; grid-template-columns: 100px 1fr;
      gap: 4px 12px; margin-top: 10px; font-size: 12px; }
.kv .k { color: var(--ink-3); font: 500 10px var(--mono);
         letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.kv .v { color: var(--ink); }
.kv .v.muted { color: var(--ink-3); font-style: italic; }

.rep-list { margin-top: 12px; }
.rep { display: flex; align-items: center; gap: 10px;
       padding: 8px 0; border-top: 1px solid var(--line); }
.rep:first-child { border-top: 0; }
.rep img { width: 34px; height: 34px; border-radius: 50%;
           object-fit: cover; background: var(--line);
           border: 1px solid var(--line-2); }
.rep .rep-body { flex: 1; min-width: 0; }
.rep .rep-name { font-weight: 600; font-size: 12px; color: var(--ink); }
.rep .rep-name .party { font: 700 9px var(--mono); padding: 1px 4px;
                        margin-left: 6px; border-radius: 2px; }
.party.R { background: rgba(255,78,78,.15); color: var(--red); }
.party.D { background: rgba(110,168,255,.15); color: var(--accent-4); }
.party.NPA, .party.I { background: rgba(150,163,191,.15); color: var(--ink-2); }
.rep .rep-title { font-size: 10px; color: var(--ink-3);
                  font-family: var(--mono); letter-spacing: .05em; }

.link-out { display: inline-block; margin-top: 10px;
            font: 500 11px var(--mono); letter-spacing: .06em;
            color: var(--accent); }
.link-out:hover { color: var(--ink); text-decoration: none; }

.foot { padding: 8px 14px; border-top: 1px solid var(--line);
        font: 500 10px var(--mono); letter-spacing: .05em;
        color: var(--ink-3); display: flex; justify-content: space-between; }

/* Map */
#mapWrap { position: relative; background: var(--bg); }
#map { position: absolute; inset: 0; }
#mapOverlay { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.legend { position: absolute; bottom: 16px; left: 16px;
  background: rgba(6,10,18,0.86); backdrop-filter: blur(6px);
  border: 1px solid var(--line-2); padding: 10px 12px; border-radius: 3px;
  font: 500 10px var(--mono); letter-spacing: .04em;
  color: var(--ink-2); pointer-events: auto; }
.legend .lg-title { color: var(--ink); font: 700 10px var(--mono);
                    letter-spacing: .15em; text-transform: uppercase; margin-bottom: 6px; }
.legend .lg-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.legend .lg-sw { width: 10px; height: 10px; border-radius: 50%; }

.mapboxgl-popup-content { background: #06101f !important; color: var(--ink) !important;
  border: 1px solid var(--line-2); font: 400 12px var(--sans);
  padding: 10px 12px; border-radius: 3px; box-shadow: var(--sh-panel); }
.mapboxgl-popup-tip { border-top-color: #06101f !important;
                      border-bottom-color: #06101f !important; }
.mapboxgl-ctrl-group { background: #0a1220 !important;
                       border: 1px solid var(--line-2) !important; }
.mapboxgl-ctrl button { background-color: transparent !important;
                        filter: invert(1) hue-rotate(180deg); }

/* Graph panel */
#graphpanel { background: var(--bg-2); border-left: 1px solid var(--line);
              display: flex; flex-direction: column; }
.graph-hd { padding: 12px 16px; border-bottom: 1px solid var(--line);
            display: flex; justify-content: space-between; align-items: center;
            font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase;
            color: var(--accent-2); }
#graphMode { background: transparent; border: 1px solid var(--line-2);
             color: var(--ink); padding: 4px 8px; border-radius: 3px;
             font: 500 10px var(--mono); letter-spacing: .06em; cursor: pointer; }
#graphMode:hover { border-color: var(--accent-2); color: var(--accent-2); }
#graph { flex: 1; position: relative; }
#graph svg { width: 100%; height: 100%; }
.graph-legend { padding: 8px 14px; border-top: 1px solid var(--line);
                font: 500 10px var(--mono); color: var(--ink-3);
                letter-spacing: .05em; }
.graph-legend .lg-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.graph-legend .lg-sw { width: 8px; height: 8px; border-radius: 50%; }

.node circle { stroke: rgba(255,255,255,.4); stroke-width: 1; cursor: pointer; }
.node text { font: 500 10px var(--mono); fill: var(--ink);
             text-shadow: 0 0 6px var(--bg), 0 0 2px var(--bg);
             pointer-events: none; }
.link { stroke: var(--line-2); stroke-opacity: .7; }
.link.active { stroke: var(--accent); stroke-opacity: 1; stroke-width: 2; }

@media (max-width: 1200px) {
  #app { grid-template-columns: 340px 1fr; }
  #graphpanel { display: none; }
}
@media (max-width: 780px) {
  #app { grid-template-columns: 1fr; grid-template-rows: 42% 58%; }
  #sidepanel { border-right: 0; border-bottom: 1px solid var(--line); }
}