:root{
  --bg0: #050815;
  --bg1: radial-gradient(1200px 800px at 10% 10%, #0c1530 0%, rgba(5,8,21,0) 60%),
          radial-gradient(1000px 800px at 90% 80%, #160a2f 0%, rgba(5,8,21,0) 55%);
  --text: #e6ecff;
  --muted: #9aa4c7;
  --glass: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.12);
  --glow: 0 0 20px rgba(0, 229, 255, 0.35);
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  background: var(--bg0);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background-image: var(--bg1);
  background-attachment: fixed;
}

.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(16px, 4vw, 40px);
  position: sticky; top: 0;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(8,12,28,0.8), rgba(8,12,28,0.3));
  z-index: 10;
}

.brand{
  position: relative;
  padding-left: 14px;
}
.brand-glow{
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 32px;
  background: linear-gradient(180deg, #00e5ff, #ff3d81);
  box-shadow: 0 0 14px #00e5ff88, 0 0 28px #ff3d8188;
  border-radius: 6px;
}
h1{ margin: 0; font-size: clamp(20px, 3vw, 28px); letter-spacing: 0.5px; }
.subtitle{ margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.top-actions{ display: flex; gap: 10px; }
.btn-neo{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: 180ms ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.btn-neo:hover{ transform: translateY(-1px); box-shadow: var(--glow); }

#three-root{
  position: relative;
  width: 100%;
  height: min(74vh, 760px);
  margin: 12px auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(10,15,27,0.9), rgba(10,15,27,0.5));
}
#three-canvas, #labels-root, .fallback{
  position: absolute; inset: 0; width: 100%; height: 100%;
}
#three-canvas { z-index: 1; }
#labels-root { z-index: 2; }
.fallback { z-index: 0; }

.hidden{ display: none; }

.fallback{
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(10,15,27,0.9), rgba(10,15,27,0.7));
  padding: 24px;
}
.fallback h2{ margin-bottom: 8px; }

.cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: clamp(12px, 2vw, 16px);
  padding: 16px clamp(16px, 4vw, 40px) 40px;
}
@media (max-width: 1100px){
  .cards{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 640px){
  .cards{ grid-template-columns: 1fr; }
}

.card{
  position: relative;
  display: block;
  padding: 18px 16px 18px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  transition: 220ms ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35), var(--glow);
}
.card h3{ margin: 0 0 6px; font-size: 18px; letter-spacing: .3px; }
.card p{ margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.25; }
.card .chip{
  display: inline-block; font-size: 12px; color: #0a0f1b;
  background: var(--text); border-radius: 999px; padding: 6px 10px; font-weight: 600;
}

.card::before{
  content: "";
  position: absolute; inset: -2px;
  background: radial-gradient(500px 240px at 10% 10%, color-mix(in oklab, var(--accent), transparent 50%) 0%, transparent 55%),
              radial-gradient(400px 220px at 120% 120%, color-mix(in oklab, var(--accent), transparent 65%) 0%, transparent 60%);
  opacity: .35; pointer-events: none; z-index: -1;
}

.card-accent{
  position: absolute; inset: 0; z-index: -1; opacity: .1;
  background: linear-gradient(160deg, transparent, var(--accent) 120%);
  filter: blur(12px);
}

.footer{
  padding: 18px clamp(16px, 4vw, 40px) 40px;
  color: var(--muted);
  font-size: 12px;
  display: flex; justify-content: center;
  border-top: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(8,12,28,0.3), rgba(8,12,28,0.8));
}