:root{
  --bg:#060b1a;
  --panel:#0e1a33;
  --ink:#e7f0ff;
  --accent:#3c7dff;
  --border:#24365c;
  --muted:#9db2ef;
}

.st-classic{
  background:radial-gradient(circle at top,#101b3b 0,#060b1a 55%);
  color:var(--ink);
  padding:16px;
  border-radius:18px;
  font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}

.st-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.st-title{
  font-weight:800;
  letter-spacing:.09em;
  border:2px solid #2b3660;
  border-radius:999px;
  padding:6px 16px;
  text-transform:uppercase;
}
.st-actions{
  margin-left:auto;
  display:flex;
  gap:8px;
}
.btn{
  border-radius:10px;
  padding:6px 12px;
  border:1px solid #334d88;
  background:#10224a;
  color:var(--ink);
  cursor:pointer;
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
}
.btn.primary{
  background:linear-gradient(180deg,#3c7dff,#1f4ed8);
  color:#f9fafb;
}
.btn:disabled{opacity:.5;cursor:default;}

.st-main{
  display:grid;
  grid-template-columns:2fr 1.4fr;
  gap:16px;
}

.st-left{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.st-gauge{
  background:var(--panel);
  border-radius:14px;
  padding:10px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}
.st-gauge::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% -20%,rgba(60,125,255,.25),transparent 60%);
  mix-blend-mode:screen;
  pointer-events:none;
}

svg{width:100%;height:auto;}
.ring{fill:none;stroke:#1b2c5a;stroke-width:8;}
.arc{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;}
.needle{stroke:#fff;stroke-width:3;}
.hub{fill:#172b5b;stroke:#7ea6ff;stroke-width:2;}
.label{fill:#cfe0ff;font-size:11px;letter-spacing:.12em;}
.value{fill:#fff;font-weight:900;font-size:26px;}
.unit{fill:#a8bde9;font-size:11px;}

.stats{
  background:var(--panel);
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:10px;
}
.stats .stat{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  padding:4px 0;
  font-size:13px;
}
.stats .diag{
  margin-top:6px;
  font-size:11px;
  color:var(--muted);
  word-break:break-all;
}

.scores{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:10px;
}
.tile{
  background:var(--panel);
  border-radius:14px;
  padding:8px 10px;
  display:grid;
  gap:4px;
  justify-items:center;
  border:1px solid #20376e;
}
.t-h{
  color:#cfe0ff;
  letter-spacing:.08em;
  font-weight:700;
  font-size:11px;
}
.t-v{font-weight:900;font-size:24px;}
.t-unit{font-size:11px;color:#a8bde9;margin-left:4px;}

.st-ep,.st-history{
  background:var(--panel);
  border-radius:14px;
  padding:8px 10px;
  border:1px solid #263a72;
}
.st-ep .h,
.st-history .h{
  font-weight:800;
  font-size:12px;
  margin-bottom:4px;
}
.kv{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  padding:4px 0;
  font-size:12px;
}
.kv .k{color:#bcd0ff;}
.kv .v{
  color:#e7f0ff;
  text-align:right;
  max-width:55%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.st-history{
  max-height:170px;
  display:flex;
  flex-direction:column;
  margin-top:8px;
}
.hist-list{overflow:auto;font-size:11px;}
.hist-item{
  display:flex;
  justify-content:space-between;
  padding:3px 0;
  border-bottom:1px solid rgba(36,54,92,.7);
}
.hist-metrics{font-variant-numeric:tabular-nums;}
.hist-time{color:var(--muted);margin-left:6px;}

.st-multi-row{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.st-multi-card{
  background:var(--panel);
  border-radius:14px;
  padding:8px 10px;
  border:1px solid #20376e;
  display:flex;
  flex-direction:column;
}
.st-multi-title{
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#d7e6ff;
  margin-bottom:4px;
}
.st-multi-gauges{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.st-gauge-mini{padding:6px;}
.st-gauge-mini svg{width:100%;}

.st-foot{
  margin-top:10px;
  color:var(--muted);
  font-size:11px;
  text-align:right;
}

.st-gauge-mini .value{font-size:18px;fill:#e7f0ff;}
.st-gauge-mini .unit{font-size:10px;fill:#9fb4d9;}

.st-run-summary{
  margin-top:16px;
  padding:12px 14px;
  background:rgba(4,14,32,0.85);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
}
.rs-title{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9fb4d9;
  margin-bottom:6px;
}
.rs-grid{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.rs-block{
  flex:1 1 0;
  min-width:0;
}
.rs-label{
  font-size:11px;
  color:#e7f0ff;
  margin-bottom:4px;
}
.rs-row{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#c6d4f0;
}
.rs-k{opacity:.7;}
.rs-v{font-variant-numeric:tabular-nums;margin-left:auto;}
.rs-unit{margin-left:4px;opacity:.6;}

.st-graph{
  margin-top:14px;
  padding:10px 14px 12px;
  background:rgba(4,14,32,0.85);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
}
.sg-title{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9fb4d9;
  margin-bottom:6px;
}
.sg-bars{
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:80px;
}
.sg-bar{
  flex:1 1 0;
  min-width:0;
  text-align:center;
  font-size:10px;
  color:#9fb4d9;
}
.sg-bar-inner{
  width:100%;
  border-radius:4px 4px 0 0;
  background:linear-gradient(to top, rgba(106,209,106,0.9), rgba(26,138,200,0.4));
  height:8px;
  transition:height .3s ease-out;
}
.sg-bar-label{
  margin-top:4px;
  opacity:.7;
}
.sg-bar-val{
  margin-top:2px;
  font-variant-numeric:tabular-nums;
  color:#e7f0ff;
}

.st-session{
  margin-top:14px;
  padding:10px 14px 12px;
  background:rgba(4,14,32,0.9);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
}
.ss-title{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9fb4d9;
  margin-bottom:6px;
}
.ss-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px 18px;
  font-size:11px;
}
.ss-row{
  display:flex;
  justify-content:space-between;
  color:#c6d4f0;
}
.ss-k{opacity:.7;}
.ss-v{font-variant-numeric:tabular-nums;margin-left:auto;}
.ss-unit{margin-left:4px;opacity:.6;}

/* ping flash for emphasis */
.ping-flash{
  text-shadow:0 0 6px rgba(255,255,255,0.9);
}


/* Bottom board layout: 4 mini cards under the main gauges, 2×2 grid */
.st-bottom-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.st-bottom-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Reduce card height a bit in the mini board so it resembles the reference UI */
.st-bottom-grid .st-multi-card {
  min-height: 160px;
}



/* === 2×2 bottom grid for mini gauges (ST1–ST4) === */
.st-bottom-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Two vertical stacks: [ST1,ST2] and [ST3,ST4] */
.st-bottom-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Make cards compact like in the screenshot */
.st-bottom-grid .st-multi-card {
  background: rgba(5, 18, 46, 0.95);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* Title styling: small “SPEEDTEST 1/2/3/4” label */
.st-bottom-grid .st-multi-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}

/* Mini gauge sizing */
.st-bottom-grid .st-gauge-mini {
  width: 170px;
  max-width: 100%;
  margin: 0 auto;
}

/* Put the two mini gauges in each card side-by-side */
.st-bottom-grid .st-multi-gauges {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* On narrow screens stack columns */
@media (max-width: 1024px) {
  .st-bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* end bottom grid */


/* === NEW LAYOUT: 2-column main area: board (left) + stats (right) === */
.st-classic{
  width:100%;
  max-width:none;
  margin:0 auto;
}

/* st-main is a 2×2 grid:
 * row1: big gauges (left) | stats (right)
 * row2: mini board ST1–ST4 (left) | stats continues (right)
 */
.st-main{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  grid-template-rows:auto auto;
  grid-template-areas:
    "left stats"
    "bottom stats";
  gap:24px;
  align-items:flex-start;
}

.st-left{
  grid-area:left;
}

.st-bottom-grid{
  grid-area:bottom;
}

.st-right{
  grid-area:stats;
  margin-top:0;
}


/* === ALIGNMENT FIX: board (big DL/UL + ST1-4) on the left, stats panel on the right === */

/* Two-column main area: left = board, right = stats */
.st-main{
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px;
  align-items: flex-start;
}

/* Left column stacks big gauge row and mini board vertically */
.st-main-leftcol{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Inside left column: two big gauges side by side */
.st-main-leftcol .st-left{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Mini board immediately below, keeping existing 2×2 structure */
.st-main-leftcol .st-bottom-grid{
  margin-top: 0;
}

/* Ensure right panel hugs the top and fills its column height */
.st-main > .st-right{
  align-self: stretch;
}


/* Gauge ticks */
.st-gauge .ticks .tick-major {
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 2;
}

.st-gauge .ticks .tick-label {
  fill: rgba(255, 255, 255, 0.85);
  font-size: 9px;
  font-weight: 600;
}