/* ═══════════════════════════════════════════════════════
   STRANGE PHANTOM v3.6 · DESIGN OVERHAUL · by Bawen
   Cyber Spy · Premium Dark UI · AAA Quality
═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

/* ── OVERRIDE: COLOR PALETTE ───────────────────────── */
:root {
  --bg:  #02010a !important;
  --bg1: #05040f !important;
  --bg2: #0a0820 !important;
  --bg3: rgba(12,10,30,.92) !important;
  --bg4: rgba(18,15,45,.97) !important;

  --bdr:  rgba(120,100,200,.12) !important;
  --bdr2: rgba(140,120,220,.22) !important;
  --bdr3: rgba(180,160,255,.35) !important;

  --tx:  #ece8ff !important;
  --tx2: #9890c4 !important;
  --tx3: #52487a !important;
  --tx4: #2e2a50 !important;

  --gold:      #f5c842 !important;
  --gold2:     #ffe07a !important;
  --gold3:     #c49020 !important;
  --gold-glow: rgba(245,200,66,.35) !important;

  --red:      #ff2d47 !important;
  --red2:     #ff5568 !important;
  --red3:     #c01030 !important;
  --red-glow: rgba(255,45,71,.35) !important;

  --green:       #2fffaa !important;
  --green-glow:  rgba(47,255,170,.25) !important;

  --purple:      #c87aff !important;
  --purple-glow: rgba(200,122,255,.3) !important;
  --cyan:        #00deff !important;

  --sh0: 0 2px 12px rgba(0,0,0,.6) !important;
  --sh1: 0 8px 32px rgba(0,0,0,.7) !important;
  --sh2: 0 24px 80px rgba(0,0,0,.8) !important;
  --sh-gold: 0 0 40px rgba(245,200,66,.2) !important;
  --r: 14px !important; --r2: 22px !important; --r3: 32px !important;
}

/* ── ANIMATED BODY BACKGROUND ──────────────────────── */
body {
  background: #02010a !important;
  background-image:
    radial-gradient(ellipse 80vw 60vh at 15% 40%, rgba(120,60,255,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60vw 40vh at 85% 20%, rgba(0,180,255,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50vw 50vh at 50% 90%, rgba(245,200,66,.06) 0%, transparent 60%) !important;
}

/* Scan lines overlay */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 1;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
  pointer-events: none; mix-blend-mode: overlay;
}

/* ── CARDS: GLASS MORPHISM ─────────────────────────── */
.card {
  background: rgba(8,6,24,.75) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(140,120,220,.18) !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06) !important;
  padding: 18px 16px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Glass shimmer top edge */
.card::before {
  content: '' !important;
  position: absolute !important; top: 0; left: 10%; right: 10%;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent) !important;
  border-radius: 0 !important;
}

.card.glass {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(180,160,255,.12) !important;
}

.card.gold-border {
  border-color: rgba(245,200,66,.35) !important;
  box-shadow: 0 0 0 1px rgba(245,200,66,.15), 0 8px 32px rgba(0,0,0,.6), 0 0 30px rgba(245,200,66,.15) !important;
}

/* ── INPUTS ────────────────────────────────────────── */
.inp {
  background: rgba(5,3,20,.7) !important;
  border: 1.5px solid rgba(140,120,220,.2) !important;
  border-radius: 14px !important;
  color: var(--tx) !important;
  font-size: 14px !important;
  padding: 0 14px !important;
  height: 48px !important;
  transition: all .2s !important;
}
.inp:focus {
  border-color: rgba(245,200,66,.5) !important;
  box-shadow: 0 0 0 3px rgba(245,200,66,.12), 0 0 16px rgba(245,200,66,.1) !important;
  background: rgba(8,6,30,.9) !important;
  outline: none !important;
}
textarea.inp { height: auto !important; padding: 12px 14px !important; }

/* ── BUTTONS ───────────────────────────────────────── */
.btn {
  border-radius: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all .22s cubic-bezier(.2,.8,.2,1) !important;
}

/* Shine sweep on hover */
.btn::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%) !important;
  transform: translateX(-100%) !important;
  transition: transform .4s !important;
}
.btn:hover::before { transform: translateX(100%) !important; }

