*{box-sizing:border-box; margin:0; padding:0;}
html,body{ height:100%; background:var(--bg); color:var(--text); font-family:'Share Tech Mono', monospace; }
@media (pointer:coarse){ body{ cursor:auto; } #cursor{ display:none !important; } }
button{ font-family:inherit; }
.hidden{ display:none !important; }
b{ color:var(--cyan-bright); font-weight:normal; }

/* ============ connection error banner ============ */
#connErr button{ color:var(--rose); text-decoration:underline; }
#connErr button:hover{ color:#fecdd3; text-shadow:0 0 8px rgba(251,113,133,.7); }

/* ============ cursor ============ */
#cursor{ position:fixed; top:0; left:0; width:18px; height:18px; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:screen; }
#cursor::before,#cursor::after{ content:''; position:absolute; background:var(--cyan); }
#cursor::before{ top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); box-shadow:0 0 6px var(--cyan); }
#cursor::after{ left:50%; top:0; height:100%; width:1px; transform:translateX(-50%); box-shadow:0 0 6px var(--cyan); }
#cursor .dot{ position:absolute; top:50%; left:50%; width:4px; height:4px; background:var(--magenta); box-shadow:0 0 8px 1px var(--magenta); transform:translate(-50%,-50%); }

/* ============ intro / boot ============ */
#constellation{ display:block; width:100%; height:100%; }
.bootLog .ok{ color:var(--cyan-bright); }
.bootLog .warn{ color:var(--rose); }
#introFoot{ position:absolute; bottom:18px; left:0; right:0; text-align:center; font-size:9px; letter-spacing:.35em; color:#1e293b; text-transform:uppercase; }
#introFoot span{ border-bottom:1px solid #1e293b; padding-bottom:2px; }
@keyframes blink{ 0%,100%{opacity:.25} 50%{opacity:1} }
.scanline-overlay{ position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to bottom, rgba(45,212,191,.03) 0, rgba(45,212,191,.03) 1px, transparent 1px, transparent 3px); }

/* ============ animated background: nebula + embers ============ */
.nebula span{ position:absolute; border-radius:50%; opacity:.8; will-change:transform; }
@keyframes driftA{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(6vw,8vw) scale(1.15);} }
@keyframes driftB{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-8vw,6vw) scale(1.1);} }
@keyframes driftC{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(5vw,-7vw) scale(1.2);} }

.ember.violet{ background:var(--violet-bright); box-shadow:0 0 10px 2px var(--violet-bright); }
@keyframes emberRise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:.55; }
  100%{ transform:translateY(-105vh) translateX(var(--drift,20px)); opacity:0; }
}

/* ============ main ============ */
#main.show{ opacity:1; }
/* no solid fill here - this sits above .nebula/.embers in paint order
   (same z-index, later in source) and would otherwise blank them out */
@keyframes gridDrift{ from{background-position:0 0,0 0;} to{background-position:0 840px,840px 0;} }

/* chassis bar, same beveled-metal language as the player header */
.linklike{ background:none; border:none; color:inherit; cursor:pointer; font-size:inherit; letter-spacing:inherit; text-transform:inherit; font-family:inherit; transition:color .2s, text-shadow .2s; }
.linklike:hover{ color:var(--cyan-bright); text-shadow:0 0 8px rgba(34,211,238,.5); }
.linklike.accent{ color:var(--cyan-dim); }

/* ============ HUD panel framing ============ */

