:root{
  --bg:#000;
  --card:#0b0b0c;
  --card2:#0a0a0b;
  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.55);
  --dim:rgba(255,255,255,.38);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --r: 18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background-color:#020203;

  /* GRID LAYER */
  background-image:
    linear-gradient(rgba(0,255,170,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,170,.06) 1px, transparent 1px),
    radial-gradient(1200px 800px at 40% 20%, rgba(0,255,170,.08), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, rgba(0,200,255,.06), transparent 60%);

  background-size:
    40px 40px,
    40px 40px,
    auto,
    auto;
}

.topbar{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background: linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,0));
}

.crumb{
  font-family:var(--mono);
  letter-spacing:.12em;
  font-size:12px;
  color:rgba(255,255,255,.75);
}
.sep{ color:rgba(255,255,255,.35); padding:0 6px; }

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.80);
}
.dot{
  width:8px; height:8px; border-radius:999px;
  background:rgba(255,255,255,.35);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
  animation:pulseLive 2s infinite;
}
@keyframes pulseLive{
  0%{ transform:scale(1); opacity:1 }
  50%{ transform:scale(1.4); opacity:.6 }
  100%{ transform:scale(1); opacity:1 }
}
.pillSub{ color:rgba(255,255,255,.50); }

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:26px 18px 40px;
}

.grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(160px, auto);
}

.card{
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  border-radius:var(--r);

  background:
    linear-gradient(to bottom, rgba(0,255,170,.05), rgba(0,255,170,0)),
    rgba(6,10,12,.62); 

  backdrop-filter: blur(2px); 

  border:1px solid rgba(0,255,170,.16);

  box-shadow:
    0 0 0 1px rgba(0,255,170,.06),
    0 18px 60px rgba(0,0,0,.85),
    inset 0 0 30px rgba(0,255,170,.03);

  padding:16px 16px 14px;
  position:relative;
  overflow:hidden;
}

.card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,255,170,.58);
  box-shadow:
    0 0 0 1px rgba(0,255,170,.10),
    0 24px 70px rgba(0,0,0,.85),
    inset 0 0 35px rgba(0,255,170,.04);
}

.cardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.kicker{
  font-family:var(--mono);
  letter-spacing:.24em;
  font-size:20px;
  color:rgba(0,255,170,.75);
  text-transform:uppercase;
}

.meta{
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,255,255,.38);
}

.big{
  font-size:46px;
  line-height:1;
  font-weight:560;
  letter-spacing:-0.02em;
}
.big.mono{ font-family:var(--mono); font-size:38px; }
.unit{ font-size:18px; color:rgba(255,255,255,.60); margin-left:4px; }
.unitSmall{ font-size:14px; color:rgba(255,255,255,.55); margin-left:6px; }
.sub{
  margin-top:8px;
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.55);
}

.spark{
  margin-top:12px;
  height:22px;
  border-top:1px solid rgba(255,255,255,.06);
  position:relative;
}
.sparkLine{
  position:absolute;
  left:0; right:0; bottom:3px;
  height:18px;
  background:
    linear-gradient(to right, rgba(255,255,255,.0), rgba(255,255,255,.0));
}

.wide{
  grid-column: span 2;
}

.driveList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
}

.driveRow{
  padding:10px 10px 9px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(0,0,0,.18);
}
.driveTop{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.driveName{
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.80);
}
.driveNums{
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,255,255,.50);
  white-space:nowrap;
}

.bar{
  margin-top:8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.bar > i{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(to right,
  rgba(0,255,170,.55),
  rgba(0,200,255,.65)
  );
  border-radius:999px;
  transition: width .55s cubic-bezier(.2,.9,.2,1);
}

.facts{
  margin:10px 0 0;
  display:grid;
  grid-template-columns: 90px 1fr;
  gap:8px 12px;
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.60);
}
.facts dt{ color:rgba(255,255,255,.40); }
.facts dd{ margin:0; color:rgba(255,255,255,.72); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.dockCounts{
  display:flex;
  gap:10px;
  margin:10px 0 12px;
}
.count{
  flex:1;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.18);
}
.count .lbl{
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,255,255,.45);
}
.count .val{
  font-family:var(--mono);
  font-size:22px;
  margin-top:4px;
  color:rgba(255,255,255,.85);
}

.dockLists{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.dockCol{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.18);
  padding:10px;
  min-height:120px;
}
.dockTitle{
  font-family:var(--mono);
  letter-spacing:.12em;
  font-size:10px;
  color:rgba(255,255,255,.50);
  margin-bottom:8px;
}
.dockList{
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,255,255,.68);
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:auto;
  padding-right:4px;
}
.dockItem{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.95;
}

.hint{
  margin-top:14px;
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,255,255,.35);
}

@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
  .wide{ grid-column: span 1; }
  .dockLists{ grid-template-columns: 1fr; }
}

a {
  text-decoration:none;
  color:inherit;
}