:root{
  --bg:#070b14; --bg2:#0d1324; --card:#11182b; --card2:#0f1730; --line:rgba(255,255,255,.08);
  --text:#ebf0ff; --muted:#93a0c9; --good:#36d18a; --warn:#ffb84d; --danger:#ff5d73; --cyan:#52d8ff;
  --purple:#9f7cff; --blue:#61a8ff; --gold:#ffdf6b; --shadow:0 16px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  background:radial-gradient(circle at top left, rgba(82,216,255,.08), transparent 30%),radial-gradient(circle at top right, rgba(159,124,255,.09), transparent 28%),linear-gradient(180deg, #060911 0%, #0a1020 100%);
  color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; min-height:100vh;
}
.bg-grid{
  position:fixed; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:24px 24px; mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 85%);
}
.wrap{position:relative; max-width:1380px; margin:0 auto; padding:28px}
.hero{margin-bottom:28px; padding:24px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(180deg, rgba(19,27,49,.92), rgba(10,15,28,.92)); box-shadow:var(--shadow); backdrop-filter:blur(8px)}
.hero-top{display:flex; justify-content:space-between; gap:24px; align-items:flex-start}
.eyebrow{color:var(--cyan); font-size:12px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:12px}
.hero h1{margin:0 0 10px; font-size:clamp(32px,5vw,56px); line-height:1; letter-spacing:-.03em}
.hero-copy{margin:0; max-width:760px; color:var(--muted); font-size:15px}
.hero-side{min-width:240px; display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.status{color:var(--muted); font-size:14px}
.status-badge{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:10px 14px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.04)}
.status-badge.good{color:var(--good); border-color:rgba(54,209,138,.35); box-shadow:0 0 0 1px rgba(54,209,138,.08) inset}
.status-badge.warn{color:var(--warn); border-color:rgba(255,184,77,.35); box-shadow:0 0 0 1px rgba(255,184,77,.08) inset}
.status-badge.danger{color:var(--danger); border-color:rgba(255,93,115,.35); box-shadow:0 0 0 1px rgba(255,93,115,.08) inset}
.status-badge.offline{color:#b0b9da; border-color:rgba(255,255,255,.15)}
.hero-strip{margin-top:20px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.hero-chip{border:1px solid var(--line); background:rgba(255,255,255,.03); border-radius:18px; padding:14px 16px}
.hero-chip span{display:block; color:var(--muted); font-size:12px; margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em}
.hero-chip strong{font-size:16px; letter-spacing:.01em}
section{margin-bottom:28px}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:14px}
.section-head h2{margin:0; font-size:24px; letter-spacing:-.03em}
.section-head p{margin:0; color:var(--muted); font-size:14px}
.summary-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.diagnostics-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.miners-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:16px}
.card{background:linear-gradient(180deg, rgba(17,24,43,.96), rgba(12,18,33,.96)); border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow:var(--shadow)}
.metric-card{position:relative; overflow:hidden}
.metric-card::after{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:rgba(255,255,255,.1)}
.metric-card.accent-cyan::after{background:var(--cyan)} .metric-card.accent-purple::after{background:var(--purple)} .metric-card.accent-green::after{background:var(--good)} .metric-card.accent-orange::after{background:var(--warn)} .metric-card.accent-red::after{background:var(--danger)} .metric-card.accent-gold::after{background:var(--gold)} .metric-card.accent-blue::after{background:var(--blue)} .metric-card.accent-gray::after{background:#8fa1d7}
.metric-label{color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px}
.metric-value{font-size:34px; line-height:1.05; font-weight:800; letter-spacing:-.04em; margin-bottom:8px}
.metric-sub{color:var(--muted); font-size:13px}
.card-title{font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px}
.health-panel,.alerts-panel,.ranking-list,.achievement-list,.lab-stats,.lab-notes{display:flex; flex-direction:column; gap:10px}
.health-row,.rank-row,.lab-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06)}
.health-row:last-child,.rank-row:last-child,.lab-row:last-child{border-bottom:none; padding-bottom:0}
.health-row span,.lab-row span{color:var(--muted); font-size:14px}
.health-row strong,.rank-value,.lab-row strong{font-size:14px}
.alert-item{display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--line); background:rgba(255,255,255,.03); border-radius:16px; font-size:14px}
.alert-item.good{border-color:rgba(54,209,138,.28)} .alert-item.warn{border-color:rgba(255,184,77,.28)} .alert-item.danger{border-color:rgba(255,93,115,.28)}
.alert-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:0 0 auto;background:#8ea0d6}
.alert-item.good .alert-dot{background:var(--good)} .alert-item.warn .alert-dot{background:var(--warn)} .alert-item.danger .alert-dot{background:var(--danger)}
.rank-pos{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:12px;font-weight:800;color:var(--muted);flex:0 0 auto}
.rank-main{flex:1 1 auto; min-width:0}
.rank-name{font-weight:700; margin-bottom:3px}
.rank-meta{color:var(--muted); font-size:13px}
.muted-note{color:var(--muted); font-size:14px}
.miner-card{position:relative; overflow:hidden; cursor:pointer}
.miner-card.good{box-shadow:0 16px 40px rgba(0,0,0,.35),0 0 0 1px rgba(54,209,138,.10) inset}
.miner-card.warn{box-shadow:0 16px 40px rgba(0,0,0,.35),0 0 0 1px rgba(255,184,77,.10) inset}
.miner-card.danger{box-shadow:0 16px 40px rgba(0,0,0,.35),0 0 0 1px rgba(255,93,115,.10) inset}
.miner-card.offline{opacity:.72}
.miner-card:hover{transform:translateY(-2px);transition:.18s ease}
.miner-header{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px}
.miner-name{font-size:20px; font-weight:800; letter-spacing:-.03em; margin-bottom:6px}
.miner-meta,.miner-host{color:var(--muted); font-size:13px}
.miner-state{padding:8px 12px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--line);white-space:nowrap}
.miner-state.good{color:var(--good);border-color:rgba(54,209,138,.28)} .miner-state.warn{color:var(--warn);border-color:rgba(255,184,77,.28)} .miner-state.danger{color:var(--danger);border-color:rgba(255,93,115,.28)} .miner-state.offline{color:#b0b9da}
.miner-prime{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:14px}
.prime-value{padding:14px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.prime-value span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
.prime-value strong{font-size:24px;line-height:1.1;letter-spacing:-.04em}
.miner-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.miner-grid span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}
.miner-grid strong{font-size:16px;line-height:1.2}
.miner-bars{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.bar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:13px}
.bar-head span{color:var(--muted)}
.bar-track{height:10px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.05)}
.bar-fill{height:100%;border-radius:999px;background:#91a3d6}
.bar-fill.good{background:linear-gradient(90deg, rgba(54,209,138,.85), rgba(84,238,171,.95))} .bar-fill.warn{background:linear-gradient(90deg, rgba(255,184,77,.85), rgba(255,208,123,.95))} .bar-fill.danger{background:linear-gradient(90deg, rgba(255,93,115,.85), rgba(255,129,146,.95))} .bar-fill.muted{background:linear-gradient(90deg, rgba(97,168,255,.55), rgba(97,168,255,.9))}
.miner-footer{display:flex;flex-wrap:wrap;gap:8px}
.miner-badge{padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:12px;color:var(--text)}
.miner-badge.good{color:var(--good);border-color:rgba(54,209,138,.25)} .miner-badge.warn{color:var(--warn);border-color:rgba(255,184,77,.25)} .miner-badge.danger{color:var(--danger);border-color:rgba(255,93,115,.25)} .miner-badge.muted{color:var(--muted)}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.tab-btn{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);border-radius:999px;padding:12px 16px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.18s ease}
.tab-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}
.tab-btn.active{border-color:rgba(82,216,255,.35);box-shadow:0 0 0 1px rgba(82,216,255,.10) inset;color:var(--cyan)}
.tab-panel{display:none} .tab-panel.active{display:block}
.lab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.achievement-item,.note-item{padding:14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.achievement-title{font-weight:800;margin-bottom:6px}
.achievement-text,.note-item{color:var(--muted);font-size:14px;line-height:1.45}
.mode-switches{display:flex;gap:10px;flex-wrap:wrap}
.mode-btn{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);border-radius:14px;padding:10px 14px;cursor:pointer;font-weight:700;transition:.18s ease}
.mode-btn.active{color:var(--cyan);border-color:rgba(82,216,255,.35)}
.sparkline-wrap{border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);border-radius:18px;padding:12px 14px;margin-bottom:16px}
.sparkline-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.sparkline-head span{color:var(--muted)} .sparkline-head strong{font-size:12px}
.sparkline{width:100%;height:52px;display:block;color:var(--cyan)} .sparkline-empty{color:var(--muted);font-size:13px}
.charts-grid{display:grid;grid-template-columns:1fr;gap:16px}
.chart-card{height:360px}
.chart-clickable{cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.chart-clickable:hover{transform:translateY(-2px);border-color:rgba(82,216,255,.22)}
.incident-log{display:flex;flex-direction:column;gap:10px}
.incident-item{display:grid;grid-template-columns:90px 1fr;gap:14px;align-items:start;padding:12px 14px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:16px;font-size:14px}
.incident-item.good{border-color:rgba(54,209,138,.28)} .incident-item.warn{border-color:rgba(255,184,77,.28)} .incident-item.danger{border-color:rgba(255,93,115,.28)}
.incident-time{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:var(--muted);font-size:13px}
.incident-text{line-height:1.45}
.chart-modal{position:fixed;inset:0;display:none;z-index:9999}
.chart-modal.open{display:block}
.chart-modal-backdrop{position:absolute;inset:0;background:rgba(3,6,12,.72);backdrop-filter:blur(6px)}
.chart-modal-dialog{position:relative;width:min(1200px, calc(100vw - 32px));height:min(80vh, 820px);margin:5vh auto 0;background:linear-gradient(180deg, rgba(17,24,43,.98), rgba(10,15,28,.98));border:1px solid var(--line);border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden}
.chart-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:20px 22px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.chart-modal-head h3{margin:4px 0 0;font-size:24px;letter-spacing:-.03em}
.chart-modal-eyebrow{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.chart-modal-close{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);width:42px;height:42px;border-radius:12px;cursor:pointer;font-size:18px;line-height:1}
.chart-modal-close:hover{background:rgba(255,255,255,.08)}
.chart-modal-body{flex:1 1 auto;min-height:0;padding:20px}
.chart-modal-body canvas{width:100% !important;height:100% !important}
.miner-modal-dialog{height:min(88vh, 940px)}
.miner-modal-body{padding:20px;overflow:auto}
.miner-modal-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.miner-modal-stat{padding:14px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.miner-modal-stat span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
.miner-modal-stat strong{font-size:16px;line-height:1.3}
.miner-modal-stat strong.good{color:var(--good)} .miner-modal-stat strong.warn{color:var(--warn)} .miner-modal-stat strong.danger{color:var(--danger)} .miner-modal-stat strong.offline{color:#b0b9da}
.miner-modal-charts{display:grid;grid-template-columns:1fr;gap:16px}
.miner-modal-chart-card{height:280px}
body.modal-open{overflow:hidden}
.dense-mode .card{padding:14px}
.dense-mode .miners-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.terminal-mode{--cyan:#72ff98;--good:#72ff98;--muted:#8fb89a}
body.terminal-mode{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
@media (min-width:1100px){ .charts-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:980px){ .hero-top,.section-head{flex-direction:column;align-items:flex-start} .hero-side{min-width:0;align-items:flex-start} .hero-strip,.diagnostics-grid{grid-template-columns:1fr} .miner-modal-meta{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .lab-grid{grid-template-columns:1fr} }
@media (max-width:640px){ .wrap{padding:16px} .hero{padding:18px;border-radius:20px} .card{padding:16px;border-radius:18px} .miner-grid,.miner-prime,.miner-modal-meta{grid-template-columns:1fr} .metric-value{font-size:28px} .chart-modal-dialog{width:min(100vw - 16px, 1200px)} }


.heatmap-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;
}
.heatmap-card{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.03);
}
.heatmap-card.good{box-shadow:0 0 0 1px rgba(54,209,138,.08) inset}
.heatmap-card.warn{box-shadow:0 0 0 1px rgba(255,184,77,.08) inset}
.heatmap-card.danger{box-shadow:0 0 0 1px rgba(255,93,115,.08) inset}
.heatmap-card.offline{opacity:.72}
.heatmap-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
}
.heatmap-name{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em;
}
.heatmap-state{
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--line);
}
.heatmap-state.good{color:var(--good);border-color:rgba(54,209,138,.28)}
.heatmap-state.warn{color:var(--warn);border-color:rgba(255,184,77,.28)}
.heatmap-state.danger{color:var(--danger);border-color:rgba(255,93,115,.28)}
.heatmap-state.offline{color:#b0b9da}
.heatmap-cells{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.heat-cell{
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
}
.heat-cell span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.heat-cell strong{
  font-size:15px;
}
.heat-cell.good{box-shadow:0 0 0 1px rgba(54,209,138,.10) inset}
.heat-cell.warn{box-shadow:0 0 0 1px rgba(255,184,77,.10) inset}
.heat-cell.danger{box-shadow:0 0 0 1px rgba(255,93,115,.10) inset}
.heat-cell.offline{opacity:.65}
.crt-mode::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.03) 50%, rgba(0,0,0,0) 50%),
    linear-gradient(90deg, rgba(255,0,0,.03), rgba(0,255,0,.02), rgba(0,0,255,.03));
  background-size:100% 4px, 6px 100%;
  mix-blend-mode:screen;
  opacity:.18;
  z-index:10000;
}
.crt-mode::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center, transparent 55%, rgba(0,0,0,.24) 100%);
  z-index:10000;
}
.crt-mode .hero,
.crt-mode .card,
.crt-mode .chart-modal-dialog{
  box-shadow:0 0 0 1px rgba(114,255,152,.08) inset, 0 16px 40px rgba(0,0,0,.35);
}
.crt-mode .wrap{
  filter:saturate(1.05) contrast(1.03);
}


.miner-toolbar{
  display:flex;
  gap:12px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.miner-search,
.miner-filter{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:14px;
  padding:12px 14px;
  min-height:46px;
}
.miner-search{
  flex:1 1 280px;
}
.miner-filter{
  min-width:180px;
}
.miner-search::placeholder{
  color:var(--muted);
}
.miner-timeline-wrap{
  margin-top:12px;
}
.timeline-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(6px,1fr));
  gap:4px;
}
.timeline-dot{
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.05);
}
.timeline-dot.good{
  background:rgba(54,209,138,.9);
}
.timeline-dot.warn{
  background:rgba(255,184,77,.9);
}
.timeline-dot.danger{
  background:rgba(255,93,115,.9);
}
.timeline-dot.offline{
  background:rgba(176,185,218,.55);
}
.timeline-empty{
  color:var(--muted);
  font-size:13px;
}