:root{
  --bg:#0d0f10;
  --surface:#141719;
  --surface2:#181c1f;
  --line:#292f32;
  --line2:#202527;
  --text:#f3f5f6;
  --muted:#929a9f;
  --muted2:#687176;
  --primary:#1689e8;
  --primary-soft:rgba(22,137,232,.12);
  --green:#67c889;
  --green-soft:rgba(103,200,137,.11);
  --amber:#d7ad69;
  --amber-soft:rgba(215,173,105,.11);
  --orange:#d48a59;
  --orange-soft:rgba(212,138,89,.11);
  --red:#db7068;
  --red-soft:rgba(219,112,104,.11);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
.wrap{width:min(1180px,calc(100% - 32px));margin:auto}

.unofficial-banner{background:#171b1d;border-bottom:1px solid #2a3033}
.unofficial-banner-inner{
  min-height:34px;display:flex;align-items:center;justify-content:center;gap:9px;
  color:var(--muted);font-size:10px;text-align:center
}
.unofficial-banner-inner p{margin:0}
.unofficial-badge{
  padding:3px 6px;border:1px solid #3b4448;border-radius:4px;
  color:#d7dcdf;font-size:8px;font-weight:850;letter-spacing:.13em
}

.site-header{
  height:64px;position:sticky;top:0;z-index:20;
  background:rgba(13,15,16,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line2)
}
.nav{height:100%;display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:7px}
.brand-word{font-size:16px;font-weight:850;color:var(--primary);letter-spacing:-.03em}
.brand-separator{color:#485055}.brand-sub{font-size:13px;color:var(--muted);font-weight:650}
.updated{margin-left:auto;margin-right:12px;color:var(--muted2);font-size:10px}
.nav-primary{
  padding:7px 10px;border-radius:6px;background:var(--primary);
  color:#fff;font-size:10px;font-weight:750
}

.dashboard{padding:24px 0 34px}
.quick-grid{display:grid;grid-template-columns:1.25fr .9fr 1fr .9fr;gap:8px}
.quick-card,.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:8px
}
.quick-card{min-height:126px;padding:15px 16px}
.quick-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}
.eyebrow{font-size:8px;font-weight:850;letter-spacing:.15em;color:var(--primary)}
.mini-muted{font-size:9px;color:var(--muted2)}
.quick-card>strong{display:block;font-size:25px;line-height:1.05;letter-spacing:-.04em}
.quick-card .big-number{font-size:39px;line-height:.85}
.quick-card p{margin:7px 0 0;color:var(--muted);font-size:10px;line-height:1.45}
.state-dot{width:8px;height:8px;border-radius:50%;background:var(--muted2)}
.overall.operational .state-dot{background:var(--green)}
.overall.partial_outage .state-dot{background:var(--amber)}
.overall.major_outage .state-dot{background:var(--red)}
.status-chip{
  padding:3px 6px;border-radius:4px;font-size:8px;font-weight:750;
  background:#22282b;color:var(--muted)
}
.status-chip.low{background:var(--green-soft);color:var(--green)}
.status-chip.moderate{background:var(--amber-soft);color:var(--amber)}
.status-chip.high{background:var(--orange-soft);color:var(--orange)}
.status-chip.severe{background:var(--red-soft);color:var(--red)}

.panel{margin-top:8px}
.panel-head{
  min-height:54px;padding:13px 15px;display:flex;align-items:end;justify-content:space-between;
  border-bottom:1px solid var(--line2)
}
.panel-head.compact{min-height:50px}
.panel-head h2{margin:4px 0 0;font-size:15px;line-height:1;font-weight:720;letter-spacing:-.025em}

.service-strip{display:grid;grid-template-columns:repeat(5,1fr)}
.service-card{
  min-width:0;padding:13px 14px;border-right:1px solid var(--line2)
}
.service-card:last-child{border-right:0}
.service-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.service-name{font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service-dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.service-card.down .service-dot{background:var(--red)}
.service-card.unknown .service-dot{background:var(--muted2)}
.service-bottom{display:flex;align-items:end;justify-content:space-between;margin-top:13px;gap:7px}
.service-latency{font-size:18px;font-weight:760;letter-spacing:-.04em}
.service-latency small{font-size:8px;color:var(--muted2);font-weight:500;margin-left:2px}
.service-uptime{text-align:right}
.service-uptime strong{display:block;font-size:10px}.service-uptime span{font-size:8px;color:var(--muted2)}

.main-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:8px}
.side-stack{min-width:0}
.side-stack .panel{margin-top:8px}

.traffic-list{min-height:320px}
.traffic-row{
  min-height:49px;padding:0 14px;display:grid;
  grid-template-columns:32px minmax(0,1fr) 92px 68px 45px;
  gap:8px;align-items:center;border-bottom:1px solid var(--line2)
}
.traffic-row:last-child{border-bottom:0}
.rank{font-size:9px;color:var(--muted2)}
.city strong{display:block;font-size:10px}.city small{display:block;margin-top:2px;font-size:8px;color:var(--muted2)}
.congestion-pill{justify-self:start;padding:3px 6px;border-radius:4px;font-size:8px;font-weight:750}
.congestion-pill.low{background:var(--green-soft);color:var(--green)}
.congestion-pill.moderate{background:var(--amber-soft);color:var(--amber)}
.congestion-pill.high{background:var(--orange-soft);color:var(--orange)}
.congestion-pill.severe{background:var(--red-soft);color:var(--red)}
.trend{font-size:8px;color:var(--muted2)}.trend.up{color:var(--red)}.trend.down{color:var(--green)}
.player-number{text-align:right;font-size:11px;font-weight:760}
.empty{padding:18px;color:var(--muted2);font-size:10px}

.chart-panel{padding-bottom:11px}
#playerChart{display:block;width:100%;height:150px;padding:8px 12px 0}
.chart-grid{stroke:#242a2c;stroke-width:1}
.chart-area{fill:rgba(22,137,232,.07)}
.chart-line{fill:none;stroke:var(--primary);stroke-width:2;vector-effect:non-scaling-stroke}
.chart-axis{display:flex;justify-content:space-between;padding:0 13px;color:var(--muted2);font-size:8px}

.incident-list{max-height:190px;overflow:auto}
.incident-row{
  padding:11px 13px;display:grid;grid-template-columns:7px 1fr auto;
  gap:9px;border-bottom:1px solid var(--line2)
}
.incident-row:last-child{border-bottom:0}
.incident-row i{width:6px;height:6px;border-radius:50%;background:var(--red);margin-top:4px}
.incident-row.resolved i{background:var(--green)}
.incident-row strong{display:block;font-size:9px}
.incident-row p{margin:3px 0 0;color:var(--muted2);font-size:8px}
.incident-row time{color:var(--muted2);font-size:8px}

footer{border-top:1px solid var(--line2);padding:18px 0 24px}
.footer-inner{display:flex;justify-content:space-between;color:var(--muted2);font-size:9px}
.footer-inner div{display:flex;gap:14px}.footer-inner a:hover{color:var(--text)}

@media(max-width:900px){
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .main-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .wrap{width:min(100% - 20px,1180px)}
  .unofficial-banner-inner{min-height:46px;padding:6px 0;align-items:flex-start;text-align:left;line-height:1.35}
  .updated{display:none}
  .quick-grid{grid-template-columns:1fr 1fr}
  .quick-card{min-height:112px;padding:13px}
  .quick-card .big-number{font-size:32px}
  .service-strip{grid-template-columns:1fr}
  .service-card{border-right:0;border-bottom:1px solid var(--line2)}
  .service-card:last-child{border-bottom:0}
  .traffic-row{grid-template-columns:27px 1fr 42px}
  .traffic-row .congestion-pill,.traffic-row .trend{display:none}
}


.chart-panel-head{align-items:center}
.chart-stats{display:flex;gap:16px}
.chart-stats div{min-width:44px;text-align:right}
.chart-stats span{display:block;color:var(--muted2);font-size:7px;text-transform:uppercase;letter-spacing:.08em}
.chart-stats strong{display:block;margin-top:2px;font-size:11px}
.chart-wrap{position:relative}
#playerChart{touch-action:none;cursor:crosshair}
.chart-hover-line{stroke:#49545a;stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.chart-hover-dot{fill:var(--primary);stroke:#0d0f10;stroke-width:2;vector-effect:non-scaling-stroke}
.chart-tooltip{
  position:absolute;
  z-index:4;
  pointer-events:none;
  min-width:92px;
  padding:7px 8px;
  border:1px solid #353d41;
  border-radius:6px;
  background:#101315;
  transform:translate(-50%,-100%);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.chart-tooltip strong{display:block;font-size:10px}
.chart-tooltip span{display:block;margin-top:2px;color:var(--muted);font-size:8px}
@media(max-width:650px){
  .chart-panel-head{align-items:flex-start}
  .chart-stats{gap:10px}
  .chart-stats div{min-width:36px}
}