/* =====================================================================
   LUPIN'S VAULT — "SPACE" SKIN (TEST)
   ---------------------------------------------------------------------
   Black and neon white: a deep-space backdrop with slow drifting stars,
   glowing white type and buttons, and creator cards that float gently
   like they're hanging in space (they lift and grow when you point at
   them, streaming-app style). No red, no colour accents.

   It only sits ON TOP of the normal design. To go back to the red/black
   look, delete the <link rel="stylesheet" href="skin-space.css"> line
   near the top of index.html (or ask Claude to revert it).
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap");

:root {
  --bg: #030407;
  --panel: #07080d;
  --card: rgba(255,255,255,.035);
  --card-hover: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.08);
  --text: #f4f6fb;
  --muted: #8f95a3;
  --neon: #ffffff;                       /* the only "accent": neon white */
  --neon-dim: rgba(255,255,255,.1);
  --on-neon: #030407;
  --radius: 18px;
  --s-white: #ffffff;
  --s-ice: #dfe7ff;                      /* a whisper of cold blue in the glow */
  --s-glass: rgba(255,255,255,.04);
  --s-glass-2: rgba(255,255,255,.08);
  --s-line: rgba(255,255,255,.09);
  --s-glow: 0 0 18px rgba(255,255,255,.45), 0 0 42px rgba(200,215,255,.18);
  --s-head: "Sora", "Space Grotesk", sans-serif;
}

