/* =========================
   SynthBot  styles.css (clean)
   ========================= */

/* ---------- Layout primitives ---------- */
html, body { height: 100%; }

/* Better font rendering and base tweaks */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

:root{
  --ar-surface: rgba(12,14,22,.6);
  --ar-border: rgba(0,243,255,.18);
  --ar-glow: rgba(0,243,255,.12);
  --ar-glow-strong: rgba(168,85,247,.18);
  --ar-text: #e6f9ff;
  --fx-pointer-x: 50%;
  --fx-pointer-y: 34%;
  --fx-hover-x: 50%;
  --fx-hover-y: 40%;
  --fx-scroll-depth: 0;
  --fx-energy: .18;
  --fx-idle: 0;
  --fx-accent-h: 278;
  --fx-secondary-h: 196;
  --fx-scroll-momentum: 0;
  --fx-scroll-abs: 0;
}

/* ---------- Shared public page styles ---------- */
.orbitron-page{
  font-family:'Orbitron',sans-serif;
  background:linear-gradient(to bottom,#0d0b1f,#11071f);
  color:#f0f0f0;
}

.glass{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    linear-gradient(180deg,rgba(18,20,32,.78),rgba(10,12,22,.68));
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:
    0 18px 46px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(132,76,198,.05);
}

.ring-card{
  border:1px solid rgba(152,98,224,.24);
  box-shadow:
    0 20px 48px rgba(0,0,0,.26),
    0 0 0 1px rgba(255,255,255,.02),
    0 0 46px rgba(110,52,182,.08);
}

.chip{
  padding:.35rem .6rem;
  border-radius:.75rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}

.badge{
  padding:.35rem .6rem;
  border-radius:.65rem;
  background:rgba(16,16,24,.7);
  border:1px solid rgba(168,85,247,.35);
  font-size:.8rem;
}
.badge.status-pending{ border-color:rgba(234,179,8,.6); color:#facc15; }
.badge.status-approved{ border-color:rgba(34,197,94,.6); color:#86efac; }
.badge.status-rejected{ border-color:rgba(239,68,68,.6); color:#fca5a5; }
.badge.status-removed{ border-color:rgba(148,163,184,.6); color:#cbd5f5; }
.badge.status-resolved{ border-color:rgba(59,130,246,.6); color:#93c5fd; }

.dropdown-content{ display:none; }
.dropdown:hover .dropdown-content{ display:block; }
.dropdown:not(.open) .dropdown-content{ display:none; }
.dropdown.open .dropdown-content{ display:block; }

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.animate-fadeIn{ animation:fadeIn .4s ease forwards; }

@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
.animate-float{ animation:float 4s ease-in-out infinite; }

.orbit{
  position:absolute;
  inset:0;
  border-radius:9999px;
  border:1px dashed rgba(168,85,247,.35);
}
.orbit:after{
  content:"";
  position:absolute;
  top:-6px;
  left:50%;
  width:10px;
  height:10px;
  border-radius:9999px;
  background:#a855f7;
  box-shadow:0 0 16px rgba(168,85,247,.8);
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.orbit-1{ animation:spin 12s linear infinite; }
.orbit-2{ transform:scale(.75); animation:spin 9s linear infinite reverse; }
.orbit-3{ transform:scale(.55); animation:spin 6s linear infinite; }

.brand-hat-wrap{ display:inline-flex; position:relative; align-items:center; }
.brand-text{ display:inline-flex; align-items:center; }
.brand-hat{
  position:absolute;
  left:-22px;
  top:-4px;
  width:48px;
  transform:rotate(-12deg);
  pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.5));
}
.brand-hat.hero-hat{ left:-28px; top:-10px; width:70px; }
.brand-home{ position:relative; }
.hero-brand-wrap{ position:relative; }
.hero-badge-glow{ filter:drop-shadow(0 0 8px #a855f7); }

.home-intro-copy{
  max-width: 54rem;
  margin-bottom: .5rem;
}

.home-signal-strip{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:.75rem;
}

.home-signal-card{
  padding:.9rem 1rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.home-signal-kicker{
  display:block;
  margin-bottom:.35rem;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#a78bfa;
}

.home-signal-card strong{
  display:block;
  font-size:.84rem;
  line-height:1.45;
  color:#eef2ff;
}

.home-action-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:1rem;
}

.home-action-card{
  position:relative;
  padding:1.15rem;
  border-radius:1.4rem;
  border:1px solid rgba(168,85,247,.22);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(168,85,247,.12), transparent 42%),
    linear-gradient(180deg, rgba(17,24,39,.82), rgba(9,12,24,.92));
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  overflow:hidden;
}

.home-action-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.05), transparent 30%, transparent 70%, rgba(168,85,247,.06));
  pointer-events:none;
}

.home-action-head{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  margin-bottom:.85rem;
}

.home-action-icon{
  width:2.2rem;
  height:2.2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.9rem;
  background:rgba(139,92,246,.16);
  border:1px solid rgba(168,85,247,.35);
  color:#f5f3ff;
  flex-shrink:0;
}

.home-action-kicker{
  margin:0 0 .2rem;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#a78bfa;
}

.home-action-title{
  margin:0;
  font-size:1.05rem;
  line-height:1.25;
  color:#fff;
}

.home-action-copy{
  margin:0 0 1rem;
  font-size:.88rem;
  line-height:1.55;
  color:#cbd5e1;
}

.home-action-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}

.home-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.35rem;
  padding:.55rem .85rem;
  border-radius:.8rem;
  background:#7c3aed;
  color:#fff;
  font-weight:700;
  font-size:.82rem;
  border:1px solid rgba(196,181,253,.25);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}

.home-action-btn:hover{
  transform:translateY(-1px);
  background:#8b5cf6;
}

.home-action-btn-secondary{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
  color:#e5e7eb;
}

.home-action-btn-secondary:hover{
  background:rgba(255,255,255,.1);
}

.home-pulse-shell{
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:1.25rem;
  border-radius:1.5rem;
  border:1px solid rgba(168,85,247,.2);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(168,85,247,.12), transparent 42%),
    linear-gradient(180deg, rgba(8,12,22,.82), rgba(7,10,18,.94));
  box-shadow:0 22px 48px rgba(0,0,0,.24);
}

.home-pulse-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
}

.home-pulse-kicker,
.home-pulse-panel-kicker{
  margin:0 0 .35rem;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a78bfa;
}

.home-pulse-stamp-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.2rem;
  min-width:170px;
}

.home-pulse-stamp-label{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#94a3b8;
}

.home-pulse-stamp{
  color:#f8fafc;
  font-size:.95rem;
}

.home-pulse-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.85rem;
}

.home-pulse-stat-card,
.home-pulse-panel{
  padding:1rem 1.05rem;
  border-radius:1.1rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.home-pulse-stat-label{
  display:block;
  margin-bottom:.35rem;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#94a3b8;
}

.home-pulse-stat-value{
  display:block;
  font-size:1.1rem;
  font-weight:800;
  color:#fff;
  line-height:1.35;
}

.home-pulse-stat-note{
  margin-top:.35rem;
  font-size:.82rem;
  line-height:1.55;
  color:#cbd5e1;
}

.home-pulse-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
}

.home-pulse-panel-head{
  margin-bottom:.85rem;
}

.home-pulse-panel-title{
  font-size:1rem;
  font-weight:700;
  color:#fff;
}

.home-pulse-list{
  display:grid;
  gap:.75rem;
}

.home-pulse-list-item{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
}

.home-pulse-list-item p{
  margin:0;
  font-size:.88rem;
  line-height:1.6;
  color:#cbd5e1;
}

.home-pulse-list-dot{
  width:.72rem;
  height:.72rem;
  border-radius:999px;
  margin-top:.35rem;
  background:radial-gradient(circle, rgba(216,180,254,1) 0%, rgba(124,58,237,1) 100%);
  box-shadow:0 0 12px rgba(168,85,247,.55);
  flex-shrink:0;
}

.home-pulse-route{
  display:grid;
  gap:.7rem;
}

.home-pulse-route-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
}

.home-pulse-route-tag{
  display:inline-flex;
  align-items:center;
  min-height:1.7rem;
  padding:.25rem .55rem;
  border-radius:999px;
  background:rgba(124,58,237,.18);
  border:1px solid rgba(196,181,253,.28);
  color:#e9d5ff;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.home-pulse-route strong{
  color:#fff;
}

.home-pulse-route-copy{
  margin:0;
  font-size:.88rem;
  line-height:1.6;
  color:#cbd5e1;
}

.home-pulse-route-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}

.home-pulse-route-chip{
  display:inline-flex;
  align-items:center;
  min-height:1.8rem;
  padding:.28rem .62rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#e2e8f0;
  font-size:.76rem;
  line-height:1;
}

.home-pulse-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1rem;
}

.home-pulse-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.35rem;
  padding:.55rem .9rem;
  border-radius:.85rem;
  background:#7c3aed;
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  border:1px solid rgba(196,181,253,.25);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}

.home-pulse-action-btn:hover{
  transform:translateY(-1px);
  background:#8b5cf6;
}

.home-pulse-action-btn-secondary{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
  color:#e5e7eb;
}

.home-pulse-action-btn-secondary:hover{
  background:rgba(255,255,255,.1);
}

.home-pulse-empty{
  padding:1rem;
  border-radius:1rem;
  background:rgba(255,255,255,.03);
  color:#94a3b8;
  font-size:.86rem;
}

.home-feature-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:1rem;
}

.home-feature-card{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  padding:1rem 1.05rem;
  border-radius:1.15rem;
  border:1px solid rgba(168,85,247,.18);
  background:linear-gradient(180deg, rgba(17,24,39,.7), rgba(15,23,42,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.home-feature-icon{
  width:2.4rem;
  height:2.4rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.9rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  color:#c4b5fd;
  flex-shrink:0;
}

.home-feature-title{
  margin:0 0 .25rem;
  font-size:.97rem;
  color:#fff;
}

.home-feature-copy{
  margin:0;
  font-size:.84rem;
  line-height:1.5;
  color:#cbd5e1;
}

@media (max-width: 1024px){
  .home-signal-strip,
  .home-action-grid,
  .home-feature-grid,
  .home-pulse-stats,
  .home-pulse-grid{
    grid-template-columns: 1fr;
  }

  .home-pulse-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .home-pulse-stamp-wrap{
    align-items:flex-start;
  }
}

.commands-shell{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.commands-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding:1.15rem 1.2rem;
  border-radius:1.35rem;
  border:1px solid rgba(168,85,247,.22);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,85,247,.11), transparent 42%),
    linear-gradient(180deg, rgba(17,24,39,.75), rgba(8,12,22,.92));
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}

#hero .grid > .relative,
.commands-hero,
.leaderboard-hero,
.suggestions-hero,
.auction-hero,
.stats-hero,
.changelog-hero,
.profile-hero,
.tycoon-hero,
.donate-hero,
.invite-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

#hero .grid > .relative{
  overflow:visible;
}

#hero .grid > .relative::before,
.commands-hero::before,
.leaderboard-hero::before,
.suggestions-hero::before,
.auction-hero::before,
.stats-hero::before,
.changelog-hero::before,
.profile-hero::before,
.tycoon-hero::before,
.donate-hero::before,
.invite-hero::before{
  content:"";
  position:absolute;
  inset:-12%;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(38% 28% at var(--fx-pointer-x) var(--fx-pointer-y), hsla(var(--fx-accent-h), 88%, 66%, .16), transparent 70%),
    radial-gradient(26% 22% at var(--fx-hover-x) var(--fx-hover-y), hsla(var(--fx-secondary-h), 90%, 68%, .12), transparent 72%);
  filter:blur(26px);
  mix-blend-mode:screen;
  transition:opacity .28s ease;
}

#hero .grid > .relative::after,
.commands-hero::after,
.leaderboard-hero::after,
.suggestions-hero::after,
.auction-hero::after,
.stats-hero::after,
.changelog-hero::after,
.tycoon-hero::after,
.donate-hero::after,
.invite-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.045) 18%, transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 32%, transparent 72%, rgba(255,255,255,.02));
  opacity:0;
  transform:translate3d(calc((var(--fx-pointer-x) - 50%) * .12), calc((var(--fx-pointer-y) - 50%) * .08), 0);
  transition:opacity .28s ease, transform .28s ease;
}

body.ar-ambient #hero .grid > .relative::before,
body.ar-ambient .commands-hero::before,
body.ar-ambient .leaderboard-hero::before,
body.ar-ambient .suggestions-hero::before,
body.ar-ambient .auction-hero::before,
body.ar-ambient .stats-hero::before,
body.ar-ambient .changelog-hero::before,
body.ar-ambient .profile-hero::before,
body.ar-ambient .tycoon-hero::before,
body.ar-ambient .donate-hero::before,
body.ar-ambient .invite-hero::before{
  opacity:calc(.42 + var(--fx-energy) * .34);
}

body.ar-ambient #hero .grid > .relative::after,
body.ar-ambient .commands-hero::after,
body.ar-ambient .leaderboard-hero::after,
body.ar-ambient .suggestions-hero::after,
body.ar-ambient .auction-hero::after,
body.ar-ambient .stats-hero::after,
body.ar-ambient .changelog-hero::after,
body.ar-ambient .tycoon-hero::after,
body.ar-ambient .donate-hero::after,
body.ar-ambient .invite-hero::after{
  opacity:.58;
}

body.ar-ambient #hero .grid > .relative,
body.ar-ambient .commands-hero,
body.ar-ambient .leaderboard-hero,
body.ar-ambient .suggestions-hero,
body.ar-ambient .auction-hero,
body.ar-ambient .stats-hero,
body.ar-ambient .changelog-hero,
body.ar-ambient .profile-hero,
body.ar-ambient .tycoon-hero,
body.ar-ambient .donate-hero,
body.ar-ambient .invite-hero{
  box-shadow:
    0 22px 54px rgba(0,0,0,.28),
    0 0 calc(18px + var(--fx-energy) * 22px) hsla(var(--fx-accent-h), 82%, 64%, .08),
    0 0 calc(12px + var(--fx-energy) * 18px) hsla(var(--fx-secondary-h), 82%, 62%, .05);
}

.commands-kicker{
  margin:0 0 .35rem;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a78bfa;
}

.commands-search-wrap{
  width:min(520px, 100%);
  flex-shrink:0;
  display:flex;
  gap:.65rem;
  align-items:stretch;
}

.commands-random-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:3rem;
  padding:.65rem .95rem;
  border-radius:1rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}

.commands-random-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.1);
}

.commands-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.9rem;
}

.commands-stat-card{
  padding:1rem 1.05rem;
  border-radius:1.05rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}

.commands-stat-label{
  display:block;
  margin-bottom:.35rem;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#94a3b8;
}

.commands-stat-value{
  display:block;
  font-size:1.35rem;
  font-weight:800;
  color:#fff;
}

.commands-stat-note{
  display:block;
  margin-top:.18rem;
  font-size:.8rem;
  color:#cbd5e1;
}

.commands-featured,
.commands-categories{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}

.commands-featured{
  display:grid;
  gap:.85rem;
}

.commands-feature-card{
  padding:1rem 1.05rem;
  border-radius:1.2rem;
  border:1px solid rgba(168,85,247,.22);
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.18), transparent 38%),
    linear-gradient(180deg, rgba(20,28,48,.9), rgba(11,16,28,.94));
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}

