:root{
  /* DARK THEME TOKENS – always used */
  --bg: #0b0d10;
  --bg-elev: #12151a;
  --card: #171b22;
  --text: #e6e9ef;
  --muted: #a9b0bb;
  --accent: #66b2ff;
  --accent-2: #7de2d1;
  --border: #232a34;
  --focus: #ffd166;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --r-1: .25rem; --r-2: .5rem; --r-3: .75rem; --r-4: 1rem;

  --space-1: 0.15rem;
  --space-2: 0.3rem;
  --space-3: 0.5rem;
  --space-4: 0.75rem;
  --space-6: 1rem;
  --space-8: 1.25rem;

  --shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.35);
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  /* hard fallbacks first, then tokens */
  background:#0b0d10;
  background:var(--bg);
  color:#e6e9ef;
  color:var(--text);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
img{ max-width:100%; height:auto; }

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: var(--space-4); top: var(--space-4); width:auto; height:auto;
  background:var(--focus); color:#000; padding:var(--space-2); border-radius:var(--r-2)
}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(6px);
  background:color-mix(in oklab, var(--bg), transparent 20%);
  border-bottom:1px solid var(--border);
}
.site-header .brand{
  display:flex; align-items:center; gap:var(--space-3);
  padding: var(--space-1) var(--space-2);
}

.brand-title{ font-weight:700; letter-spacing:.02em; text-transform:uppercase }

.primary-nav ul{
  display:flex; flex-wrap:wrap; gap:.25rem .5rem;
  list-style:none; margin:0; padding: 0 var(--space-2) var(--space-1);
}
.primary-nav a{
  display:inline-block; padding:.35rem .7rem; border-radius:999px;
  color:var(--text); border:1px solid transparent;
}
.primary-nav a[aria-current="page"], .primary-nav a:hover{
  background:var(--card); border-color:var(--border);
}

.layout{ display:grid; grid-template-columns: 1fr min(1120px, 100%) 1fr; }
.content{ grid-column: 2; padding: var(--space-4) var(--space-4); display:grid; gap: var(--space-4); }

.panel{
  background:var(--card); border:1px solid var(--border);
  border-radius: var(--r-3); box-shadow: var(--shadow);
  overflow:hidden;
}
.panel-header{ padding: var(--space-2) var(--space-3); border-bottom:1px solid var(--border) }
.panel h2,.panel h3{ margin:0; letter-spacing:.01em }

.chart{
  inline-size:100%; block-size:min(300px, 25vh);
  padding: .25rem; margin: 0; display: block; width: 100%;
}
.uplot { display: block; width: 100%; } 

#top-countries-chart,
#top-networks-chart {
  block-size: 220px;
  max-height: 260px;
}

.grid-2{ display:grid; gap:var(--space-4); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 900px){ .grid-2{ grid-template-columns:1fr } }

.table-wrap{ overflow:auto; max-height: 200px; }
.data-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.92rem }
.data-table thead th{
  position:sticky; top:0;
  background:var(--bg-elev); color:var(--muted);
  text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--border);
}
.data-table tbody td{
  padding:.35rem .5rem; border-bottom:1px solid var(--border);
}
.data-table tbody tr:nth-child(even){
  background: color-mix(in oklab, var(--bg-elev), #000 4%)
}
.data-table td:nth-child(2){ font-family: var(--mono) }
.data-table td:nth-child(3), .data-table td:nth-child(4){
  text-align:right; font-variant-numeric: tabular-nums;
}

.site-footer{
  border-top:1px solid var(--border);
  margin-top: var(--space-8);
  padding: var(--space-6);
  text-align:center; color:var(--muted);
}

:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}