@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=Fira+Code:wght@400;500;600;700&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#030308;color:#e2e8f0;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}

:root{
  --gold:#D4AF37;--gold-dim:rgba(212,175,55,0.15);--gold-glow:rgba(212,175,55,0.3);
  --cyan:#22d3ee;--cyan-dim:rgba(6,182,212,0.08);--cyan-glow:rgba(6,182,212,0.2);
  --green:#22c55e;--green-dim:rgba(34,197,94,0.08);
  --red:#ff4444;--purple:#8A2BE2;--purple-dim:rgba(138,43,226,0.08);
  --bg-card:#0a0a14;--bg-card-hover:#0f0f1a;--border:#1a1a2e;--border-hover:#2a2a3e;
  --text-muted:#64748b;--text-dim:#94a3b8;
}

.sov-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:40px;
  background:linear-gradient(90deg,rgba(212,175,55,0.04),rgba(6,182,212,0.04));
  border-bottom:1px solid var(--border);
  font-family:'Fira Code',monospace;font-size:11px;color:var(--text-muted);
}
.sov-topbar a{color:var(--gold);transition:color 0.2s}
.sov-topbar a:hover{color:#f0d060}

.sov-header{
  background:linear-gradient(180deg,#0a0812 0%,#030308 100%);
  border-bottom:1px solid var(--gold-glow);
  padding:28px 24px 24px;text-align:center;
  position:relative;overflow:hidden;
}
.sov-header::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:200px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.sov-header h1{
  font-family:'Space Grotesk',sans-serif;color:var(--gold);
  font-size:1.6em;font-weight:700;letter-spacing:3px;text-transform:uppercase;
}
.sov-header .sub{color:var(--text-muted);font-size:0.75em;margin-top:6px;letter-spacing:1px;font-family:'Fira Code',monospace}
.sov-header .badge{
  display:inline-block;margin-top:10px;padding:4px 14px;
  background:var(--green-dim);border:1px solid rgba(34,197,94,0.3);
  border-radius:20px;font-size:0.65em;color:var(--green);
  font-family:'Fira Code',monospace;letter-spacing:1px;
}

.sov-nav{
  display:flex;justify-content:center;gap:6px;padding:10px 16px;
  background:#060610;border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.sov-nav a{
  padding:6px 16px;border-radius:20px;border:1px solid var(--border);
  background:var(--bg-card);color:var(--text-muted);cursor:pointer;
  font-size:0.72em;transition:all 0.2s;font-family:'Inter',sans-serif;
}
.sov-nav a:hover,.sov-nav a.active{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}

.sov-container{max-width:1100px;margin:0 auto;padding:20px 16px 80px}

.sov-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.sov-grid-2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.sov-grid-3{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}

.sov-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;padding:20px;transition:all 0.2s;position:relative;overflow:hidden;
}
.sov-card:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
.sov-card.gold{border-color:var(--gold-glow);background:linear-gradient(135deg,rgba(212,175,55,0.03),rgba(212,175,55,0.01))}
.sov-card.cyan{border-color:var(--cyan-glow);background:linear-gradient(135deg,rgba(6,182,212,0.03),rgba(6,182,212,0.01))}
.sov-card.purple{border-color:rgba(138,43,226,0.3);background:var(--purple-dim)}
.sov-card.span-2{grid-column:span 2}
.sov-card.clickable{cursor:pointer}
.sov-card.clickable:hover{border-color:var(--gold);transform:translateY(-1px)}

.sov-card h3{font-family:'Space Grotesk',sans-serif;color:var(--gold);font-size:0.85em;margin-bottom:10px;letter-spacing:1px;text-transform:uppercase}
.sov-card p{font-size:0.82em;color:var(--text-dim);line-height:1.6}
.sov-card .val{font-family:'Fira Code',monospace;font-size:1.6em;font-weight:700;color:var(--gold)}
.sov-card .val.cyan{color:var(--cyan)}
.sov-card .val.green{color:#22c55e}
.sov-card .label{font-size:0.7em;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px}
.sov-card .icon{font-size:1.8em;margin-bottom:8px}

.sov-stat{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.sov-stat:last-child{border:none}
.sov-stat .name{color:var(--text-muted);font-size:0.8em}
.sov-stat .value{font-family:'Fira Code',monospace;font-size:0.82em;font-weight:600}
.sov-stat .value.live{color:var(--green)}
.sov-stat .value.warn{color:#fbbf24}
.sov-stat .value.off{color:var(--red)}
.sov-stat .value.gold{color:var(--gold)}

.sov-console{
  background:#060610;font-family:'Fira Code',monospace;
  font-size:0.72em;color:var(--green);padding:16px;margin:16px 0;
  border-radius:8px;border:1px solid var(--border);line-height:1.9;
  max-height:300px;overflow-y:auto;
}
.sov-console .line{padding:1px 0}
.sov-console .dim{color:var(--text-muted)}
.sov-console .gold{color:var(--gold)}
.sov-console .cyan{color:var(--cyan)}
.sov-console .red{color:var(--red)}

.sov-section{margin:28px 0}
.sov-section h2{
  font-family:'Space Grotesk',sans-serif;color:var(--gold);
  font-size:0.9em;letter-spacing:2px;text-transform:uppercase;
  padding-bottom:10px;margin-bottom:16px;
  border-bottom:1px solid var(--border);
}

.sov-btn{
  padding:10px 24px;border-radius:8px;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:0.82em;font-weight:600;
  transition:all 0.2s;display:inline-flex;align-items:center;gap:8px;
}
.sov-btn.primary{background:var(--gold);color:#000}
.sov-btn.primary:hover{background:#e6c44a;transform:translateY(-1px)}
.sov-btn.secondary{background:transparent;color:var(--gold);border:1px solid var(--gold-glow)}
.sov-btn.secondary:hover{background:var(--gold-dim)}
.sov-btn.danger{background:rgba(255,68,68,0.1);color:var(--red);border:1px solid rgba(255,68,68,0.3)}
.sov-btn.danger:hover{background:rgba(255,68,68,0.2)}

.sov-modal{
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.85);z-index:200;justify-content:center;
  align-items:center;padding:20px;backdrop-filter:blur(8px);
}
.sov-modal.show{display:flex}
.sov-modal-content{
  background:#0a0a14;border:1px solid var(--gold-glow);border-radius:14px;
  padding:28px;width:100%;max-width:440px;position:relative;
}
.sov-modal-content h3{font-family:'Space Grotesk',sans-serif;color:var(--gold);margin-bottom:16px;font-size:1em;letter-spacing:1px}
.sov-modal-content input,.sov-modal-content select,.sov-modal-content textarea{
  width:100%;padding:12px;margin-bottom:12px;
  background:#060610;border:1px solid var(--border);color:#e2e8f0;
  border-radius:8px;font-size:0.85em;font-family:'Inter',sans-serif;
  transition:border-color 0.2s;
}
.sov-modal-content input:focus,.sov-modal-content select:focus,.sov-modal-content textarea:focus{border-color:var(--gold);outline:none}

.sov-list{list-style:none}
.sov-list li{
  padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.03);
  font-size:0.8em;display:flex;justify-content:space-between;align-items:center;
}
.sov-list li:hover{background:rgba(255,255,255,0.02)}

.sov-tag{
  display:inline-block;padding:3px 10px;border-radius:12px;
  font-size:0.65em;font-weight:600;letter-spacing:0.5px;
}
.sov-tag.live{background:var(--green-dim);color:var(--green);border:1px solid rgba(34,197,94,0.3)}
.sov-tag.warn{background:rgba(251,191,36,0.1);color:#fbbf24;border:1px solid rgba(251,191,36,0.3)}
.sov-tag.off{background:rgba(255,68,68,0.1);color:var(--red);border:1px solid rgba(255,68,68,0.3)}

.sov-loading{text-align:center;color:var(--text-muted);padding:40px;font-size:0.85em}
.sov-error{text-align:center;color:var(--red);padding:20px;font-size:0.85em}

@media(max-width:640px){
  .sov-grid-2,.sov-grid-3{grid-template-columns:1fr}
  .sov-card.span-2{grid-column:span 1}
  .sov-header h1{font-size:1.2em}
}