.commands-feature-kicker{
  display:block;
  margin-bottom:.45rem;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#c4b5fd;
}

.commands-feature-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.commands-feature-title{
  margin:0 0 .35rem;
  font-size:1.25rem;
  font-weight:800;
  color:#fff;
}

.commands-feature-copy{
  margin:0;
  max-width:42rem;
  color:#cbd5e1;
  font-size:.9rem;
  line-height:1.6;
}

.commands-feature-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.55rem;
}

.commands-feature-btn{
  min-height:2.3rem;
  padding:.5rem .9rem;
  border-radius:.8rem;
  border:1px solid rgba(196,181,253,.32);
  background:rgba(124,58,237,.2);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
}

.commands-feature-btn:hover{
  background:rgba(124,58,237,.3);
}

.commands-feature-btn-secondary{
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  color:#e5e7eb;
}

.commands-feature-btn-secondary:hover{
  background:rgba(255,255,255,.09);
}

.commands-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}

.commands-discovery-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.75rem;
}

.commands-discovery-card{
  padding:.95rem 1rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}

.commands-discovery-label{
  display:block;
  margin-bottom:.3rem;
  font-size:.8rem;
  font-weight:800;
  color:#fff;
}

.commands-discovery-copy{
  margin:0 0 .75rem;
  color:#cbd5e1;
  font-size:.82rem;
  line-height:1.55;
}

.commands-discovery-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.commands-discovery-btn{
  min-height:1.95rem;
  padding:.38rem .7rem;
  border-radius:.7rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:.78rem;
  font-weight:700;
}

.commands-discovery-btn:hover{
  background:rgba(255,255,255,.1);
}

.commands-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:2.2rem;
  padding:.5rem .8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.045);
  color:#e5e7eb;
  font-size:.82rem;
  font-weight:700;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}

.commands-chip:hover{
  background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}

.commands-chip.active{
  background:rgba(124,58,237,.22);
  border-color:rgba(196,181,253,.45);
  color:#fff;
}

.commands-chip-muted{
  color:#94a3b8;
  font-weight:600;
}

.commands-list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.command-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;
  padding:1rem 1.05rem;
  background:linear-gradient(180deg, rgba(17,24,39,.72), rgba(8,12,22,.9));
  box-shadow:0 14px 28px rgba(0,0,0,.16);
}

.command-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.command-card-main{
  min-width:0;
}

.command-card code{
  display:inline-flex;
  align-items:center;
  margin-bottom:.35rem;
  padding:.22rem .55rem;
  border-radius:.55rem;
  background:rgba(91,33,182,.2);
  border:1px solid rgba(168,85,247,.28);
  color:#d8b4fe;
}

.command-card-title{
  margin:0 0 .35rem;
  font-size:1rem;
  color:#fff;
}

.command-card-copy{
  margin:0;
  color:#cbd5e1;
  font-size:.88rem;
  line-height:1.5;
}

.command-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.75rem;
}

.command-card-meta span{
  display:inline-flex;
  align-items:center;
  min-height:1.7rem;
  padding:.28rem .55rem;
  border-radius:.55rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1;
  font-size:.74rem;
}

.command-card-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.1rem;
  height:2.1rem;
  border-radius:.7rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#c4b5fd;
  flex-shrink:0;
}

.commands-pagination{
  display:flex;
  justify-content:center;
}

.commands-pager{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  padding:.45rem .55rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(17,24,39,.72);
}

.commands-pager-btn{
  min-height:2rem;
  padding:.4rem .8rem;
  border-radius:.7rem;
  background:rgba(255,255,255,.05);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
}

.commands-pager-btn:disabled{
  opacity:.45;
}

@media (max-width: 900px){
  .commands-hero{
    flex-direction:column;
    align-items:stretch;
  }
  .commands-feature-head{
    flex-direction:column;
  }
  .commands-feature-actions{
    justify-content:flex-start;
  }
  .commands-discovery-grid{
    grid-template-columns:1fr;
  }
  .commands-search-wrap{
    width:100%;
  }
  .commands-stats{
    grid-template-columns:1fr;
  }
}

.leaderboard-shell{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.leaderboard-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding:1.15rem 1.2rem;
  border-radius:1.35rem;
  border:1px solid rgba(168,85,247,.22);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,85,247,.11), transparent 42%),
    linear-gradient(180deg, rgba(17,24,39,.75), rgba(8,12,22,.92));
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}

.leaderboard-kicker{
  margin:0 0 .35rem;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a78bfa;
}

.leaderboard-error{
  max-width:260px;
}

.leaderboard-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.9rem;
}

.leaderboard-podium{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.9rem;
}

.leaderboard-podium-card{
  position:relative;
  padding:1rem 1.05rem;
  border-radius:1.15rem;
  border:1px solid rgba(168,85,247,.2);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(168,85,247,.12), transparent 45%),
    linear-gradient(180deg, rgba(17,24,39,.78), rgba(8,12,22,.92));
  box-shadow:0 18px 36px rgba(0,0,0,.2);
  overflow:hidden;
}

.leaderboard-podium-card.place-1{
  border-color:rgba(250,204,21,.28);
}

.leaderboard-podium-card.place-2{
  border-color:rgba(148,163,184,.28);
}

.leaderboard-podium-card.place-3{
  border-color:rgba(251,146,60,.28);
}

.leaderboard-podium-card.is-me{
  box-shadow:0 0 0 1px rgba(196,181,253,.48) inset, 0 18px 36px rgba(0,0,0,.2);
}

.leaderboard-podium-place{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.95rem;
  color:#f8fafc;
}

.leaderboard-podium-name{
  display:block;
  margin-top:.65rem;
  font-size:1.05rem;
  color:#fff;
}

.leaderboard-podium-value{
  margin-top:.35rem;
  font-size:1.35rem;
  font-weight:800;
  color:#c4b5fd;
}

.leaderboard-podium-copy{
  margin-top:.45rem;
  font-size:.82rem;
  line-height:1.55;
  color:#cbd5e1;
}

.leaderboard-podium-tag{
  display:inline-flex;
  align-items:center;
  min-height:1.65rem;
  margin-top:.8rem;
  padding:.2rem .55rem;
  border-radius:999px;
  background:rgba(124,58,237,.2);
  border:1px solid rgba(196,181,253,.28);
  color:#ede9fe;
  font-size:.72rem;
  font-weight:700;
}

.leaderboard-stat-card{
  padding:1rem 1.05rem;
  border-radius:1.05rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}

.leaderboard-stat-card-accent{
  border-color:rgba(168,85,247,.22);
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.16), transparent 40%),
    linear-gradient(180deg, rgba(20,28,48,.88), rgba(11,16,28,.94));
}

.leaderboard-stat-label{
  display:block;
  margin-bottom:.35rem;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#94a3b8;
}

.leaderboard-stat-value{
  display:block;
  font-size:1.35rem;
  font-weight:800;
  color:#fff;
}

.leaderboard-stat-note{
  display:block;
  margin-top:.18rem;
  font-size:.8rem;
  color:#cbd5e1;
}

.leaderboard-filter-block{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.leaderboard-types{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}

.leaderboard-type-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.25rem;
  padding:.5rem .85rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.045);
  color:#e5e7eb;
  font-size:.82rem;
  font-weight:700;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}

.leaderboard-type-btn:hover{
  background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}

.leaderboard-type-btn.active{
  background:rgba(124,58,237,.22);
  border-color:rgba(196,181,253,.45);
  color:#fff;
}

.leaderboard-selects{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

.leaderboard-search-row{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

.leaderboard-search-btn{
  min-height:2.8rem;
  padding:.7rem 1rem;
  border-radius:.85rem;
  background:#7c3aed;
  color:#fff;
  font-weight:700;
  border:1px solid rgba(196,181,253,.25);
}

.leaderboard-search-btn:hover{
  background:#8b5cf6;
}

.leaderboard-search-btn-secondary{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
}

.leaderboard-search-btn-secondary:hover{
  background:rgba(255,255,255,.1);
}

.leaderboard-rank-card{
  display:grid;
  grid-template-columns:auto auto auto 1fr auto;
  align-items:center;
  gap:.8rem;
  padding:1rem 1.05rem;
  border-radius:1rem;
  border:1px solid rgba(168,85,247,.24);
  background:linear-gradient(180deg, rgba(17,24,39,.76), rgba(8,12,22,.92));
}

.leaderboard-rank-label{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#94a3b8;
}

.leaderboard-rank-value{
  font-size:1.25rem;
  font-weight:800;
  color:#fff;
}

.leaderboard-rank-number{
  color:#c4b5fd;
  font-weight:800;
}

.leaderboard-rank-btn{
  min-height:2.2rem;
  padding:.5rem .85rem;
  border-radius:.75rem;
  background:rgba(124,58,237,.22);
  border:1px solid rgba(168,85,247,.35);
  color:#fff;
  font-size:.8rem;
  font-weight:700;
}

.leaderboard-skeleton{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.leaderboard-skeleton-row{
  height:3.3rem;
  border-radius:.9rem;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.09) 18%, rgba(255,255,255,.04) 36%);
  background-size:220% 100%;
  animation: loading-shimmer 1.35s linear infinite;
}

.leaderboard-table-wrap{
  border:1px solid rgba(168,85,247,.18);
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 16px 36px rgba(0,0,0,.18);
}

.leaderboard-table thead{
  background:linear-gradient(90deg, rgba(124,58,237,.92), rgba(91,33,182,.92));
}

.leaderboard-row{
  border-bottom:1px solid rgba(255,255,255,.05);
}

.leaderboard-row:last-child{
  border-bottom:0;
}

.leaderboard-row.is-me{
  background:rgba(124,58,237,.12);
}

.leaderboard-name{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.leaderboard-rank-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2rem;
  height:2rem;
  border-radius:.7rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  font-weight:800;
}

.leaderboard-cards{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.leaderboard-card{
  padding:1rem 1.05rem;
  border-radius:1rem;
  border:1px solid rgba(168,85,247,.18);
  background:linear-gradient(180deg, rgba(17,24,39,.72), rgba(8,12,22,.9));
}

.leaderboard-card.is-me{
  box-shadow:0 0 0 1px rgba(168,85,247,.45) inset;
}

.leaderboard-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.leaderboard-card-name{
  margin-top:.45rem;
  font-size:.92rem;
  color:#e5e7eb;
}

.leaderboard-pagination{
  display:flex;
  justify-content:center;
}

.leaderboard-pager{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  padding:.45rem .55rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(17,24,39,.72);
}

.leaderboard-pager-btn{
  min-height:2rem;
  padding:.4rem .8rem;
  border-radius:.7rem;
  background:rgba(255,255,255,.05);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
}

.leaderboard-pager-btn:disabled{
  opacity:.45;
}

@media (max-width: 900px){
  .leaderboard-hero{
    flex-direction:column;
    align-items:stretch;
  }

  .leaderboard-stats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .leaderboard-podium{
    grid-template-columns:1fr;
  }

  .leaderboard-rank-card{
    grid-template-columns:auto 1fr auto;
    gap:.7rem;
  }
}

@media (max-width: 640px){
  .leaderboard-stats{
    grid-template-columns:1fr;
  }

  .leaderboard-rank-card{
    grid-template-columns:1fr;
    justify-items:flex-start;
  }

  .leaderboard-rank-card > *:last-child,
  .leaderboard-rank-btn{
    width:100%;
  }
}

.suggestions-shell{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.suggestions-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding:1.15rem 1.2rem;
  border-radius:1.35rem;
  border:1px solid rgba(168,85,247,.22);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,85,247,.11), transparent 42%),
    linear-gradient(180deg, rgba(17,24,39,.75), rgba(8,12,22,.92));
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}

.suggestions-kicker{
  margin:0 0 .35rem;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a78bfa;
}

.suggestions-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.9rem;
  width:min(100%, 580px);
}

.suggestions-stat-card{
  padding:1rem 1.05rem;
  border-radius:1.05rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}

.suggestions-stat-card-accent{
  border-color:rgba(168,85,247,.24);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(168,85,247,.12), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.suggestions-stat-label{
  display:block;
  margin-bottom:.35rem;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#94a3b8;
}

.suggestions-stat-value{
  display:block;
  font-size:1.35rem;
  font-weight:800;
  color:#fff;
}

.suggestions-stat-note{
  display:block;
  margin-top:.18rem;
  font-size:.8rem;
  color:#cbd5e1;
}

.suggestions-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.suggestions-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}

.suggestions-filter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.35rem;
  padding:.55rem .95rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.045);
  color:#e5e7eb;
  font-size:.82rem;
  font-weight:700;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}

.suggestions-filter-btn:hover{
  background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}

.suggestions-filter-btn.active{
  background:rgba(124,58,237,.22);
  border-color:rgba(196,181,253,.45);
  color:#fff;
}

.suggestions-status-wrap{
  min-width:190px;
}

.suggestions-status-select{
  min-height:2.5rem;
  width:100%;
  border-radius:.9rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(10,15,25,.9);
}

.suggestions-compose,
.suggestions-login-card,
.suggestions-empty,
.suggestions-error{
  padding:1rem 1.05rem;
  border-radius:1.1rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(17,24,39,.76), rgba(8,12,22,.92));
}

.suggestions-compose-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.85rem;
}

.suggestions-compose-title{
  margin:0;
  font-size:1rem;
  font-weight:700;
  color:#fff;
}

.suggestions-compose-copy{
  margin:.2rem 0 0;
  font-size:.86rem;
  color:#cbd5e1;
}

.suggestions-compose textarea{
  min-height:110px;
  resize:vertical;
}

.suggestions-compose-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:.85rem;
  flex-wrap:wrap;
}

.suggestions-compose-action-group{
  display:flex;
  align-items:center;
  gap:.65rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.suggestions-draft-note{
  font-size:.76rem;
  color:#94a3b8;
}

.suggestions-submit-btn,
.suggestions-login-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.75rem;
  padding:.72rem 1rem;
  border-radius:.9rem;
  background:#7c3aed;
  color:#fff;
  font-weight:700;
  border:1px solid rgba(196,181,253,.25);
}

.suggestions-submit-btn:hover,
.suggestions-login-btn:hover{
  background:#8b5cf6;
}

.suggestions-secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.75rem;
  padding:.72rem 1rem;
  border-radius:.9rem;
  background:rgba(255,255,255,.05);
  color:#e5e7eb;
  font-weight:700;
  border:1px solid rgba(255,255,255,.1);
}

.suggestions-secondary-btn:hover{
  background:rgba(255,255,255,.1);
}

.suggestions-list{
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

.suggestion-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem;
  padding:1rem 1.05rem;
  border-radius:1.15rem;
  border:1px solid rgba(168,85,247,.16);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,85,247,.08), transparent 46%),
    linear-gradient(180deg, rgba(17,24,39,.76), rgba(8,12,22,.92));
  box-shadow:0 18px 42px rgba(0,0,0,.18);
}

.suggestion-votes{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  min-width:54px;
}

.suggestion-vote-btn{
  width:2.35rem;
  height:2.35rem;
  border-radius:.85rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#cbd5e1;
}

.suggestion-vote-btn:hover{
  background:rgba(255,255,255,.08);
}

.suggestion-vote-btn.is-up{
  color:#34d399;
  border-color:rgba(52,211,153,.35);
}

.suggestion-vote-btn.is-down{
  color:#f87171;
  border-color:rgba(248,113,113,.35);
}