.btn-red {
  background: linear-gradient(135deg, #ff2d47, #c01030) !important;
  box-shadow: 0 4px 20px rgba(255,45,71,.4), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.btn-red:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(255,45,71,.5) !important;
}

.btn-gold {
  background: linear-gradient(135deg, #f5c842, #c49020) !important;
  color: #1a0e00 !important;
  box-shadow: 0 4px 20px rgba(245,200,66,.35), inset 0 1px 0 rgba(255,255,255,.25) !important;
  font-weight: 800 !important;
}
.btn-gold:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(245,200,66,.5) !important;
}

.btn-ghost {
  background: rgba(255,255,255,.04) !important;
  border: 1.5px solid rgba(140,120,220,.25) !important;
  color: var(--tx2) !important;
}
.btn-ghost:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(200,180,255,.4) !important;
  color: var(--tx) !important;
  transform: translateY(-1px) !important;
}

.btn-lg {
  height: 54px !important;
  font-size: 17px !important;
  border-radius: 18px !important;
  letter-spacing: .04em !important;
}

/* ── SEG CONTROLS ──────────────────────────────────── */
.seg {
  background: rgba(5,3,18,.8) !important;
  border: 1px solid rgba(120,100,200,.2) !important;
  border-radius: 14px !important;
  padding: 4px !important;
}
.seg button {
  border-radius: 11px !important;
  font-weight: 700 !important;
  transition: all .2s !important;
}
.seg button.on {
  background: linear-gradient(135deg, rgba(245,200,66,.2), rgba(200,150,0,.15)) !important;
  color: var(--gold) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(245,200,66,.15) !important;
  border: 1px solid rgba(245,200,66,.2) !important;
}

/* ══════════════════════════════════════════
   AUTH SCREEN — FULL REDESIGN
══════════════════════════════════════════ */
#scr-auth {
  background: none !important;
  justify-content: center !important;
  padding: 20px 16px !important;
}

/* Logo */
.auth-logo {
  text-align: center !important;
  padding: 0 0 8px !important;
  position: relative !important;
}
.auth-logo .lk {
  font-size: 64px !important;
  background: linear-gradient(135deg, #ffe07a, #f5c842, #c87aff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 20px rgba(245,200,66,.5)) !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
}
.auth-logo .phantom {
  display: block !important;
  font-family: 'Rajdhani', 'Orbitron', monospace !important;
  font-size: 13px !important;
  letter-spacing: .45em !important;
  color: var(--purple) !important;
  text-shadow: 0 0 20px var(--purple-glow) !important;
  margin-top: 4px !important;
}
.auth-logo .bybawen {
  display: block !important;
  font-size: 9px !important;
  letter-spacing: .25em !important;
  color: var(--tx3) !important;
  margin-top: 4px !important;
}

/* Lang selector on auth */
.auth-langs {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  margin: 10px 0 16px !important;
}
.auth-langs span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--tx3) !important;
  cursor: pointer !important;
  padding: 5px 14px !important;
  border-radius: var(--r-full) !important;
  border: 1px solid var(--bdr) !important;
  transition: all .2s !important;
  letter-spacing: .05em !important;
}
.auth-langs span:hover,
.auth-langs span.active {
  color: var(--gold) !important;
  border-color: rgba(245,200,66,.3) !important;
  background: rgba(245,200,66,.08) !important;
}
.auth-langs span::after { content: none !important; margin: 0 !important; }

/* Auth box card */
.auth-box {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  background: rgba(6,4,20,.82) !important;
  border: 1px solid rgba(200,120,255,.15) !important;
  box-shadow: 0 0 0 1px rgba(120,80,255,.08), 0 24px 80px rgba(0,0,0,.8), 0 0 60px rgba(120,60,255,.12) !important;
  padding: 24px 20px 20px !important;
}

/* Email field - hidden by default */
#fldEmail { display: none; }
body.auth-reg #fldEmail { display: block; }

/* Auth error */
.auth-err {
  font-size: 12px !important;
  min-height: 20px !important;
  color: var(--red2) !important;
  text-align: center !important;
  font-weight: 600 !important;
}

