:root{
  --bg0:#070a14;
  --bg1:#0b1020;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.09);
  --stroke: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --muted2: rgba(255,255,255,.50);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 26px;
  --gap: 16px;
  --max: 1200px;

  --a: #7c5cff;   /* accent A */
  --b: #18d3ff;   /* accent B */
  --c: #2ee59d;   /* ok */
  --w: #ffcc66;   /* warn */
  --d: #ff4d6d;   /* danger */

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

:root[data-theme="light"]{
  --bg0:#eef2ff;
  --bg1:#f7fafc;
  --card: rgba(0,0,0,.04);
  --card2: rgba(0,0,0,.06);
  --stroke: rgba(0,0,0,.08);
  --text: rgba(0,0,0,.88);
  --muted: rgba(0,0,0,.60);
  --muted2: rgba(0,0,0,.46);
  --shadow: 0 18px 50px rgba(0,0,0,.14);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(1200px 700px at 20% 10%, rgba(124,92,255,.28), transparent 55%),
              radial-gradient(1000px 650px at 70% 25%, rgba(24,211,255,.22), transparent 50%),
              radial-gradient(900px 600px at 40% 80%, rgba(46,229,157,.10), transparent 52%),
              linear-gradient(160deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{ color: inherit; text-decoration:none; }
strong{ font-weight: 700; }

.bg{ position:fixed; inset:0; pointer-events:none; z-index:-1; }
.bgCanvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
.glow{
  position:absolute; width:520px; height:520px; filter: blur(70px);
  opacity:.35; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.7), transparent 55%);
  animation: float 10s ease-in-out infinite;
}
.glowA{ left: -120px; top:-120px; }
.glowB{
  right:-160px; bottom:-160px;
  background: radial-gradient(circle at 30% 30%, rgba(24,211,255,.7), transparent 55%);
  animation-duration: 13s;
}

@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(60px,30px) scale(1.05); }
}

.topbar{
  position:sticky; top:0; z-index: 10;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 18px;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.08));
  border-bottom: 1px solid var(--stroke);
}

:root[data-theme="light"] .topbar{
  background: linear-gradient(to bottom, rgba(255,255,255,.78), rgba(255,255,255,.52));
}

.brand{ display:flex; gap: 12px; align-items:center; min-width: 220px; }
.brandLogo{ width: 44px; height: 44px; border-radius: 12px; box-shadow: var(--shadow); }
.brandTitle{ font-weight: 800; letter-spacing: .2px; }
.brandSub{ font-size: 13px; color: var(--muted); margin-top: 2px; }

.topbarRight{ display:flex; align-items:center; gap: 10px; }
.chip{
  display:flex; align-items:center; gap: 10px;
  padding: 8px 10px; border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  font-family: var(--mono);
  font-size: 12px;
}
.dot{ width:10px; height:10px; border-radius: 50%; display:inline-block; }
.dotLive{ background: var(--c); box-shadow: 0 0 0 0 rgba(46,229,157,.55); animation: pulseDot 1.8s ease infinite; }
@keyframes pulseDot{
  0%{ box-shadow: 0 0 0 0 rgba(46,229,157,.55); }
  65%{ box-shadow: 0 0 0 10px rgba(46,229,157,0); }
  100%{ box-shadow: 0 0 0 0 rgba(46,229,157,0); }
}

.btn{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.07);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); }
.btn:active{ transform: translateY(0px); }
.btn.primary{
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(24,211,255,.80));
  border-color: rgba(255,255,255,.18);
}
.btn.ghost{ background: rgba(255,255,255,.03); }
.btn.small{ padding: 8px 10px; border-radius: 12px; font-size: 13px; }
.btnIcon{ font-size: 14px; opacity:.9; }
.btnText{ font-size: 13px; }

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 16px 40px;
}

.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: stretch;
  margin: 8px 0 18px;
}
.heroLeft, .heroRight{ display:flex; flex-direction:column; gap: 16px; }
.hero h1{
  margin: 4px 0 2px;
  font-size: clamp(28px, 4.5vw, 44px);
  letter-spacing: -.6px;
  line-height: 1.05;
}
.muted{ color: var(--muted); }
.hero p{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 62ch;
}
.heroActions{ display:flex; gap: 10px; flex-wrap: wrap; }