.suggestion-score{
  font-weight:800;
  color:#fff;
  font-size:1rem;
}

.suggestion-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  align-items:center;
}

.suggestion-copy{
  margin-top:.7rem;
  font-size:.98rem;
  line-height:1.65;
  color:#f8fafc;
  white-space:pre-wrap;
}

.suggestion-dev-reply{
  margin-top:.85rem;
  padding:.85rem .95rem;
  border-radius:1rem;
  border:1px solid rgba(16,185,129,.28);
  background:rgba(16,185,129,.09);
}

.suggestion-dev-reply-title{
  margin-bottom:.3rem;
  font-size:.82rem;
  font-weight:700;
  color:#6ee7b7;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.suggestion-admin-editor{
  margin-top:.85rem;
}

.suggestion-admin-actions,
.suggestion-card-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:.8rem;
}

.suggestion-text-btn{
  font-size:.84rem;
  font-weight:600;
  color:#c4b5fd;
}

.suggestion-text-btn:hover{
  color:#ddd6fe;
}

.suggestion-text-btn.is-danger{
  color:#fca5a5;
}

.suggestion-text-btn.is-danger:hover{
  color:#fecaca;
}

.suggestion-text-btn.is-warn{
  color:#fde68a;
}

.suggestion-text-btn.is-warn:hover{
  color:#fef3c7;
}

.suggestions-pagination{
  display:flex;
  justify-content:center;
  gap:.55rem;
  flex-wrap:wrap;
}

.suggestions-pager-btn{
  min-height:2.15rem;
  padding:.45rem .8rem;
  border-radius:.75rem;
  background:rgba(255,255,255,.05);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  font-weight:700;
}

.suggestions-pager-btn.active{
  background:rgba(124,58,237,.22);
  border-color:rgba(196,181,253,.45);
}

.suggestions-pager-gap{
  padding:.45rem .25rem;
  color:#94a3b8;
}

.suggestions-empty-title{
  margin:0 0 .35rem;
  font-size:1rem;
  font-weight:700;
  color:#fff;
}

.suggestions-empty-copy{
  margin:0;
  color:#cbd5e1;
}
.empty-state-card{
  position:relative;
  overflow:hidden;
}
.empty-state-card.compact{
  padding:.95rem 1rem;
}
.empty-state-kicker{
  display:inline-flex;
  margin-bottom:.45rem;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a78bfa;
}
.empty-state-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(46% 32% at 18% 0%, hsla(var(--fx-secondary-h), 90%, 70%, .08), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 34%);
}
.suggestions-error.empty-state-card,
.auction-error.empty-state-card,
.stats-error.empty-state-card{
  border-color:rgba(248,113,113,.22);
  box-shadow:0 14px 30px rgba(0,0,0,.22), 0 0 22px rgba(248,113,113,.08);
}
.suggestions-error.empty-state-card .empty-state-kicker,
.auction-error.empty-state-card .empty-state-kicker,
.stats-error.empty-state-card .empty-state-kicker{
  color:#fca5a5;
}
.loading-state-card{
  position:relative;
  overflow:hidden;
}
.loading-state-card.compact{
  padding:.95rem 1rem;
}
.loading-state-kicker{
  display:inline-flex;
  margin-bottom:.45rem;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a78bfa;
}
.loading-state-title{
  display:block;
  margin:0 0 .28rem;
  font-size:1rem;
  line-height:1.3;
  color:#fff;
}
.loading-state-copy{
  margin:0;
  font-size:.84rem;
  line-height:1.55;
  color:#cbd5e1;
}
.loading-state-lines{
  display:grid;
  gap:.42rem;
  margin-top:.9rem;
}
.loading-state-lines span{
  display:block;
  height:.62rem;
  border-radius:999px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.1) 22%, rgba(255,255,255,.04) 44%);
  background-size:220% 100%;
  animation: loading-shimmer 1.35s linear infinite;
}
.loading-state-lines span:nth-child(1){ width:88%; }
.loading-state-lines span:nth-child(2){ width:72%; animation-delay:.08s; }
.loading-state-lines span:nth-child(3){ width:56%; animation-delay:.16s; }
@keyframes loading-shimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-20% 0; }
}

.faq-shell{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.faq-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding:1.15rem 1.2rem;
  border-radius:1.35rem;
  border:1px solid rgba(168,85,247,.22);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,85,247,.11), transparent 42%),
    linear-gradient(180deg, rgba(17,24,39,.75), rgba(8,12,22,.92));
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}

.faq-kicker{
  margin:0 0 .35rem;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a78bfa;
}

.faq-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

.faq-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.6rem;
  padding:.65rem .95rem;
  border-radius:.9rem;
  background:#7c3aed;
  color:#fff;
  font-weight:700;
  border:1px solid rgba(196,181,253,.25);
}

.faq-action-btn:hover{
  background:#8b5cf6;
}

.faq-action-btn-secondary{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
}

.faq-action-btn-secondary:hover{
  background:rgba(255,255,255,.1);
}

.faq-shortcuts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.9rem;
}

.faq-shortcut-card{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding:1rem 1.05rem;
  border-radius:1.05rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}

.faq-shortcut-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.2rem;
  height:2.2rem;
  border-radius:.8rem;
  background:rgba(124,58,237,.18);
  color:#ddd6fe;
  border:1px solid rgba(196,181,253,.25);
  flex:0 0 auto;
}

.faq-shortcut-title{
  margin:0;
  font-size:.94rem;
  font-weight:700;
  color:#fff;
}

.faq-shortcut-copy{
  margin:.3rem 0 0;
  color:#cbd5e1;
  font-size:.84rem;
  line-height:1.55;
}

.faq-list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.faq-item{
  padding:1rem 1.05rem;
  border-radius:1.1rem;
  border:1px solid rgba(168,85,247,.16);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,85,247,.08), transparent 46%),
    linear-gradient(180deg, rgba(17,24,39,.76), rgba(8,12,22,.92));
}

.faq-feedback-card{
  padding:1.05rem 1.1rem;
  border-radius:1.15rem;
  border:1px solid rgba(168,85,247,.2);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,85,247,.08), transparent 46%),
    linear-gradient(180deg, rgba(17,24,39,.76), rgba(8,12,22,.92));
}

.faq-feedback-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.faq-feedback-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:.55rem;
  font-size:.78rem;
}

.faq-feedback-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:.9rem;
  flex-wrap:wrap;
}

.faq-feedback-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.7rem;
  padding:.68rem 1rem;
  border-radius:.9rem;
  background:#7c3aed;
  color:#fff;
  font-weight:700;
  border:1px solid rgba(196,181,253,.25);
}

.faq-feedback-submit:hover:not(:disabled){
  background:#8b5cf6;
}

.faq-feedback-submit:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.auction-shell{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.auction-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding:1.15rem 1.2rem;
  border-radius:1.35rem;
  border:1px solid rgba(168,85,247,.22);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,85,247,.11), transparent 42%),
    linear-gradient(180deg, rgba(17,24,39,.75), rgba(8,12,22,.92));
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}

.auction-kicker{
  margin:0 0 .35rem;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a78bfa;
}

.auction-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.9rem;
  width:min(100%, 420px);
}

.auction-stat-card{
  padding:1rem 1.05rem;
  border-radius:1.05rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}

.auction-stat-label{
  display:block;
  margin-bottom:.35rem;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#94a3b8;
}

.auction-stat-value{
  display:block;
  font-size:1.2rem;
  font-weight:800;
  color:#fff;
}

.auction-stat-note{
  display:block;
  margin-top:.18rem;
  font-size:.8rem;
  color:#cbd5e1;
}

.auction-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

.auction-mode-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.4rem;
  padding:.55rem .95rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.045);
  color:#e5e7eb;
  font-size:.82rem;
  font-weight:700;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}

.auction-mode-btn:hover{
  background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}

.auction-mode-btn.active{
  background:rgba(124,58,237,.22);
  border-color:rgba(196,181,253,.45);
  color:#fff;
}

.auction-mode-btn-accent{
  border-color:rgba(74,222,128,.25);
}

.auction-mode-btn-accent.active{
  background:rgba(34,197,94,.18);
  border-color:rgba(134,239,172,.45);
}

.auction-controls{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

.auction-pulse{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.85rem;
}

@media (max-width: 900px){
  .auction-hero{
    flex-direction:column;
    align-items:stretch;
  }

  .auction-stats{
    width:100%;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .auction-stats{
    grid-template-columns:1fr;
  }

  .auction-controls{
    flex-direction:column;
  }

  .auction-controls > *{
    width:100%;
  }
}

.auction-pulse-card{
  padding:.95rem 1rem;
  border-radius:1.05rem;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,85,247,.08), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}

.auction-pulse-label{
  display:block;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#94a3b8;
}

.auction-pulse-value{
  display:block;
  margin-top:.34rem;
  font-size:1rem;
  font-weight:800;
  color:#fff;
}

.auction-pulse-note{
  display:block;
  margin-top:.22rem;
  font-size:.76rem;
  line-height:1.5;
  color:#cbd5e1;
}

.auction-search-input{
  min-height:2.7rem;
  flex:1 1 260px;
}

.auction-sort-select{
  min-height:2.7rem;
  min-width:190px;
}

.auction-list,
.auction-mine{
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.auction-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.05rem;
  border-radius:1.15rem;
  border:1px solid rgba(168,85,247,.16);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,85,247,.08), transparent 46%),
    linear-gradient(180deg, rgba(17,24,39,.76), rgba(8,12,22,.92));
  box-shadow:0 18px 42px rgba(0,0,0,.18);
}

.auction-card-main{
  min-width:0;
}

.auction-item-line{
  color:#fff;
  font-size:1rem;
}

.auction-qty{
  color:#c4b5fd;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight:700;
}

.auction-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.45rem;
}

.auction-card-actions{
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.auction-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.45rem;
  padding:.55rem .9rem;
  border-radius:.85rem;
  color:#fff;
  font-weight:700;
  border:1px solid rgba(255,255,255,.08);
}

.auction-btn-buy{
  background:#16a34a;
  border-color:rgba(134,239,172,.18);
}

.auction-btn-buy:hover{
  background:#15803d;
}

.auction-btn-remove{
  background:#dc2626;
  border-color:rgba(252,165,165,.2);
}

.auction-btn-remove:hover{
  background:#b91c1c;
}

.auction-form,
.auction-empty,
.auction-error{
  padding:1rem 1.05rem;
  border-radius:1.1rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(17,24,39,.76), rgba(8,12,22,.92));
}

.auction-form-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.85rem;
}

.auction-field-label{
  display:block;
  margin-bottom:.35rem;
  font-size:.8rem;
  color:#cbd5e1;
}

.auction-submit-row{
  display:flex;
  justify-content:flex-end;
  margin-top:1rem;
}

.auction-submit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.7rem;
  padding:.68rem 1rem;
  border-radius:.9rem;
  background:#16a34a;
  color:#fff;
  font-weight:700;
  border:1px solid rgba(134,239,172,.2);
}

.auction-submit-btn:hover{
  background:#15803d;
}

.auction-pagination{
  display:flex;
  justify-content:center;
  gap:.55rem;
  flex-wrap:wrap;
}

.auction-pager-btn{
  min-height:2.15rem;
  padding:.45rem .8rem;
  border-radius:.75rem;
  background:rgba(255,255,255,.05);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  font-weight:700;
}

.auction-pager-btn.active{
  background:rgba(124,58,237,.22);
  border-color:rgba(196,181,253,.45);
}

.auction-buy-modal{
  position:fixed;
  inset:0;
  background:
    radial-gradient(40% 34% at 50% 18%, hsla(var(--fx-accent-h), 82%, 62%, .12), transparent 68%),
    linear-gradient(180deg, rgba(2,6,23,.76), rgba(2,6,23,.88));
  backdrop-filter:blur(10px) saturate(118%);
  -webkit-backdrop-filter:blur(10px) saturate(118%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:1rem;
}

.auction-buy-panel{
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:24rem;
  border-radius:1rem;
  padding:1.2rem;
  border:1px solid rgba(168,85,247,.22);
  background:linear-gradient(180deg, rgba(17,24,39,.96), rgba(8,12,22,.98));
  box-shadow:0 20px 50px rgba(0,0,0,.35), 0 0 28px hsla(var(--fx-accent-h), 84%, 64%, .12);
  animation:overlay-panel-pop .2s cubic-bezier(.22,.61,.36,1) both;
}

.auction-buy-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(44% 26% at 18% 0%, hsla(var(--fx-secondary-h), 92%, 70%, .14), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 34%);
  opacity:.9;
}

.auction-buy-actions{
  display:flex;
  justify-content:flex-end;
  gap:.75rem;
  margin-top:1rem;
}

.auction-cancel-btn{
  min-height:2.4rem;
  padding:.55rem .9rem;
  border-radius:.8rem;
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
}

.auction-cancel-btn:hover{
  background:rgba(255,255,255,.1);
}

.auction-confirm-btn{
  min-height:2.4rem;
  padding:.55rem .95rem;
  border-radius:.8rem;
  background:#16a34a;
  color:#fff;
  border:1px solid rgba(134,239,172,.18);
}

.auction-confirm-btn:hover{
  background:#15803d;
}

.stats-shell{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.stats-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding:1.15rem 1.2rem;
  border-radius:1.35rem;
  border:1px solid rgba(168,85,247,.22);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,85,247,.11), transparent 42%),
    linear-gradient(180deg, rgba(17,24,39,.75), rgba(8,12,22,.92));
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}

.stats-kicker{
  margin:0 0 .35rem;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a78bfa;
}

.stats-meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.9rem;
  width:min(100%, 300px);
}

.stats-meta-card{
  padding:1rem 1.05rem;
  border-radius:1.05rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}

.stats-meta-label{
  display:block;
  margin-bottom:.35rem;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#94a3b8;
}

.stats-meta-value{
  display:block;
  font-size:1.15rem;
  font-weight:800;
  color:#fff;
}

.stats-meta-copy{
  display:block;
  margin-top:.18rem;
  font-size:.8rem;
  color:#cbd5e1;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.9rem;
}

.stats-card{
  padding:1rem 1.05rem;
  border-radius:1.15rem;
  border:1px solid rgba(168,85,247,.16);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,85,247,.08), transparent 46%),
    linear-gradient(180deg, rgba(17,24,39,.76), rgba(8,12,22,.92));
  box-shadow:0 18px 42px rgba(0,0,0,.18);
}

.stats-card-label{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.8rem;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.stats-card-value{
  display:block;
  margin-top:.55rem;
  font-size:1.95rem;
  font-weight:800;
  color:#fff;
}

.stats-card-value.is-money{
  color:#4ade80;
}

.stats-card-note{
  margin-top:.28rem;
  font-size:.82rem;
  color:#cbd5e1;
}

.stats-chip-wrap{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
  margin-top:.65rem;
}

.stats-progress{
  margin-top:.75rem;
  height:.55rem;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}

.stats-progress-bar{
  height:100%;
  background:linear-gradient(90deg, #7c3aed, #a78bfa);
  width:0%;
  transition:width .6s ease;
}

.stats-empty,
.stats-error{
  padding:1rem 1.05rem;
  border-radius:1.1rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(17,24,39,.76), rgba(8,12,22,.92));
  color:#cbd5e1;
}

.stats-grid.is-loading .stats-card{
  opacity:.78;
}

.changelog-shell{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.changelog-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding:1.15rem 1.2rem;
  border-radius:1.35rem;
  border:1px solid rgba(168,85,247,.22);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,85,247,.11), transparent 42%),
    linear-gradient(180deg, rgba(17,24,39,.75), rgba(8,12,22,.92));
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}