/* ============ wordmark ============ */
.wordmark-wrap{ position:relative; display:inline-block; margin:0 auto; }
.wordmark::before,.wordmark::after{
  content:attr(data-text); position:absolute; top:0; left:0; width:100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; mix-blend-mode:screen;
}
.wordmark::before{ background:linear-gradient(100deg,#22d3ee,#22d3ee); animation:glx1 5s infinite steps(1); }
.wordmark::after{ background:linear-gradient(100deg,#f0abfc,#f0abfc); animation:glx2 5s infinite steps(1); }
@keyframes glx1{ 0%,90%,100%{transform:translate(0,0);opacity:0;} 92%{transform:translate(-2px,1px);opacity:.55;} 94%{transform:translate(2px,-1px);opacity:0;} 96%{transform:translate(-1px,-1px);opacity:.5;} }
@keyframes glx2{ 0%,90%,100%{transform:translate(0,0);opacity:0;} 93%{transform:translate(2px,-1px);opacity:.5;} 95%{transform:translate(-2px,1px);opacity:0;} 97%{transform:translate(1px,1px);opacity:.45;} }
.insta:hover{ color:var(--cyan-bright); text-shadow:0 0 8px rgba(34,211,238,.5); }
.ig-dot{ width:9px; height:9px; border:1px solid currentColor; border-radius:3px; display:inline-block; }

/* ============ player: oldschool winamp chassis ============ */
.pb-title{ text-shadow:0 1px 0 #000; }
.pb-status.live{ color:var(--cyan-bright); text-shadow:0 0 8px rgba(34,211,238,.7); }

.disc.playing{ animation-play-state:running; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.marquee{ overflow:hidden; flex:1; white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee span.still{ animation:none; padding-left:0; }
@keyframes scrollTxt{ to{ transform:translateX(-100%); } }


/* the element's own box is what browsers hit-test for touch, not just the
   visible track pixels - it was 4px tall before, making the sliders all
   but impossible to grab with a finger. Keeping the box 28px tall (with
   a transparent background) while drawing the thin visible track via the
   track pseudo-element gives a real touch target without changing the
   look. touch-action:none stops a slightly-diagonal drag from being
   read as a page scroll instead of a seek/volume drag on mobile. */
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:28px;
  background:transparent; outline:none; margin:0; padding:0; touch-action:none;
}


#volPct{ width:22px; text-align:right; color:var(--cyan-bright); }


#trackSearch::placeholder{ color:var(--muted2); }

.trackList::-webkit-scrollbar{ width:6px; }
.trackList::-webkit-scrollbar-thumb{ background:var(--cyan-dim); border-radius:3px; }
.trackRow .info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.trackRow .artist{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trackRow .plays{ letter-spacing:.05em; }
.trackRow .eq{ display:none; gap:2px; align-items:flex-end; height:10px; width:12px; flex:0 0 auto; }
.trackRow.active .eq{ display:flex; }
.trackRow .eq i{ width:2px; background:var(--cyan-bright); animation:eqbar .6s ease-in-out infinite; }
.trackRow .eq i:nth-child(2){ animation-delay:.15s; } .trackRow .eq i:nth-child(3){ animation-delay:.3s; }
@keyframes eqbar{ 0%,100%{height:25%;} 50%{height:100%;} }
.trackRow:hover .actions{ opacity:1; }
.trackRow.active .actions{ opacity:1; }
.trackRow button.fav.active{ color:var(--rose); text-shadow:0 0 6px rgba(251,113,133,.5); }
.trackRow button.del:hover{ color:var(--rose); }
.trackRow button.share.copied{ color:var(--violet-bright); }
.trackRow.queued{ box-shadow:inset 3px 0 0 var(--violet-bright); }
.trackRow.queued .idx{ color:var(--violet-bright); }

.note a{ color:var(--cyan-dim); text-decoration:none; }
.note a:hover{ color:var(--cyan-bright); text-decoration:underline; }

/* ============ up-next queue ============ */
.queueChip + .queueChip{ border-top:1px solid #14161d; }
.queueChipN{ color:var(--violet-bright); font-size:10px; flex:0 0 auto; width:14px; }
.queueChipTtl{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queueChipRm{ background:none; border:none; cursor:pointer; color:var(--muted2); font-size:12px; padding:2px 4px; transition:color .15s; }
.queueChipRm:hover{ color:var(--rose); }


/* ============ modal ============ */
#modalBody input, #modalBody textarea, #modalBody select{ width:100%; background:#010208; border:1px solid var(--line); border-radius:7px; padding:11px 12px; font-size:13px; color:var(--text); font-family:inherit; outline:none; margin-bottom:12px; transition:border-color .2s,box-shadow .2s; }
#modalBody input::placeholder, #modalBody textarea::placeholder{ color:var(--muted2); }
#modalBody input:focus, #modalBody textarea:focus, #modalBody select:focus{ border-color:var(--cyan); box-shadow:0 0 12px -4px var(--cyan); }
#modalBody textarea{ resize:vertical; min-height:80px; font-family:inherit; }
#modalBody select{ cursor:pointer; padding-right:28px; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23a78bfa"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>'); background-repeat:no-repeat; background-position:right 8px center; background-size:16px; padding-right:32px; }
#modalBody button.primary:disabled{ opacity:.5; cursor:default; box-shadow:none; }
.formErr{ font-size:12px; color:var(--rose); margin-bottom:12px; min-height:16px; padding:8px 0; }
.formHint{ font-size:11px; color:var(--muted); margin-bottom:14px; line-height:1.6; }

.rosterGrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; max-height:340px; overflow-y:auto; padding-right:2px; }
.rosterCell{ position:relative; font-size:9px; border-radius:7px; padding:8px 4px 7px; border:1px solid var(--line); background:#020410; color:var(--muted2); text-align:center; overflow:hidden; transition:all .15s; }
.rosterCell .ruid{ display:block; font-size:8px; color:var(--muted2); margin-bottom:3px; letter-spacing:.04em; }
.statsGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:10px; margin-bottom:16px; }
.statCell{ border:1px solid var(--line); border-radius:8px; padding:14px 10px; text-align:center; background:#020410; transition:all .15s; }
.statCell:hover{ border-color:var(--cyan-dim); box-shadow:0 0 12px -6px var(--cyan); }
.statN{ display:block; font-family:'Orbitron',monospace; font-size:1.3rem; color:var(--cyan-bright); text-shadow:0 0 10px rgba(34,211,238,.4); margin-bottom:4px; }
.statL{ display:block; font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted2); font-weight:500; }
.rosterCell.filled{ color:var(--cyan); cursor:pointer; transition:all .12s; }
.rosterCell.filled .ruid{ color:var(--cyan-dim); }
.rosterCell.filled:hover{ border-color:var(--cyan); box-shadow:0 0 12px -4px var(--cyan); background:rgba(34,211,238,.04); }
.rosterCell .rname{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.rosterCell.banned{ border-color:var(--rose); background:rgba(251,113,133,.08); }
.rosterCell.banned .rname{ color:var(--rose); text-decoration:line-through; }
.bannedTag{
  display:inline-block; margin-top:3px; font-size:7px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:#020410; background:var(--rose); border-radius:3px; padding:1px 5px;
  animation:bannedWiggle 1.6s ease-in-out infinite; text-shadow:none;
}
.profileUid .bannedTag{ font-size:9px; padding:2px 7px; vertical-align:middle; }
@keyframes bannedWiggle{
  0%,100%{ transform:rotate(-3deg) scale(1); }
  25%{ transform:rotate(3deg) scale(1.05); }
  50%{ transform:rotate(-2deg) scale(1); }
  75%{ transform:rotate(2deg) scale(1.05); }
}

.profileCard{ display:flex; gap:16px; align-items:flex-start; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid #14161d; }
.profileInfo{ flex:1; }
.profileUid{ color:var(--cyan-bright); font-size:15px; font-weight:600; margin-bottom:4px; }
.profileMeta{ font-size:11px; color:var(--muted); letter-spacing:.05em; }
.profileBio{ font-size:12px; color:var(--text); min-height:auto; margin:12px 0; line-height:1.6; white-space:pre-wrap; }
.profileLabel{ font-size:11px; text-transform:uppercase; letter-spacing:.15em; color:var(--muted2); padding-top:14px; margin-bottom:8px; margin-top:8px; font-weight:600; }
.profileFav{ font-size:12px; color:var(--violet-bright); font-weight:500; }

@media (max-width:640px){
  .wrap{ padding-top:2px; }
  .player{ margin-top:8px; }
  .rosterGrid{ grid-template-columns:repeat(4,1fr); }
  .nebula{ filter:blur(40px) saturate(130%); }
}

@media (prefers-reduced-motion: reduce){
  .nebula span, .ember, .grid-bg, .disc, .wordmark::before, .wordmark::after, .marquee span, .bannedTag, .onlineDot.playing{ animation:none !important; }
}

/* ============ admin console + invites ============ */
.fileInput{ font-size:11px; color:var(--muted); }
.fileInput::file-selector-button:hover{
  background:linear-gradient(135deg,#0a9cc4,#5b2493); color:var(--cyan-bright); box-shadow:0 0 12px -4px var(--cyan);
}
.adminRow{ display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.adminRow .primary{ flex:1; min-width:140px; }
.adminMsg{ color:var(--cyan-bright); font-weight:500; font-size:12px; }
.inviteList{ max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:7px; }
.onlineDot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--muted2); transition:all .15s; }
.onlineDot.playing{ background:var(--cyan-bright); box-shadow:0 0 8px var(--cyan-bright); animation:onlinePulse 1.6s ease-in-out infinite; }
@keyframes onlinePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.inviteRow{
  display:flex; align-items:center; gap:11px; font-size:11px;
  border:1px solid var(--line); border-radius:7px; padding:10px 12px; background:#020410;
  transition:all .12s;
}
.inviteRow:hover:not(.used){ border-color:var(--cyan-dim); background:rgba(34,211,238,.04); }
.inviteRow.used{ opacity:.5; }
.inviteCode{
  font-family:'Share Tech Mono', monospace; letter-spacing:.12em; color:var(--cyan-bright); cursor:pointer;
  transition:all .2s; padding:3px 6px; border-radius:4px;
}
.inviteCode:hover{ color:var(--cyan); text-shadow:0 0 8px rgba(34,211,238,.6); background:rgba(34,211,238,.08); }
.inviteCode.copied{ color:var(--violet-bright); }
.inviteWho{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.inviteState{ margin-left:auto; color:var(--muted2); font-size:10px; text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; }
.inviteRow:not(.used) .inviteState{ color:var(--violet-bright); font-weight:500; }

.playlistList{ max-height:240px; overflow-y:auto; display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.playlistRow{
  display:flex; align-items:center; gap:11px; font-size:11px;
  border:1px solid var(--line); border-radius:7px; padding:10px 12px; background:#020410;
  transition:all .12s;
}
.playlistRow:hover:not(.live){ border-color:var(--line); background:rgba(34,211,238,.03); }
.playlistRow.live{ border-color:var(--cyan-dim); box-shadow:0 0 12px -6px var(--cyan); background:rgba(34,211,238,.05); }
.playlistName{ flex:1; min-width:0; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.playlistRow.live .playlistName{ color:var(--cyan-bright); }
.playlistCount{ color:var(--muted2); font-size:10px; white-space:nowrap; }
.playlistActions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.playlistActions .linklike{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; padding:4px 8px; border-radius:4px; transition:all .12s; }
.playlistActions .linklike:hover{ color:var(--cyan-bright); background:rgba(34,211,238,.08); }
.playlistLiveBadge{ color:var(--cyan-bright); font-size:9px; text-transform:uppercase; letter-spacing:.12em; text-shadow:0 0 8px rgba(34,211,238,.5); font-weight:600; }
.plCreateRow{ display:flex; gap:10px; margin-bottom:16px; align-items:center; }
.plCreateRow input{ flex:1; min-width:0; margin-bottom:0; }
#modalBody .plCreateRow button.primary{ flex:0 0 auto; width:auto; white-space:nowrap; }
#modalBody .plCreateRow select{ flex:0 0 auto; width:auto; margin-bottom:0; }

/* ============ admin: accounts / moderation ============ */
.acctList{ max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.acctCard{ border:1px solid var(--line); border-radius:8px; padding:11px 13px; background:#020410; font-size:11px; transition:all .12s; }
.acctCard:hover{ border-color:var(--line); background:#0d0e14; }
.acctCard.is-admin{ border-color:var(--cyan-dim); box-shadow:0 0 12px -6px var(--cyan); background:rgba(34,211,238,.04); }
.acctCard.is-banned{ border-color:var(--rose); box-shadow:0 0 12px -6px rgba(251,113,133,.6); background:rgba(251,113,133,.05); }
.acctTop{ display:flex; align-items:center; gap:10px; }
.acctName{ flex:1; min-width:0; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.acctRole{ font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted2); white-space:nowrap; font-weight:600; }
.acctRole.admin{ color:var(--cyan-bright); }
.acctRole.moderator{ color:var(--violet-bright); }
.acctRole.banned{ color:var(--rose); }
.acctMeta{ margin-top:7px; font-size:10px; color:var(--muted2); line-height:1.5; }
.acctActions{ display:flex; align-items:center; gap:10px; margin-top:9px; flex-wrap:wrap; }
.acctActions .linklike{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; padding:4px 8px; border-radius:4px; transition:all .12s; }
.acctActions .linklike:hover{ background:rgba(167,139,250,.08); color:var(--cyan-bright); }
.acctActions .linklike.danger{ color:var(--rose); }
.acctActions .linklike.danger:hover{ background:rgba(251,113,133,.08); text-shadow:0 0 8px rgba(251,113,133,.5); }
.acctActions select{ width:auto; margin-bottom:0; font-size:10px; padding:5px 8px; }

/* ============ banned screen (full-page block) ============ */
.bannedBox h2{
  font-family:'Orbitron','Rajdhani',sans-serif; font-weight:900; font-size:1.5rem; color:var(--rose);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; text-shadow:0 0 22px rgba(251,113,133,.55);
}
.bannedBox p{ font-size:12px; color:var(--muted); line-height:1.7; }
.bannedBox a{ color:var(--rose); }

/* ============ mega upload ============ */
.megaList{ max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.megaRow{
  display:flex; align-items:center; gap:11px; font-size:11px;
  border:1px solid var(--line); border-radius:7px; padding:9px 12px; background:#020410;
  transition:all .12s;
}
.megaRow:hover{ border-color:var(--line); background:#0d0e14; }
.megaName{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-weight:500; }
.megaStatus{ flex:0 0 auto; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted2); white-space:nowrap; font-weight:500; }
.megaRow.mega-active .megaStatus{ color:var(--violet-bright); animation:pulse 1s ease-in-out infinite; }
.megaRow.mega-done{ opacity:.7; }
.megaRow.mega-done .megaStatus{ color:var(--cyan-bright); font-weight:600; }
.megaRow.mega-rejected .megaStatus,.megaRow.mega-failed .megaStatus{ color:var(--rose); font-weight:600; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.6} }

/* ========================================================================
   BONSKO CLIENT / REDESIGN 03
   2018 private-lobby utility aesthetic: centered, tactical, hardware-first
   ======================================================================== */
:root{
  --bg: #01030b;
  --bg2: #040817;
  --panel: rgba(3,7,18,.9);
  --cyan: #22d3ee;
  --cyan-bright: #67e8f9;
  --cyan-dim: #0e7490;
  --violet: #a78bfa;
  --violet-bright: #c4b5fd;
  --magenta: #f0abfc;
  --text: #cbd5e1;
  --muted: #64748b;
  --muted2: #334155;
  --rose: #fb7185;
  --line: #102b3b;
  --metal1: #2a2f3a;
  --metal2: #12141b;
  --bass: 0;
  /* driven by JS: 0..1 bass level */;
  --metal-hi: #485164;
  --metal-mid: #252b36;
  --metal-low: #10131a;
  --inset: #010307;
  --cyan-soft: rgba(34,211,238,.12);
  --violet-soft: rgba(167,139,250,.12);
  --rose-soft: rgba(251,113,133,.11);
}

html{ scrollbar-color:var(--cyan-dim) #02040a; scrollbar-width:thin; }
body{
  cursor: none;
  overflow-x: hidden;
  min-width: 320px;
  background: radial-gradient(ellipse at 50% -10%, rgba(14,116,144,.17), transparent 45%),
    linear-gradient(180deg,#020511 0%,#01030a 58%,#000208 100%);
}
body::before{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.28;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;
}
button,input,textarea,select{ -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[role="button"]:focus-visible{
  outline:1px solid var(--cyan-bright); outline-offset:3px;
}

/* connection strip */
#connErr{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 18px;
  font-size: 11px;
  letter-spacing: .12em;
  background: repeating-linear-gradient(135deg,#27070e 0 8px,#20060c 8px 16px);
  border-bottom: 1px solid var(--rose);
  color: var(--rose);
  box-shadow: 0 8px 30px -16px rgba(251,113,133,.9);
  min-height: 34px;
  text-transform: uppercase;
}

/* boot terminal */
#intro{
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 45%,rgba(6,78,96,.16),transparent 42%),
    #000207;
  z-index: 500;
  transition: opacity .8s ease;
  overflow: hidden;
}
.bootLog{
  position: absolute;
  top: max(24px,env(safe-area-inset-top));
  left: 24px;
  right: 24px;
  font-size: 12px;
  line-height: 1.8;
  color: #3ddbd1;
  text-shadow: 0 0 8px rgba(45,212,191,.4);
  pointer-events: none;
  white-space: pre-wrap;
  letter-spacing: .04em;
}
.introHint{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(46px);
  font-size: 12px;
  letter-spacing: .42em;
  color: var(--cyan-bright);
  text-transform: uppercase;
  animation: blink 1.8s ease-in-out infinite;
  text-shadow: 0 0 16px rgba(34,211,238,.72);
  padding: 12px 20px;
}
.introHint::before{ content:'// '; color:var(--muted2); }
.introHint::after{ content:' //'; color:var(--muted2); }

/* atmosphere */
.nebula{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  filter: blur(78px) saturate(135%);
  opacity: .52;
}
.nebula span:nth-child(1){
  width: 46vw;
  height: 46vw;
  left: -10vw;
  top: -8vw;
  background: radial-gradient(circle,#4c1d95 0%,#281251 42%,transparent 72%);
  animation: driftA 26s ease-in-out infinite;
}
.nebula span:nth-child(2){
  width: 40vw;
  height: 40vw;
  right: -8vw;
  top: 6vw;
  background: radial-gradient(circle,#0891b2 0%,#164e63 38%,transparent 72%);
  animation: driftB 32s ease-in-out infinite;
}
.nebula span:nth-child(3){
  width: 38vw;
  height: 38vw;
  left: 18vw;
  bottom: -12vw;
  background: radial-gradient(circle,#9d174d 0%,#4c0519 38%,transparent 72%);
  animation: driftC 38s ease-in-out infinite;
  opacity: .38;
}
.nebula span:nth-child(4){
  width: 30vw;
  height: 30vw;
  right: 8vw;
  bottom: -2vw;
  background: radial-gradient(circle,#4338ca 0%,#1e1b4b 42%,transparent 72%);
  animation: driftA 22s ease-in-out infinite reverse;
}
.embers{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .52;
}
.ember{
  position: absolute;
  bottom: -10px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--cyan-bright);
  box-shadow: 0 0 8px 1px var(--cyan-bright);
  opacity: 0;
  animation: emberRise linear infinite;
}
.grid-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(rgba(34,211,238,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,.045) 1px,transparent 1px),
    linear-gradient(90deg,transparent 49.8%,rgba(34,211,238,.07) 50%,transparent 50.2%);
  background-size: 56px 56px,56px 56px,100% 100%;
  animation: gridDrift 40s linear infinite;
  opacity: .72;
  -webkit-mask-image: radial-gradient(ellipse 68% 95% at 50% 38%,#000 25%,transparent 82%);
  mask-image: radial-gradient(ellipse 68% 95% at 50% 38%,#000 25%,transparent 82%);
}
#main{
  position: relative;
  min-height: 100vh;
  opacity: 0;
  transition: opacity 1s ease;
  padding: 36px 16px 72px;
}
#main::after{
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,rgba(0,0,0,.46),transparent 18%,transparent 82%,rgba(0,0,0,.46)),
    radial-gradient(ellipse at center,transparent 48%,rgba(1,3,11,.55) 100%);
}
.wrap{
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}
.wrap::before{
  content:''; position:absolute; z-index:-1; top:-18px; bottom:-24px; left:50%; width:1px;
  background:linear-gradient(transparent,rgba(34,211,238,.12) 8%,rgba(34,211,238,.06) 92%,transparent);
  box-shadow:0 0 34px rgba(34,211,238,.14);
}

/* two-line lobby navigation, derived from the supplied header reference */
.topbar{
  display: grid;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 20px;
  background: repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#424b5d 0,#292f3b 13%,#171b23 58%,#101219 100%);
  border: 1px solid #030409;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.72),
    0 0 0 1px rgba(87,97,119,.28),
    0 18px 38px -28px rgba(34,211,238,.68);
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #dbe6ee;
  position: relative;
  grid-template-columns: 1fr;
  overflow: hidden;
  margin: 0 auto 18px;
  font-family: 'Rajdhani',sans-serif;
  font-weight: 700;
}
.topbar::after{
  content:''; position:absolute; left:18px; right:18px; top:36px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(103,232,249,.2),transparent);
}
.topbar-chrome{
  display:flex; justify-content:space-between; align-items:center; min-height:28px; padding:0 20px;
  border-bottom:1px solid rgba(0,0,0,.7); color:#747f91; background:rgba(4,6,10,.28);
  font:600 8px/1 'Share Tech Mono',monospace; letter-spacing:.2em;
}
.topbar-left,.topbar-right{
  display:flex; align-items:center; min-height:48px; padding:0 28px; gap:30px; flex-wrap:wrap;
}
.topbar-left{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(0,0,0,.56);
}
.topbar-right{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 50px;
}
.topbar .linklike{ position:relative; color:#e1e8ef; }
.topbar .linklike::after{
  content:''; position:absolute; left:50%; bottom:-8px; width:0; height:1px; background:var(--cyan-bright);
  transform:translateX(-50%); box-shadow:0 0 7px var(--cyan); transition:width .16s ease;
}
.topbar .linklike:hover::after{ width:78%; }
.topbar .linklike:hover{ color:var(--cyan-bright); }
#authArea{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
#authArea .linklike{ margin-left:0 !important; }
.topbar-status{
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cyan-bright);
  text-shadow: 0 0 8px rgba(34,211,238,.5);
  margin-left: auto;
}
.topbar-status .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan-bright);
  box-shadow: 0 0 5px var(--cyan),0 0 14px rgba(34,211,238,.82);
  flex: 0 0 auto;
}

/* common chassis */
.panel{
  position: relative;
  border: 1px solid #303847;
  border-radius: 8px;
  background: repeating-linear-gradient(180deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,rgba(12,17,27,.97),rgba(3,6,13,.97));
  backdrop-filter: blur(8px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 0 0 1px rgba(0,0,0,.8),
    0 22px 52px -32px rgba(0,0,0,.98),
    0 0 calc(22px + (var(--bass) * 24px)) rgba(34,211,238,calc(.035 + (var(--bass) * .14)));
  margin-bottom: 18px;
  transition: box-shadow .08s linear;
}
.panel::after{
  content:''; position:absolute; inset:5px; border:1px solid rgba(77,88,108,.12); border-radius:4px; pointer-events:none;
}
.hud .hud-b{
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid var(--cyan);
  pointer-events: none;
  opacity: .82;
  transition: opacity .08s linear, border-color .08s linear;
  z-index: 4;
  border-color: var(--cyan-dim);
}
.hud .hud-b.tl{
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}
.hud .hud-b.tr{
  top: -1px;
  right: -1px;
  border-left: 0;
  border-bottom: 0;
}
.hud .hud-b.bl{
  bottom: -1px;
  left: -1px;
  border-right: 0;
  border-top: 0;
}
.hud .hud-b.br{
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

/* identity header */
.wordmarkPanel{
  text-align: center;
  padding: 38px 42px 28px;
  overflow: hidden;
  background: linear-gradient(90deg,transparent,rgba(34,211,238,.035) 50%,transparent),
    repeating-linear-gradient(180deg,rgba(255,255,255,.016) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,rgba(9,15,27,.95),rgba(2,5,13,.96));
}
.wordmarkPanel::before{
  content:''; position:absolute; left:0; right:0; top:29px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.2) 20%,rgba(34,211,238,.2) 80%,transparent);
}
.wordmark-kicker{
  display:flex; justify-content:space-between; margin:-18px 0 28px; color:#465367;
  font:600 10px/1 'Share Tech Mono',monospace; letter-spacing:.19em;
}
.wordmark-wrap::before,.wordmark-wrap::after{
  content:''; position:absolute; top:50%; width:54px; height:1px; background:linear-gradient(90deg,transparent,var(--cyan-dim));
}
.wordmark-wrap::before{ right:calc(100% + 22px); }
.wordmark-wrap::after{ left:calc(100% + 22px); transform:rotate(180deg); }
.wordmark{
  position: relative;
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.35rem,7.2vw,3.75rem);
  line-height: .95;
  letter-spacing: .035em;
  background: linear-gradient(180deg,#f7fbff 8%,#c8f8ff 42%,#9acfdc 51%,#d8c9ff 73%,#b7a6e5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #07121d) drop-shadow(0 0 17px rgba(34,211,238,.2));
}
.tagline{
  margin-top: 13px;
  font-size: 10px;
  letter-spacing: .34em;
  color: #778398;
  text-transform: uppercase;
}
.insta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  font-size: 11px;
  letter-spacing: .15em;
  color: #566174;
  text-decoration: none;
  transition: color .2s,text-shadow .2s;
}
.nodeTelemetry{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:27px -42px -28px;
  border-top:1px solid #182331; background:#101721;
}
.nodeTelemetry span{
  padding:10px 8px; background:rgba(1,4,10,.8); color:#4b5668; text-transform:uppercase;
  font:600 8px/1.2 'Share Tech Mono',monospace; letter-spacing:.13em;
}
.nodeTelemetry b{ margin-right:5px; color:var(--cyan-dim); }

/* main hardware player */
.player{
  overflow: hidden;
  border: 1px solid #3a4150;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px),
    linear-gradient(180deg, #14161d, #0a0b10);
  border-color: #414a5b;
  border-radius: 8px;
}
.player-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  background: repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#4a5468 0,#303745 16%,#1a1f29 58%,#11141b 100%);
  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.75);
  font-size: 12px;
  letter-spacing: .22em;
  color: #dbe6ee;
  min-height: 42px;
  font-family: 'Rajdhani',sans-serif;
  font-weight: 700;
}
.pb-title small{ color:#778295; font:500 8px/1 'Share Tech Mono',monospace; letter-spacing:.12em; }
.pb-status{
  color: var(--muted);
  font-family: 'Share Tech Mono',monospace;
  display: flex;
  align-items: center;
  min-width: 62px;
  justify-content: flex-end;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .18em;
}
.deck{
  display: grid;
  gap: 18px;
  padding: 14px;
  align-items: stretch;
  grid-template-columns: 116px minmax(0,1fr);
  margin: 14px 16px 10px;
  border: 1px solid #05070b;
  border-top-color: #303846;
  background: linear-gradient(135deg,rgba(34,211,238,.025),transparent 35%),
    repeating-linear-gradient(180deg,#080a10 0 2px,#07090e 2px 4px);
  box-shadow: inset 0 0 0 1px #131923,inset 0 12px 32px rgba(0,0,0,.65);
}
.disc-module{
  position:relative; min-height:122px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-right:1px solid #1c2632; padding-right:18px;
}
.module-label,.module-code{
  position:absolute; left:0; right:18px; text-align:center; color:#465165;
  font:600 9px/1 'Share Tech Mono',monospace; letter-spacing:.14em;
}
.module-label{ top:0; }
.module-code{ bottom:0; }
.disc{
  position: relative;
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 2deg,#08090c 0deg 4deg,#20232b 4deg 8deg),
    radial-gradient(circle,#262b34 0 8%,#08090d 9% 28%,#171a20 29% 52%,#050609 53%);
  box-shadow: 0 0 0 4px #0a0c11,0 0 0 5px #333a46,0 0 22px -6px rgba(34,211,238,.65),inset 0 0 18px #000;
  animation: spin 5s linear infinite;
  animation-play-state: paused;
  border: 1px solid #000;
}
.disc-core{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%,#758093,#242933 43%,#08090c 70%);
  border: 1px solid #000;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 4px rgba(34,211,238,.6);
}
.deck-info{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.lcd-top{
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #3f6f7a;
  letter-spacing: .18em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
#lcdState{
  color: var(--cyan-bright);
  text-shadow: 0 0 6px rgba(34,211,238,.55);
}
.lcd-main{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 8px;
  background: repeating-linear-gradient(180deg,rgba(34,211,238,.025) 0 1px,transparent 1px 3px),#010407;
  border: 1px solid #0a3341;
  border-radius: 1px;
  padding: 7px 12px;
  box-shadow: inset 0 0 20px #000,0 0 18px -12px var(--cyan);
  min-height: 50px;
}
.lcd-main #curTime{
  color: var(--cyan-bright);
  font-size: 1.35rem;
  text-shadow: 0 0 8px rgba(34,211,238,.75);
  flex: 0 0 auto;
  font-family: 'Orbitron',monospace;
  min-width: 98px;
  letter-spacing: .02em;
}
.marquee span{
  display: inline-block;
  color: var(--cyan-bright);
  text-shadow: 0 0 6px rgba(34,211,238,.6);
  font-size: 13px;
  padding-left: 100%;
  animation: scrollTxt 12s linear infinite;
  letter-spacing: .07em;
}
.viz{
  display: block;
  width: 100%;
  height: 52px;
  background: #010409;
  border: 1px solid #082735;
  border-radius: 1px;
  margin-top: 4px;
  box-shadow: inset 0 0 16px #000;
}
.audioErr{
  padding: 0 18px;
  font-size: 10px;
  color: var(--rose);
}
.seekrow{
  padding: 5px 24px 0;
}
.timerow{
  display: flex;
  justify-content: space-between;
  padding: 0 24px 4px;
  font-size: 8px;
  color: var(--muted);
  letter-spacing: .1em;
}
input[type=range]::-webkit-slider-runnable-track{
  height: 3px;
  background: #000;
  border: 1px solid #062035;
  border-radius: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.8);
  border-color: #102632;
}
input[type=range]::-moz-range-track{
  height: 3px;
  background: #000;
  border: 1px solid #062035;
  border-radius: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.8);
  border-color: #102632;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  background: linear-gradient(180deg,#d1fbff 0,#51def1 32%,#109bb4 100%);
  box-shadow: 0 0 8px var(--cyan), inset 0 1px 0 rgba(255,255,255,.6);
  border: 1px solid #04303d;
  border-radius: 2px;
  cursor: pointer;
  margin-top: -8px;
  border-color: #175666;
}
input[type=range]::-moz-range-thumb{
  width: 17px;
  height: 17px;
  border: 1px solid #04303d;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  border-radius: 2px;
  cursor: pointer;
}
.controls{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  padding: 10px 18px 3px;
}
.controls button{
  background: linear-gradient(180deg,#586276 0,#363d4c 16%,#242934 48%,#14171e 100%);
  border: 1px solid #05060a;
  border-top-color: #697387;
  border-left-color: #525b6c;
  color: #dbe6ee;
  border-radius: 3px;
  cursor: pointer;
  transition: .12s;
  box-shadow: 0 3px 0 #030407,inset 0 1px 0 rgba(255,255,255,.14);
  position: relative;
  border-color: #050609;
  font-family: 'Rajdhani',sans-serif;
  font-weight: 900;
}
.ctl-sm{
  width: 48px;
  height: 38px;
  font-size: 15px;
}
.ctl-play{
  width: 72px;
  height: 44px;
  font-size: 16px;
  color: #eafaff;
}
.controls button:hover{
  color: var(--cyan-bright);
  text-shadow: 0 0 6px rgba(34,211,238,.7);
  border-top-color: #a2aec4;
  background: linear-gradient(180deg,#677289,#3b4353 20%,#242a34 58%,#171a21);
}
.controls button.on{
  background: linear-gradient(180deg,#124b59,#092a34 52%,#06151c);
  color: var(--cyan-bright);
  box-shadow: 0 0 10px -2px var(--cyan), inset 0 1px 0 rgba(255,255,255,.1);
  border-color: #0b4c5b;
}
.controls button:active{
  transform: translateY(2px);
  box-shadow: 0 1px 0 #000;
}
.controlLegend{
  display:grid; grid-template-columns:48px 48px 72px 48px 48px; justify-content:center; gap:11px;
  padding:6px 18px 4px; color:#374253; text-align:center; font-size:7px; letter-spacing:.12em;
}
.legend-main{ color:#426d78; }
.volrow{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1px 24px 14px;
  font-size: 8px;
  color: var(--muted);
  letter-spacing: .15em;
}

/* playlist command surface */
.libHead{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 18px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #313847;
  background: linear-gradient(180deg,#303744,#20252f 18%,#161a21 100%);
  font-size: 11px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #8590a2;
  min-height: 44px;
  font-family: 'Rajdhani',sans-serif;
  font-weight: 700;
}
.libIdentity{ display:flex; align-items:center; gap:9px; }
.libIdentity i{ width:6px; height:6px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.libBtns{
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.libBtns .linklike{ font-size:9px; }
.searchRow{
  padding: 10px 18px;
  border-bottom: 1px solid #111a24;
  background: #06080d;
  display: flex;
  align-items: center;
  gap: 10px;
}
.searchPrompt{ color:var(--cyan-dim); font-size:9px; letter-spacing:.08em; }
#trackSearch{
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 8px 2px;
  font-size: 12px;
  color: #d7e4eb;
  font-family: inherit;
  outline: none;
  transition: border-color .2s,box-shadow .2s;
  border-bottom: 1px solid #173444;
  letter-spacing: .03em;
}
#trackSearch:focus{
  border-color: var(--cyan);
  box-shadow: 0 5px 12px -9px var(--cyan);
}
.queueBox{
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #070913;
  border-color: #20243a;
}
.queueLabel{
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--violet);
  margin-bottom: 8px;
}
.queueChip{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text);
  padding: 7px 0;
}
.trackList{
  max-height: 410px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cyan-dim) transparent;
  background: #05070b;
}
.trackRow{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 18px;
  font-size: 13px;
  border-bottom: 1px solid #10141b;
  color: #7e8998;
  cursor: pointer;
  transition: background .12s, color .12s;
  position: relative;
  min-height: 54px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.008));
}
.trackRow::before{
  content:''; position:absolute; top:0; bottom:0; left:0; width:2px; background:transparent;
}
.trackRow:hover{
  background: linear-gradient(90deg,rgba(34,211,238,.075),rgba(34,211,238,.012));
  color: #aab8c3;
}
.trackRow.active{
  background: linear-gradient(90deg,rgba(34,211,238,.14),rgba(34,211,238,.018) 64%,transparent);
  color: var(--cyan-bright);
  box-shadow: none;
}
.trackRow.active::before{ background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.trackRow.queued::before{ background:var(--violet); box-shadow:0 0 10px var(--violet); }
.trackRow .idx{
  flex: 0 0 24px;
  color: #455164;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-align: center;
  flex-basis: 30px;
  padding: 5px 0;
  border: 1px solid #18202b;
  font: 600 9px/1 'Share Tech Mono',monospace;
}
.trackRow.active .idx{
  color: var(--cyan-bright);
  border-color: #145368;
  background: rgba(34,211,238,.08);
}
.trackRow .ttl{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: #bdc7d0;
  font-size: 13px;
}
.trackRow.active .ttl{ color:var(--cyan-bright); text-shadow:0 0 9px rgba(34,211,238,.32); }
.trackRow .meta{
  display: flex;
  gap: 8px;
  font-size: 9px;
  color: #455164;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.trackRow .actions{
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity .12s;
  flex: 0 0 auto;
}
.trackRow button{
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--muted2);
  font-size: 12px;
  padding: 4px 6px;
  transition: color .12s, transform .1s;
  display: flex;
  align-items: center;
  min-width: 26px;
  min-height: 26px;
  justify-content: center;
}
.trackRow button:hover{
  color: var(--cyan-bright);
  transform: none;
  border-color: #1d5262;
  background: rgba(34,211,238,.07);
}
.note{
  padding: 28px 18px 15px;
  font-size: 8px;
  color: #344052;
  border-top: 1px solid #18202b;
  line-height: 1.65;
  background: #04060a;
  position: relative;
}
.note::before{
  content:'SYS NOTICE // CONTENT RELAY'; position:absolute; top:9px; left:18px; color:#526075;
  font-size:7px; line-height:1; letter-spacing:.16em;
}
.emptyLib{
  padding: 32px;
  text-align: center;
  font-size: 11px;
  color: var(--muted2);
  letter-spacing: .08em;
}

/* footer telemetry */
.footStats{
  text-align: center;
  font-size: 10px;
  letter-spacing: .22em;
  color: #3f4b5d;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.footStats::before,.footStats::after{ content:''; width:52px; height:1px; background:linear-gradient(90deg,transparent,#1d4050); }
.footStats::after{ transform:rotate(180deg); }
.footStats .sep{
  margin: 0;
  color: var(--cyan-dim);
}

/* modal/client subwindows */
.modalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,2,8,.9);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(12px) saturate(90%);
  overflow-y: auto;
}
.modalBox{
  position: relative;
  width: 100%;
  max-width: 500px;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: repeating-linear-gradient(180deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#0b101b,#030711);
  border: 1px solid #3d4657;
  border-radius: 14px;
  padding: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 24px 80px -24px #000,0 0 40px -24px var(--cyan);
}
.modalHead{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 13px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #dce8ef;
  flex: 0 0 auto;
  font-weight: 600;
  min-height: 48px;
  margin: 0;
  padding: 0 20px;
  border-bottom: 1px solid #000;
  background: linear-gradient(180deg,#465064,#29303c 16%,#171b24 58%,#10131a);
  font-family: 'Rajdhani',sans-serif;
}
#modalClose{ color:#8e99aa; font-size:12px; }
#modalBody{
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 22px;
}
#modalBody input,#modalBody textarea,#modalBody select{
  padding:11px 12px; border:1px solid #183346; border-radius:3px; background:#010307; color:#d4dfe7;
  box-shadow:inset 0 0 12px rgba(0,0,0,.9);
}
#modalBody button.primary{
  width: 100%;
  background: linear-gradient(180deg,#177c91,#0d4c60 46%,#082630);
  border: 1px solid var(--cyan-dim);
  color: #dbfbff;
  border-radius: 3px;
  padding: 13px 16px;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .2s;
  font-weight: 600;
  border-color: #17697d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13),0 2px 0 #020407;
}
#modalBody button.primary:hover:not(:disabled){
  background: linear-gradient(180deg,#1a9ab2,#0c6075 48%,#082f3c);
  box-shadow: 0 0 16px -4px var(--cyan);
  color: var(--cyan-bright);
}
.rosterCell,.statCell,.inviteRow,.playlistRow,.acctCard,.megaRow{
  border-radius:3px; border-color:#172635; background:#02050b;
}
.statCell:hover,.rosterCell.filled:hover{ border-color:var(--cyan-dim); }
.avatar{
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border: 1px solid var(--line);
  border-radius: 3px;
  image-rendering: pixelated;
}
.fileInput::file-selector-button{
  font-family: inherit;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  background: linear-gradient(135deg,#0e7490,#3b0764);
  border: 1px solid var(--cyan-dim);
  color: var(--text);
  border-radius: 3px;
  padding: 8px 14px;
  margin-right: 10px;
  cursor: pointer;
  transition: all .2s;
}

/* full-screen ban state */
.bannedScreen{
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg,#13030a 0 16px,#0d0207 16px 32px);
  padding: 24px;
  text-align: center;
}
.bannedBox{
  max-width: 420px;
  padding: 36px;
  border: 1px solid var(--rose);
  background: #080208;
  box-shadow: 0 0 50px -16px rgba(251,113,133,.65);
}

@media (pointer:coarse){
  .trackRow .actions{ opacity:1; }
  .topbar .linklike::after{ display:none; }
}

@media (max-width:680px){
  #main{ padding:18px 12px 54px; }
  .wrap{ width:100%; }
  .nebula{ filter:blur(40px) saturate(130%); }
  .topbar{ border-radius:12px; margin-bottom:14px; }
  .topbar-chrome{ padding:0 15px; }
  .topbar-left,.topbar-right{ padding:0 18px; gap:18px; }
  .topbar-left{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .topbar-left .linklike{ text-align:center; white-space:nowrap; }
  .topbar-right{ align-items:center; }
  #authArea{ gap:18px; }
  .wordmarkPanel{ padding:34px 18px 24px; }
  .wordmark-kicker{ margin:-15px 0 24px; }
  .wordmark-wrap::before,.wordmark-wrap::after{ width:24px; }
  .wordmark-wrap::before{ right:calc(100% + 10px); }
  .wordmark-wrap::after{ left:calc(100% + 10px); }
  .tagline{ letter-spacing:.23em; }
  .nodeTelemetry{ margin:24px -18px -24px; }
  .nodeTelemetry span{ padding:9px 4px; font-size:7px; letter-spacing:.08em; }
  .deck{ grid-template-columns:88px minmax(0,1fr); gap:12px; margin:10px; padding:11px; }
  .disc-module{ min-height:112px; padding-right:12px; }
  .module-label,.module-code{ right:12px; font-size:6px; }
  .disc{ width:62px; height:62px; flex-basis:62px; }
  .lcd-main{ gap:8px; padding:6px 8px; }
  .lcd-main #curTime{ min-width:76px; font-size:1.05rem; }
  .marquee span{ font-size:11px; }
  .controls{ gap:7px; }
  .ctl-sm{ width:42px; }
  .ctl-play{ width:62px; }
  .controlLegend{ grid-template-columns:42px 42px 62px 42px 42px; gap:7px; }
  .libHead{ align-items:flex-start; gap:9px; flex-direction:column; }
  .libBtns{ width:100%; justify-content:flex-end; }
  .trackList{ max-height:360px; }
  .trackRow{ padding:9px 12px; gap:10px; }
  .trackRow .idx{ flex-basis:26px; }
  .modalBox{ max-height:calc(100dvh - 24px); }
  #modalBody{ padding:18px; }
}

@media (max-width:420px){
  .topbar{ font-size:11px; letter-spacing:.18em; }
  .topbar-chrome span:last-child{ display:none; }
  .topbar-chrome{ justify-content:center; }
  .topbar-left,.topbar-right{ padding-left:14px; padding-right:14px; }
  .topbar-status{ font-size:10px; letter-spacing:.16em; }
  #authArea{ gap:14px; }
  .wordmark{ font-size:clamp(1.72rem,8.6vw,2.2rem); }
  .wordmark-kicker{ font-size:7px; }
  .tagline{ font-size:8px; }
  .nodeTelemetry span{ font-size:6px; }
  .pb-title small{ display:none; }
  .deck{ grid-template-columns:70px minmax(0,1fr); }
  .disc-module{ padding-right:9px; }
  .disc{ width:52px; height:52px; flex-basis:52px; }
  .module-label,.module-code{ right:9px; }
  .lcd-top{ font-size:7px; }
  .lcd-main #curTime{ min-width:68px; font-size:.92rem; }
  .viz{ height:45px; }
  .controls{ gap:5px; padding-left:10px; padding-right:10px; }
  .ctl-sm{ width:39px; height:36px; }
  .ctl-play{ width:57px; height:42px; }
  .controlLegend{ grid-template-columns:39px 39px 57px 39px 39px; gap:5px; padding-left:10px; padding-right:10px; }
  .libBtns{ gap:9px; justify-content:flex-start; }
  .searchRow{ padding-left:12px; padding-right:12px; }
  .trackRow .meta{ max-width:180px; }
  .footStats::before,.footStats::after{ width:24px; }
  .rosterGrid{ grid-template-columns:repeat(3,1fr); }
}

@media (prefers-reduced-motion:reduce){
  body::before{ opacity:.12; }
  .topbar .linklike::after{ transition:none; }
}