/* Nevaeh Hub — black & gold theme, TikTok cyan/pink accents, mobile-first */
:root {
  --bg: #0b0b0d;
  --bg2: #141417;
  --card: #1a1a1f;
  --line: #2a2a31;
  --gold: #d4af37;
  --gold-bright: #f5c542;
  --gold-dim: #8a7223;
  --text: #f2f0e8;
  --muted: #a9a49a;
  --cyan: #25f4ee;
  --pink: #fe2c55;
  --red: #e03131;
  --green: #40c057;
  --radius: 14px;
  --tabbar-h: 64px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.45;
}
#app { max-width: 720px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }

#topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: rgba(11,11,13,.92); backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--gold-dim);
}
.brand { font-weight: 800; font-size: 20px; letter-spacing: .5px; }
.brand-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; margin-right: 8px;
  background: #000; color: var(--gold); border: 2px solid var(--gold);
  font-weight: 900; vertical-align: middle;
}
#userchip { font-size: 13px; color: var(--muted); }
#userchip .role { color: var(--gold-bright); font-weight: 700; text-transform: uppercase; font-size: 11px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-regions { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; margin-left: 10px; vertical-align: middle; }
.topbar-regions .region-name { display: none; }
.music-btn {
  background: #000; border: 2px solid var(--gold-dim); border-radius: 10px;
  font-size: 18px; line-height: 1; padding: 7px 9px; cursor: pointer;
  transition: border-color .2s, transform .1s;
}
.music-btn:active { transform: scale(.94); }
.music-btn.playing { border-color: var(--gold-bright); box-shadow: 0 0 10px rgba(212,175,55,.45); }

#view { flex: 1; padding: 16px 16px calc(var(--tabbar-h) + 90px); }
.hidden { display: none !important; }

/* ---------- Tab bar ---------- */
#tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 720px; height: var(--tabbar-h);
  display: flex; background: #101013; border-top: 2px solid var(--gold-dim);
  z-index: 20; padding-bottom: env(safe-area-inset-bottom);
  overflow-x: auto; scrollbar-width: none;
}
#tabbar::-webkit-scrollbar { display: none; }
#tabbar a {
  flex: 1 0 auto; min-width: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--muted); text-decoration: none; font-size: 20px; gap: 2px;
}
#tabbar a span { font-size: 11px; }
#tabbar a.active { color: var(--gold-bright); }