.changelog-kicker{
  margin:0 0 .35rem;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a78bfa;
}

.changelog-meta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.9rem;
  width:min(100%, 620px);
}

.changelog-meta-card{
  padding:1rem 1.05rem;
  border-radius:1.05rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}

.changelog-meta-label{
  display:block;
  margin-bottom:.35rem;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#94a3b8;
}

.changelog-meta-value{
  display:block;
  font-size:1.15rem;
  font-weight:800;
  color:#fff;
}

.changelog-meta-copy{
  display:block;
  margin-top:.18rem;
  font-size:.8rem;
  color:#cbd5e1;
}

.changelog-filters{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

.changelog-filter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.35rem;
  padding:.55rem .95rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.045);
  color:#e5e7eb;
  font-size:.82rem;
  font-weight:700;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}

.changelog-filter-btn:hover{
  background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}

.changelog-filter-btn.active{
  background:rgba(124,58,237,.22);
  border-color:rgba(196,181,253,.45);
  color:#fff;
}

.changelog-filter-btn-feature.active{
  background:rgba(22,163,74,.2);
  border-color:rgba(134,239,172,.4);
}

.changelog-filter-btn-fix.active{
  background:rgba(37,99,235,.2);
  border-color:rgba(147,197,253,.35);
}

.changelog-filter-btn-balance.active{
  background:rgba(202,138,4,.2);
  border-color:rgba(253,224,71,.35);
}

.changelog-timeline{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.changelog-spotlight{
  padding:1rem 1.05rem;
  border-radius:1.15rem;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(168,85,247,.1), transparent 48%),
    linear-gradient(180deg, rgba(17,24,39,.76), rgba(8,12,22,.92));
  box-shadow:0 18px 42px rgba(0,0,0,.18);
}

.changelog-spotlight-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.changelog-spotlight-kicker{
  margin:0 0 .28rem;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a78bfa;
}

.changelog-spotlight-title{
  margin:0;
  font-size:1.1rem;
  font-weight:800;
  color:#fff;
}

.changelog-spotlight-copy{
  margin:.3rem 0 0;
  font-size:.82rem;
  line-height:1.6;
  color:#cbd5e1;
}

.changelog-spotlight-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.7rem;
  margin-top:.9rem;
}

.changelog-spotlight-card{
  padding:.85rem .9rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}

.changelog-spotlight-label{
  display:block;
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#94a3b8;
}

.changelog-spotlight-value{
  display:block;
  margin-top:.32rem;
  font-size:1rem;
  font-weight:800;
  color:#fff;
}

.changelog-spotlight-note{
  display:block;
  margin-top:.2rem;
  font-size:.74rem;
  color:#cbd5e1;
  line-height:1.45;
}

.changelog-entry{
  position:relative;
  padding:1rem 1.05rem 1rem 1.2rem;
  border-radius:1.15rem;
  border:1px solid rgba(168,85,247,.16);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,85,247,.08), transparent 46%),
    linear-gradient(180deg, rgba(17,24,39,.76), rgba(8,12,22,.92));
  box-shadow:0 18px 42px rgba(0,0,0,.18);
}

.changelog-entry::before{
  content:"";
  position:absolute;
  left:.55rem;
  top:1.35rem;
  width:.55rem;
  height:.55rem;
  border-radius:999px;
  background:#a855f7;
  box-shadow:0 0 10px rgba(168,85,247,.7);
}

.changelog-entry-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.65rem;
}

.changelog-version{
  font-size:1rem;
  font-weight:700;
  color:#e9d5ff;
}

.changelog-date{
  font-size:.82rem;
  color:#94a3b8;
}

.changelog-changes{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}

.changelog-change{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  color:#e5e7eb;
}

.changelog-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:4.7rem;
  padding:.22rem .5rem;
  border-radius:999px;
  font-size:.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#fff;
}

.changelog-badge-feature{
  background:#166534;
}

.changelog-badge-fix{
  background:#1d4ed8;
}

.changelog-badge-balance{
  background:#ca8a04;
}

.changelog-badge-other{
  background:#6d28d9;
}

.changelog-empty,
.changelog-error{
  padding:1rem 1.05rem;
  border-radius:1.1rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(17,24,39,.76), rgba(8,12,22,.92));
  color:#cbd5e1;
}

@media (max-width: 900px){
  .leaderboard-hero{
    flex-direction:column;
    align-items:stretch;
  }

  .leaderboard-stats{
    grid-template-columns:1fr;
  }

  .leaderboard-podium{
    grid-template-columns:1fr;
  }

  .leaderboard-rank-card{
    grid-template-columns:1fr;
    justify-items:start;
  }

  .suggestions-hero{
    flex-direction:column;
    align-items:stretch;
  }

  .suggestions-stats{
    width:100%;
    grid-template-columns:1fr;
  }

  .suggestion-card{
    grid-template-columns:1fr;
  }

  .suggestion-votes{
    flex-direction:row;
    justify-content:flex-start;
    min-width:0;
  }

  .faq-hero{
    flex-direction:column;
    align-items:stretch;
  }

  .faq-shortcuts{
    grid-template-columns:1fr;
  }

  .faq-feedback-head,
  .faq-feedback-actions{
    flex-direction:column;
    align-items:flex-start;
  }

  .auction-hero{
    flex-direction:column;
    align-items:stretch;
  }

  .auction-stats{
    width:100%;
    grid-template-columns:1fr;
  }

  .auction-pulse{
    grid-template-columns:1fr;
  }

  .auction-card{
    flex-direction:column;
    align-items:flex-start;
  }

  .auction-card-actions{
    width:100%;
    justify-content:flex-start;
  }

  .auction-form-grid{
    grid-template-columns:1fr;
  }

  .stats-hero{
    flex-direction:column;
    align-items:stretch;
  }

  .stats-meta{
    width:100%;
    grid-template-columns:1fr;
  }

  .stats-grid{
    grid-template-columns:1fr;
  }

  .changelog-hero{
    flex-direction:column;
    align-items:stretch;
  }

  .changelog-meta{
    width:100%;
    grid-template-columns:1fr;
  }

  .changelog-entry-head{
    flex-direction:column;
  }

  .changelog-spotlight-head{
    flex-direction:column;
  }

  .changelog-spotlight-stats{
    grid-template-columns:1fr;
  }
}

/* Buttons (optional utility) */
.btn {
  display:inline-flex; align-items:center; gap:.5rem; border-radius:.65rem;
  padding:.45rem .85rem; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color:#fff;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); transform: translateY(-1px); }
.btn-primary { background: rgba(139,92,246,.15); border-color: rgba(168,85,247,.35); }
.btn-primary:hover { background: rgba(139,92,246,.25); }
.btn-danger { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.35); }
.btn-danger:hover { background: rgba(239,68,68,.25); }

/* Inputs (optional utility) */
.input {
  background:#0f0f1a; border:1px solid #222236; color:#fff; border-radius:.6rem; padding:.5rem .75rem;
}
.input:focus { outline:none; box-shadow: 0 0 0 2px rgba(167,139,250,.35); border-color: rgba(167,139,250,.55); }

/* ---------- Notifications ---------- */
#notif-root{ position: relative; }
.notif-panel{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(320px, 84vw);
    max-height: 400px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(15,15,26,.92);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
    z-index: 60;
    transform-origin: top right;
    animation: notif-pop .16s ease-out;
    overflow: hidden;
  }
.notif-panel.no-motion{ animation: none; }
@keyframes notif-pop{
  from{ opacity:0; transform: translateY(-6px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.notif-panel .hidden{ display: none; }

.site-ad-shell{
  width:100%;
}

.site-ad-shell.is-empty{
  display:none;
}

.site-ad-frame{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  padding:.65rem .75rem;
  border-radius:.95rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(17,24,39,.72), rgba(8,12,22,.9));
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}

.site-ad-head{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}

.site-ad-label{
  display:inline-flex;
  align-items:center;
  padding:.18rem .42rem;
  border-radius:999px;
  border:1px solid rgba(168,85,247,.28);
  background:rgba(124,58,237,.1);
  color:#d8b4fe;
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.site-ad-slot{
  width:100%;
  min-height:92px;
  overflow:hidden;
}

.site-ad-slot .adsbygoogle{
  width:100%;
  min-height:92px;
}

@media (max-width: 768px){
  .site-ad-frame{
    padding:.55rem .65rem;
    border-radius:.85rem;
  }

  .site-ad-slot,
  .site-ad-slot .adsbygoogle{
    min-height:74px;
  }
}
  
  /* ---------- Global tokens for the pill nav ---------- */
  :root{
  --nav-font:  clamp(11px, 1.05vw, 14px);
  --nav-pad-x: clamp(.45rem, 1.2vw, .85rem);
  --nav-pad-y: .45rem;
  --nav-gap:   clamp(.25rem, .9vw, .5rem);
  --nav-icon:  clamp(16px, 1.35vw, 20px);
}

/* ---------- Particles / Background ---------- */
#particles-js{
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -6;
  pointer-events: none;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(1260px 860px at 56% 34%, rgba(64, 18, 104, .12), transparent 36%),
    radial-gradient(980px 720px at 18% 10%, rgba(28, 128, 166, .05), transparent 52%),
    radial-gradient(900px 700px at 86% 16%, rgba(92, 28, 146, .08), transparent 56%),
    linear-gradient(180deg, #03030a 0%, #060711 30%, #070613 60%, #030209 100%);
}
#particles-js::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(24% 16% at 56% 34%, rgba(0, 0, 0, .95), rgba(4, 4, 12, .8) 42%, rgba(4, 5, 12, 0) 100%),
    radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 34%, rgba(0,0,0,.34) 68%, rgba(0,0,0,.66) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .48));
  opacity:1;
}
#particles-js::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(56% 48% at 56% 34%, rgba(126, 50, 190, .1), transparent 60%),
    radial-gradient(36% 32% at 24% 72%, rgba(28, 140, 182, .05), transparent 72%),
    linear-gradient(180deg, rgba(5, 6, 12, .02), rgba(2, 2, 6, .28));
  opacity:.74;
}
.particles-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:.95;
  filter:saturate(.88) contrast(1.12) brightness(.84);
}

#immersive-fx-root{
  position: fixed;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity .35s ease;
}
#immersive-fx-root.is-active{
  opacity: 1;
}
.immersive-fx-layer{
  position: absolute;
  inset: -10%;
  pointer-events: none;
}
.immersive-fx-depth{
  background:
    radial-gradient(44% 38% at var(--fx-pointer-x) var(--fx-pointer-y), hsla(var(--fx-accent-h), 88%, 64%, calc(.08 + var(--fx-energy) * .16)), transparent 62%),
    radial-gradient(34% 28% at calc(100% - var(--fx-pointer-x)) calc(100% - var(--fx-pointer-y)), hsla(var(--fx-secondary-h), 92%, 62%, calc(.05 + var(--fx-energy) * .12)), transparent 64%);
  filter: blur(26px);
  transform:
    translate3d(0, calc(var(--fx-scroll-depth) * -30px + var(--fx-scroll-momentum) * -18px), 0)
    scale(calc(1 + var(--fx-scroll-abs) * .035));
  mix-blend-mode: screen;
}
.immersive-fx-grid{
  inset: 18% -8% -28% -8%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 18%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 64px);
  transform-origin: center top;
  transform:
    perspective(1200px)
    rotateX(76deg)
    translateY(calc(20px + var(--fx-scroll-depth) * 80px + var(--fx-scroll-momentum) * 22px))
    rotateZ(calc(var(--fx-scroll-momentum) * -1.2deg))
    scale(1.08);
  opacity: calc(.06 + var(--fx-energy) * .14 + var(--fx-scroll-abs) * .05);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 24%, rgba(0,0,0,.95) 72%, transparent 100%);
}
.immersive-fx-wave{
  background:
    conic-gradient(from calc(var(--fx-time) * 22deg) at 50% 50%, transparent 0 18%, hsla(var(--fx-accent-h), 84%, 60%, .06) 24%, transparent 32%, hsla(var(--fx-secondary-h), 86%, 60%, .05) 44%, transparent 56%, hsla(var(--fx-accent-h), 86%, 60%, .04) 70%, transparent 100%);
  transform:
    translate3d(0, calc(var(--fx-scroll-momentum) * -20px), 0)
    rotate(calc(var(--fx-scroll-momentum) * 3deg))
    scale(calc(1.15 + var(--fx-scroll-abs) * .04));
  opacity: calc(.32 - var(--fx-idle) * .1 + var(--fx-scroll-abs) * .08);
  filter: blur(34px);
  mix-blend-mode: screen;
}
.immersive-fx-halo{
  background:
    radial-gradient(18% 18% at var(--fx-hover-x) var(--fx-hover-y), hsla(var(--fx-accent-h), 92%, 72%, calc(.08 + var(--fx-energy) * .28)), transparent 74%),
    radial-gradient(24% 20% at var(--fx-pointer-x) var(--fx-pointer-y), hsla(var(--fx-secondary-h), 94%, 70%, calc(.04 + var(--fx-energy) * .12)), transparent 72%);
  filter: blur(20px);
  transform: translate3d(0, calc(var(--fx-scroll-momentum) * -12px), 0);
  mix-blend-mode: screen;
}
.immersive-fx-noise{
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.05) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 38%, rgba(255,255,255,.04) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 82%, rgba(255,255,255,.035) 0 1px, transparent 1px);
  background-size: 180px 180px, 220px 220px, 240px 240px;
  opacity: calc(.14 - var(--fx-idle) * .04 + var(--fx-scroll-abs) * .04);
  mix-blend-mode: screen;
}
.immersive-fx-focus{
  left:0;
  top:0;
  width:0;
  height:0;
  opacity:0;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 50%, hsla(var(--fx-accent-h), 88%, 70%, .2), transparent 62%),
    radial-gradient(circle at 64% 38%, hsla(var(--fx-secondary-h), 92%, 72%, .14), transparent 68%);
  border:1px solid hsla(var(--fx-accent-h), 82%, 70%, .16);
  box-shadow:
    0 0 26px hsla(var(--fx-accent-h), 84%, 66%, .12),
    0 0 18px hsla(var(--fx-secondary-h), 84%, 64%, .08);
  filter: blur(8px);
  mix-blend-mode: screen;
  will-change: transform, width, height, opacity;
}
.immersive-fx-transition{
  inset:-8%;
  opacity:0;
  background:
    radial-gradient(44% 26% at 50% 52%, hsla(var(--fx-accent-h), 86%, 66%, .26), transparent 70%),
    linear-gradient(90deg, transparent 0%, hsla(var(--fx-secondary-h), 90%, 68%, .16) 24%, rgba(255,255,255,.1) 50%, hsla(var(--fx-accent-h), 88%, 66%, .16) 76%, transparent 100%);
  filter: blur(20px);
  transform: translate3d(-8%, 0, 0) scale(1.04);
  mix-blend-mode: screen;
}
#immersive-fx-root.is-transitioning .immersive-fx-transition{
  animation: immersive-section-shift .72s cubic-bezier(.22,.61,.36,1) both;
}
#immersive-fx-root.is-entering .immersive-fx-depth{
  animation: immersive-entry-depth 1.15s cubic-bezier(.18,.84,.32,1) both;
}
#immersive-fx-root.is-entering .immersive-fx-grid{
  animation: immersive-entry-grid 1.25s cubic-bezier(.2,.82,.28,1) both;
}
#immersive-fx-root.is-entering .immersive-fx-wave{
  animation: immersive-entry-wave 1.2s cubic-bezier(.22,.61,.36,1) both;
}
#immersive-fx-root.is-entering .immersive-fx-halo,
#immersive-fx-root.is-entering .immersive-fx-transition{
  animation: immersive-entry-halo 1.05s cubic-bezier(.18,.84,.32,1) both;
}
#immersive-fx-root.is-entering .immersive-fx-noise{
  animation: immersive-entry-noise 1.1s ease-out both;
}
#immersive-fx-root.is-lite .immersive-fx-grid{
  opacity: .07;
  transform: perspective(1200px) rotateX(80deg) translateY(54px) scale(1.04);
}
#immersive-fx-root.is-lite .immersive-fx-wave{
  opacity: .18;
  filter: blur(26px);
}
#immersive-fx-root.is-lite .immersive-fx-noise{
  opacity: .08;
}
.fx-off #immersive-fx-root{
  display:none !important;
}
body.fx-page-enter #app-header .nav-shell::after,
body.fx-page-enter .ring-card,
body.fx-page-enter .holo-card,
body.fx-page-enter .ar-surface,
body.fx-page-enter .home-pulse-shell,
body.fx-page-enter .home-action-btn{
  animation: fx-page-entry-surface 1.05s cubic-bezier(.2,.82,.28,1) both;
}
body.fx-page-enter #app-header .nav-shell{
  animation: fx-page-entry-nav 1s cubic-bezier(.18,.84,.32,1) both;
}
@keyframes immersive-entry-depth{
  0%{ opacity:0; transform:translate3d(0,28px,0) scale(1.08); filter:blur(38px); }
  55%{ opacity:1; }
  100%{ opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(26px); }
}
@keyframes immersive-entry-grid{
  0%{ opacity:0; transform:perspective(1200px) rotateX(88deg) translateY(96px) scale(1.18); }
  100%{ opacity:calc(.06 + var(--fx-energy) * .14 + var(--fx-scroll-abs) * .05); transform:perspective(1200px) rotateX(80deg) translateY(48px) scale(1.08); }
}
@keyframes immersive-entry-wave{
  0%{ opacity:0; transform:translate3d(0,38px,0) scale(1.28) rotate(-3deg); filter:blur(46px); }
  100%{ opacity:calc(.32 - var(--fx-idle) * .1 + var(--fx-scroll-abs) * .08); transform:translate3d(0, calc(var(--fx-scroll-momentum) * -20px), 0) rotate(calc(var(--fx-scroll-momentum) * 3deg)) scale(calc(1.15 + var(--fx-scroll-abs) * .04)); filter:blur(34px); }
}
@keyframes immersive-entry-halo{
  0%{ opacity:0; transform:translate3d(0,12px,0) scale(.88); filter:blur(32px); }
  45%{ opacity:.9; }
  100%{ opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(20px); }
}
@keyframes immersive-entry-noise{
  0%{ opacity:0; }
  100%{ opacity:calc(.14 - var(--fx-idle) * .04 + var(--fx-scroll-abs) * .04); }
}
@keyframes fx-page-entry-surface{
  0%{ opacity:.72; transform:translate3d(0,16px,0) scale(.985); filter:saturate(.84) brightness(.9); }
  55%{ opacity:1; }
  100%{ opacity:1; transform:translate3d(0,0,0) scale(1); filter:saturate(1) brightness(1); }
}
@keyframes fx-page-entry-nav{
  0%{ transform:translate3d(0,-10px,0) scale(.992); filter:saturate(.88); }
  100%{ transform:translate3d(0,0,0) scale(1); filter:saturate(1); }
}