.heroBadges{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.badge{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 10px 12px;
}
.badgeK{ font-size: 12px; color: var(--muted2); }
.badgeV{ font-family: var(--mono); font-size: 14px; margin-top: 4px; }

.heroCard{
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: var(--radius2);
  padding: 14px 14px 12px;
  box-shadow: var(--shadow);
}
.heroCardTop{ display:flex; justify-content:space-between; align-items:flex-start; gap: 12px; margin-bottom: 8px; }
.kpiLabel{ font-size: 12px; color: var(--muted2); }
.kpiValue{ font-family: var(--mono); font-size: 24px; letter-spacing: -.2px; margin-top: 6px; }
.unit{ font-size: 12px; color: var(--muted); margin-left: 6px; }

.miniLegend{ display:flex; flex-direction:column; gap: 8px; font-size: 12px; color: var(--muted); }
.miniLegendItem{ display:flex; gap: 8px; align-items:center; }
.swatch{ width: 12px; height: 12px; border-radius: 4px; display:inline-block; }
.sA{ background: rgba(124,92,255,.95); }
.sB{ background: rgba(24,211,255,.9); }

.note{
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius2);
  padding: 14px;
}
.noteTitle{ font-weight: 750; font-size: 13px; margin-bottom: 8px; }
.note p{ margin:0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.card{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  padding: 12px 12px 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  overflow:hidden;
  position:relative;
}
.card:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(800px 320px at 20% 20%, rgba(124,92,255,.10), transparent 40%),
              radial-gradient(600px 320px at 80% 30%, rgba(24,211,255,.10), transparent 45%);
  opacity:.9;
  pointer-events:none;
}
.card > *{ position:relative; }
.cardHeader{
  display:flex; align-items:flex-start; justify-content:space-between; gap: 10px;
  margin-bottom: 8px;
}
.cardTitle{ font-weight: 800; letter-spacing:.2px; }
.cardSub{ font-size: 12px; color: var(--muted2); margin-top: 4px; }
.pill{
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(46,229,157,.35);
  background: rgba(46,229,157,.10);
  color: rgba(46,229,157,.95);
}
.pill.neutral{
  border-color: rgba(124,92,255,.35);
  background: rgba(124,92,255,.10);
  color: rgba(124,92,255,.95);
}
.pill.warn{
  border-color: rgba(255,204,102,.40);
  background: rgba(255,204,102,.10);
  color: rgba(255,204,102,.98);
}
.pill.bad{
  border-color: rgba(255,77,109,.45);
  background: rgba(255,77,109,.12);
  color: rgba(255,77,109,.98);
}

.cardFooter{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.metaK{ font-size: 11px; color: var(--muted2); }
.metaV{ font-family: var(--mono); font-size: 13px; margin-top: 3px; }

.span2{ grid-column: span 2; }

canvas{ width: 100%; display:block; border-radius: 12px; }
.bigNumber{
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 26px;
  letter-spacing: -.2px;
}

.divider{
  height:1px; background: var(--stroke);
  margin: 10px 0 8px;
}

.traffic{ display:flex; flex-direction:column; gap: 10px; padding: 4px 2px 4px; }
.trafficItem{ display:flex; gap: 10px; align-items:center; }
.trafficDot{ width:12px; height:12px; border-radius: 50%; }
.trafficDot.ok{ background: var(--c); box-shadow: 0 0 0 0 rgba(46,229,157,.35); }
.trafficDot.warn{ background: var(--w); box-shadow: 0 0 0 0 rgba(255,204,102,.35); }
.trafficDot.bad{ background: var(--d); box-shadow: 0 0 0 0 rgba(255,77,109,.35); }
.trafficName{ font-size: 13px; font-weight: 700; }
.trafficSub{ font-size: 12px; color: var(--muted2); margin-top: 2px; }
.tinyList{
  display:flex; flex-direction:column; gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  min-height: 112px;
}
.logRow{
  display:flex; justify-content:space-between; gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
}
.logT{ color: var(--muted2); }

.legend{ display:grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.legendItem{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  font-family: var(--mono);
  font-size: 12px;
}
.legendKey{ display:flex; align-items:center; gap: 10px; }
.legendSw{ width: 10px; height: 10px; border-radius: 3px; display:inline-block; }
.legendPct{ color: var(--muted); }

.tickerGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.tickerItem{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px 12px;
}
.tickerK{ font-size: 12px; color: var(--muted2); }
.tickerV{ font-family: var(--mono); font-size: 18px; margin-top: 6px; letter-spacing: -.2px; display:flex; align-items:baseline; gap: 8px; }
.tiny{ font-size: 11px; color: var(--muted); }
.tiny.stale{ color: rgba(255,204,102,.95); }

.helpText{ margin-top: 10px; font-size: 12px; color: var(--muted2); line-height: 1.4; }

.headlines{
  display:flex; flex-direction:column;
  gap: 10px;
}
.hItem{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
}
.hTitle{ font-weight: 750; font-size: 13px; line-height: 1.35; }
.hMeta{ font-family: var(--mono); font-size: 11px; color: var(--muted2); margin-top: 5px; }
.hBadge{
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(24,211,255,.28);
  background: rgba(24,211,255,.08);
  color: rgba(24,211,255,.95);
  white-space:nowrap;
}
.skeleton{
  position:relative; overflow:hidden;
}
.skeleton:after{
  content:"";
  position:absolute; inset:0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(120%); }
}

.footer{
  margin-top: 18px;
  border-top: 1px solid var(--stroke);
  padding-top: 14px;
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
}
.footerTitle{ font-weight: 800; }
.footerSub{ font-size: 12px; color: var(--muted2); margin-top: 4px; }
.footerRight{ display:flex; gap: 10px; flex-wrap:wrap; }

/* Density modes */
:root[data-density="compact"]{
  --gap: 12px;
}
:root[data-density="compact"] .card{ padding: 10px; }
:root[data-density="compact"] .heroBadges{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-density="compact"] .tickerGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-density="compact"] .kpiValue{ font-size: 22px; }
:root[data-density="compact"] .cardFooter{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .span2{ grid-column: auto; }
  .tickerGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heroBadges{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce){
  .glow, .dotLive{ animation:none!important; }
  .btn{ transition:none!important; }
}