:root {
  color-scheme: dark;
  --ink: #f7f4ff;
  --muted: #a8a1b8;
  --bg: #08070d;
  --panel: rgba(24, 20, 35, .76);
  --panel-strong: #17131f;
  --line: rgba(255,255,255,.10);
  --violet: #9d6bff;
  --pink: #ff4fa3;
  --cyan: #40e0ff;
  --lime: #a8ff78;
  --danger: #ff5364;
  --shadow: 0 22px 80px rgba(0,0,0,.42);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh; margin: 0; color: var(--ink); overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 6%, rgba(157,107,255,.22), transparent 30rem),
    radial-gradient(circle at 92% 18%, rgba(255,79,163,.17), transparent 34rem),
    radial-gradient(circle at 55% 100%, rgba(64,224,255,.10), transparent 34rem), var(--bg);
}
body::before {
  content:""; position: fixed; inset: 0; pointer-events:none; opacity:.18;
  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: 42px 42px; mask-image: linear-gradient(to bottom,#000,transparent 80%);
}
button,input,select,textarea { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1460px, 100%); margin: auto; padding: 22px clamp(16px,3vw,48px) 64px; position:relative; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.brand { display:flex; align-items:center; gap:13px; font-weight:800; letter-spacing:-.03em; font-size:1.05rem; }
.brand-mark { width:38px; height:38px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,var(--violet),var(--pink)); box-shadow:0 0 35px rgba(157,107,255,.42); }
.brand small { color:var(--muted); display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; margin-top:1px; }
.status-pill { display:flex; align-items:center; gap:8px; color:var(--muted); padding:9px 13px; border:1px solid var(--line); border-radius:999px; background:rgba(8,7,13,.6); font-size:.82rem; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--danger); box-shadow:0 0 12px currentColor; }
.status-dot.on { background:var(--lime); }
.hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:18px; margin-bottom:18px; }
.card { border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(22px); border-radius:24px; box-shadow:var(--shadow); overflow:hidden; }
.hero-main { padding:clamp(24px,4vw,54px); min-height:335px; position:relative; }
.eyebrow { color:var(--cyan); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; }
h1 { margin:10px 0 14px; font-size:clamp(2.6rem,7vw,6.4rem); line-height:.88; letter-spacing:-.075em; max-width:900px; }
h2 { margin:0 0 16px; font-size:1.15rem; letter-spacing:-.025em; }
h3 { margin:0; font-size:.92rem; }
p { color:var(--muted); line-height:1.55; }
.gradient-text { color:transparent; background:linear-gradient(90deg,#fff 5%,#c7b0ff 38%,#ff74b8 72%,#79eaff); background-clip:text; }
.hero-orb { position:absolute; right:-65px; bottom:-95px; width:310px; height:310px; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.34),rgba(157,107,255,.2) 18%,rgba(255,79,163,.08) 45%,transparent 68%); filter:blur(.2px); }
.now { padding:24px; display:flex; flex-direction:column; justify-content:space-between; min-height:335px; background:linear-gradient(155deg,rgba(157,107,255,.15),rgba(255,79,163,.06) 55%,transparent); }
.art { aspect-ratio:1.5; border-radius:18px; display:grid; place-items:center; background:radial-gradient(circle at 30% 30%,#d1b7ff,#7b3fff 30%,#e92f8f 66%,#160d25); box-shadow:inset 0 0 50px rgba(0,0,0,.28); font-size:3rem; }
.track-title { font-size:1.35rem; font-weight:800; margin-top:18px; letter-spacing:-.03em; }
.track-artist { color:var(--muted); margin-top:3px; }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.span-12 { grid-column:span 12; } .span-8 { grid-column:span 8; } .span-7 { grid-column:span 7; } .span-6 { grid-column:span 6; } .span-5 { grid-column:span 5; } .span-4 { grid-column:span 4; }
.section { padding:22px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.section-head p { margin:0; font-size:.78rem; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.metric { padding:15px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.025); }
.metric-label { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
.metric-value { font-size:1.55rem; font-weight:850; margin-top:5px; letter-spacing:-.04em; }
.energy-wrap { margin-top:20px; }
.energy-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:.76rem; margin-bottom:8px; }
.energy { height:12px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; position:relative; }
.energy > i { display:block; height:100%; width:35%; border-radius:inherit; background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink)); box-shadow:0 0 24px rgba(157,107,255,.65); transition:width .55s cubic-bezier(.2,.8,.2,1); }
.trajectory { display:flex; gap:6px; align-items:flex-end; height:70px; margin-top:18px; }
.trajectory i { flex:1; min-width:8px; border-radius:6px 6px 3px 3px; background:linear-gradient(to top,rgba(157,107,255,.28),var(--violet)); transition:height .4s; }
.actions { display:flex; flex-wrap:wrap; gap:9px; }
.button { border:1px solid var(--line); background:rgba(255,255,255,.055); color:var(--ink); padding:11px 15px; border-radius:13px; font-weight:750; transition:.18s ease; }
.button:hover { border-color:rgba(255,255,255,.24); transform:translateY(-1px); background:rgba(255,255,255,.09); }
.button.primary { border:0; color:#100b16; background:linear-gradient(100deg,#d1b7ff,var(--cyan)); box-shadow:0 10px 35px rgba(64,224,255,.16); }
.button.pink { border:0; background:linear-gradient(100deg,var(--violet),var(--pink)); }
.button.danger { color:#ffc4ca; border-color:rgba(255,83,100,.35); background:rgba(255,83,100,.08); }
.button.ghost { background:transparent; }
.button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field.full { grid-column:1/-1; }
label { color:var(--muted); font-size:.76rem; font-weight:700; }
input,select,textarea { width:100%; color:var(--ink); background:rgba(4,3,8,.72); border:1px solid var(--line); border-radius:13px; padding:12px 13px; outline:none; }
input:focus,select:focus,textarea:focus { border-color:rgba(157,107,255,.7); box-shadow:0 0 0 3px rgba(157,107,255,.12); }
textarea { min-height:78px; resize:vertical; }
.command { display:flex; gap:9px; }
.command input { flex:1; }
.list { display:flex; flex-direction:column; gap:9px; }
.section-head.compact { margin-top:20px; margin-bottom:10px; }
.section-head.compact h3 { color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; }
.library-preview { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:9px; margin-top:14px; }
.preview-track { padding:12px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); }
.preview-track.selected { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(64,224,255,.12); }
.preview-track strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preview-track small { color:var(--muted); }
.asset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:9px; }
.asset-card { padding:13px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); }
.asset-card .actions { margin-top:10px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; border-radius:15px; border:1px solid var(--line); background:rgba(255,255,255,.025); }
.row-main { min-width:0; }
.row-title { font-weight:760; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-sub { color:var(--muted); font-size:.75rem; margin-top:3px; }
.tag { display:inline-flex; align-items:center; padding:6px 9px; border-radius:999px; background:rgba(157,107,255,.12); color:#d7c7ff; font-size:.7rem; border:1px solid rgba(157,107,255,.2); }
.tag.good { background:rgba(168,255,120,.08); color:var(--lime); border-color:rgba(168,255,120,.17); }
.tag.warn { background:rgba(255,181,72,.08); color:#ffc66d; border-color:rgba(255,181,72,.2); }
.empty { padding:22px; border:1px dashed var(--line); border-radius:16px; color:var(--muted); text-align:center; font-size:.86rem; }
.health-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.health { display:flex; justify-content:space-between; gap:8px; padding:11px; border-radius:13px; background:rgba(255,255,255,.025); color:var(--muted); font-size:.8rem; }
.health b { color:var(--ink); }
.auth { min-height:75vh; display:grid; place-items:center; }
.auth-box { width:min(520px,100%); padding:34px; text-align:center; }
.auth-box h1 { font-size:3.2rem; max-width:none; }
.hidden { display:none !important; }
.toast { position:fixed; right:20px; bottom:20px; z-index:50; max-width:min(420px,calc(100vw - 40px)); padding:14px 17px; border:1px solid var(--line); border-radius:15px; background:#1a1523; box-shadow:var(--shadow); transform:translateY(140%); transition:.3s; }
.toast.show { transform:translateY(0); }
.toast.error { border-color:rgba(255,83,100,.5); }
.modal { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.7); backdrop-filter:blur(12px); }
.modal-card { width:min(470px,100%); padding:26px; text-align:center; }
.modal img { width:min(300px,85%); background:white; border-radius:20px; padding:14px; }
.modal code { display:block; word-break:break-all; color:var(--cyan); margin:16px 0; }
.guest-shell { width:min(680px,100%); margin:auto; padding:18px 16px 70px; }
.guest-hero { padding:28px; margin-bottom:14px; background:linear-gradient(145deg,rgba(157,107,255,.2),rgba(255,79,163,.08)); }
.guest-hero h1 { font-size:clamp(2.4rem,13vw,4.8rem); }
.guest-card { padding:20px; margin-top:14px; }
.vote-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.vote { min-height:72px; text-align:left; }
.vote strong { display:block; font-size:1rem; }
.vote small { color:var(--muted); }
.pulse { width:170px; height:170px; border-radius:50%; display:grid; place-items:center; margin:10px auto 22px; background:radial-gradient(circle,#d7c4ff 0 5%,#8651ff 13%,rgba(255,79,163,.55) 38%,rgba(157,107,255,.08) 61%,transparent 65%); animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform:scale(1.04); filter:hue-rotate(18deg); } }
.stage { height:100vh; display:grid; grid-template-columns:1.2fr .8fr; padding:5vw; gap:5vw; align-items:center; overflow:hidden; }
.stage h1 { font-size:clamp(4rem,10vw,10rem); }
.stage-art { aspect-ratio:1; border-radius:11%; background:radial-gradient(circle at 30% 30%,#d1b7ff,#7434ff 28%,#f23b97 62%,#150b24); box-shadow:0 0 120px rgba(157,107,255,.34); display:grid; place-items:center; font-size:9vw; }
.stage-meta { font-size:clamp(1.2rem,2.5vw,2.7rem); color:var(--muted); }
.stage-energy { margin-top:5vh; }
@media (max-width: 980px) {
  .hero { grid-template-columns:1fr; } .now { min-height:280px; }
  .span-12,.span-8,.span-7,.span-6,.span-5,.span-4 { grid-column:span 12; }
  .stage { grid-template-columns:1fr; text-align:center; } .stage-art { width:min(58vw,440px); margin:auto; }
}
@media (max-width: 620px) {
  .shell { padding-inline:13px; } .topbar { align-items:flex-start; } .status-pill { font-size:0; padding:10px; }
  .hero-main,.now,.section { padding:19px; } .hero-main { min-height:290px; }
  .form-grid,.metrics,.health-grid { grid-template-columns:1fr; } .field.full { grid-column:auto; }
  .command { flex-direction:column; } .actions .button { flex:1 1 42%; } .vote-grid { grid-template-columns:1fr 1fr; }
}