/* Low-power mode: disable heavy background effects */
.low-power #aurora-veil,
.low-power #neon-flares,
.low-power #webgl-bg,
.low-power #scanlines,
.low-power #fx-toggle{
  display: none !important;
}
.fx-off #particles-js{ display:none !important; }
@media (max-width: 900px){
  #aurora-veil, #neon-flares, #webgl-bg, #scanlines{
    display: none !important;
  }
}

/* ---------- Holiday snow overlay ---------- */
#snow-layer{
  position: fixed; inset: 0; pointer-events:none; z-index: 999; overflow:hidden;
  opacity: 0; transition: opacity .3s ease;
}
body.holiday-christmas #snow-layer{ opacity: .95; }
body.holiday-easter #snow-layer{ opacity: .82; }
#snow-layer::before,
#snow-layer::after{
  content:""; position:absolute; inset:-20% 0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.95) 40%, transparent 60%),
    radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,.85) 40%, transparent 60%),
    radial-gradient(2px 2px at 70% 30%, rgba(255,255,255,.9) 40%, transparent 60%),
    radial-gradient(2px 2px at 90% 60%, rgba(255,255,255,.75) 40%, transparent 60%);
  background-size: 140px 140px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.6));
  animation: snow-drift 22s linear infinite;
}
#snow-layer::after{
  opacity:.6;
  background-size: 200px 200px;
  animation-duration: 32s;
}
body.holiday-easter #snow-layer::before,
body.holiday-easter #snow-layer::after{
  opacity: 0;
  animation: none;
}
.snowflake{
  position:absolute; top:0; left:var(--x, 50%);
  width:var(--size,6px); height:var(--size,6px);
  border-radius:9999px;
  background: radial-gradient(circle, rgba(255,255,255,1), rgba(255,255,255,0) 70%);
  opacity:var(--op, .9);
  filter: drop-shadow(0 0 4px rgba(255,255,255,.45));
  animation: snow-fall var(--dur, 16s) linear var(--delay, 0s) infinite;
}
.low-power .snowflake{
  filter: none;
  opacity: .75;
}
@keyframes snow-drift{
  from{ transform: translateY(-20%) translateX(0); }
  to{ transform: translateY(120%) translateX(40px); }
}
@keyframes snow-fall{
  from{ transform: translate3d(0, -10vh, 0); }
  to{ transform: translate3d(var(--drift, 0px), 110vh, 0); }
}
.easter-orb{
  position:absolute;
  left:var(--x, 50%);
  top:110%;
  width:var(--size, 32px);
  height:calc(var(--size, 32px) * 1.28);
  border-radius:46% 46% 52% 52%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--color, #f7b8d9) 88%, white 12%), color-mix(in srgb, var(--color, #f7b8d9) 72%, black 28%));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 10px 28px color-mix(in srgb, var(--color, #f7b8d9) 26%, transparent);
  opacity:.84;
  transform:rotate(var(--tilt, 0deg));
  animation:easter-float var(--dur, 24s) linear var(--delay, 0s) infinite;
}
.easter-orb::before,
.easter-orb::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.26);
}
.easter-orb::before{ top:34%; }
.easter-orb::after{ top:58%; opacity:.78; }
.easter-spark{
  position:absolute;
  left:var(--x, 50%);
  top:var(--y, 50%);
  width:var(--size, 4px);
  height:var(--size, 4px);
  border-radius:999px;
  background:var(--color, #ffe28c);
  box-shadow:0 0 10px color-mix(in srgb, var(--color, #ffe28c) 75%, white 25%);
  opacity:.46;
  animation:easter-twinkle var(--dur, 10s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes easter-float{
  from{ transform:translate3d(0, 0, 0) rotate(var(--tilt, 0deg)); }
  to{ transform:translate3d(var(--drift, 0px), -128vh, 0) rotate(calc(var(--tilt, 0deg) + 16deg)); }
}
@keyframes easter-twinkle{
  0%,100%{ opacity:.18; transform:scale(.72); }
  50%{ opacity:var(--twinkle, .7); transform:scale(1.2); }
}

/* ---------- Holiday banner ---------- */
.holiday-banner{
  position: fixed; top: 84px; right: 16px; z-index: 96;
  display: inline-flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
  max-width: min(420px, 92vw);
  padding: 8px 12px; border-radius: 12px;
  background: rgba(18,16,28,.86);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  font-size: 11px; line-height: 1.35; letter-spacing: .02em;
  backdrop-filter: blur(8px);
}
.holiday-banner--christmas{
  background: rgba(18,16,28,.86);
  border-color: rgba(255,255,255,.14);
}
.holiday-banner--easter{
  background: linear-gradient(180deg, rgba(25,18,38,.92), rgba(14,18,34,.88));
  border-color: rgba(255,216,122,.24);
  box-shadow: 0 14px 30px rgba(0,0,0,.35), 0 0 22px rgba(255,216,122,.08), inset 0 0 0 1px rgba(255,255,255,.04);
}
.holiday-banner .holiday-title{
  font-weight: 700; color: #e9f9ff; font-size: 12px;
  text-shadow: 0 0 12px rgba(25,246,255,.45);
}
.holiday-banner--easter .holiday-title{
  color:#fff3be;
  text-shadow:0 0 12px rgba(255,216,122,.35);
}
.holiday-banner .holiday-meta{ color: #cbd5f5; white-space: pre-line; margin-left: 6px; }
.holiday-banner.inline{
  position: static; right: auto; top: auto;
  margin: 0 0 6px 0;
}
.holiday-banner.inline.centered{
  margin: 0 auto 6px;
}
.holiday-anchor{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin: 4px 0 10px;
  align-self: stretch;
}
.holiday-anchor.center{ justify-content:center; }

/* ---------- Header banners / overlays ---------- */
.page-blur-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(10,10,20,.55);
  backdrop-filter:blur(10px) saturate(115%);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  pointer-events:none;
}

.site-banner{
  display:none;
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  z-index:90;
  border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  backdrop-filter:blur(6px) saturate(120%);
  -webkit-backdrop-filter:blur(6px) saturate(120%);
}

.site-banner-maintenance{
  padding:16px 22px;
  background:rgba(24,22,10,.92);
  border:1px solid rgba(245,158,11,.65);
  color:#fde68a;
  font-weight:800;
  letter-spacing:.4px;
}

.site-banner-broadcast{
  padding:18px 24px;
  background:rgba(24,16,44,.92);
  border:1px solid rgba(139,92,246,.65);
  color:#f5f3ff;
  font-size:20px;
  font-weight:800;
  box-shadow:0 16px 36px rgba(0,0,0,.55);
}

.site-banner-close{
  margin-left:12px;
  background:transparent;
  border:0;
  color:#fff;
  cursor:pointer;
}

.site-banner-broadcast .site-banner-close{ margin-left:10px; }

.aurora-veil{
  background:
    radial-gradient(900px 420px at 10% 8%,rgba(168,85,247,.12),transparent),
    radial-gradient(900px 420px at 80% 70%,rgba(236,72,153,.10),transparent);
}
.holiday-anchor.center{ justify-content: center; }
.holiday-anchor.right{ justify-content: flex-end; }
@media (max-width: 1024px){
  .holiday-banner{ max-width: min(320px, 86vw); font-size: 10px; padding: 7px 10px; }
  .holiday-banner .holiday-title{ font-size: 11px; }
}
@media (max-width: 640px){
  .holiday-banner{ right: 10px; top: 92px; max-width: min(250px, 82vw); }
}

/* (removed) legacy background circles no longer used */

/* ---------- Aurora & Neon flares ---------- */
#aurora-veil{
  position: fixed; inset: 0; pointer-events: none; z-index: -8; overflow: hidden;
  filter: blur(50px) saturate(110%); opacity: .25;
}
#aurora-veil::before, #aurora-veil::after{
  content:""; position:absolute; width:120vmax; height:120vmax; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side, rgba(155,93,229,.18), transparent 70%),
    radial-gradient(closest-side, rgba(0,196,255,.15), transparent 70%),
    radial-gradient(closest-side, rgba(255,0,184,.15), transparent 70%);
  mix-blend-mode: screen; animation: aurora-drift 28s linear infinite;
}
#aurora-veil::after{ transform:translate(-50%,-50%) rotate(35deg); animation-duration:36s; animation-direction:reverse; }
@keyframes aurora-drift{ 0%{transform:translate(-50%,-50%) rotate(0) scale(1)} 50%{transform:translate(-48%,-52%) rotate(180deg) scale(1.05)} 100%{transform:translate(-50%,-50%) rotate(360deg) scale(1)} }

#neon-flares{ position: fixed; inset: 0; z-index: -7; pointer-events: none; }
.neon-flare{
  position:absolute; width:16px; height:16px; border-radius:9999px;
  background: radial-gradient(circle, rgba(168,85,247,.9), rgba(168,85,247,0) 60%);
  filter: blur(2px) saturate(140%); opacity: 0;
  animation: flare-pop 2.4s ease-out forwards;
  box-shadow: 0 0 14px rgba(168,85,247,.8), 0 0 24px rgba(99,102,241,.6);
}
@keyframes flare-pop{ 0%{transform:scale(.4);opacity:0}20%{transform:scale(1);opacity:.9}70%{opacity:.6}100%{transform:scale(1.6);opacity:0} }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #aurora-veil, #aurora-veil::before, #aurora-veil::after{ animation:none !important; }
  .neon-flare{ animation-duration:.01ms; animation-iteration-count:1; }
}

/* ---------- Scanlines overlay ---------- */
#scanlines{
  pointer-events:none; position:fixed; inset:0; z-index:5; opacity:.18;
  background: repeating-linear-gradient(to bottom,
    rgba(255,255,255,.14) 0, rgba(255,255,255,.14) 1px,
    rgba(0,0,0,0) 3px, rgba(0,0,0,0) 4px);
  animation: scanlines-move 3.5s linear infinite; transition: opacity .25s ease;
}
#scanlines.hidden{ opacity:0; }
@keyframes scanlines-move{ 0%{background-position-y:0} 100%{background-position-y:8px} }
.scanlines-shimmer::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 60% at 50% -10%, rgba(155,93,229,.08), transparent 55%);
}

#fx-toggle,
#fx-toggle-mobile-proxy{
  position:relative;
  overflow:hidden;
  padding-right:2rem;
  transition: transform .16s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
#fx-toggle::after,
#fx-toggle-mobile-proxy::after{
  content:"";
  position:absolute;
  top:50%;
  right:.6rem;
  width:.5rem;
  height:.5rem;
  border-radius:999px;
  transform:translateY(-50%);
  background:rgba(148,163,184,.65);
  box-shadow:0 0 0 rgba(148,163,184,0);
  transition:background .22s ease, box-shadow .22s ease, opacity .22s ease;
  opacity:.9;
}
#fx-toggle[data-fx-state="on"],
#fx-toggle-mobile-proxy[data-fx-state="on"]{
  background:linear-gradient(135deg, rgba(124,58,237,.24), rgba(34,211,238,.14));
  border-color:rgba(168,85,247,.34);
  box-shadow:0 10px 22px rgba(0,0,0,.34), 0 0 18px rgba(168,85,247,.14);
}
#fx-toggle[data-fx-state="on"]::after,
#fx-toggle-mobile-proxy[data-fx-state="on"]::after{
  background:#67e8f9;
  box-shadow:0 0 12px rgba(103,232,249,.75), 0 0 20px rgba(168,85,247,.36);
}
#fx-toggle[data-fx-state="off"],
#fx-toggle-mobile-proxy[data-fx-state="off"]{
  background:rgba(15,23,42,.52);
  border-color:rgba(255,255,255,.08);
}
#fx-toggle[data-fx-state="off"]::after,
#fx-toggle-mobile-proxy[data-fx-state="off"]::after{
  background:rgba(148,163,184,.72);
  box-shadow:0 0 10px rgba(148,163,184,.18);
}
.fx-toggle-pop{
  animation: fx-toggle-pop .4s cubic-bezier(.22,.61,.36,1);
}
@keyframes fx-toggle-pop{
  0%{ transform:scale(.96); }
  50%{ transform:scale(1.04); }
  100%{ transform:scale(1); }
}
body.fx-toggle-flash-on::after,
body.fx-toggle-flash-off::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:6;
  opacity:0;
  mix-blend-mode:screen;
}
body.fx-toggle-flash-on::after{
  background:radial-gradient(34% 26% at 84% 10%, rgba(94,234,212,.16), transparent 70%);
  animation: fx-toggle-flash .5s ease-out;
}
body.fx-toggle-flash-off::after{
  background:radial-gradient(34% 26% at 84% 10%, rgba(148,163,184,.12), transparent 70%);
  animation: fx-toggle-flash .5s ease-out;
}
@keyframes fx-toggle-flash{
  0%{ opacity:0; }
  22%{ opacity:.85; }
  100%{ opacity:0; }
}