/* ---------- Cards / buttons / forms ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px;
}
.card h2, .card h3 { margin: 0 0 10px; }
.gold { color: var(--gold-bright); }
.muted { color: var(--muted); font-size: 14px; }
.cyan { color: var(--cyan); } .pink { color: var(--pink); }

.btn {
  display: inline-block; border: none; border-radius: 10px; padding: 12px 18px;
  font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center;
}
.btn-gold { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #111; }
.btn-gold:active { transform: scale(.98); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-danger { background: var(--red); color: #fff; }
.btn-cyan { background: var(--cyan); color: #042; }
.btn-block { display: block; width: 100%; margin-top: 10px; }
.btn-small { padding: 8px 12px; font-size: 14px; }

input, textarea, select {
  width: 100%; padding: 12px; margin: 6px 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--text); font-size: 16px;
}
label { font-size: 14px; color: var(--muted); font-weight: 600; }
.row { display: flex; gap: 10px; } .row > * { flex: 1; }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card { background: var(--card); border-radius: 18px; padding: 22px; width: 100%; max-width: 440px; border: 1px solid var(--line); }
.modal-card.danger { border: 2px solid var(--red); }
.modal-card h2 { margin-top: 0; }
.fineprint { font-size: 12px; color: var(--muted); margin-top: 12px; }
.contact-preview { background: var(--bg2); border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 14px; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 100px); z-index: 60;
  background: #222; color: #fff; padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--gold); font-size: 14px; max-width: 90vw; text-align: center;
}

/* ---------- Chat ---------- */
#chat-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.chat-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--text);
}
.chat-item .avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: #000; border: 2px solid var(--gold); color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
}
.chat-item .meta { flex: 1; min-width: 0; }
.chat-item .meta .name { font-weight: 700; }
.chat-item .meta .preview { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#messages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; max-height: 55vh; overflow-y: auto; }
.msg { max-width: 82%; padding: 10px 13px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.msg.mine { align-self: flex-end; background: #2b2410; border-color: var(--gold-dim); }
.msg .who { font-size: 11px; color: var(--gold-bright); font-weight: 700; margin-bottom: 2px; }
.msg .when { font-size: 10px; color: var(--muted); margin-top: 4px; text-align: right; }
.chat-input { display: flex; gap: 8px; position: sticky; bottom: calc(var(--tabbar-h) + 80px); }
.chat-input input { margin: 0; flex: 1; }
.chat-input button { flex-shrink: 0; }

/* ---------- Fund ---------- */
.tally {
  text-align: center; padding: 22px 12px; border-radius: var(--radius);
  background: linear-gradient(160deg, #1c1a10, #141310); border: 2px solid var(--gold);
  margin-bottom: 14px;
}
.tally .amount { font-size: 44px; font-weight: 900; color: var(--gold-bright); }
.tally .label { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.ledger th, .ledger td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.ledger th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.payout { border-left: 4px solid var(--gold-dim); }
.payout.ready { border-left-color: var(--green); }
.approval-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); color: var(--muted); }
.chip.ok { background: #0f2a14; border-color: var(--green); color: #b2f2bb; }
.status { font-size: 12px; font-weight: 800; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.status.pending { background: #332a08; color: var(--gold-bright); }
.status.approved { background: #0f2a14; color: #b2f2bb; }
.status.paid { background: #123; color: var(--cyan); }
.status.rejected { background: #2a0f0f; color: #ffa8a8; }

/* ---------- Map ---------- */
#map { height: 55vh; min-height: 380px; border-radius: var(--radius); border: 1px solid var(--gold-dim); z-index: 1; }
.leaflet-container { background: #0b0b0d; font-family: inherit; }

/* ---------- Admin ---------- */
.user-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.user-row .info { flex: 1; min-width: 0; }
.user-row .info .email { font-size: 13px; color: var(--muted); word-break: break-all; }
.badge { font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); }
.badge.owner { border-color: var(--gold); color: var(--gold-bright); }
.badge.manager { border-color: var(--cyan); color: var(--cyan); }
.badge.creator { border-color: var(--pink); color: var(--pink); }
.badge.revoked { border-color: var(--red); color: #ffa8a8; }

/* ---------- Home: hero kicker + quick nav ---------- */
.hero-kicker {
  font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--gold-bright);
  margin-bottom: 4px;
}
.quick-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0;
}
.quick-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 6px; text-align: center; text-decoration: none; color: var(--text);
  font-size: 13px; font-weight: 700;
}
.quick-card:active { border-color: var(--gold); }
.q-ico { font-size: 26px; margin-bottom: 4px; }

/* ---------- Roster ---------- */
.roster-grid { display: flex; flex-direction: column; gap: 10px; }
.roster-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--text);
}
.roster-card:active { border-color: var(--gold); }
.roster-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 20px; background: #000; border: 2px solid var(--line);
}
.roster-avatar.badge-owner { border-color: var(--gold); color: var(--gold-bright); }
.roster-avatar.badge-partner { border-color: var(--gold-dim); color: var(--gold); }
.roster-avatar.badge-manager { border-color: var(--cyan); color: var(--cyan); }
.roster-avatar.badge-creator { border-color: var(--pink); color: var(--pink); }
.roster-info { flex: 1; min-width: 0; }
.roster-handle { font-weight: 800; }
.roster-role { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.roster-role.badge-owner { color: var(--gold-bright); }
.roster-role.badge-partner { color: var(--gold); }
.roster-role.badge-manager { color: var(--cyan); }
.roster-role.badge-creator { color: var(--pink); }
.roster-go { color: var(--muted); font-size: 20px; }

/* ---------- Standings ---------- */
.stand-list { display: flex; flex-direction: column; gap: 10px; }
.stand-card {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.stand-rank {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; background: #000; border: 2px solid var(--gold-dim); color: var(--gold-bright);
}
.stand-main { flex: 1; min-width: 0; }
.stand-handle { font-weight: 800; margin-bottom: 4px; }
.stand-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.progress { height: 8px; border-radius: 999px; background: var(--bg2); overflow: hidden; margin-bottom: 6px; }
.progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
}
.stand-next { font-size: 13px; }

/* ---------- Announcements ---------- */
.announce-card { border-left: 4px solid var(--gold); }
.announce-title { font-weight: 800; font-size: 17px; margin-bottom: 6px; }
.announce-body { white-space: pre-wrap; margin-bottom: 8px; }
.announce-date { font-size: 12px; }
.fld { display: block; }
.fld > span { display: block; margin-bottom: 2px; }

/* ---------- Lounge ---------- */
#lounge-frame {
  width: 100%; height: 62vh; min-height: 420px;
  border: 2px solid var(--gold-dim); border-radius: var(--radius); background: #000;
}

/* ---------- Wallet (Kindness Points) ---------- */
.preset-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.preset-row .preset { flex: 1 1 0; padding: 12px 6px; font-size: 17px; }
.preset-row .preset:active { border-color: var(--gold-bright); color: var(--gold-bright); }
.kindness-error {
  background: #2a0f0f; border: 1px solid var(--red); color: #ffa8a8;
  border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 8px 0;
}
.co-preview { font-size: 14px; color: var(--muted); margin: 4px 0 10px; }
.status.requested { background: #332a08; color: var(--gold-bright); }

/* ---------- Misc ---------- */
.hero { text-align: center; padding: 26px 10px; }
.hero h1 { font-size: 30px; margin: 6px 0; }
.hero h1 .gold { color: var(--gold-bright); }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; }
.stat .n { font-size: 26px; font-weight: 900; color: var(--gold-bright); }
.stat .l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.auth-card { max-width: 420px; margin: 8vh auto 0; }
.center { text-align: center; }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.switch { position: relative; width: 52px; height: 30px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: .2s; cursor: pointer; }
.slider:before { content: ""; position: absolute; width: 22px; height: 22px; left: 4px; top: 4px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--gold); }
.switch input:checked + .slider:before { transform: translateX(22px); }
@media (min-width: 721px) {
  #view { padding-bottom: 110px; }
}

/* Kindness giver tiers */
.tier-badge { display: inline-block; font-size: 17px; font-weight: 800; color: var(--gold-bright);
  background: rgba(212,175,55,.12); border: 1px solid var(--gold); border-radius: 999px;
  padding: 4px 14px; margin-bottom: 6px; }
.badge.gold { border-color: var(--gold); color: var(--gold-bright); }

/* ============ Kindness gift blast (full-screen celebration overlay) ============ */
.gb-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(60,42,5,.88) 0%, rgba(0,0,0,.94) 70%);
  cursor: pointer; overflow: hidden;
  animation: gb-fadein .25s ease-out;
}
.gb-overlay.gb-out { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
@keyframes gb-fadein { from { opacity: 0; } to { opacity: 1; } }
.gb-canvas { position: absolute; inset: 0; pointer-events: none; }
.gb-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gb-card {
  position: relative; z-index: 2; text-align: center;
  background: rgba(10,10,10,.92);
  border: 2px solid var(--gold); border-radius: 18px;
  box-shadow: 0 0 60px rgba(212,175,55,.35), inset 0 0 40px rgba(212,175,55,.08);
  padding: 28px 26px; margin: 0 18px; max-width: 420px; width: calc(100% - 36px);
  animation: gb-pop .45s cubic-bezier(.2,1.4,.4,1);
}
@keyframes gb-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* CSS gift box: gold box + ribbon drawn with pseudo-elements (no images) */
.gb-boxwrap { display: flex; justify-content: center; margin-bottom: 10px; }
.gb-box {
  position: relative; width: 92px; height: 76px;
  background: linear-gradient(160deg, #f5c542 0%, #d4af37 55%, #a8862a 100%);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(212,175,55,.5);
}
.gb-box::before { /* vertical ribbon */
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 18px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #FE2C55, #ff6b8b, #FE2C55);
}
.gb-box::after { /* horizontal ribbon */
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 16px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #FE2C55, #ff6b8b, #FE2C55);
}
.gb-lid {
  position: absolute; left: -8px; right: -8px; top: -20px; height: 26px;
  background: linear-gradient(160deg, #ffd97a 0%, #d4af37 70%);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.gb-lid::before { /* bow knot */
  content: ""; position: absolute; left: 50%; top: -14px; width: 26px; height: 26px;
  transform: translateX(-50%) rotate(45deg);
  background: radial-gradient(circle at 35% 35%, #ff8ba0, #FE2C55 70%);
  border-radius: 8px 8px 8px 2px;
}
.gb-boxwrap .gb-box { animation: gb-shake .5s ease-in-out 2; }
@keyframes gb-shake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-7deg) translateY(-4px); }
  40% { transform: rotate(6deg); }
  60% { transform: rotate(-5deg) translateY(-3px); }
  80% { transform: rotate(4deg); }
}
/* On burst: the box flies apart and fades as confetti takes over */
.gb-overlay.gb-burst .gb-box { animation: gb-burstbox .55s ease-in .9s forwards; }
@keyframes gb-burstbox {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: scale(1.8) rotate(-14deg); opacity: 0; }
}
.gb-title { font-size: 24px; font-weight: 900; color: var(--gold-bright); margin: 6px 0 8px; }
.gb-text { font-size: 17px; line-height: 1.45; color: #fff; }
.gb-text .gold { color: var(--gold-bright); }
.gb-msg {
  margin: 12px auto 0; max-width: 340px; font-style: italic; font-size: 15px;
  color: #ffe9b8; background: rgba(212,175,55,.1);
  border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0;
  padding: 8px 12px; text-align: left;
}
.gb-hint { margin-top: 14px; font-size: 12px; color: var(--muted); }
/* Reduced motion: static card, no shake/burst */
.gb-card.gb-calm .gb-box { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .gb-box { animation: none !important; }
  .gb-overlay.gb-burst .gb-box { animation: none !important; opacity: 1; transform: none; }
  .gb-card { animation: none; }
}

/* ============ Kindness Wall ============ */
.wall-card { border-color: var(--gold-dim); }
.wall-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.wall-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 4px; border-bottom: 1px solid var(--line);
}
.wall-row:last-child { border-bottom: 0; }
.wall-gift {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: linear-gradient(160deg, rgba(212,175,55,.25), rgba(212,175,55,.06));
  border: 1px solid var(--gold-dim);
}
.wall-line { font-size: 15px; line-height: 1.4; }
.wall-line .gold { color: var(--gold-bright); }
.wall-arrow { color: var(--gold); font-weight: 700; }
.wall-points {
  display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 800;
  color: #0a0a0a; background: linear-gradient(160deg, #ffd97a, #d4af37);
  border-radius: 999px; padding: 1px 10px; vertical-align: 1px;
}
.wall-msg {
  margin-top: 6px; font-style: italic; font-size: 14px; color: #ffe9b8;
  background: rgba(212,175,55,.08); border-left: 3px solid var(--gold-dim);
  border-radius: 0 8px 8px 0; padding: 6px 10px;
}
.wall-time { margin-top: 4px; font-size: 12px; }

/* 🎡 Prize Wheel */
.pill { display:inline-block; background:rgba(245,197,66,.18); border:1px solid var(--gold-dim);
  border-radius:999px; padding:1px 8px; font-size:12px; color:var(--gold); margin-left:6px; }
.wheel-win { font-size:20px; margin:10px 0 4px; color:var(--gold); }
.wheel-win.big { font-size:24px; }
.wheel-lose { font-size:17px; margin:10px 0 4px; color:var(--muted); }
#wheel-canvas { touch-action: manipulation; }
#wheel-doubleup { animation: pop .25s ease-out; }
@keyframes pop { from { transform: scale(.94); opacity:.4; } to { transform: scale(1); opacity:1; } }

/* ============================================================
   v14 visual polish — black & gold, premium feel, pure CSS.
   All motion is transform/opacity only (GPU-cheap, phone-fast)
   and fully disabled under prefers-reduced-motion.
   ============================================================ */

/* ---------- Splash screen ---------- */
#splash {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(212,175,55,.16) 0%, rgba(11,11,13,0) 55%),
    #0b0b0d;
  transition: opacity .6s ease;
}
#splash.done { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; animation: splashIn .7s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes splashIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
.splash-n {
  width: 84px; height: 84px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 900; color: var(--gold-bright);
  background: #000; border: 3px solid var(--gold); border-radius: 26px;
  box-shadow: 0 0 44px rgba(212,175,55,.4);
  animation: splashGlow 2.2s ease-in-out infinite;
}
@keyframes splashGlow {
  0%, 100% { box-shadow: 0 0 28px rgba(212,175,55,.28); }
  50% { box-shadow: 0 0 60px rgba(212,175,55,.55); }
}
.splash-name { font-size: 30px; font-weight: 900; letter-spacing: .5px; }
.splash-tag { font-size: 11px; font-weight: 800; letter-spacing: 3px; color: var(--gold-bright); margin-top: 8px; }