/* Discord link */
.auth-disco {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  color: #7289da !important;
  font-size: 12px !important;
  text-decoration: none !important;
  opacity: .7 !important;
  transition: opacity .2s !important;
  font-weight: 600 !important;
}
.auth-disco:hover { opacity: 1 !important; }

/* ══════════════════════════════════════════
   MENU SCREEN — ME STRIP
══════════════════════════════════════════ */
#meStrip {
  background: linear-gradient(180deg, rgba(6,4,20,.95) 0%, rgba(6,4,20,.8) 100%) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(140,120,220,.12) !important;
  padding: 10px 16px 8px !important;
}

/* ══════════════════════════════════════════
   NAV BAR — BIG REDESIGN
══════════════════════════════════════════ */
#navBar {
  height: 76px !important;
  padding: 0 0 var(--safe-b, 0px) !important;
  gap: 0 !important;
  background: rgba(4,3,14,.92) !important;
  backdrop-filter: blur(24px) !important;
  border-top: 1px solid rgba(120,100,200,.15) !important;
  display: flex !important;
  align-items: stretch !important;
  box-shadow: 0 -8px 30px rgba(0,0,0,.5) !important;
}

.nav-btn {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  color: rgba(200,190,230,.75) !important;
  padding: 10px 2px 8px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all .25s cubic-bezier(.2,.8,.2,1) !important;
  min-width: 0 !important;
}
.nav-btn::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 0; right: 0 !important;
  height: 1px !important;
  background: rgba(255,255,255,.04) !important;
}
.nav-btn .nicon {
  font-size: 26px !important;
  line-height: 1 !important;
  display: block !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1) !important;
  filter: none !important;
  opacity: .85 !important;
}
.nav-btn > span:not(.nicon):not(.nav-badge) {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  padding: 0 4px !important;
}
.nav-btn.on {
  color: var(--gold) !important;
  background: rgba(245,200,66,.05) !important;
}
.nav-btn.on .nicon {
  transform: translateY(-4px) scale(1.28) !important;
  filter: none !important;
  drop-shadow: 0 0 8px var(--gold-glow) !important;
}
/* Top gold line */
.nav-btn.on::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 12%; right: 12% !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 0 12px var(--gold-glow) !important;
}
/* Dividers */
.nav-btn + .nav-btn { border-right: 1px solid rgba(255,255,255,.04) !important; }
[dir=ltr] .nav-btn + .nav-btn { border-right: none !important; border-left: 1px solid rgba(255,255,255,.04) !important; }