/* ---------- Typographic glow title ---------- */
.glow{
  font-size: clamp(2rem,5vw,3.5rem); color:#c084fc;
  text-shadow: 0 0 20px #c084fc, 0 0 40px #7c3aed;
  letter-spacing:1.5px; margin-bottom:.5em; animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow{ 0%,100%{text-shadow:0 0 20px #c084fc,0 0 40px #7c3aed} 50%{text-shadow:0 0 30px #d8b4fe,0 0 60px #a855f7} }

/* ---------- Tab change FX (alias: .tab-fx & .tab-transition) ---------- */
.tab-fx, .tab-transition{ position:relative; overflow:hidden; animation: tab-fade .28s ease-out both; }
.tab-fx::before, .tab-transition::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, rgba(127,0,255,.22) 0%, rgba(255,255,255,.38) 50%, rgba(127,0,255,.22) 100%);
  transform: translateX(-120%); opacity: 0; animation: tab-swipe .6s ease forwards;
}
.tab-transition::after{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
    linear-gradient(105deg, transparent 0%, hsla(var(--fx-secondary-h), 88%, 68%, .1) 26%, rgba(255,255,255,.12) 46%, hsla(var(--fx-accent-h), 88%, 66%, .12) 72%, transparent 100%);
  opacity:0;
  animation: tab-sheen .62s ease-out both;
}
@keyframes tab-swipe{ 0%{transform:translateX(-120%);opacity:0}35%{opacity:.9}100%{transform:translateX(120%);opacity:0} }
@keyframes tab-fade{ from{opacity:0;transform:translateY(8px) scale(.985)} to{opacity:1;transform:none} }
@keyframes tab-sheen{
  0%{ opacity:0; transform:translateX(-24%) skewX(-12deg); }
  30%{ opacity:.75; }
  100%{ opacity:0; transform:translateX(18%) skewX(-12deg); }
}
@keyframes immersive-section-shift{
  0%{ opacity:0; transform:translate3d(-10%,0,0) scale(1.06); }
  24%{ opacity:.8; }
  100%{ opacity:0; transform:translate3d(12%,0,0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce){
  .tab-fx, .tab-transition, .tab-fx::before, .tab-transition::before{ animation:none !important; }
  .tab-transition::after,
  #immersive-fx-root.is-transitioning .immersive-fx-transition,
  #immersive-fx-root.is-entering .immersive-fx-depth,
  #immersive-fx-root.is-entering .immersive-fx-grid,
  #immersive-fx-root.is-entering .immersive-fx-wave,
  #immersive-fx-root.is-entering .immersive-fx-halo,
  #immersive-fx-root.is-entering .immersive-fx-transition,
  #immersive-fx-root.is-entering .immersive-fx-noise,
  body.fx-page-enter #app-header .nav-shell,
  body.fx-page-enter #app-header .nav-shell::after,
  body.fx-page-enter .ring-card,
  body.fx-page-enter .holo-card,
  body.fx-page-enter .ar-surface,
  body.fx-page-enter .home-pulse-shell,
  body.fx-page-enter .home-action-btn,
  .auction-buy-panel,
  #global-confirm-modal > div,
  #buy-modal > div,
  #command-modal > div,
  #age-modal > div,
  .dropdown-content{ animation:none !important; }
}

/* Ensure Today card never shows outside Profile tab */
#profile:not(.active) #today-card-profile{ display:none !important; }

/* ---------- Neon buttons & click particles ---------- */
.neon-btn{
  position:relative; transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 0 0 rgba(127,0,255,0); animation: neon-breathe 3s ease-in-out infinite;
}
.neon-btn:hover{ transform: translateY(-1px); box-shadow: 0 0 10px rgba(127,0,255,.55), 0 0 22px rgba(127,0,255,.35); }
@keyframes neon-breathe{ 0%,100%{box-shadow:0 0 10px rgba(127,0,255,.15)} 50%{box-shadow:0 0 16px rgba(127,0,255,.35)} }

.swipe-particle{
  position:fixed; width:6px; height:6px; border-radius:9999px;
  background: radial-gradient(circle, #a855f7 0%, #7c3aed 60%, transparent 70%);
  filter: drop-shadow(0 0 6px #a855f7); pointer-events:none; z-index:50; opacity:.85;
  animation: particle-fly .6s ease-out forwards;
}
@keyframes particle-fly{
  0%{transform:translate(var(--sx,0),var(--sy,0)) scale(1);opacity:.95}
  80%{opacity:.5}
  100%{transform:translate(calc(var(--sx,0)+var(--dx,0)),calc(var(--sy,0)+var(--dy,0))) scale(.3);opacity:0}
}

/* ---------- Cards ---------- */
.glass-card{
  background: rgba(17,17,27,.7);
  border:1px solid rgba(155,93,229,.22); border-radius:16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(12px) saturate(124%); -webkit-backdrop-filter: blur(12px) saturate(124%);
}

/* ---------- AR hologram / glass system ---------- */
.ar-surface,
.holo-card{
  position: relative;
  background: var(--ar-surface);
  border: 1px solid var(--ar-border);
  box-shadow: 0 14px 34px rgba(0,0,0,.38), 0 0 22px var(--ar-glow);
  transition: transform .18s ease, box-shadow .2s ease;
}
.ar-surface::before,
.holo-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 4px);
  opacity:.35;
}
.ar-border{ border: 1px solid var(--ar-border); }
.ar-glow{ box-shadow: 0 0 18px var(--ar-glow); }
.ar-depth{ transition: transform .2s ease, box-shadow .2s ease; }
.ar-badge,
.holo-badge{
  background: rgba(5,10,20,.6);
  border: 1px solid rgba(0,243,255,.22);
  color: #e6f9ff;
  box-shadow: 0 0 12px rgba(0,243,255,.12);
}
.ar-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,243,255,.25), transparent);
  opacity: .6;
}
.ar-button{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background: linear-gradient(135deg, rgba(127,0,255,.22), rgba(0,243,255,.12));
  border: 1px solid rgba(168,85,247,.35);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.ar-button::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 26%, rgba(255,255,255,.04) 48%, transparent 72%),
    radial-gradient(60% 120% at 15% 0%, hsla(var(--fx-secondary-h), 92%, 72%, .16), transparent 64%);
  opacity:.72;
  transform:translate3d(-38%,0,0);
  transition:transform .28s ease, opacity .2s ease;
}
.ar-button:hover{
  box-shadow: 0 12px 22px rgba(0,0,0,.4), 0 0 18px rgba(168,85,247,.25);
}
.ar-button:hover::before{
  transform:translate3d(18%,0,0);
  opacity:.96;
}
.ar-button:active{
  transform: translateY(1px) scale(.985);
  box-shadow:
    0 6px 14px rgba(0,0,0,.38),
    0 0 12px hsla(var(--fx-accent-h), 84%, 66%, .14),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 999px rgba(3,7,18,.08);
}
body.ar-ambient .ar-surface,
body.ar-ambient .holo-card{
  box-shadow:
    0 16px 36px rgba(0,0,0,.38),
    0 0 calc(18px + var(--fx-energy) * 18px) hsla(var(--fx-accent-h), 80%, 62%, .09),
    0 0 calc(10px + var(--fx-energy) * 14px + var(--fx-scroll-abs) * 12px) hsla(var(--fx-secondary-h), 80%, 60%, .06);
}
body.ar-ambient .ar-button{
  box-shadow:
    0 8px 18px rgba(0,0,0,.35),
    0 0 calc(10px + var(--fx-energy) * 14px + var(--fx-scroll-abs) * 10px) hsla(var(--fx-accent-h), 82%, 64%, .14);
}
.ar-ambient #app-header.floated .nav-shell::before{
  box-shadow:
    0 14px 38px rgba(0,0,0,.48),
    0 0 0 1px rgba(124,58,237,.10) inset,
    0 0 calc(42px + var(--fx-scroll-abs) * 18px) hsla(var(--fx-accent-h), 82%, 64%, .14);
}
.fx-hot.ar-surface,
.fx-hot.holo-card{
  transform: translateY(-2px) scale(1.003);
  box-shadow:
    0 18px 38px rgba(0,0,0,.4),
    0 0 calc(18px + var(--fx-energy) * 22px) hsla(var(--fx-accent-h), 84%, 66%, .12),
    0 0 calc(12px + var(--fx-energy) * 18px) hsla(var(--fx-secondary-h), 84%, 64%, .08);
}
.fx-hot.ar-button,
.fx-hot.neon-btn{
  transform: translateY(-1px) scale(1.01);
  box-shadow:
    0 12px 24px rgba(0,0,0,.42),
    0 0 calc(14px + var(--fx-energy) * 16px) hsla(var(--fx-accent-h), 84%, 66%, .18);
}
.fx-strike.ar-button,
.fx-strike.neon-btn,
.fx-strike.ar-surface{
  animation: fx-strike .42s ease-out;
}
@keyframes fx-strike{
  0%{ box-shadow: 0 0 0 hsla(var(--fx-accent-h), 88%, 68%, 0); }
  35%{ box-shadow: 0 0 28px hsla(var(--fx-accent-h), 88%, 68%, .22), 0 0 18px hsla(var(--fx-secondary-h), 88%, 66%, .16); }
  100%{ box-shadow: inherit; }
}
@media (hover:hover){
  .ar-depth:hover,
  .holo-card:hover{ transform: translateY(-2px) scale(1.003); box-shadow: 0 16px 30px rgba(0,0,0,.4), 0 0 28px rgba(0,243,255,.14); }
}
@media (prefers-reduced-motion: reduce){
  .ar-surface, .holo-card, .ar-depth, .ar-button, .ar-button::before{ transition: none; }
}

/* ---------- Ambient AR background ---------- */
.ar-ambient::before,
.ar-ambient::after{
  content:""; position: fixed; inset: -10% -10%; pointer-events:none; z-index:-5;
  opacity:.35; transform: translate3d(0,0,0);
  background:
    radial-gradient(40% 60% at 15% 10%, rgba(0,243,255,.12), transparent 60%),
    radial-gradient(35% 55% at 85% 20%, rgba(168,85,247,.14), transparent 65%),
    radial-gradient(50% 70% at 50% 100%, rgba(255,0,184,.10), transparent 70%);
}
html.fx-full .ar-ambient::before{
  animation: ar-drift 18s ease-in-out infinite;
}
html.fx-full .ar-ambient::after{
  animation: ar-drift 24s ease-in-out infinite reverse;
  opacity:.25;
}
@keyframes ar-drift{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(1.5%, -1%, 0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce){
  .ar-ambient::before, .ar-ambient::after{ animation: none !important; }
}

/* Spotlight follow (desktop full only) */
#ar-spotlight{
  position: fixed; inset:0; pointer-events:none; z-index:-4;
  background: radial-gradient(220px 220px at var(--spot-x, 50%) var(--spot-y, 30%), rgba(0,243,255,.12), transparent 60%);
  opacity: var(--spot-opacity, 0);
  transition: opacity .25s ease;
}
html.fx-off #ar-spotlight{ display:none; }

/* Reveal on view */
.reveal-on-view{
  opacity:0; transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
}
.reveal-on-view.is-visible{ opacity:1; transform: translateY(0); }
html.fx-off .reveal-on-view{ opacity:1; transform:none; transition:none; }
@media (prefers-reduced-motion: reduce){
  .reveal-on-view{ opacity:1; transform:none; transition:none; }
}