/* ---------- View transitions ---------- */
.view-enter { animation: viewIn .3s ease-out; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons: rounded gradient gold + press feedback ---------- */
.btn {
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:active { transform: scale(.95); }
.btn:disabled { opacity: .55; transform: none; }
.btn-gold {
  background: linear-gradient(180deg, #ffe9a8 0%, var(--gold-bright) 45%, var(--gold) 100%);
  box-shadow: 0 4px 20px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.btn-gold:active { box-shadow: 0 2px 8px rgba(212,175,55,.3), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-ghost:active, .btn-danger:active, .btn-cyan:active { transform: scale(.95); }

/* ---------- Cards: softer radius, gentle depth ---------- */
.card {
  border-radius: 18px;
  box-shadow: 0 8px 26px rgba(0,0,0,.38);
}
input, textarea, select { border-radius: 14px; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--gold-dim);
  box-shadow: 0 0 0 3px rgba(212,175,55,.18);
}

/* ---------- Hero: premium gradient headline + shimmer ---------- */
.hero { position: relative; }
.hero h1 {
  font-size: 32px; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.hero h1 .gold {
  background: linear-gradient(110deg, #8a6d1f 15%, #fff3c4 38%, var(--gold-bright) 50%, #fff3c4 62%, #8a6d1f 85%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: goldShimmer 4.5s linear infinite;
  filter: drop-shadow(0 0 14px rgba(212,175,55,.35));
}
@keyframes goldShimmer { to { background-position: 220% center; } }
.hero-kicker { text-shadow: 0 0 16px rgba(212,175,55,.35); }
.hero > * { animation: heroRise .5s ease-out both; }
.hero > *:nth-child(2) { animation-delay: .06s; }
.hero > *:nth-child(3) { animation-delay: .12s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Home: staggered card entrances ---------- */
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.quick-grid .quick-card { animation: cardIn .42s cubic-bezier(.2,1.1,.4,1) both; }
.quick-grid .quick-card:nth-child(1) { animation-delay: .03s; }
.quick-grid .quick-card:nth-child(2) { animation-delay: .06s; }
.quick-grid .quick-card:nth-child(3) { animation-delay: .09s; }
.quick-grid .quick-card:nth-child(4) { animation-delay: .12s; }
.quick-grid .quick-card:nth-child(5) { animation-delay: .15s; }
.quick-grid .quick-card:nth-child(6) { animation-delay: .18s; }
.quick-grid .quick-card:nth-child(7) { animation-delay: .21s; }
.quick-grid .quick-card:nth-child(8) { animation-delay: .24s; }
.quick-grid .quick-card:nth-child(9) { animation-delay: .27s; }
.quick-grid .quick-card:nth-child(10) { animation-delay: .3s; }
.quick-grid .quick-card:nth-child(11) { animation-delay: .33s; }
.quick-grid .quick-card:nth-child(12) { animation-delay: .36s; }
.quick-card {
  border-radius: 18px;
  transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.quick-card:active {
  transform: scale(.92);
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(212,175,55,.3);
}
.q-ico { filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.stat-grid .stat { animation: cardIn .42s cubic-bezier(.2,1.1,.4,1) both; border-radius: 18px; }
.stat-grid .stat:nth-child(1) { animation-delay: .1s; }
.stat-grid .stat:nth-child(2) { animation-delay: .18s; }
.stat-grid .stat:nth-child(3) { animation-delay: .26s; }
.stat-grid .stat:nth-child(4) { animation-delay: .34s; }

/* ---------- Topbar + tabbar accents ---------- */
.brand-n { box-shadow: 0 0 14px rgba(212,175,55,.35); }
#tabbar a { transition: color .2s ease, transform .12s ease; position: relative; }
#tabbar a:active { transform: scale(.9); }
#tabbar a.active::after {
  content: ""; position: absolute; bottom: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px rgba(245,197,66,.8);
}

/* ---------- TikTok Help Center ---------- */
.help-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.help-cat {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 14px 6px; color: var(--text); font-size: 13px; font-weight: 700;
  font-family: inherit;
  cursor: pointer; transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
  animation: cardIn .42s cubic-bezier(.2,1.1,.4,1) both;
}
.help-cat:nth-child(2) { animation-delay: .07s; }
.help-cat:nth-child(3) { animation-delay: .14s; }
.help-cat:active { transform: scale(.94); }
.help-cat.active {
  border-color: var(--gold); color: var(--gold-bright);
  box-shadow: 0 0 18px rgba(212,175,55,.28);
  background: linear-gradient(160deg, #221c0c, var(--card));
}
.help-cat-ico { font-size: 28px; margin-bottom: 6px; }
.help-item { border-bottom: 1px solid var(--line); }
.help-item:last-child { border-bottom: 0; }
.help-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: none; border: none; color: var(--text); font-size: 15px; font-weight: 700;
  font-family: inherit;
  text-align: left; padding: 13px 4px; cursor: pointer;
}
.help-chev { color: var(--gold); transition: transform .25s ease; font-size: 18px; }
.help-item.open .help-chev { transform: rotate(180deg); }
.help-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.help-item.open .help-a { max-height: 600px; }
.help-a p { margin: 0 4px 14px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.help-qa { padding: 12px 0; border-bottom: 1px solid var(--line); }
.help-qa:last-child { border-bottom: 0; }
.help-qa-q { margin-bottom: 6px; }
.help-qa-q .pill { margin: 0 8px 4px 0; }
.help-qa-a {
  font-size: 14px; color: #ffe9b8; line-height: 1.55;
  background: rgba(212,175,55,.08); border-left: 3px solid var(--gold-dim);
  border-radius: 0 10px 10px 0; padding: 8px 12px;
}

/* ---------- Reduced motion: everything still, always usable ---------- */
@media (prefers-reduced-motion: reduce) {
  .view-enter, .splash-inner, .splash-n, .hero > *, .hero h1 .gold,
  .quick-grid .quick-card, .stat-grid .stat, .help-cat { animation: none !important; }
  .btn, .quick-card, .help-cat, #tabbar a { transition: none !important; }
  .splash-n { animation: none !important; }
}

/* ---------- v17: LIVE now strip ---------- */
.live-strip-card { border: 1px solid rgba(254, 44, 85, .35); }
.live-strip-card h3 { margin-top: 0; }
.live-count { display: inline-block; background: #fe2c55; color: #fff; font-size: 12px;
  font-weight: 700; border-radius: 999px; padding: 1px 9px; vertical-align: middle; }
.live-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 10px;
  -webkit-overflow-scrolling: touch; }
.live-card { display: flex; align-items: center; gap: 10px; min-width: 230px;
  background: rgba(254, 44, 85, .07); border: 1px solid rgba(254, 44, 85, .45);
  border-radius: 14px; padding: 10px 12px; }
.live-avatar { position: relative; width: 46px; height: 46px; border-radius: 50%;
  background: #26262b; border: 2px solid #fe2c55; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 20px; flex: none; }
.live-dot { position: absolute; top: -3px; right: -3px; width: 15px; height: 15px;
  border-radius: 50%; background: #fe2c55; border: 2px solid #0b0b0b;
  animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .65; } }
.live-info { flex: 1; min-width: 0; }
.live-info strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-tag { color: #fe2c55; font-weight: 800; font-size: 12px; letter-spacing: .4px; }
.live-toggle-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ---------- v17: Creator spotlight ---------- */
.spotlight-card { border: 1px solid rgba(245, 197, 66, .45); }
.spotlight-kicker { color: var(--gold); font-size: 12px; font-weight: 800;
  letter-spacing: 1.2px; margin-bottom: 10px; }
.spotlight-body { display: flex; align-items: center; gap: 14px; }
.spotlight-avatar { width: 58px; height: 58px; font-size: 26px; flex: none; }

/* ---------- Real TikTok profile photos (replaces letter placeholders) ---------- */
img.roster-avatar { object-fit: cover; }
.live-avatar img, .chat-item .avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.avatar-neutral { font-style: normal; }
.spotlight-handle { font-weight: 800; font-size: 18px; }

/* ---------- v17: Wheel spin streaks ---------- */
.streak-row { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.streak-row:first-of-type { border-top: 0; }

/* ---------- Reduced motion: v17 additions ---------- */
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none !important; }
}

/* ---------- Region apply links (v23) ---------- */
.region-apply-list { display: grid; gap: 10px; margin-top: 12px; }
.region-btn { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(212,175,55,.4); background: rgba(255,255,255,.04); color: #fff; text-decoration: none; font-weight: 700; }
.region-btn:active { transform: scale(.98); }
.region-btn .rf { font-size: 1.5rem; line-height: 1; }
.region-btn .rt { color: var(--gold-bright, #ffd97a); }