/* ══════════════════════════════════════════
   AVATAR FRAMES — THICK GLOWING RINGS
══════════════════════════════════════════ */
.av {
  border-radius: 50% !important;
  position: relative !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Thick ring base */
.frx::after {
  content: '' !important;
  position: absolute !important;
  inset: -5px !important;
  border-radius: 50% !important;
  z-index: -1 !important;
  animation: frspin 3s linear infinite !important;
  padding: 3px !important;
}

.frx-nitro::after   { background: conic-gradient(#ff3d54,#f0c060,#3de8a0,#5b9fff,#b06aff,#ff3d54); box-shadow: 0 0 18px rgba(180,100,255,.5); animation-duration: 2s; }
.frx-rainbow::after { background: conic-gradient(red,orange,yellow,lime,cyan,blue,violet,red); animation-duration: 1.5s; box-shadow: 0 0 20px rgba(255,200,0,.4); }
.frx-fire::after    { background: conic-gradient(#ff2d47,#f5c842,#ff6a00,#ff2d47); box-shadow: 0 0 20px rgba(255,80,0,.6); animation-duration: 1.4s; }
.frx-ice::after     { background: conic-gradient(#00deff,#5b9fff,#b06aff,#00deff); box-shadow: 0 0 18px rgba(0,200,255,.5); }
.frx-gold::after    { background: conic-gradient(#f5c842,#ffe07a,#c49020,#f5c842); box-shadow: 0 0 24px rgba(245,200,66,.6); animation-duration: 2.5s; }
.frx-toxic::after   { background: conic-gradient(#2fffaa,#00ff64,#aaff00,#2fffaa); box-shadow: 0 0 18px rgba(0,255,100,.4); animation-duration: 2s; }
.frx-pulse::after   { background: rgba(255,45,71,.8) !important; animation: frpulse 0.9s ease-in-out infinite !important; box-shadow: 0 0 20px rgba(255,45,71,.6); }
.frx-shadow::after  { background: conic-gradient(#c87aff,#3d1a6e,#00deff,#c87aff); box-shadow: 0 0 20px rgba(200,120,255,.5); animation-duration: 4s; }
.frx-d30::after     { background: conic-gradient(#cd7f32,#e8b87a,#cd7f32); box-shadow: 0 0 16px rgba(205,127,50,.6); animation-duration: 2s; }
.frx-d90::after     { background: conic-gradient(#f5c842,#fff,#f5c842,#ffe07a,#f5c842); box-shadow: 0 0 28px rgba(245,200,66,.9); animation-duration: 1.2s; }

/* ══════════════════════════════════════════
   SHOP — PREMIUM REDESIGN
══════════════════════════════════════════ */
.shop-coins-bar {
  background: linear-gradient(135deg, rgba(245,200,66,.1), rgba(200,150,0,.06)) !important;
  border: 1px solid rgba(245,200,66,.2) !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.sc-val { font-size: 24px !important; font-weight: 900 !important; color: var(--gold) !important; text-shadow: 0 0 16px var(--gold-glow) !important; }

.shop-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-top: 4px !important;
}

.shop-item {
  background: rgba(8,6,24,.85) !important;
  border: 1.5px solid rgba(140,120,220,.15) !important;
  border-radius: 20px !important;
  padding: 22px 12px 16px !important;
  min-height: 150px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  cursor: pointer !important;
  transition: all .25s cubic-bezier(.2,.8,.2,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.shop-item::before {
  content: '' !important;
  position: absolute !important; top: 0; left: 10%; right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent) !important;
}
.shop-item:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(200,120,255,.3) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.6), 0 0 24px rgba(150,80,255,.15) !important;
  background: rgba(12,10,30,.9) !important;
}
.shop-item.owned {
  border-color: rgba(47,255,170,.2) !important;
  background: rgba(6,20,14,.8) !important;
}
.shop-item.equipped {
  border-color: rgba(245,200,66,.35) !important;
  background: rgba(20,14,4,.8) !important;
  box-shadow: 0 0 0 1px rgba(245,200,66,.15), 0 0 20px rgba(245,200,66,.1) !important;
}

.si-preview { font-size: 44px !important; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)) !important; }
.si-name {
  font-size: 12px !important; font-weight: 800 !important;
  text-align: center !important; line-height: 1.3 !important;
  margin: 8px 0 6px !important; color: var(--tx) !important;
}
.si-price {
  font-size: 12px !important; font-weight: 800 !important;
  padding: 4px 14px !important;
  border-radius: var(--r-full) !important;
  background: rgba(245,200,66,.1) !important;
  border: 1px solid rgba(245,200,66,.2) !important;
  color: var(--gold) !important;
}
.si-price.owned { background: rgba(47,255,170,.08) !important; border-color: rgba(47,255,170,.2) !important; color: var(--green) !important; }

/* ══════════════════════════════════════════
   LOBBY — LOBBY BG SUPPORT
══════════════════════════════════════════ */
#scr-lobby {
  background-image: var(--lobby-bg-img, none) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}
#scr-lobby::after {
  content: '' !important;
  position: fixed; inset: 0 !important;
  background: rgba(2,1,10,.7) !important;
  z-index: 0 !important; pointer-events: none !important;
}
#lobbyBox { position: relative !important; z-index: 1 !important; }

/* ROOM CODE */
.inp.code {
  background: rgba(4,2,18,.9) !important;
  border-color: rgba(245,200,66,.3) !important;
  color: var(--gold) !important;
  font-size: 26px !important;
  text-shadow: 0 0 16px var(--gold-glow) !important;
  letter-spacing: .3em !important;
  box-shadow: inset 0 0 20px rgba(245,200,66,.06) !important;
}

/* ══════════════════════════════════════════
   LEADERBOARD — RANKING
══════════════════════════════════════════ */
.lb-row {
  background: rgba(8,6,24,.8) !important;
  border: 1px solid rgba(140,120,220,.12) !important;
  border-radius: 14px !important;
  margin-bottom: 6px !important;
  transition: all .2s !important;
}
.lb-row:hover { border-color: rgba(200,120,255,.25) !important; transform: translateX(-2px) !important; }
.lb-row.me { border-color: rgba(245,200,66,.3) !important; background: rgba(20,14,4,.85) !important; }

/* ══════════════════════════════════════════
   GAME / END SCREENS
══════════════════════════════════════════ */
#hudWrap {
  background: rgba(2,1,10,.85) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(140,120,220,.12) !important;
}

/* Players grid cards */
.player-card {
  background: rgba(8,6,24,.85) !important;
  border: 1.5px solid rgba(140,120,220,.15) !important;
  border-radius: 20px !important;
  transition: all .25s !important;
}
.player-card:hover { border-color: rgba(200,120,255,.3) !important; transform: translateY(-3px) !important; }
.player-card.spy { border-color: rgba(255,45,71,.35) !important; box-shadow: 0 0 20px rgba(255,45,71,.2) !important; }

/* ══════════════════════════════════════════
   PROFILE SCREEN
══════════════════════════════════════════ */
.prof-hero {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 4px 0 16px !important;
}
.rank-chip {
  font-size: 13px !important; font-weight: 800 !important;
  padding: 4px 12px !important;
  border-radius: var(--r-full) !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
}
.xp-bar {
  height: 6px !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
.xp-bar i {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, var(--purple), var(--gold)) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 12px rgba(200,120,255,.4) !important;
}
.stat-grid {
  display: grid !important; grid-template-columns: repeat(3,1fr) !important;
  gap: 8px !important;
}
.stat-box {
  background: rgba(5,3,18,.7) !important;
  border: 1px solid rgba(120,100,200,.15) !important;
  border-radius: 14px !important; padding: 12px !important; text-align: center !important;
}
.sv { font-size: 24px !important; font-weight: 900 !important; }
.sk { font-size: 10px !important; color: var(--tx3) !important; font-weight: 700 !important; }

/* ══════════════════════════════════════════
   MISC POLISH
══════════════════════════════════════════ */
.eyebrow {
  font-size: 10px !important; font-weight: 800 !important;
  letter-spacing: .12em !important;
  color: var(--tx3) !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

.coin-chip, .xp-chip {
  display: inline-flex !important; align-items: center !important;
  gap: 5px !important;
  padding: 5px 14px !important;
  border-radius: var(--r-full) !important;
  font-weight: 800 !important; font-size: 14px !important;
}
.coin-chip { background: rgba(245,200,66,.12) !important; color: var(--gold) !important; border: 1px solid rgba(245,200,66,.2) !important; }
.xp-chip   { background: rgba(200,120,255,.1) !important; color: var(--purple) !important; border: 1px solid rgba(200,120,255,.18) !important; }

/* Admin dashboard */
.dash-val { color: var(--gold) !important; text-shadow: 0 0 12px var(--gold-glow) !important; }

/* Toast */
#toast {
  background: rgba(8,6,28,.95) !important;
  border: 1px solid rgba(200,180,255,.15) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.7) !important;
  border-radius: 18px !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: rgba(200,160,255,.2) !important; border-radius: 4px !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(200,160,255,.4) !important; }

/* Responsive: Desktop */
@media (min-width: 720px) {
  .shop-grid { grid-template-columns: repeat(3, 1fr) !important; }
  #navBar { max-width: 560px !important; left: 50% !important; transform: translateX(-50%) !important; border-inline: 1px solid rgba(120,100,200,.15) !important; }
  .auth-box { padding: 32px 28px 24px !important; }
}

/* Light mode tweaks */
[data-theme="light"] .card { background: rgba(240,240,255,.85) !important; }
[data-theme="light"] .shop-item { background: rgba(230,230,255,.9) !important; }
[data-theme="light"] .nav-btn { color: rgba(80,70,140,.5) !important; }
[data-theme="light"] #navBar { background: rgba(240,238,255,.92) !important; }
[data-theme="light"] .inp { background: rgba(240,238,255,.8) !important; color: #0d1030 !important; }