/* Status pulse accents */
.ar-pulse{ position: relative; }
html.fx-full .ar-pulse::after{
  content:""; position:absolute; inset:-6px; border-radius: inherit;
  border: 1px solid rgba(0,243,255,.25); opacity:.5;
  animation: ar-pulse 2.2s ease-in-out infinite;
}
@keyframes ar-pulse{
  0%,100%{ opacity:.3; transform: scale(1); }
  50%{ opacity:.7; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce){
  .ar-pulse::after{ display:none !important; }
  .leaderboard-skeleton-row,
  .loading-state-lines span{ animation:none !important; }
}

/* Floating popup */
.floating-popup{
  position: fixed;
  z-index: 80;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ar-text);
  background:
    linear-gradient(135deg, rgba(8,12,20,.94), rgba(15,23,42,.92));
  border: 1px solid rgba(0,243,255,.3);
  box-shadow:
    0 10px 24px rgba(0,0,0,.38),
    0 0 14px rgba(0,243,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  pointer-events:none;
  animation: float-up .9s ease-out forwards;
}
.floating-popup.popup-success{ border-color: rgba(52,211,153,.6); color:#d1fae5; }
.floating-popup.popup-warn{ border-color: rgba(245,158,11,.6); color:#fde68a; }
.floating-popup.popup-error{ border-color: rgba(248,113,113,.7); color:#fecaca; }

/* Toasts */
#toast-container{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.65rem;
  pointer-events:none;
}
.toast-item{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:start;
  gap:.8rem;
  min-width:min(22rem, calc(100vw - 2rem));
  max-width:min(28rem, calc(100vw - 2rem));
  background:
    linear-gradient(180deg, rgba(15,23,42,.94), rgba(2,6,23,.94));
  border: 1px solid rgba(148,163,184,.2);
  color: #e2e8f0;
  border-radius: 14px;
  padding: .85rem .95rem;
  box-shadow:
    0 16px 34px rgba(0,0,0,.36),
    0 0 18px hsla(var(--fx-accent-h), 84%, 64%, .08);
  transform: translateY(10px) scale(.985);
  opacity: 0;
  pointer-events:auto;
  cursor:pointer;
  animation: toast-in .26s cubic-bezier(.22,.61,.36,1) forwards;
}
.toast-item.is-leaving{
  animation: toast-out .24s ease forwards;
}
.toast-chip{
  width:.72rem;
  height:.72rem;
  margin-top:.35rem;
  border-radius:999px;
  background: radial-gradient(circle, rgba(148,163,184,1) 0%, rgba(71,85,105,1) 100%);
  box-shadow: 0 0 12px rgba(148,163,184,.35);
}
.toast-body{
  display:grid;
  gap:.2rem;
  min-width:0;
}
.toast-title{
  font-size:.72rem;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#cbd5e1;
}
.toast-copy{
  font-size:.9rem;
  line-height:1.45;
  color:#f8fafc;
  word-break:break-word;
}
.toast-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.65rem;
  min-height:1.65rem;
  padding:0 .45rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#e2e8f0;
  font-size:.75rem;
  font-weight:800;
}
.toast-item[data-count]:not([data-count="1"]) .toast-count{
  display:inline-flex !important;
}
.toast-success{
  border-color: rgba(52,211,153,.28);
}
.toast-success .toast-chip{
  background: radial-gradient(circle, rgba(74,222,128,1) 0%, rgba(22,163,74,1) 100%);
  box-shadow: 0 0 12px rgba(74,222,128,.36);
}
.toast-success .toast-title{
  color:#86efac;
}
.toast-warn{
  border-color: rgba(245,158,11,.3);
}
.toast-warn .toast-chip{
  background: radial-gradient(circle, rgba(251,191,36,1) 0%, rgba(217,119,6,1) 100%);
  box-shadow: 0 0 12px rgba(251,191,36,.34);
}
.toast-warn .toast-title{
  color:#fcd34d;
}
.toast-error{
  border-color: rgba(248,113,113,.34);
}
.toast-error .toast-chip{
  background: radial-gradient(circle, rgba(248,113,113,1) 0%, rgba(220,38,38,1) 100%);
  box-shadow: 0 0 12px rgba(248,113,113,.34);
}
.toast-error .toast-title{
  color:#fca5a5;
}
.toast-info .toast-chip{
  background: radial-gradient(circle, rgba(103,232,249,1) 0%, rgba(14,165,233,1) 100%);
  box-shadow: 0 0 12px rgba(103,232,249,.34);
}
.toast-info .toast-title{
  color:#a5f3fc;
}
@keyframes toast-in{
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes toast-out{
  to{ opacity:0; transform: translateY(-8px) scale(.985); }
}
@media (max-width: 640px){
  .toast-item{
    min-width:min(18rem, calc(100vw - 1rem));
    max-width:min(22rem, calc(100vw - 1rem));
  }
}

/* ---------- Micro interactions ---------- */
button:active{ transform: scale(.98); }
.floating-reward{
  position: fixed;
  z-index: 80;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #c8fff4;
  background: rgba(5,15,18,.85);
  border: 1px solid rgba(52,211,153,.55);
  box-shadow: 0 8px 18px rgba(0,0,0,.35), 0 0 12px rgba(52,211,153,.25);
  pointer-events: none;
  transform: translate3d(0,0,0);
  animation: float-up .9s ease-out forwards;
}
@keyframes float-up{
  from{ opacity:0; transform: translate3d(0,6px,0); }
  30%{ opacity:1; }
  to{ opacity:0; transform: translate3d(0,-16px,0); }
}

/* ---------- Tycoon AR vibe (lightweight) ---------- */
.tycoon-tile{
  position: relative;
  transform-style: preserve-3d;
  transition: transform .12s ease, box-shadow .18s ease;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 var(--tile-glow, 0px) rgba(168,85,247,.35);
}
.tycoon-tile::after{
  content:""; position:absolute; left:50%; bottom:-6px; width:78%; height:12px;
  transform: translateX(-50%) scale(.95);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0,243,255,.28), rgba(0,243,255,0) 70%);
  opacity: 0; pointer-events:none;
}
.tycoon-tile.is-selected::after{ opacity: .9; }
@media (hover:hover){
  .fx-immersive .tycoon-tile:hover::after{
    opacity: .85;
    animation: ring-pulse 1.8s ease-in-out infinite;
  }
  .fx-immersive .tycoon-tile:hover{ animation: tile-pulse 1.6s ease-in-out infinite; }
}
@keyframes ring-pulse{
  0%,100%{ transform: translateX(-50%) scale(.92); opacity:.6; }
  50%{ transform: translateX(-50%) scale(1.06); opacity:.95; }
}
@keyframes tile-pulse{
  0%,100%{ box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 0 var(--tile-glow, 12px) rgba(168,85,247,.25); }
  50%{ box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 calc(var(--tile-glow, 12px) + 10px) rgba(0,243,255,.18); }
}
.tycoon-tile[data-building="route"]::before{
  content:""; position:absolute; inset:8px 10px auto 10px; height:2px;
  background: linear-gradient(90deg, transparent, rgba(0,243,255,.45), transparent);
  opacity:.4; pointer-events:none;
  border-radius: 999px;
}
.fx-immersive .tycoon-tile[data-building="route"]::before{
  animation: route-flow 6s linear infinite;
}
@media (max-width: 900px){
  .tycoon-tile[data-building="route"]::before{ display:none; }
}
.low-power .tycoon-tile[data-building="route"]::before{ display:none; }
@keyframes route-flow{
  from{ background-position: 0 0; }
  to{ background-position: 120px 0; }
}
.fx-paused .tycoon-tile::before,
.fx-paused .tycoon-tile::after{
  animation-play-state: paused !important;
}
.fx-paused .tycoon-tile{
  animation-play-state: paused !important;
}
.fade-in{ animation: fadeIn .35s ease both; }
@keyframes fadeIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

.command-card{
  background: rgba(17,17,27,.9);
  border:1px solid rgba(155,93,229,.3); border-radius:10px; padding:14px;
  transition: transform .2s ease, box-shadow .2s ease; transform-style:preserve-3d; will-change:transform,box-shadow;
}
.command-card:hover{ box-shadow: 0 0 15px rgba(155,93,229,.7), 0 0 30px rgba(0,196,255,.4); }
.command-card::before{
  content:""; position:absolute; inset:0; border-radius:10px; padding:2px; z-index:-1; opacity:0;
  background: linear-gradient(45deg, #9b5de5, #00c4ff, #ff00b8); background-size:300% 300%;
  transition: opacity .3s ease;
}
.command-card:hover::before{ opacity:.8; animation: glowShift 6s linear infinite; }
@keyframes glowShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ---------- Sticky Header (floating pill) ---------- */
#app-header{ transition: background .3s ease, border-color .3s ease; }
#app-header .nav-shell{
  position:relative;
  overflow:visible;
}
#app-header .nav-shell::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:calc(.22 + var(--fx-energy) * .28 + var(--fx-scroll-abs) * .08);
  background:
    radial-gradient(42% 68% at var(--fx-pointer-x) -12%, hsla(var(--fx-secondary-h), 92%, 70%, .18), transparent 68%),
    linear-gradient(90deg, transparent 0%, hsla(var(--fx-accent-h), 88%, 68%, .08) 28%, hsla(var(--fx-secondary-h), 92%, 72%, .12) 50%, hsla(var(--fx-accent-h), 88%, 68%, .08) 72%, transparent 100%);
  filter:blur(14px);
  transform:
    translate3d(calc((var(--fx-pointer-x) - 50%) * .03), calc(var(--fx-scroll-momentum) * -4px), 0)
    scale(calc(1 + var(--fx-scroll-abs) * .015));
  mix-blend-mode:screen;
  transition:opacity .25s ease, transform .25s ease;
}

/* Desktop floating style */
@media (min-width:768px){
  #app-header.floated{ background:transparent; border-color:transparent; }
  #app-header.floated .nav-shell{
    position:relative; z-index:10; width:min(1200px, calc(100% - 2rem));
    margin-top:.5rem; border-radius:9999px; transform:translateY(6px);
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s;
    overflow:visible;
  }
  #app-header.floated .nav-shell::before{
    content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
    background: rgba(10,10,18,.58);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 14px 38px rgba(0,0,0,.48), 0 0 0 1px rgba(124,58,237,.10) inset, 0 0 42px rgba(124,58,237,.16);
    background-clip: padding-box; -webkit-background-clip: padding-box;
    will-change: transform;
  }
  #app-header.floated .nav-shell:hover{ transform: translateY(0); }
}

/* Dropdowns */
.dropdown{ position:relative; }
.dropdown-content{
  position:absolute; right:0; top:100%; margin-top:8px; min-width:10rem; z-index:80;
  display:none; border:1px solid rgba(255,255,255,.10); border-radius:.75rem;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(17,17,27,.96), rgba(8,12,22,.98));
  box-shadow:
    0 16px 36px rgba(0,0,0,.45),
    0 0 0 1px rgba(124,58,237,.16) inset,
    0 0 24px hsla(var(--fx-accent-h), 82%, 64%, .12);
  animation: menu-pop .16s ease-out both;
}
.dropdown-content::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(46% 32% at 16% 0%, hsla(var(--fx-secondary-h), 90%, 70%, .12), transparent 70%),
    linear-gradient(130deg, rgba(255,255,255,.06), transparent 36%);
}
.dropdown:hover .dropdown-content,
.dropdown.open .dropdown-content{ display:block; }
@keyframes menu-pop{ from{opacity:0;transform:translateY(-4px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }

#global-confirm-modal,
#buy-modal,
#command-modal,
#age-modal{
  background:
    radial-gradient(38% 30% at 50% 14%, hsla(var(--fx-accent-h), 84%, 64%, .1), transparent 68%),
    linear-gradient(180deg, rgba(2,6,23,.72), rgba(2,6,23,.88));
  backdrop-filter:blur(10px) saturate(118%);
  -webkit-backdrop-filter:blur(10px) saturate(118%);
}
#global-confirm-modal > div,
#buy-modal > div,
#command-modal > div,
#age-modal > div{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 22px 56px rgba(0,0,0,.42),
    0 0 28px hsla(var(--fx-accent-h), 84%, 64%, .12);
  animation:overlay-panel-pop .22s cubic-bezier(.22,.61,.36,1) both;
}
#global-confirm-modal > div::before,
#buy-modal > div::before,
#command-modal > div::before,
#age-modal > div::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(44% 26% at 18% 0%, hsla(var(--fx-secondary-h), 92%, 70%, .12), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 34%);
}
body.fx-overlay-open #immersive-fx-root .immersive-fx-depth{
  filter:blur(34px);
  opacity:.92;
}
body.fx-overlay-open #immersive-fx-root .immersive-fx-halo{
  opacity:calc(.88 + var(--fx-energy) * .26);
}
@keyframes overlay-panel-pop{
  from{ opacity:0; transform:translate3d(0,10px,0) scale(.982); }
  to{ opacity:1; transform:translate3d(0,0,0) scale(1); }
}

/* Wheel Spin UI */
#wheel-visual{ position:relative; width: clamp(260px, 50vw, 380px); height: clamp(260px, 50vw, 380px); margin: 0 auto 1rem; }
#wheel-disc{ position:absolute; inset:0; border-radius:50%; box-shadow: inset 0 0 0 6px rgba(139,92,246,.25), 0 10px 30px rgba(0,0,0,.45); transition: transform 5s cubic-bezier(.17,.9,.25,1); will-change: transform; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.06), rgba(0,0,0,.1)); }
#wheel-canvas{ width:100%; height:100%; display:block; border-radius:50%; }
#wheel-progress{ pointer-events:none; }
.wheel-center{ position:absolute; left:50%; top:50%; width:72px; height:72px; transform: translate(-50%,-50%); border-radius:50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.25), rgba(139,92,246,.85)); box-shadow: 0 4px 16px rgba(139,92,246,.5), inset 0 0 12px rgba(255,255,255,.35); border: 2px solid rgba(255,255,255,.2); }
.wheel-pointer{ position:absolute; left:50%; top:-10px; transform: translateX(-50%); transform-origin: 50% 8px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 22px solid #f59e0b; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.wheel-pointer::after{ content:""; position:absolute; left:-8px; top:18px; width:16px; height:8px; background:#f59e0b; border-radius: 0 0 8px 8px; box-shadow: 0 0 8px rgba(245,158,11,.6); }

/* Pointer wiggle while spinning */
#wheel-visual.wheel-spinning .wheel-pointer{ animation: pointer-wiggle .18s ease-in-out infinite; }
@keyframes pointer-wiggle{ 0%,100%{ transform: translateX(-50%) rotate(0deg);} 50%{ transform: translateX(-50%) rotate(-8deg);} }

/* Focus ring (keyboard) */
:focus-visible{ outline:2px solid rgba(124,58,237,.7); outline-offset:2px; border-radius:.5rem; }

/* Wave divider */
.wave-divider{ width:100%; line-height:0; position:relative; margin-top:4em; }
.wave-divider svg{ display:block; width:100%; height:80px; transform:scaleY(1.2); }

/* ---------- Header structure + nav items ---------- */
#app-header .nav-row{ display:flex; align-items:center; gap:.5rem; }
#app-header .brand{ flex:0 0 auto; }
#app-header .nav-actions{ flex:1 1 auto; min-width:0; }
#app-header .nav-right{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.5rem; }

/* Middle inline group */
#app-header .nav-items{
  display:flex; align-items:center; gap:var(--nav-gap);
  white-space:nowrap; flex:0 1 auto; min-width:0;
}

/* Buttons/links inside the pill */
#app-header .nav-items > a,
#app-header .nav-items > button{
  display:inline-flex; align-items:center;
  gap: clamp(.25rem, .8vw, .5rem);
  font-size: var(--nav-font); line-height:1;
  padding: var(--nav-pad-y) var(--nav-pad-x);
  border-radius:.8rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.25) inset, 0 1px 0 rgba(255,255,255,.06);
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
#app-header .nav-items > a:hover,
#app-header .nav-items > button:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-1px);
}
button[data-tab].is-active,
#app-header .dropdown-content [data-tab].is-active{
  background:
    linear-gradient(135deg, hsla(var(--fx-accent-h), 84%, 62%, .18), hsla(var(--fx-secondary-h), 88%, 66%, .12))
    padding-box,
    linear-gradient(135deg, hsla(var(--fx-accent-h), 88%, 68%, .26), hsla(var(--fx-secondary-h), 92%, 72%, .22))
    border-box;
  border-color:transparent !important;
  color:#f8fbff;
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 calc(18px + var(--fx-energy) * 24px) hsla(var(--fx-accent-h), 84%, 64%, .16),
    inset 0 1px 0 rgba(255,255,255,.14);
}
button[data-tab].is-active:hover,
#app-header .dropdown-content [data-tab].is-active:hover{
  background:
    linear-gradient(135deg, hsla(var(--fx-accent-h), 86%, 64%, .22), hsla(var(--fx-secondary-h), 90%, 68%, .15))
    padding-box,
    linear-gradient(135deg, hsla(var(--fx-accent-h), 88%, 70%, .34), hsla(var(--fx-secondary-h), 92%, 74%, .26))
    border-box;
}
button[data-tab].is-active i,
#app-header .dropdown-content [data-tab].is-active i{
  filter:drop-shadow(0 0 10px hsla(var(--fx-secondary-h), 92%, 72%, .34));
}

/* Subtle hover ring for glass cards */
.glass:hover{ box-shadow: var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), 0 0 30px rgba(167,139,250,.18); }

/* Icon sizing in nav buttons */
#app-header .nav-items > a i,
#app-header .nav-items > button i{
  width: var(--nav-icon); height: var(--nav-icon); flex: 0 0 auto;
}

/* ---------- Pill (floated) compact sizing ---------- */
@media (min-width: 768px){
  /* When header has .floated (pill), gently shrink controls.
     Target the actual desktop nav present in index.html. */
  #app-header.floated .nav-shell nav > a,
  #app-header.floated .nav-shell nav > button{
    padding: calc(var(--nav-pad-y) - .18rem) calc(var(--nav-pad-x) - .24rem);
    font-size: calc(var(--nav-font) * .90);
    gap: clamp(.2rem, .6vw, .4rem);
    border-radius: .72rem;
  }
  #app-header.floated .nav-shell nav > a i,
  #app-header.floated .nav-shell nav > button i{
    width: 0.9rem; height: 0.9rem;
  }
}

