/* VinylScape public/marketing + auth pages */
:root{
  --base:#0d0a07; --surface:#1a1410; --elevated:#221b13; --subtle:#2b2216;
  --border:#392e21; --border-strong:#4b4038;
  --text:#E8E4DF; --text-2:#A59F99; --muted:#6E6963;
  --accent:#D2691E; --accent-hover:#E28534;
  --font-display:"Fraunces",Georgia,serif; --font-ui:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:#0d0a07;color:var(--text);font-family:var(--font-ui);font-size:14px;
  line-height:1.5;letter-spacing:-0.01em}
::selection{background:rgba(210,105,30,0.4)}
a{color:inherit;text-decoration:none}
img{display:block}
@keyframes vs-spin-rec{to{transform:rotate(1turn)}}
@keyframes vs-float{0%,100%{transform:translateY(0) rotate(-13deg)}50%{transform:translateY(-11px) rotate(-13deg)}}
@keyframes vs-float2{0%,100%{transform:translateY(0) rotate(9deg)}50%{transform:translateY(-8px) rotate(9deg)}}
@keyframes vs-pulse-dot{0%,100%{opacity:1}50%{opacity:0.38}}
@keyframes vs-progress{from{width:0}}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#392e21;border-radius:4px}
input::placeholder,textarea::placeholder{color:#6e6963}
input:focus,textarea:focus{outline:none;border-color:#d2691e !important;box-shadow:0 0 0 3px rgba(210,105,30,0.16) !important}

/* buttons */
.btn{cursor:pointer;font-family:var(--font-ui);border-radius:14px;transition:background .15s,color .15s,border-color .15s;display:inline-block;text-align:center}
.btn-primary{border:none;background:var(--accent);color:#fff;font-weight:800;font-size:15px;padding:15px 32px;letter-spacing:-0.01em}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary.block{width:100%;padding:15px 24px}
.btn-ghost{border:1.5px solid var(--border);background:transparent;color:var(--text-2);font-weight:600;font-size:14px;padding:14px 26px}
.btn-ghost:hover{color:var(--text);border-color:var(--border-strong)}
.btn.block{width:100%}
.btn-ghost.block{padding:15px 24px;font-size:15px;font-weight:700;color:var(--text)}
.btn-nav-login{border:1.5px solid var(--border);background:transparent;color:var(--text);font-weight:600;font-size:13.5px;padding:9px 22px;border-radius:10px}
.btn-nav-login:hover{border-color:var(--border-strong)}
.btn-nav-signup{border:none;background:var(--accent);color:#fff;font-weight:800;font-size:13.5px;padding:10px 22px;border-radius:10px}
.btn-nav-signup:hover{background:var(--accent-hover)}

/* auth cards */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(ellipse at 50% 28%, rgba(210,105,30,0.1), transparent 52%), url('/static/assets/grain.png'), #0d0a07}
.auth-nav{height:68px;display:flex;align-items:center;padding:0 48px;border-bottom:1px solid var(--border)}
.auth-brand{display:flex;align-items:center;gap:10px;cursor:pointer}
.auth-brand img{width:30px;height:30px;border-radius:50%}
.auth-brand span{font-family:var(--font-display);font-size:20px;letter-spacing:-0.04em}
.auth-body{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 20px}
.auth-card{width:100%;max-width:440px;border:1px solid var(--border);
  background:url('/static/assets/grain.png'), linear-gradient(180deg, rgba(30,24,17,0.98), rgba(21,17,12,0.99));
  border-radius:24px;padding:48px;box-shadow:0 36px 90px rgba(0,0,0,0.52)}
.auth-card h1{font-family:var(--font-display);font-size:36px;font-weight:500;letter-spacing:-0.045em;margin:0 0 8px}
.auth-card .lede{color:var(--text-2);margin:0 0 38px;font-size:14.5px}
.field{margin-bottom:16px}
.field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-2);margin-bottom:9px}
.field input{width:100%;height:50px;padding:0 18px;background:var(--surface);border:1.5px solid var(--border);
  border-radius:12px;color:var(--text);font-size:15px;font-family:var(--font-ui);transition:border .15s,box-shadow .15s}
.field .prefix{position:relative}
.field .prefix span{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px}
.field .prefix input{padding-left:34px}
.auth-alt{text-align:center;color:var(--muted);font-size:13.5px;margin-top:24px}
.auth-alt a{color:var(--accent-hover);font-weight:600}
.flash{border:1px solid rgba(210,105,30,0.35);background:rgba(210,105,30,0.1);color:#f0c89a;
  border-radius:10px;padding:11px 14px;margin-bottom:18px;font-size:13.5px}
.flash.error{border-color:#cf5b3e;background:rgba(207,91,62,0.12);color:#f0a890}

/* Milestones (collector achievements) - categorised Reddit-style carousels */
.ms-wrap{border:1px solid #392e21;border-radius:16px;padding:22px 22px 24px;margin-top:16px;background:rgba(26,20,14,0.5)}
.ms-wrap-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.ms-wrap-title{font-family:Fraunces,Georgia,serif;font-size:20px;font-weight:500;letter-spacing:-0.02em;color:#e8e4df;margin:0;flex:1}
.ms-wrap-count{color:#6e6963;font-size:13px}
.ms-cat{margin-top:20px}
.ms-cat-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.ms-cat-title{font-family:Fraunces,Georgia,serif;font-size:15px;color:#e28534;font-weight:500;margin:0}
.ms-cat-count{color:#6e6963;font-size:12px}
.ms-railwrap{position:relative}
.ms-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;padding:2px 2px 4px}
.ms-rail::-webkit-scrollbar{display:none}
.ms{flex:0 0 122px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:4px}
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:18px 12px}
.ms-stamp{width:72px;height:72px;object-fit:contain;display:block}
.ms.on .ms-stamp{filter:drop-shadow(0 6px 16px rgba(210,105,30,0.28))}
.ms:not(.on) .ms-stamp{opacity:.4}
.ms-glyph{display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:30px;line-height:1;color:#6e6963;border:1.5px solid #392e21;background:#221b13}
.ms.on .ms-glyph{color:#e28534;border-color:rgba(210,105,30,0.5);box-shadow:0 0 0 4px rgba(210,105,30,0.12)}
.ms-t{font-weight:700;font-size:12.5px;color:#e8e4df;line-height:1.2}
.ms:not(.on) .ms-t{color:#8a847d}
.ms-d{font-size:11px;color:#a59f99;line-height:1.3}
.ms:not(.on) .ms-d{color:#6e6963}
.ms-w{font-size:10.5px;color:#9a8b73;font-weight:600;font-variant-numeric:tabular-nums;margin-top:1px}
.ms-h{font-size:10.5px;color:#6e6963;font-variant-numeric:tabular-nums;margin-top:1px}
.ms-arrow{position:absolute;top:30px;z-index:3;width:32px;height:32px;border-radius:50%;cursor:pointer;border:1px solid #4b4038;background:rgba(13,10,7,0.86);color:#e8e4df;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.ms-arrow:hover{border-color:#e28534;color:#e28534}
.ms-arrow.prev{left:-6px}
.ms-arrow.next{right:-6px}