/* ---------- Deep space backdrop ---------- */
html, body { background: #030407 !important; }
body {
  background:
    radial-gradient(1100px 700px at 78% -10%, rgba(170,190,255,.10), transparent 62%),
    radial-gradient(900px 700px at -10% 110%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(600px 400px at 50% 50%, rgba(120,140,200,.04), transparent 70%),
    #030407 !important;
  background-attachment: fixed !important;
}
/* Two star layers drifting at different speeds (parallax) */
body::before, body::after {
  content: ""; position: fixed; inset: -50% 0 0 0; z-index: -1; pointer-events: none;
}
body::before {
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 140px 80px, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 60px 170px, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 210px 210px, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 250px 40px, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 100px 250px, rgba(255,255,255,.4), transparent 60%);
  background-size: 280px 280px;
  animation: starDrift 180s linear infinite;
  opacity: .8;
}
body::after {
  background-image:
    radial-gradient(1.6px 1.6px at 70px 90px, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 320px 260px, rgba(225,232,255,.95), transparent 60%),
    radial-gradient(2px 2px at 460px 60px, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 200px 420px, rgba(255,255,255,.8), transparent 60%);
  background-size: 540px 540px;
  animation: starDrift 90s linear infinite, twinkle 6s ease-in-out infinite;
}
@keyframes starDrift { to { transform: translateY(50%); } }
@keyframes twinkle { 50% { opacity: .45; } }

.app { background: transparent !important; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: rgba(5,6,10,.72) !important; backdrop-filter: blur(16px);
  border-right: 1px solid var(--s-line) !important; box-shadow: none !important;
}
.sidebar-promo {
  background: radial-gradient(220px 140px at 100% 0%, rgba(255,255,255,.12), transparent 70%), rgba(10,12,18,.7) !important;
  border-color: rgba(255,255,255,.14) !important; box-shadow: none !important;
}
.promo-key { color: #030407 !important; background: #fff !important; border-color: #fff !important; box-shadow: 0 0 16px rgba(255,255,255,.5) !important; }
/* Placeholder cover art (no photo yet) goes black & white; real photos keep their colour */
div.cover-art, img.cover-art[src$=".svg"] { filter: grayscale(1) contrast(1.15) brightness(.9); }
.logo-mark, .age-logo { filter: grayscale(1) brightness(1.6) drop-shadow(0 0 10px rgba(255,255,255,.45)) !important; }
.logo-text { color: #fff !important; text-shadow: var(--s-glow); }
.nav a { color: var(--muted) !important; border-radius: 12px !important; }
.nav a:hover { color: #fff !important; background: rgba(255,255,255,.05) !important; }
.nav a.active {
  color: #fff !important; background: rgba(255,255,255,.07) !important;
  box-shadow: inset 3px 0 0 #fff, -6px 0 22px rgba(255,255,255,.18) !important;
  text-shadow: 0 0 12px rgba(255,255,255,.6);
}
.nav a.active svg { filter: drop-shadow(0 0 6px rgba(255,255,255,.8)); }
.nav-dot { background: #fff !important; box-shadow: 0 0 10px #fff !important; }
.nav-count { background: #fff !important; color: #030407 !important; box-shadow: 0 0 12px rgba(255,255,255,.6) !important; }

/* ---------- Top bar ---------- */
.topbar {
  background: linear-gradient(180deg, rgba(3,4,7,.92), rgba(3,4,7,.6)) !important;
  backdrop-filter: blur(16px) !important; border: 0 !important; border-image: none !important;
  border-bottom: 1px solid var(--s-line) !important;
}
.search, .control {
  border-radius: 999px !important; background-color: rgba(255,255,255,.04) !important; border-color: var(--s-line) !important;
}
.search:focus-within { border-color: rgba(255,255,255,.5) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 0 24px rgba(255,255,255,.15) !important; }
.kbd { border-color: rgba(255,255,255,.18); }
.keys {
  border-radius: 999px !important; color: #fff !important; background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.22) !important; box-shadow: 0 0 16px rgba(255,255,255,.12) !important;
}
.keys svg { color: #fff; filter: drop-shadow(0 0 5px rgba(255,255,255,.8)); }
.icon-btn { background: transparent !important; border-color: var(--s-line) !important; color: #e9ecf3 !important; }
.avatar-me { border: 1px solid rgba(255,255,255,.5) !important; box-shadow: 0 0 14px rgba(255,255,255,.25) !important; background: linear-gradient(135deg, #2a2d36, #0b0c11) !important; }

/* ---------- Type: neon white ---------- */
h1, .rw-head h1, .shop-head h1, .lists-head h1, .rw-card h2, .auth-box h2, .refill-box h2, .age-box h1, .grid-head h2 {
  font-family: var(--s-head) !important; letter-spacing: -0.015em !important; color: #fff !important;
}
h1, .grid-head h2, .age-box h1 { text-shadow: 0 0 22px rgba(255,255,255,.35); }
.glow, .hero h1 .glow {
  background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; animation: none !important;
  text-shadow: 0 0 10px #fff, 0 0 28px rgba(210,222,255,.75), 0 0 60px rgba(180,200,255,.35) !important;
}
.eyebrow { color: #cfd5e2 !important; letter-spacing: .18em; text-transform: uppercase; font-size: 11px; }
.eyebrow::before { background: #fff !important; box-shadow: 0 0 10px #fff !important; }
.subtitle, .rw-note { color: var(--muted); }
.acc-label i { background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent) !important; }

/* ---------- Discover hero: a cinematic banner ---------- */
.hero {
  padding: 40px 34px !important; border-radius: 26px; margin-bottom: 26px; position: relative; overflow: hidden;
  background:
    radial-gradient(520px 340px at 85% 30%, rgba(210,222,255,.14), transparent 70%),
    linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,.01) 60%);
  border: 1px solid var(--s-line);
  box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-stat { padding: 10px 16px !important; border-radius: 14px !important; background: rgba(255,255,255,.05) !important; border: 1px solid var(--s-line) !important; }
.hero-stat strong { font-family: var(--s-head); }
.hero-stat i { background: #fff !important; box-shadow: 0 0 8px #fff !important; }

/* ---------- Chips ---------- */
.chip { border-radius: 999px !important; border-color: var(--s-line) !important; background: rgba(255,255,255,.03) !important; color: #c9cfdb !important; }
.chip:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; border-color: rgba(255,255,255,.3) !important; }
.chip.active { background: #fff !important; color: #030407 !important; border-color: #fff !important; box-shadow: 0 0 20px rgba(255,255,255,.45) !important; }

/* ---------- Dark glass panels everywhere ---------- */
.card, .rw-card, .plan, .pack, .rw-item, .rw-heist, .rw-ranks li, .rw-members li, .rw-stats div, .rw-history,
.acc-card, .acc-row, .acc-keys, .acc-seg, .site-btn, .refill-option,
.sp-row, .sp-qa, .sp-topic, .sp-chat, .sp-search, .sp-orders li, .list-card, .save-row, .pay-row,
.upload-row, .sheet-list .upload-row, .rw-lock, .lists-stat, .rw-pill, .shop-methods span {
  background: rgba(10,12,18,.62) !important;
  border-color: var(--s-line) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45) !important;
}
.rw-card, .plan, .acc-card { background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(10,12,18,.7) 55%) !important; }
.rw-item:hover, .list-card:hover, .sp-row:hover, .sp-topic:hover, .acc-row:not(.static):hover, .pay-row:hover, .pack:hover, .site-btn:hover, .plan:hover {
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: 0 24px 50px rgba(0,0,0,.55), 0 0 26px rgba(255,255,255,.12) !important;
}

/* ---------- Creator cards: floating in space ---------- */
.grid { gap: 26px !important; perspective: 1200px; }
.card {
  background: rgba(8,9,14,.75) !important; border-radius: 16px !important;
  box-shadow: 0 26px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06) !important;
  animation: cardIn .5s ease both !important;
  animation-delay: calc(var(--i, 0) * 35ms) !important;
  transition: transform .3s ease, box-shadow .3s, border-color .3s !important;
}
/* Cards sit still until you point at one: then it pops up (with a little bounce) and floats */
@keyframes cardFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}
.card:hover, .card:focus-within {
  z-index: 5; transform: translateY(-8px) scale(1.06) !important;
  animation: cardIn .5s ease both, cardFloat 2.8s ease-in-out .45s infinite !important;
  transition: transform .45s cubic-bezier(.34,1.7,.5,1), box-shadow .3s, border-color .3s !important;
  border-color: rgba(255,255,255,.5) !important;
  box-shadow: 0 46px 90px rgba(0,0,0,.85), 0 0 40px rgba(255,255,255,.26), 0 0 0 1px rgba(255,255,255,.4) !important;
}
.card:active { transform: translateY(-6px) scale(1.04) !important; transition-duration: .12s !important; }
.card.skeleton { animation: none !important; }
.card .cover { border-radius: 16px 16px 0 0; }
.cover::after { background: linear-gradient(to top, rgba(3,4,7,.97) 0%, rgba(3,4,7,.25) 48%, transparent 72%) !important; }
.card:hover .cover-art { transform: scale(1.08); }
.badge.cat { background: rgba(3,4,7,.6) !important; border-color: rgba(255,255,255,.18) !important; color: #e6e9f0 !important; }
.badge.new { background: #fff !important; color: #030407 !important; box-shadow: 0 0 14px rgba(255,255,255,.7) !important; animation: none !important; }
.badge.early { background: transparent !important; color: #fff !important; border: 1px solid #fff !important; box-shadow: 0 0 10px rgba(255,255,255,.4) !important; }
.verified { color: #fff !important; filter: drop-shadow(0 0 4px rgba(255,255,255,.8)); }
.lock, button.save-btn { border-radius: 50% !important; background: rgba(3,4,7,.6) !important; border: 1px solid rgba(255,255,255,.2) !important; color: #fff !important; }
.card:hover .lock, button.save-btn:hover { background: #fff !important; color: #030407 !important; box-shadow: 0 0 16px rgba(255,255,255,.6) !important; transform: none !important; }
button.save-btn.saved { background: #fff !important; color: #030407 !important; box-shadow: 0 0 14px rgba(255,255,255,.6) !important; }
.library-toggle { border-radius: 999px !important; background: rgba(255,255,255,.05) !important; border-color: var(--s-line) !important; color: #fff !important; }

/* ---------- Buttons: glowing white ---------- */
.unlock, .btn-primary, .plan-btn, .lv-btn:not(.ghost), .acc-btn.primary, .acc-pill.hot, .rw-cost button, .rw-link button,
.age-enter, .pack-price, .save-new button, .ask-ok, .sp-reply .plan-btn {
  background: #fff !important; color: #030407 !important; border: 0 !important;
  border-radius: 999px !important; box-shadow: 0 0 18px rgba(255,255,255,.28) !important;
}
.unlock:hover, .card:hover .unlock:not(.soon):not(.locked), .btn-primary:hover, .plan-btn:hover, .lv-btn:not(.ghost):hover,
.acc-btn.primary:hover, .rw-cost button:hover, .rw-link button:hover, .age-enter:hover, .ask-ok:hover {
  background: #fff !important; color: #030407 !important; box-shadow: 0 0 14px #fff, 0 0 40px rgba(210,222,255,.55) !important;
}
.unlock svg, .plan-btn svg { color: inherit; }
.unlock.owned { background: transparent !important; color: #fff !important; border: 1px solid #fff !important; }
.unlock.soon, .card:hover .unlock.soon, .plan-btn.current, .plan-btn.wait, .rw-cost button:disabled,
.lv-btn.ghost, .acc-btn.ghost, .ask-cancel {
  background: rgba(255,255,255,.03) !important; color: var(--muted) !important; border: 1px solid var(--s-line) !important; box-shadow: none !important;
}
.unlock.locked, .card:hover .unlock.locked { background: transparent !important; color: #fff !important; border: 1px dashed rgba(255,255,255,.55) !important; box-shadow: none !important; }
.unlock.locked:hover { background: #fff !important; color: #030407 !important; border-style: solid !important; }
.card:hover .upload-row .unlock:not(.owned):not(.soon):not(:hover) { background: rgba(255,255,255,.1) !important; color: #fff !important; box-shadow: none !important; }
.link-btn, .sp-note a, .acc-deal, .acc-label em { color: #fff !important; text-shadow: 0 0 10px rgba(255,255,255,.5); }

/* ---------- Shop ---------- */
.plan.hot {
  background: radial-gradient(360px 220px at 50% 0%, rgba(255,255,255,.14), transparent 72%), linear-gradient(160deg, rgba(255,255,255,.06), rgba(10,12,18,.75)) !important;
  border-color: rgba(255,255,255,.5) !important; box-shadow: 0 0 34px rgba(255,255,255,.14), 0 30px 60px rgba(0,0,0,.6) !important;
}
.plan.mine { outline-color: rgba(255,255,255,.7) !important; }
.plan-ribbon { background: #fff !important; color: #030407 !important; box-shadow: 0 0 16px rgba(255,255,255,.6) !important; }
.plan-ico, .acc-ico, .rw-item .plan-ico, .rw-rank-top .plan-ico {
  color: #fff !important; background: rgba(255,255,255,.06) !important; border: 1px solid var(--s-line) !important; box-shadow: none !important;
}
.plan.hot .plan-ico { background: #fff !important; color: #030407 !important; border: 0 !important; box-shadow: 0 0 16px rgba(255,255,255,.5) !important; }
.plan-keys svg, .pack-keys svg, .plan-perks li.star .pk { color: #fff !important; }
.plan-perks li.star .pk { background: rgba(255,255,255,.1) !important; box-shadow: none !important; }
.shop-preview { color: #030407 !important; background: #fff !important; border: 0 !important; }
.pay-row.card .ic { background: #fff !important; color: #030407 !important; }

/* ---------- Rewards ---------- */
.rw-safe { background: radial-gradient(320px 220px at 50% 30%, rgba(255,255,255,.1), transparent 70%), rgba(10,12,18,.7) !important; border-color: rgba(255,255,255,.25) !important; }
.rw-safe.golden { border-color: rgba(255,255,255,.7) !important; box-shadow: 0 0 40px rgba(255,255,255,.2) !important; }
.rw-lock.live { color: #fff !important; border-color: rgba(255,255,255,.55) !important; box-shadow: 0 0 18px rgba(255,255,255,.2) !important; }
.rw-lock.open.picked { background: rgba(255,255,255,.12) !important; border-color: #fff !important; }
.rw-lock.open.picked b { color: #fff !important; text-shadow: var(--s-glow); }
.rw-heist .ic, .rw-chip { color: #fff !important; background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.25) !important; }
.rw-bar i { background: #fff !important; box-shadow: 0 0 10px rgba(255,255,255,.7) !important; }
.rw-dots i.on, .rw-shields i.on, .promo-dots i.on, .refill-dots i.on { background: #fff !important; box-shadow: 0 0 8px #fff !important; }
.rw-heist .amt b, .rw-cost b svg, .rw-pill svg { color: #fff !important; }
.rw-ranks li.now { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.5) !important; }
.rw-members .av { background: linear-gradient(180deg, #ffffff, #b9c2d6) !important; color: #030407 !important; }
.rw-warn { background: rgba(255,255,255,.04) !important; }

/* ---------- Account page ---------- */
.acc-badge.member, .acc-keycount, .acc-pill.key { color: #fff !important; border-color: rgba(255,255,255,.4) !important; }
.acc-badge.member i { background: #fff !important; box-shadow: 0 0 8px #fff !important; }
.acc-avatar { color: #fff !important; background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.3) !important; box-shadow: 0 0 20px rgba(255,255,255,.12) !important; }
.acc-premium, .acc-plan.paid { background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(10,12,18,.7)) !important; border-color: rgba(255,255,255,.4) !important; }
.acc-premium .acc-ico, .acc-plan.paid .acc-ico { background: #fff !important; color: #030407 !important; border: 0 !important; }
.acc-seg button.on { background: #fff !important; color: #030407 !important; box-shadow: 0 0 14px rgba(255,255,255,.4) !important; }
.plan-pill.unlimited { background: #fff !important; color: #030407 !important; }

/* ---------- Pop-ups, sheets, toasts ---------- */
.sheet, .ask-box, .auth-box, .refill-box {
  background: rgba(8,9,14,.96) !important; border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(24px); box-shadow: 0 30px 90px rgba(0,0,0,.8), 0 0 40px rgba(255,255,255,.06) !important;
}
.auth-tabs button.active { background: #fff !important; color: #030407 !important; }
.auth-field input, .save-new input, .ask-box input, .sp-form select, .sp-form input, .sp-form textarea, .sp-reply textarea, .rw-link input {
  background: rgba(0,0,0,.45) !important; border-color: var(--s-line) !important;
}
.auth-field input:focus, .sp-form textarea:focus, .sp-reply textarea:focus { border-color: rgba(255,255,255,.55) !important; box-shadow: 0 0 18px rgba(255,255,255,.12) !important; }
.lv-toast { background: #fff !important; color: #030407 !important; border: 0 !important; border-radius: 999px !important; box-shadow: 0 0 30px rgba(255,255,255,.4) !important; }

/* ---------- Support chat ---------- */
.sp-msg.mine .sp-bubble { background: #fff !important; color: #030407 !important; }
.sp-msg.staff:not(.mine) .sp-bubble { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.3) !important; }
.sp-tabs button { border-radius: 999px; background: rgba(255,255,255,.04) !important; border-color: var(--s-line) !important; }
.sp-tabs button.on { background: #fff !important; color: #030407 !important; }
.sp-quick button { background: rgba(255,255,255,.04) !important; border-color: var(--s-line) !important; }
.sp-topic svg, .sp-qa summary::after { color: #fff !important; }

/* ---------- 18+ gate ---------- */
html.age-locked .age-gate {
  background: radial-gradient(900px 560px at 50% 0%, rgba(200,215,255,.12), transparent 65%), rgba(3,4,7,.94) !important;
}
.age-box { background: rgba(8,9,14,.85) !important; border-color: rgba(255,255,255,.18) !important; box-shadow: 0 0 60px rgba(255,255,255,.08), 0 40px 90px rgba(0,0,0,.8) !important; }
.age-badge { background: #fff !important; color: #030407 !important; box-shadow: 0 0 20px rgba(255,255,255,.7) !important; }
.age-points { background: rgba(255,255,255,.03) !important; border-color: var(--s-line) !important; }
.age-points li::before { color: #fff !important; }

/* Calm everything down for people who turn off motion */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .card { animation: none !important; }
}