@font-face{font-family:"VT323";src:url("/fonts/vt323/files/vt323-latin-400-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Audiowide";src:url("/fonts/audiowide/files/audiowide-latin-400-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Marker";src:url("/fonts/permanent-marker/files/permanent-marker-latin-400-normal.woff2") format("woff2");font-display:swap}

:root{
  --bg:#07060f; --bg2:#0e0b22; --panel:#14112b; --panel2:#1b1740; --line:#2c2760;
  --ink:#efe6cf; --dim:#9a93b8; --mute:#625c86;
  --red:#e0343d; --red2:#a8202a; --cyan:#35e0ea; --pink:#ff4fa3; --amber:#ffb347; --green:#59e08a;
  --osd:"VT323",ui-monospace,monospace; --logo:"Audiowide",system-ui,sans-serif; --hand:"Marker",cursive;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{font:16px/1.5 var(--sans);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}

/* ---------- decor ---------- */
.bg{position:fixed;inset:0;z-index:-1;background:linear-gradient(#07060f 0%,#140a33 55%,#2a0f4a 78%,#07060f 100%);overflow:hidden}
.bg-sun{position:absolute;left:50%;bottom:22%;width:46vmin;height:46vmin;transform:translateX(-50%);border-radius:50%;
  background:linear-gradient(#ffb347 0%,#ff4fa3 60%,#7a2cff 100%);opacity:.55;
  -webkit-mask:repeating-linear-gradient(#000 0 8%,transparent 8% 11%);mask:repeating-linear-gradient(#000 0 8%,transparent 8% 11%)}
.bg-floor{position:absolute;left:-50%;right:-50%;bottom:0;height:24%;perspective:260px;overflow:hidden;background:linear-gradient(#1a0b3a,#07060f)}
.bg-floor .grid{position:absolute;inset:-100% 0 0 0;transform:rotateX(62deg);transform-origin:50% 100%;
  background-image:linear-gradient(var(--pink) 1px,transparent 1px),linear-gradient(90deg,var(--pink) 1px,transparent 1px);
  background-size:60px 60px;opacity:.28;animation:gridmove 4s linear infinite}
@keyframes gridmove{to{background-position:0 60px}}
.fx-lines{position:fixed;inset:0;z-index:90;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.fx-vignette{position:fixed;inset:0;z-index:91;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
.fx-noise{position:fixed;inset:0;width:100%;height:100%;z-index:92;pointer-events:none;opacity:.035;image-rendering:pixelated}
.fx-band{position:fixed;left:0;right:0;height:90px;z-index:89;pointer-events:none;top:-100px;
  background:linear-gradient(transparent,rgba(255,255,255,.05),transparent);animation:band 9s linear infinite}
@keyframes band{to{top:110vh}}

/* ---------- layout ---------- */
#app{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 20px}
.topbar{position:sticky;top:0;z-index:50;background:rgba(7,6,15,.88);backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:64px}
.logo{font-family:var(--logo);font-size:22px;color:var(--ink);letter-spacing:1px;display:flex;align-items:center;gap:10px;cursor:pointer;white-space:nowrap}
.logo i{display:inline-block;width:34px;height:22px;border-radius:3px;background:var(--red);position:relative;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}
.logo i::before{content:"";position:absolute;left:4px;right:4px;top:3px;height:7px;background:var(--ink);border-radius:1px}
.logo i::after{content:"";position:absolute;left:7px;bottom:3px;width:5px;height:5px;border-radius:50%;background:#111;box-shadow:14px 0 0 #111}
.logo b{color:var(--red)}
.search{flex:1;max-width:520px;position:relative}
.search input{width:100%;height:40px;padding:0 14px 0 40px;background:#0b0920;border:2px solid var(--line);border-radius:8px;color:var(--ink);font-family:var(--osd);font-size:22px;outline:none}
.search input:focus{border-color:var(--cyan)}
.search::before{content:"\25B6";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mute);font-size:12px}
.nav{margin-left:auto;display:flex;align-items:center;gap:8px}
.who{font-family:var(--osd);font-size:20px;color:var(--dim)}

/* ---------- buttons / forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border:0;border-radius:8px;cursor:pointer;
  font-family:var(--osd);font-size:22px;letter-spacing:1px;color:#fff;
  background:linear-gradient(#f0464f,var(--red) 50%,var(--red2));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 #6d1119}
.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #6d1119}
.btn.ghost{background:#1a1640;box-shadow:inset 0 0 0 2px var(--line);color:var(--ink)}
.btn.ghost:active{box-shadow:inset 0 0 0 2px var(--cyan)}
.btn.sm{height:32px;padding:0 12px;font-size:18px}
.btn.on{background:linear-gradient(#ffd27a,var(--amber));color:#2a1700;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 #8a5a12}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-family:var(--osd);font-size:20px;color:var(--dim);letter-spacing:1px;margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;height:44px;padding:0 12px;background:#0b0920;border:2px solid var(--line);border-radius:8px;outline:none;font-size:16px}
.field textarea{height:90px;padding:10px 12px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan)}
.msg{font-family:var(--osd);font-size:20px;min-height:26px;margin-top:6px}
.msg.err{color:var(--pink)} .msg.ok{color:var(--green)}

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;z-index:200;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;font-family:var(--osd);color:var(--ink);transition:opacity .5s}
.boot.out{opacity:0;pointer-events:none}
.boot .bars{display:flex;width:min(560px,86vw);height:180px}
.boot .bars span{flex:1}
.boot .bars span:nth-child(1){background:#c0c0c0}.boot .bars span:nth-child(2){background:#c0c000}.boot .bars span:nth-child(3){background:#00c0c0}
.boot .bars span:nth-child(4){background:#00c000}.boot .bars span:nth-child(5){background:#c000c0}.boot .bars span:nth-child(6){background:#c00000}.boot .bars span:nth-child(7){background:#0000c0}
.boot .txt{font-size:34px;letter-spacing:3px}
.boot .txt em{font-style:normal;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- auth ---------- */
.auth{margin:auto;padding:40px 20px;width:100%;max-width:440px}
.card{background:linear-gradient(var(--panel2),var(--panel));border:2px solid var(--line);border-radius:12px;padding:26px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.card h1{font-family:var(--logo);font-size:26px;margin-bottom:4px}
.card .sub{font-family:var(--osd);font-size:20px;color:var(--dim);margin-bottom:20px}
.auth .logo{justify-content:center;font-size:30px;margin-bottom:22px;cursor:default}
.switch{text-align:center;margin-top:16px;font-family:var(--osd);font-size:20px;color:var(--dim)}
.switch a{cursor:pointer}

/* ---------- shelf ---------- */
main{flex:1;padding-bottom:60px}
.hero{padding:34px 0 10px}
.hero h2{font-family:var(--logo);font-size:clamp(26px,4.6vw,46px);line-height:1.1}
.hero h2 b{color:var(--red)}
.hero p{font-family:var(--osd);font-size:24px;color:var(--dim);margin-top:6px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:20px 0 6px}
.filters select{height:36px;padding:0 10px;background:#0b0920;border:2px solid var(--line);border-radius:8px;font-family:var(--osd);font-size:20px;color:var(--ink)}
.filters .count{margin-left:auto;font-family:var(--osd);font-size:20px;color:var(--mute)}
.row-title{font-family:var(--osd);font-size:28px;letter-spacing:2px;margin:26px 0 12px;color:var(--amber);display:flex;align-items:center;gap:10px}
.row-title::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)}
.grid-v{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px 22px}
.hscroll{display:flex;gap:20px;overflow-x:auto;padding:6px 4px 16px;scroll-snap-type:x proximity}
.hscroll .tape{flex:0 0 250px;scroll-snap-align:start}

/* video sleeve */
.tape{perspective:900px;cursor:pointer;position:relative}
.sleeve{position:relative;aspect-ratio:3/4.2;border-radius:6px;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1);
  background:#0c0a1e;border:2px solid #000;overflow:hidden;box-shadow:0 12px 24px rgba(0,0,0,.55)}
.tape:hover .sleeve{transform:rotateY(-14deg) rotateX(4deg) translateZ(10px)}
.sleeve .art{position:absolute;inset:0 0 34%;background:#000 center/cover no-repeat}
.sleeve .art::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.7))}
.sleeve .spine{position:absolute;left:0;top:0;bottom:0;width:12px;background:linear-gradient(90deg,#000,var(--red2) 40%,var(--red));z-index:2}
.sleeve .head{position:absolute;left:18px;right:8px;top:8px;z-index:2;display:flex;justify-content:space-between;font-family:var(--osd);font-size:18px;color:#fff;text-shadow:1px 1px 0 #000}
.sleeve .head em{font-style:normal;background:var(--red);padding:0 6px;border-radius:3px}
.sleeve .label{position:absolute;left:0;right:0;bottom:0;height:34%;padding:10px 12px 10px 20px;background:#efe6cf;color:#1c1530;
  border-top:3px solid var(--red);display:flex;flex-direction:column;justify-content:center}
.sleeve .label h3{font-family:var(--hand);font-weight:400;font-size:19px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sleeve .label small{font-family:var(--osd);font-size:18px;color:#54487e;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sleeve .bar{position:absolute;left:12px;right:0;bottom:34%;height:5px;background:rgba(0,0,0,.6);z-index:3}
.sleeve .bar i{display:block;height:100%;background:var(--red)}
.sleeve .gloss{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 35%);pointer-events:none;z-index:4}
.fav{position:absolute;right:8px;top:36px;z-index:6;width:34px;height:34px;border-radius:8px;border:0;cursor:pointer;background:rgba(0,0,0,.6);color:#fff;font-size:18px}
.fav.on{background:var(--amber);color:#2a1700}
.pill{position:absolute;right:8px;bottom:36%;z-index:5;font-family:var(--osd);font-size:17px;background:rgba(0,0,0,.75);padding:0 6px;border-radius:3px}
.empty{padding:70px 10px;text-align:center;font-family:var(--osd);font-size:28px;color:var(--dim)}
.empty b{display:block;font-size:44px;color:var(--ink);margin-bottom:6px}

/* toasts */
#toasts{position:fixed;right:16px;bottom:16px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{font-family:var(--osd);font-size:22px;background:#000;border:2px solid var(--cyan);color:var(--cyan);padding:6px 14px;border-radius:6px;max-width:80vw}
.toast.err{border-color:var(--pink);color:var(--pink)}

@media (max-width:760px){
  .topbar .wrap{height:auto;flex-wrap:wrap;padding:10px 14px;gap:8px}
  .search{order:3;flex:1 0 100%;max-width:none}
  .who{display:none}
  .grid-v{grid-template-columns:repeat(2,1fr);gap:18px 12px}
  .hscroll .tape{flex-basis:170px}
  .sleeve .label h3{font-size:15px}
  .sleeve .label small{font-size:15px}
  .logo{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .bg-floor .grid,.fx-band{animation:none}
  .tape:hover .sleeve{transform:none}
}