:root{
  --bg:#0b1220; --panel:#0f172a; --muted:#94a3b8; --line:rgba(255,255,255,0.08);
  --mint:#00ffc6; --white:#f8fafc; --emerald:#10b981; --sky:#0ea5e9; --purple:#8b5cf6;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:linear-gradient(180deg,#020617,#0b1220);
  color:var(--white);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
.topbar{position:sticky;top:0;backdrop-filter:blur(8px);background:rgba(2,6,23,0.6);
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:16px 20px;z-index:10}
.brand{font-weight:700;letter-spacing:.2px}.mint{color:var(--mint)}
.actions{display:flex;gap:10px;align-items:center}
.badge{border:1px solid var(--line);padding:6px 10px;border-radius:999px;color:#cbd5e1;font-size:.85rem}
.container{max-width:1200px;margin:24px auto;padding:0 16px}
.card{background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:16px;padding:16px 16px 22px}
.hero .hero-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 10px}
.tag{border:1px solid var(--line);padding:6px 10px;border-radius:999px;color:#cbd5e1;font-size:.8rem;margin-left:8px}
.scene{width:100%;height:480px;border-radius:12px;border:1px solid var(--line);background:#071018}
.scene.small{height:320px}
.portal-legend{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,0.06);border:1px solid var(--line);padding:8px 12px;border-radius:999px;color:#e2e8f0}
.grid{display:grid;gap:12px;margin-top:12px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
.tile,.panel{background:rgba(255,255,255,0.03);border:1px solid var(--line);border-radius:14px;padding:14px}
.tile h3{margin:.2rem 0 .4rem}
.tile p{color:#cbd5e1}
.tile.emerald{box-shadow:0 0 0 1px rgba(16,185,129,.2) inset}
.tile.sky{box-shadow:0 0 0 1px rgba(14,165,233,.2) inset}
.tile.purple{box-shadow:0 0 0 1px rgba(139,92,246,.2) inset}
.btn{background:rgba(255,255,255,0.06);border:1px solid var(--line);color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,#0ea5e9,#10b981);border:0}
.btn.outline{background:transparent;border:1px solid var(--line)}
.tabbar{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:rgba(255,255,255,0.06);
  border:1px solid var(--line);border-radius:12px;padding:6px}
.tab{padding:10px;border-radius:10px;border:1px solid transparent;cursor:pointer}
.tab.active{border-color:rgba(0,255,200,.35);background:rgba(0,255,200,.08)}
.tabpane{display:none;margin-top:14px}.tabpane.active{display:block}
footer.footer{color:#94a3b8;text-align:center;padding:22px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-content{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:320px}
.modal-content input{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:#0b1324;color:#fff;margin:.3rem 0 1rem}
.row{display:flex;gap:10px}.row.end{justify-content:flex-end}
label{display:block;color:#cbd5e1;margin:.3rem 0 .2rem}
input[type="range"]{width:100%}
.toast{position:relative;padding:10px 12px;border-radius:10px;background:#062e2a;border:1px solid rgba(0,255,200,.3);color:#d1fae5;margin-top:10px}
@media (max-width:900px){.grid.two,.grid.three{grid-template-columns:1fr} .scene{height:360px}}