/* Curator mockups v2 — NickieNonstop brand: Barlow Condensed + Archivo, black, yellow = where you are, turquoise = music, purple = vinyl */
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --yellow:#e8ff2b; --turq:#2ee6d6; --purple:#a25cff;
  --bg:#09090a; --ink:#f4f4f1; --ink-2:#b4b4ae; --line:rgba(255,255,255,.09);
  --card:rgba(255,255,255,.055); --card-strong:rgba(255,255,255,.085);
  --glass:rgba(22,22,24,.62); --glass-line:rgba(255,255,255,.12);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 12px 32px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.6);
  --music:#2ee6d6; --vinyl:#c7a2ff; --vinyl-bg:rgba(162,92,255,.16);
  --btn:#f4f4f1; --btn-ink:#0a0a0a;
  --blob1:rgba(46,230,214,.16); --blob2:rgba(162,92,255,.16);
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --sans:"Archivo",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{
  --bg:#f2f1ec; --ink:#111111; --ink-2:#55554f; --line:rgba(0,0,0,.08);
  --card:#ffffff; --card-strong:#ffffff;
  --glass:rgba(255,255,255,.66); --glass-line:rgba(0,0,0,.07);
  --shadow:0 1px 2px rgba(0,0,0,.05),0 10px 28px rgba(20,20,10,.08);
  --shadow-lg:0 24px 60px rgba(20,20,10,.16);
  --music:#0b7f76; --vinyl:#6a2fd0; --vinyl-bg:rgba(162,92,255,.13);
  --btn:#111111; --btn-ink:#ffffff;
  --blob1:rgba(46,230,214,.22); --blob2:rgba(162,92,255,.14);
  color-scheme:light;
}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font:400 17px/1.45 var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(600px 420px at 8% -6%,var(--blob1),transparent 70%),radial-gradient(560px 460px at 105% 30%,var(--blob2),transparent 70%)}
img{display:block}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* ---------- shell ---------- */
.main{padding:22px 20px 190px;max-width:1060px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:8px 0 22px}
h1{font:700 44px/.95 var(--display);text-transform:uppercase;letter-spacing:.005em}
h2{font:700 24px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:34px 0 14px}
.sub{color:var(--ink-2);font-size:15px;margin-top:6px}
.tag{font:600 14px/1 var(--sans);letter-spacing:.02em;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:7px 11px;white-space:nowrap}
.brand{display:flex;align-items:center;gap:10px;font:700 24px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.brand i{width:12px;height:26px;background:var(--yellow);transform:skewX(-16deg);border-radius:2px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}

/* floating glass tab bar */
.tabs{position:fixed;left:12px;right:12px;bottom:14px;height:68px;display:flex;justify-content:space-around;align-items:center;
  background:var(--glass);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid var(--glass-line);border-radius:26px;box-shadow:var(--shadow-lg);z-index:20;padding:0 6px}
.tabs a{flex:1;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:18px;
  color:var(--ink-2);font:600 14px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.tabs a svg{width:23px;height:23px}
.tabs a.on{background:var(--yellow);color:#0a0a0a}
.tabs .lbl{display:none}

/* floating glass mini player */
.player{position:fixed;left:12px;right:12px;bottom:92px;height:66px;display:flex;align-items:center;gap:12px;padding:0 8px 0 9px;
  background:var(--glass);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid var(--glass-line);border-radius:20px;box-shadow:var(--shadow-lg);z-index:19;overflow:hidden}
.player .art{width:48px;height:48px;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.player .ti{flex:1;min-width:0}
.player .t{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .a{font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .prog{position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px;background:var(--line)}
.player .prog b{display:block;height:100%;width:38%;background:var(--turq);border-radius:3px}
.player .time,.player .ctrl-extra{display:none}
.ico{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:0;background:none;color:var(--ink);flex:none}
.ico svg{width:22px;height:22px}

/* play buttons: turquoise = music */
.play{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:0;background:var(--turq);color:#061615;flex:none;box-shadow:0 6px 16px rgba(46,230,214,.25)}
.play svg{width:18px;height:18px}
.play.ghost{background:transparent;color:var(--music);box-shadow:none;border:1.5px solid color-mix(in srgb,var(--music) 55%,transparent)}
.play.big{width:60px;height:60px}.play.big svg{width:24px;height:24px}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:18px}
.stack>*+*{margin-top:14px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{padding:16px 14px}
.stat b{display:block;font:700 46px/.9 var(--display)}
.stat span{display:block;margin-top:6px;font-size:14px;color:var(--ink-2)}
.stat.music b{color:var(--music)}
.stat.vinyl b{color:var(--vinyl)}

/* covers & shelf */
.cover{width:100%;aspect-ratio:1;border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.shelf .t{font-weight:600;font-size:15px;margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec{position:relative}
.rec .cover{position:relative;z-index:1}
.rec.vinyl::after{content:"";position:absolute;z-index:0;top:5%;left:22%;width:90%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--purple) 0 15%,#050505 15.5% 17%,transparent 17.5%),repeating-radial-gradient(circle,#1b1b1d 0 1px,#0b0b0c 1.5px 3.5px);
  box-shadow:0 8px 20px rgba(0,0,0,.4)}
.shelf .rec.vinyl{margin-right:16%}
.shelf.peek{grid-template-columns:repeat(3,1fr)}

/* track list */
.tracks{list-style:none}
.trk{display:flex;align-items:center;gap:14px;padding:10px 4px}
.trk+.trk{border-top:1px solid var(--line)}
.trk .thumb{width:52px;height:52px;border-radius:10px;flex:none}
.trk .ti{flex:1;min-width:0}
.trk .t{font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk .a{font-size:15px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk.now .t{color:var(--music)}
.trk .num{width:22px;text-align:right;color:var(--ink-2);font-size:15px;font-variant-numeric:tabular-nums}
.trk .dur{color:var(--ink-2);font-size:15px;font-variant-numeric:tabular-nums}
.d-only{display:none}

/* vinyl badge */
.vb{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 5px;border-radius:999px;background:var(--vinyl-bg);color:var(--vinyl);font-weight:600;font-size:14px;white-space:nowrap;flex:none}
.vb i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,var(--purple) 0 22%,#0b0b0c 24% 100%);box-shadow:inset 0 0 0 3px #0b0b0c,inset 0 0 0 4px #333}

/* buttons */
.btn{height:50px;padding:0 22px;border-radius:16px;border:1px solid var(--line);background:var(--card-strong);font:700 18px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.primary{background:var(--btn);color:var(--btn-ink);border-color:transparent}
.btn.block{width:100%}
.actions{display:flex;gap:10px;margin-top:18px}
.actions .btn{flex:1}
.btn.quiet{height:44px;padding:0 16px;font-size:16px}

/* suggestions */
.sg .pair{display:flex;align-items:center;margin-bottom:16px}
.sg .pair img{width:64px;height:64px;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.sg .pair img+img{margin-left:-18px;transform:rotate(5deg)}
.sg .pair .gray{filter:grayscale(1) brightness(.8)}
.sg p.big{font-size:20px;line-height:1.3;font-weight:600}
.sg p.meta{margin-top:6px;font-size:15px;color:var(--ink-2)}
.done{display:flex;align-items:center;gap:14px;padding:12px 14px}
.done .ti{flex:1;min-width:0}
.done .t{font-weight:600;font-size:16px}
.done .a{font-size:14px;color:var(--ink-2)}
.done img{width:44px;height:44px;border-radius:10px}

/* search */
.field{display:flex;align-items:center;gap:12px;height:62px;padding:0 18px;border-radius:20px;background:var(--card-strong);border:1px solid var(--line);box-shadow:var(--shadow);font-size:19px}
.field svg{width:24px;height:24px;color:var(--ink-2);flex:none}
.field .ph{color:var(--ink)}
.field .caret{width:2px;height:24px;background:var(--music);margin-left:-8px}
.hit{display:flex;gap:16px;align-items:center}
.hit .cover{width:96px;height:96px;flex:none}
.hit .t{font:700 28px/1 var(--display);text-transform:uppercase}
.hit .a{color:var(--ink-2);margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:var(--line);font-size:15px;font-weight:500}
.answer{font-size:20px;font-weight:600;margin-top:18px}
.answer em{font-style:normal;color:var(--music)}

/* segmented */
.seg{display:inline-flex;padding:4px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:20px}
.seg a{height:44px;min-width:110px;display:grid;place-items:center;border-radius:12px;font:700 17px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.seg a.on{background:var(--yellow);color:#0a0a0a}

/* library grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px}
.grid .t{font-weight:600;font-size:16px;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid .a{font-size:14px;color:var(--ink-2)}

/* playlist hero */
.hero{position:relative;margin:-22px -20px 0;padding:20px 20px 22px;overflow:hidden}
.hero .bgart{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(50px) saturate(1.3);opacity:.55;z-index:-1}
.hero .bgfade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,var(--bg));z-index:-1}
.hero .cover{width:200px;height:200px;margin:12px auto 18px;box-shadow:var(--shadow-lg)}
.hero h1{text-align:center;font-size:42px}
.hero .sub{text-align:center}
.hero .row{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:16px}
.back{display:inline-flex;align-items:center;height:44px;gap:6px;font-weight:600;font-size:16px}

/* settings */
.dev{display:flex;align-items:center;gap:14px}
.dev .ic{width:44px;height:44px;border-radius:12px;background:var(--line);display:grid;place-items:center;flex:none}
.dev .ic svg{width:22px;height:22px}
.dev .ti{flex:1;min-width:0}
.dev .t{font-weight:600}
.dev .a{font-size:14px;color:var(--ink-2)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--music);margin-right:6px;vertical-align:1px}

/* auth */
.auth{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:24px 20px 34px;position:relative;overflow:hidden}
.wall{position:absolute;inset:-12% -30% auto -30%;height:78%;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;transform:rotate(-12deg);z-index:-2;opacity:.9}
.wall img{width:100%;aspect-ratio:1;border-radius:14px}
.auth::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 20%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 38%,var(--bg) 62%)}
.auth .panel{background:var(--glass);backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);border:1px solid var(--glass-line);border-radius:28px;box-shadow:var(--shadow-lg);padding:26px 22px}
.auth .brand{font-size:30px;margin-bottom:6px}
.auth .tagline{color:var(--ink-2);margin-bottom:22px}
.input{height:56px;border-radius:16px;border:1px solid var(--line);background:var(--card-strong);display:flex;align-items:center;padding:0 16px;font-size:18px;margin-bottom:14px}
.input.dots{letter-spacing:.3em}
.label{font-size:15px;font-weight:600;margin-bottom:8px;color:var(--ink-2)}
.code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:18px}
.code span{height:60px;border-radius:14px;border:1px solid var(--line);background:var(--card-strong);display:grid;place-items:center;font:700 30px/1 var(--display)}
.code span.cur{border-color:var(--music);box-shadow:0 0 0 3px color-mix(in srgb,var(--music) 25%,transparent)}
.check{display:flex;gap:14px;align-items:center;min-height:52px;margin-bottom:18px}
.check .box{width:28px;height:28px;border-radius:9px;background:var(--yellow);display:grid;place-items:center;color:#0a0a0a;flex:none}
.check .t{font-weight:600}
.check .a{font-size:14px;color:var(--ink-2)}
.auth .tag{position:absolute;top:22px;right:20px;background:var(--glass);backdrop-filter:blur(12px)}

/* ---------- desktop ---------- */
@media (min-width:900px){
  body{font-size:17px}
  .app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
  .rail{position:sticky;top:0;height:100vh;padding:16px 0 16px 16px}
  .rail .in{height:calc(100% - 96px);background:var(--glass);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid var(--glass-line);border-radius:26px;box-shadow:var(--shadow);padding:24px 14px;display:flex;flex-direction:column;gap:4px}
  .rail .brand{padding:0 10px 26px}
  .tabs{position:static;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;padding:0;gap:4px}
  .tabs a{flex:none;flex-direction:row;justify-content:flex-start;gap:14px;height:50px;padding:0 14px;border-radius:15px;font-size:19px}
  .tabs a.on{background:var(--yellow)}
  .rail .foot{margin-top:auto;padding:0 10px}
  .main{padding:44px 48px 140px}
  h1{font-size:68px}
  .head{margin:0 0 30px}
  .player{left:292px;right:16px;bottom:16px;height:76px;padding:0 16px 0 12px;gap:16px}
  .player .art{width:54px;height:54px}
  .player .ti{flex:0 0 260px}
  .player .ctrl-extra{display:flex;flex:1;align-items:center;gap:14px;justify-content:center}
  .player .ctrl-extra .bar{flex:1;max-width:420px;height:4px;border-radius:4px;background:var(--line)}
  .player .ctrl-extra .bar b{display:block;width:38%;height:100%;background:var(--turq);border-radius:4px}
  .player .ctrl-extra small{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .player .prog{display:none}
  .player .spot{display:inline-flex}
  .stats{gap:16px}.stat{padding:22px}.stat b{font-size:64px}
  .shelf{grid-template-columns:repeat(5,1fr);gap:20px}
  .cols{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:start}
  .cols h2:first-child{margin-top:0}
  .grid{grid-template-columns:repeat(5,1fr);gap:28px 22px}
  .sgs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .sgs>*+*{margin-top:0}
  .d-only{display:initial}.m-only{display:none}
  .trk .pl{width:190px;color:var(--ink-2);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero{margin:-44px -48px 0;padding:44px 48px 30px;display:flex;align-items:flex-end;gap:32px}
  .hero .cover{margin:0;width:220px;height:220px}
  .hero h1,.hero .sub{text-align:left}.hero h1{font-size:72px}
  .hero .row{justify-content:flex-start}
  .narrow{max-width:640px}
  .auth{flex-direction:row;align-items:center;justify-content:flex-end;padding:40px 7vw}
  .wall{inset:-30% 30% -30% -20%;height:auto;grid-template-columns:repeat(5,1fr)}
  .auth::before{background:linear-gradient(to right,transparent 0%,color-mix(in srgb,var(--bg) 55%,transparent) 45%,var(--bg) 68%)}
  .auth .panel{width:440px;padding:36px 32px}
}
@media (max-width:899px){.rail{display:contents}.rail .in{display:contents}.rail .brand,.rail .foot{display:none}.player .spot-l{display:none}}
/* nav variants */
.tabs.mob a span{display:none}
.tabs.mob a.on{flex:2.2;flex-direction:row;gap:8px}
.tabs.mob a.on span{display:inline}
@media (max-width:899px){.tabs.m-hide{display:none}}
@media (min-width:900px){.tabs.mob{display:none}}
.btn svg{width:20px;height:20px;flex:none}
@media (max-width:899px){.d-only{display:none!important}.trk .vb{padding:0 5px;width:28px;justify-content:center}.trk .vb b{display:none}}
@media (min-width:900px){.m-only{display:none!important}.trk .vslot{width:92px;display:flex;justify-content:flex-start}.cols .shelf{grid-template-columns:repeat(3,1fr);gap:18px}}
@media (max-width:899px){.cols{display:flex;flex-direction:column}.cols>div:last-child{order:-1}.cols>div:last-child h2{margin-top:30px}}
.chips .vb{height:36px;padding:0 14px 0 8px;font-size:15px}
.hero{isolation:isolate}.hero .back{position:relative}.hero .tag.m-only{position:absolute;top:22px;right:20px}
@media (min-width:900px){.btn.d-only,.vb.d-only{display:inline-flex}
 .cols{display:flex;flex-direction:column;gap:0}.cols>div:last-child{order:-1}.cols>div:last-child h2{margin-top:34px}
 .cols .shelf{grid-template-columns:repeat(5,1fr);gap:22px}.shelf .rec.vinyl{margin-right:18%}}
@media (max-width:899px){.shelf .xtra{display:none}}
@media (min-width:900px){.cols{align-items:stretch}.cols h2:first-child{margin-top:34px}}
.wall{opacity:1}
.auth::before{background:linear-gradient(to bottom,transparent 0%,transparent 30%,color-mix(in srgb,var(--bg) 60%,transparent) 50%,var(--bg) 66%)}
@media (min-width:900px){.auth::before{background:linear-gradient(to right,transparent 0%,transparent 35%,color-mix(in srgb,var(--bg) 60%,transparent) 55%,var(--bg) 72%)}}