/* ---------- Mid-width resilience (prevents collisions) ---------- */
@media (max-width:1360px) and (min-width:1020px){
  #app-header .nav-actions{
    overflow-x:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  #app-header .nav-actions::-webkit-scrollbar{ display:none; }
  #app-header .nav-items > a, #app-header .nav-items > button{
    padding-inline:.55rem; height:2.15rem; gap:.45rem; font-size:.92rem;
  }
}
@media (max-width:1020px) and (min-width:900px){
  #app-header .nav-actions{ overflow-x:auto; scrollbar-width:none; }
  #app-header .nav-actions::-webkit-scrollbar{ display:none; }
  #app-header .nav-items > a, #app-header .nav-items > button{
    padding-inline:.5rem; height:2.05rem; gap:.4rem; font-size:.88rem;
  }
}
/* subtle edge hints for scrollable nav */
@media (max-width:1360px) and (min-width:900px){
  #app-header .nav-actions{ position:relative; }
  #app-header .nav-actions::before,
  #app-header .nav-actions::after{
    content:""; position:absolute; top:0; bottom:0; width:14px; pointer-events:none;
  }
  #app-header .nav-actions::before{ left:0;  background:linear-gradient(to right, rgba(10,10,18,.6), transparent); }
  #app-header .nav-actions::after{  right:0; background:linear-gradient(to left,  rgba(10,10,18,.6), transparent); }
}

/* Tighten spacing & sizes a bit earlier */
@media (max-width:1280px){
  :root{ --nav-gap: clamp(.2rem, .7vw, .45rem); --nav-pad-x: clamp(.4rem, 1vw, .75rem); }
}
@media (max-width:1140px){
  :root{ --nav-font: clamp(10px, 1vw, 13px); --nav-icon: clamp(15px, 1.2vw, 18px); }
  #app-header .nav-items > a, #app-header .nav-items > button{ letter-spacing:.01em; }
}

/* Optional icons-first compact tweak (if you wrap text with .nav-label, it hides cleanly) */
@media (max-width:1000px){
  #app-header .nav-items > a .nav-label,
  #app-header .nav-items > button .nav-label{ display:none; }
  :root{ --nav-pad-x:.5rem; --nav-icon:18px; }
}

/* ---------- Mobile-friendly general tweaks ---------- */
@media (max-width:768px){
  .glow{ font-size:2.2em; }
  .container{ padding:2em 1em; }
}
@media (max-width:480px){ html{ font-size:15px; } }
@media (max-width:360px){ html{ font-size:14px; } }


/* Center the whole profile area like the old layout */
#profile-container{
  /* pick the width you like */
  --max: 1120px;
  width: min(var(--max), 94vw);
  margin-inline: auto;                 /* centers it */
  padding-inline: clamp(12px, 3vw, 28px);
}

/* Optional: keep each card from stretching edge-to-edge on ultrawide */
#profile-container .card{
  max-width: 100%;
}

.profile-hero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(168,85,247,.22);
  box-shadow:0 20px 48px rgba(0,0,0,.24);
}

.profile-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(168,85,247,.12), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 35%);
  pointer-events:none;
}

.profile-hero-main{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:1.2rem;
  align-items:center;
}

.profile-avatar-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

.profile-identity{
  min-width:0;
}

.profile-name-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
}

.profile-meta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.65rem 1rem;
  margin-top:.45rem;
}

.profile-stat-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.7rem;
  margin-top:1rem;
}

.profile-stat-card{
  padding:.85rem;
  border-radius:1rem;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
  text-align:center;
}

.profile-stat-label{
  font-size:.72rem;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:.3rem;
}

.profile-xp-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.55rem;
  min-width:132px;
}

.profile-xp-copy{
  text-align:center;
}

.profile-xp-label{
  font-size:.82rem;
  font-weight:700;
  color:#ede9fe;
}

.profile-xp-note{
  font-size:.72rem;
  color:#94a3b8;
  line-height:1.35;
}

.profile-strip{
  border:1px solid rgba(168,85,247,.18);
}

.profile-grid{
  display:grid;
  gap:1rem;
}

.profile-grid-top{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.profile-grid-bottom{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.profile-panel{
  border:1px solid rgba(168,85,247,.18);
  box-shadow:0 16px 36px rgba(0,0,0,.18);
}

.profile-panel-wide{
  grid-column:1 / -1;
}

.profile-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.9rem;
}

.profile-mini-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.7rem;
}

.profile-mini-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;
  padding:.8rem .85rem;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.profile-mini-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#94a3b8;
}

.profile-mini-value{
  display:block;
  margin-top:.38rem;
  font-size:1rem;
  font-weight:700;
  color:#fff;
}

.profile-mini-note{
  margin-top:.24rem;
  font-size:.76rem;
  line-height:1.45;
  color:#cbd5e1;
}

.profile-list-card{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  padding:.7rem .8rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:.95rem;
  background:rgba(255,255,255,.03);
}

.profile-list-main{
  min-width:0;
}

.profile-list-title{
  color:#e5e7eb;
  line-height:1.45;
}

.profile-list-meta{
  display:block;
  margin-top:.22rem;
  font-size:.73rem;
  color:#94a3b8;
}

@media (max-width: 1024px){
  .profile-list-card{
    flex-direction:column;
    align-items:stretch;
  }
}

.tycoon-shell{
  --tycoon-border: rgba(168, 85, 247, 0.18);
  --tycoon-panel-bg: linear-gradient(180deg, rgba(10, 10, 18, 0.78), rgba(8, 8, 14, 0.62));
}

.tycoon-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(280px, .95fr);
  gap:1.2rem;
  padding:1.4rem;
  border:1px solid rgba(168,85,247,.22);
  box-shadow:0 22px 48px rgba(0,0,0,.24);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(168,85,247,.12), transparent 45%),
    linear-gradient(180deg, rgba(10,10,18,.82), rgba(8,8,14,.72));
}

.tycoon-kicker,
.tycoon-panel-kicker{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#a78bfa;
  margin-bottom:.35rem;
}

.tycoon-hero-text{
  margin-top:.55rem;
  max-width:54ch;
  font-size:.92rem;
  line-height:1.7;
  color:#cbd5e1;
}

.tycoon-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1rem;
}

.tycoon-hero-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.8rem 1rem;
  border-radius:1rem;
  font-size:.88rem;
  font-weight:700;
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}

.tycoon-hero-btn:hover{
  transform:translateY(-1px);
}

.tycoon-hero-btn-primary{
  background:linear-gradient(135deg, #7c3aed, #9333ea);
  color:#fff;
  box-shadow:0 14px 34px rgba(124,58,237,.26);
}

.tycoon-hero-btn-secondary{
  background:rgba(15,23,42,.72);
  color:#e2e8f0;
  border:1px solid rgba(148,163,184,.22);
}

.tycoon-bonus-line{
  margin-top:.9rem;
  font-size:.78rem;
  line-height:1.6;
  color:#94a3b8;
}

.tycoon-hero-side{
  display:grid;
  gap:.8rem;
}

.tycoon-loop-card{
  padding:.9rem 1rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.28);
}

.tycoon-loop-card strong{
  display:block;
  margin-top:.15rem;
  color:#f5f3ff;
}

.tycoon-loop-card p{
  margin-top:.35rem;
  font-size:.78rem;
  line-height:1.5;
  color:#94a3b8;
}

.tycoon-loop-step{
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#f0abfc;
}

.tycoon-summary-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:.8rem;
}

.tycoon-summary-card{
  padding:1rem;
  border-radius:1rem;
  border:1px solid var(--tycoon-border);
  background:var(--tycoon-panel-bg);
  box-shadow:0 14px 32px rgba(0,0,0,.16);
}

.tycoon-summary-label{
  display:block;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#94a3b8;
}

.tycoon-summary-value{
  display:block;
  margin-top:.45rem;
  font-size:1rem;
  font-weight:800;
  color:#f8fafc;
  line-height:1.35;
}

.tycoon-summary-note{
  display:block;
  margin-top:.35rem;
  font-size:.74rem;
  color:#64748b;
}

.tycoon-panel{
  border:1px solid var(--tycoon-border);
  background:var(--tycoon-panel-bg);
  box-shadow:0 16px 34px rgba(0,0,0,.18);
}

.tycoon-panel-head{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.tycoon-panel-head h3{
  margin:0;
}

.tycoon-mini-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.55rem;
}

.tycoon-mini-grid > .tycoon-mini-card:last-child:nth-child(odd){
  grid-column:1 / -1;
}

.tycoon-mini-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:.95rem;
  padding:.7rem .75rem;
  background:rgba(255,255,255,.04);
  min-width:0;
}

.tycoon-mini-label{
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#94a3b8;
}

.tycoon-mini-value{
  display:block;
  margin-top:.34rem;
  font-size:.92rem;
  font-weight:700;
  line-height:1.3;
  color:#fff;
  word-break:break-word;
}

.tycoon-mini-note{
  margin-top:.22rem;
  font-size:.68rem;
  line-height:1.45;
  color:#cbd5e1;
  word-break:break-word;
}

.tycoon-board-panel{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(168,85,247,.1), transparent 40%),
    var(--tycoon-panel-bg);
}

.tycoon-board-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .7rem;
  border-radius:999px;
  background:rgba(124,58,237,.16);
  border:1px solid rgba(168,85,247,.22);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ddd6fe;
}

.tycoon-board-notes{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.8rem;
}

.tycoon-board-note{
  padding:.85rem 1rem;
  border-radius:1rem;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.06);
}

.tycoon-board-note p{
  margin:.35rem 0 0;
  font-size:.78rem;
  line-height:1.6;
  color:#94a3b8;
}

.tycoon-board-note-label{
  display:inline-block;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#f0abfc;
}

@media (max-width: 1024px){
  .profile-hero-main{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }

  .profile-name-row,
  .profile-meta-row{
    justify-content:center;
  }

  .profile-stat-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .profile-grid-top,
  .profile-grid-bottom{
    grid-template-columns:1fr;
  }

  .profile-mini-grid{
    grid-template-columns:1fr;
  }

  .tycoon-mini-grid{
    grid-template-columns:1fr;
  }

  .tycoon-hero{
    grid-template-columns:1fr;
  }

  .tycoon-summary-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .tycoon-board-notes{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px){
  .tycoon-summary-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .tycoon-hero{
    padding:1.1rem;
  }

  .tycoon-hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .tycoon-summary-card{
    padding:.85rem .9rem;
  }

  .tycoon-summary-value{
    font-size:.95rem;
  }

  .tycoon-summary-note{
    font-size:.7rem;
  }
}

@media (max-width: 520px){
  .tycoon-summary-grid{
    grid-template-columns:1fr;
  }
}

.donate-shell,
.invite-shell{
  max-width:72rem;
  margin-inline:auto;
  display:grid;
  gap:1.25rem;
}

.donate-hero,
.invite-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(260px, .85fr);
  gap:1rem;
  padding:1.35rem;
  border:1px solid rgba(168,85,247,.22);
  box-shadow:0 20px 44px rgba(0,0,0,.22);
}

.donate-kicker,
.invite-kicker{
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#a78bfa;
  margin-bottom:.35rem;
}

.donate-hero-copy,
.invite-hero-actions{
  display:grid;
  gap:.8rem;
  align-content:start;
}

.donate-hero-stat{
  padding:.9rem 1rem;
  border-radius:1rem;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.06);
}

.donate-hero-stat-label{
  display:block;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#94a3b8;
  margin-bottom:.25rem;
}

.donate-grid,
.invite-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}

.donate-card,
.invite-card{
  padding:1rem;
  border-radius:1.1rem;
  border:1px solid rgba(168,85,247,.18);
  background:linear-gradient(180deg, rgba(10,10,18,.78), rgba(8,8,14,.64));
  box-shadow:0 16px 34px rgba(0,0,0,.18);
}

.donate-card-head{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
}

.donate-card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.1rem;
  height:2.1rem;
  border-radius:.8rem;
  background:rgba(124,58,237,.16);
  color:#e9d5ff;
  border:1px solid rgba(168,85,247,.22);
}

.donate-card-title,
.invite-card-title{
  font-size:1rem;
  font-weight:700;
  color:#f8fafc;
}

.donate-card-copy,
.invite-card-copy{
  margin-top:.25rem;
  font-size:.82rem;
  line-height:1.6;
  color:#94a3b8;
}

.donate-qr{
  display:block;
  width:min(11rem, 100%);
  margin:1rem auto .8rem;
  border-radius:1rem;
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}

.donate-card-meta{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  font-size:.82rem;
  color:#e2e8f0;
}

.donate-meta-label,
.invite-card-kicker{
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#94a3b8;
}

.donate-paypal-btn,
.invite-primary-btn,
.invite-secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1rem;
  border-radius:1rem;
  font-size:.88rem;
  font-weight:700;
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}

.donate-paypal-btn:hover,
.invite-primary-btn:hover,
.invite-secondary-btn:hover{
  transform:translateY(-1px);
}

.donate-paypal-btn,
.invite-primary-btn{
  background:linear-gradient(135deg, #7c3aed, #9333ea);
  color:#fff;
  box-shadow:0 14px 32px rgba(124,58,237,.24);
}

.invite-secondary-btn{
  background:rgba(15,23,42,.72);
  color:#e2e8f0;
  border:1px solid rgba(148,163,184,.22);
}

.donate-card-note{
  display:flex;
  flex-direction:column;
  gap:.8rem;
}

.donate-points{
  display:grid;
  gap:.55rem;
  padding-left:1rem;
  color:#cbd5e1;
  font-size:.82rem;
}

.donate-thanks{
  font-size:.8rem;
  color:#c4b5fd;
}

.site-footer{
  margin-top:auto;
  padding:1.15rem 1rem;
  background:rgba(3,7,18,.72);
  border-top:1px solid rgba(168,85,247,.14);
  backdrop-filter:blur(12px);
}

.site-footer-inner{
  max-width:72rem;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) auto auto;
  gap:1rem;
  align-items:center;
}

.site-footer-title-row{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
}

.site-footer-icon{
  width:2.2rem;
  height:2.2rem;
  border-radius:.75rem;
  box-shadow:0 0 0 1px rgba(168,85,247,.22);
}

.site-footer-title{
  display:block;
  color:#f8fafc;
}

.site-footer-copy{
  margin-top:.2rem;
  font-size:.8rem;
  line-height:1.55;
  color:#94a3b8;
}

.site-footer-links,
.site-footer-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  justify-content:flex-end;
  align-items:center;
  font-size:.8rem;
  color:#94a3b8;
}

.site-footer-link{
  color:#c4b5fd;
}

.site-footer-link:hover{
  color:#e9d5ff;
}

@media (max-width: 1024px){
  .donate-hero,
  .invite-hero{
    grid-template-columns:1fr;
  }

  .donate-grid,
  .invite-grid{
    grid-template-columns:1fr;
  }

  .site-footer-inner{
    grid-template-columns:1fr;
    text-align:center;
  }

  .site-footer-title-row{
    justify-content:center;
  }

  .site-footer-links,
  .site-footer-meta{
    justify-content:center;
  }
}