:root{
  --bg:#050707;
  --bg2:#0b0f10;
  --panel:#111617;
  --panel2:#171d1f;
  --text:#f7fbfb;
  --muted:#a6b1b3;
  --accent:#79f6ff;
  --accent2:#d7feff;
  --accent-soft:rgba(121,246,255,.18);
  --danger:#ff5b67;
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --radius:7px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}
body{overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

.intro{
  position:fixed;inset:0;z-index:9999;background:#000;display:grid;place-items:center;overflow:hidden;
  transition:opacity .55s ease,visibility .55s ease
}
.intro.done{opacity:0;visibility:hidden;pointer-events:none}
.intro-flash{
  position:absolute;width:2px;height:110vh;background:var(--accent2);transform:rotate(18deg) scaleY(0);
  box-shadow:0 0 18px var(--accent),0 0 48px var(--accent),0 0 110px rgba(121,246,255,.85);
  animation:flashStrike .55s .18s cubic-bezier(.19,.78,.22,1) forwards
}
.intro-bolt-wrap{
  position:relative;width:130px;height:165px;display:grid;place-items:center;opacity:0;transform:scale(.5);
  animation:boltBirth .7s .47s cubic-bezier(.2,.86,.17,1.15) forwards
}
.intro-bolt-wrap:before,.intro-bolt-wrap:after{
  content:"";position:absolute;inset:14%;border-radius:50%;filter:blur(22px);background:rgba(121,246,255,.32);
  animation:pulseGlow 1.1s .6s ease-in-out 2
}
.intro-bolt{width:112px;height:138px;color:var(--accent2);filter:drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 22px var(--accent))}
.intro-wordmark{
  position:absolute;top:calc(50% + 106px);font-size:clamp(28px,5vw,54px);font-weight:300;letter-spacing:.22em;
  opacity:0;transform:translateY(14px);animation:wordReveal .75s 1.02s ease forwards
}
.intro-wordmark b{font-weight:800;color:var(--accent);text-shadow:0 0 16px rgba(121,246,255,.7)}
@keyframes flashStrike{0%{transform:rotate(18deg) scaleY(0);opacity:0}20%{opacity:1}65%{transform:rotate(18deg) scaleY(1);opacity:1}100%{transform:rotate(18deg) scaleY(1);opacity:0}}
@keyframes boltBirth{0%{opacity:0;transform:scale(.42)}55%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes wordReveal{to{opacity:1;transform:translateY(0)}}
@keyframes pulseGlow{50%{transform:scale(1.55);opacity:.9}}

#topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;height:72px;padding:0 4vw;display:flex;align-items:center;gap:34px;
  background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.48),transparent);
  transition:background .28s ease,backdrop-filter .28s ease
}
#topbar.solid{background:rgba(4,6,6,.94);backdrop-filter:blur(14px)}
.brand{border:0;background:none;color:white;display:flex;align-items:center;gap:7px;padding:0;min-width:max-content}
.brand-bolt{width:24px;height:30px;color:var(--accent);filter:drop-shadow(0 0 7px rgba(121,246,255,.85))}
.brand-name{font-weight:300;letter-spacing:.09em;font-size:19px}
.brand-name b{font-weight:800;color:var(--accent)}
nav{display:flex;align-items:center;gap:19px;flex:1}
.navBtn,.textBtn{border:0;background:none;color:#ddd;padding:8px 0;font-size:14px;transition:.2s}
.navBtn:hover,.navBtn.active,.textBtn:hover{color:#fff}
.navBtn.active{font-weight:650}
.actions{display:flex;align-items:center;gap:12px}
.searchbox{height:36px;display:flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:5px;padding:0 10px;transition:.2s}
.searchbox:focus-within{border-color:#6a7779;background:rgba(0,0,0,.55)}
.searchbox span{font-size:23px;color:#fff}
.searchbox input{width:0;opacity:0;border:0;outline:0;background:transparent;color:white;transition:.25s}
.searchbox:focus-within input,.searchbox:hover input{width:220px;opacity:1}
.searchbox input::placeholder{color:#aeb7b9}
.libraryBtn{
  height:36px;border:1px solid rgba(255,255,255,.18);background:rgba(10,15,16,.7);color:white;border-radius:4px;padding:0 12px;
  transition:.2s
}
.libraryBtn:hover{border-color:var(--accent);box-shadow:0 0 18px rgba(121,246,255,.18)}
.profileDot{width:34px;height:34px;border-radius:4px;background:linear-gradient(145deg,#162024,#091012);display:grid;place-items:center;border:1px solid rgba(121,246,255,.22)}
.profileDot svg{width:18px;height:22px;color:var(--accent)}

main{min-height:100vh}
.hero{position:relative;height:min(79vh,790px);min-height:560px;background:radial-gradient(circle at 70% 24%,rgba(31,63,67,.25),transparent 38%),linear-gradient(125deg,#141a1b 0%,#090d0e 52%,#050707 100%);overflow:hidden}
.hero-backdrop{position:absolute;inset:0;background-size:cover;background-position:center 25%;opacity:.62;transform:scale(1.015)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,7,.98) 0%,rgba(5,7,7,.72) 37%,rgba(5,7,7,.17) 65%,rgba(5,7,7,.5) 100%),linear-gradient(0deg,var(--bg) 0%,transparent 24%,transparent 76%,rgba(0,0,0,.44) 100%)}
.hero-copy{position:absolute;z-index:2;left:4vw;bottom:17%;width:min(680px,54vw)}
.hero-kicker{display:flex;align-items:center;gap:8px;color:#dbe8ea;font-size:13px;font-weight:700;letter-spacing:.2em;margin-bottom:14px}
.hero-kicker svg{width:22px;height:27px;color:var(--accent);filter:drop-shadow(0 0 7px var(--accent))}
.hero-copy h1{font-size:clamp(40px,5.8vw,78px);line-height:.98;letter-spacing:-.045em;margin:0 0 20px;font-weight:800;text-wrap:balance}
.hero-copy p{font-size:clamp(15px,1.5vw,20px);line-height:1.5;color:#d2d8d9;max-width:630px;text-shadow:0 2px 7px #000;margin:0 0 26px}
.hero-actions{display:flex;gap:12px;align-items:center}
.playBtn,.infoBtn{border:0;border-radius:4px;padding:12px 24px;font-size:16px;font-weight:750;transition:transform .15s,background .15s,box-shadow .15s}
.playBtn{background:var(--accent2);color:#061011;box-shadow:0 0 20px rgba(121,246,255,.18)}
.playBtn:hover:not(:disabled){background:#fff;transform:translateY(-1px);box-shadow:0 0 28px rgba(121,246,255,.4)}
.playBtn:disabled{opacity:.42;cursor:default}
.infoBtn{background:rgba(94,101,103,.62);color:#fff;backdrop-filter:blur(5px)}
.infoBtn:hover{background:rgba(126,134,136,.72)}
.full{width:100%;margin-top:8px}
.pill{position:absolute;right:4vw;bottom:10%;z-index:3;background:rgba(9,14,15,.72);border-left:3px solid #657173;padding:9px 14px;color:#c6d0d2;font-size:12px;backdrop-filter:blur(8px)}
.pill.ok{border-left-color:var(--accent);color:#eaffff}
.pill.warn{border-left-color:#ffb86a}
.pill.working{border-left-color:var(--accent);animation:pillPulse 1.3s infinite}
@keyframes pillPulse{50%{box-shadow:0 0 18px rgba(121,246,255,.18)}}

.content{position:relative;z-index:5;margin-top:-88px;padding:0 0 70px}
.shelf{margin:0 0 34px}
.shelfHead{display:flex;align-items:baseline;justify-content:space-between;padding:0 4vw;margin-bottom:9px}
.shelfHead h2{font-size:21px;margin:0;font-weight:700}
.stats{color:#8e9b9d;font-size:12px}
.textBtn{color:var(--accent)}
.row{display:flex;gap:7px;overflow-x:auto;overflow-y:visible;padding:8px 4vw 28px;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.row.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:28px 8px;overflow:visible}
.card{position:relative;min-width:205px;outline:none;transition:transform .22s cubic-bezier(.2,.75,.25,1);transform-origin:center center;z-index:1}
.grid .card{min-width:0}
.card:hover,.card:focus-visible{transform:scale(1.055);z-index:8}
.poster{aspect-ratio:2/3;position:relative;border-radius:var(--radius);overflow:hidden;background:linear-gradient(145deg,#171f21,#0c1011);box-shadow:0 6px 22px rgba(0,0,0,.38)}
.poster:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 18%,rgba(121,246,255,.08),transparent 34%);z-index:1;pointer-events:none}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.posterFallback{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(155deg,#141b1d 0%,#080b0c 72%);color:#3f585c}
.posterFallback svg{width:34%;height:34%;filter:drop-shadow(0 0 15px rgba(121,246,255,.18))}
.card:hover .posterFallback svg{color:var(--accent);filter:drop-shadow(0 0 16px rgba(121,246,255,.55))}
.meta{padding:8px 2px 0;min-height:49px}
.meta .title{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta .sub{display:block;color:#8e9b9d;font-size:11px;margin-top:4px}
.favMini{position:absolute;right:8px;top:8px;z-index:4;width:31px;height:31px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.62);color:#fff;font-size:20px;opacity:0;transition:.2s}
.card:hover .favMini,.favMini.on{opacity:1}
.favMini:hover{border-color:var(--accent);color:var(--accent)}
.progress{display:none;position:absolute;left:8px;right:8px;bottom:7px;height:3px;background:rgba(255,255,255,.28);z-index:3}
.progress.show{display:block}
.progress span{display:block;height:100%;background:var(--accent);box-shadow:0 0 8px var(--accent)}

.libraryShelf{min-height:300px}
.empty{margin:18px 4vw 0;min-height:280px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(15,21,22,.92),rgba(7,10,10,.92));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:8px}
.emptyBolt{width:60px;height:74px;color:var(--accent);filter:drop-shadow(0 0 14px rgba(121,246,255,.6));margin-bottom:6px}
.empty h3{margin:8px 0 5px;font-size:22px}
.empty p{color:#9ca8aa;margin:0 0 18px}
.empty code{color:#dffeff;background:#0b1112;padding:4px 7px;border-radius:4px}

.modal{width:min(680px,calc(100vw - 28px));border:1px solid rgba(121,246,255,.16);border-radius:10px;background:linear-gradient(150deg,#14191a,#090c0d 68%);color:white;padding:0;box-shadow:var(--shadow)}
.modal::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(6px)}
.modal form{padding:30px;position:relative}
.close{position:absolute;right:14px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:#262b2c;color:white;font-size:23px;z-index:5}
.close:hover{background:#343a3b}
.modalBrand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.modalBrand svg{width:38px;height:46px;color:var(--accent);filter:drop-shadow(0 0 11px rgba(121,246,255,.65))}
.modalBrand small{letter-spacing:.17em;color:#9bb0b2;font-size:10px}
.modalBrand h2{margin:2px 0 0;font-size:28px}
.modalLead{color:#abb6b8;line-height:1.5;margin:0 0 22px}
.modal label{display:block;color:#cbd3d4;font-size:12px;font-weight:650;margin:0 0 15px}
.modal input[type=text],.modal input[type=password]{
  width:100%;height:46px;margin-top:7px;border:1px solid #384345;border-radius:5px;background:#0a0e0f;color:white;padding:0 13px;outline:none
}
.modal input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(121,246,255,.09)}
.twoCols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checkRow{display:flex!important;align-items:center;gap:9px;font-weight:450!important;color:#aeb8ba!important}
.checkRow input{accent-color:var(--accent)}
.formMsg{min-height:22px;margin:4px 0 10px;color:#bed8da;font-size:13px}

.playerDialog{width:min(1180px,96vw);height:min(840px,94vh);padding:0;border:0;background:#050707;color:white;box-shadow:var(--shadow)}
.playerDialog::backdrop{background:rgba(0,0,0,.94)}
.playerShell{position:relative;width:100%;height:100%;display:flex;flex-direction:column}
.playerClose{z-index:6}
#player{width:100%;flex:1;min-height:0;background:#000}
.playerMeta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;background:#0b0e0f}
.playerMeta h2{margin:0 0 4px}
.playerMeta p{margin:0;color:#9ca7a9;font-size:13px}
.playerFallback{position:absolute;inset:0 0 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 38%,#102124,#060808 56%);padding:40px}
.fallbackBolt{width:72px;height:88px;color:var(--accent);filter:drop-shadow(0 0 18px rgba(121,246,255,.65))}
.playerFallback p{max-width:680px;color:#aab4b6;line-height:1.5}

@media(max-width:980px){
  #topbar{gap:17px;padding:0 20px}
  nav{display:none}
  .searchbox:hover input,.searchbox:focus-within input{width:150px}
  .hero-copy{left:20px;width:78vw}
  .pill{right:20px}
  .content{margin-top:-62px}
  .shelfHead{padding:0 20px}
  .row{padding-left:20px;padding-right:20px}
  .row.grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}
  .empty{margin-left:20px;margin-right:20px}
}
@media(max-width:650px){
  #topbar{height:62px;padding:0 14px}
  .brand-name{font-size:15px}
  .brand-bolt{width:20px}
  .libraryBtn{font-size:0;width:38px;padding:0}
  .libraryBtn:before{content:"⚙";font-size:17px}
  .profileDot{display:none}
  .searchbox input{display:none}
  .hero{height:70vh;min-height:520px}
  .hero-copy{left:16px;bottom:18%;width:90vw}
  .hero-copy h1{font-size:43px}
  .hero-copy p{font-size:15px;max-width:90vw}
  .hero-kicker{font-size:10px}
  .pill{right:16px;bottom:8%;font-size:10px}
  .content{margin-top:-42px}
  .shelfHead{padding:0 16px}
  .shelfHead h2{font-size:18px}
  .stats{display:none}
  .row{padding-left:16px;padding-right:16px}
  .card{min-width:155px}
  .row.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 7px}
  .twoCols{grid-template-columns:1fr}
  .modal form{padding:24px 18px}
  .intro-wordmark{letter-spacing:.13em}
}