/* SAKARWINE brand theme override — palette only; logo/name remain unchanged. */
:root {
  --sw-void: #121310;
  --sw-deep: #1b1a17;
  --sw-mid: #283128;
  --sw-ink: #f7f0e3;
  --sw-muted: rgba(247, 240, 227, 0.72);
  --sw-faint: rgba(247, 240, 227, 0.48);
  --neon-cyan: #91a58a;
  --neon-magenta: #d79a82;
  --neon-violet: #91a58a;
  --neon-pink: #c9856f;
  --cta-a: #687c65;
  --cta-b: #91a58a;
  --cta-c: #d9b878;
  --glass-fill: rgba(48, 55, 45, 0.52);
  --glass-strong: rgba(35, 42, 35, 0.9);
  --glass-stroke: rgba(241, 229, 205, 0.22);
  --surface: rgba(241, 229, 205, 0.08);
  --surface-hover: rgba(145, 165, 138, 0.16);
  --paid-glow: rgba(145, 165, 138, 0.22);
  --sw-canvas:
    radial-gradient(900px 520px at 12% 8%, rgba(145, 165, 138, 0.28), transparent 55%),
    radial-gradient(820px 480px at 92% 4%, rgba(201, 133, 111, 0.24), transparent 52%),
    radial-gradient(720px 520px at 70% 100%, rgba(217, 184, 120, 0.14), transparent 50%),
    linear-gradient(180deg, #283128, #1b1a17 58%, #342e27);
  --sw-glow:
    radial-gradient(circle at 12% 0%, rgba(145, 165, 138, 0.24), transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(201, 133, 111, 0.2), transparent 44%),
    radial-gradient(circle at 70% 100%, rgba(217, 184, 120, 0.14), transparent 40%);
  --sw-cta: linear-gradient(100deg, #687c65, #91a58a 58%, #d9b878);
  --sw-cta-shadow: 0 12px 28px rgba(104, 124, 101, 0.3);
  --green: #91a58a;
  --green-deep: #687c65;
  --green-soft: #c9d4bf;
  --hero-a: #687c65;
  --hero-b: #c9856f;
  --hero-c: #d9b878;
  --wine: #c9856f;
  --wine-deep: #9b5f4f;
  --rose: #d79a82;
  --gold: #d9b878;
  --ok: #9fca8f;
  --danger: #d77d72;
  --shadow: 0 24px 50px rgba(9, 12, 9, 0.46);
}

html, body { color-scheme: dark; }
body {
  background-color: var(--sw-deep);
  background-image: var(--sw-canvas);
}

/* Auth and welcome surfaces */
.welcome-card,
.auth-card {
  background: rgba(35, 42, 35, 0.62) !important;
  border-color: rgba(241, 229, 205, 0.24) !important;
  box-shadow: 0 24px 50px rgba(9, 12, 9, 0.5), inset 0 1px 0 rgba(247, 240, 227, 0.2) !important;
}
.welcome-card .field input,
.auth-card .field input,
.field input, .field select, .field textarea {
  background: rgba(18, 20, 16, 0.62) !important;
  border-color: rgba(241, 229, 205, 0.18) !important;
  color: var(--sw-ink) !important;
  caret-color: var(--neon-cyan);
}
.welcome-card .field input:focus,
.auth-card .field input:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: rgba(145, 165, 138, 0.76) !important;
  box-shadow: 0 0 0 3px rgba(145, 165, 138, 0.2) !important;
}
.welcome-login-btn,
.welcome-card #login-btn,
.auth-card .btn.block,
.btn:not(.secondary):not(.ghost):not(.danger) {
  background: var(--sw-cta) !important;
  box-shadow: var(--sw-cta-shadow) !important;
  color: #172016 !important;
}
.welcome-card .btn.secondary,
.auth-card .btn.secondary,
.btn.secondary,
.btn.ghost {
  background: rgba(241, 229, 205, 0.07) !important;
  border-color: rgba(241, 229, 205, 0.2) !important;
  color: var(--sw-ink) !important;
}
.logo-aura {
  background: linear-gradient(90deg, #91a58a, #d9b878 48%, #c9856f) !important;
  opacity: 0.18 !important;
}

/* Shared app glass and navigation */
.glass-card,
.nav,
.bottom-nav,
.topbar,
.chat-composer,
.modal-card,
.popover,
.sheet,
.user-card,
.profile-card {
  border-color: rgba(241, 229, 205, 0.2) !important;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(247, 240, 227, 0.16) !important;
}
.nav .active,
.bottom-nav .active,
.nav button.active,
.bottom-nav button.active {
  color: #d9b878 !important;
  background: rgba(145, 165, 138, 0.16) !important;
}
.online,
.online-dot,
.status-online { background: #9fca8f !important; box-shadow: 0 0 10px rgba(159, 202, 143, 0.65) !important; }
.vip,
.vip-tag,
.level-badge { border-color: rgba(217, 184, 120, 0.5) !important; color: #f0d28d !important; }

/* Replace remaining hard-coded purple auth accents. */
.auth-topbar .icon-btn,
.icon-btn { background: rgba(241, 229, 205, 0.08) !important; border-color: rgba(241, 229, 205, 0.18) !important; }
.auth-card .photo-pick { background: rgba(18, 20, 16, 0.4) !important; border-color: rgba(241, 229, 205, 0.22) !important; }

/* Admin chrome uses the same brand palette. */
.card, .stat, .desk-card, .desk-bar, .tabs, .notice {
  background: linear-gradient(180deg, rgba(241, 229, 205, 0.12), rgba(48, 55, 45, 0.2)) !important;
  border-color: rgba(241, 229, 205, 0.2) !important;
}
.stat b, .desk-card[data-desk="money"] .desk-card-meta b, .desk-card[data-desk="other"] .desk-card-meta b { color: #d9b878 !important; text-shadow: 0 0 18px rgba(217, 184, 120, 0.3) !important; }
.tabs button.on, body.is-admin-login .login-cta { background: var(--sw-cta) !important; box-shadow: var(--sw-cta-shadow) !important; color: #172016 !important; }
input, select, textarea, button { border-color: rgba(241, 229, 205, 0.18); background-color: rgba(18, 20, 16, 0.58); color: var(--sw-ink); }
button.ghost { background: rgba(241, 229, 205, 0.07); color: var(--sw-ink); }

/* Games: keep the playful game identity, but bring it into the brand palette. */
.games-screen, .gm-screen {
  --gm-bg: #171914;
  --gm-p1: #c9856f;
  --gm-p2: #91a58a;
  --gm-p3: #d9b878;
  --gm-p4: #b7c69f;
  --gm-gold: #e3c77e;
  --gm-txt: #f7f0e3;
  --gm-mut: rgba(247, 240, 227, .62);
  background:
    radial-gradient(60% 38% at 12% 8%, rgba(201, 133, 111, .18), transparent 70%),
    radial-gradient(55% 35% at 95% 30%, rgba(145, 165, 138, .18), transparent 70%),
    radial-gradient(70% 40% at 30% 80%, rgba(217, 184, 120, .12), transparent 70%),
    var(--gm-bg);
}
.gm-panel { border-color: rgba(241, 229, 205, .18); box-shadow: inset 0 1px 0 rgba(247, 240, 227, .16), 0 10px 24px -6px rgba(9, 12, 9, .58); }
.gm-b3 { background: linear-gradient(180deg, #d79a82, #c9856f 55%, #9b5f4f) !important; box-shadow: 0 5px 0 #70463b, 0 12px 20px -4px rgba(9, 12, 9, .6), inset 0 2px 0 rgba(255,255,255,.35) !important; }
.gm-b3.gn { background: linear-gradient(180deg, #c9d4bf, #91a58a 55%, #687c65) !important; color: #172016 !important; box-shadow: 0 5px 0 #465843, 0 12px 20px -4px rgba(9, 12, 9, .6), inset 0 2px 0 rgba(255,255,255,.45) !important; }
.gm-b3.gd { background: linear-gradient(180deg, #f1dfac, #d9b878 55%, #b28d4d) !important; color: #3d2d14 !important; }

/* Reduce saturated neon while keeping the original logo untouched. */
.sw-canvas-glow, .admin-dash-glow { opacity: .9; }

/* Profile image treatment: square framed tiles on Home and Profile/Me, as requested. */
.user-row .row-ava,
.user-row .row-ava .avatar,
.profile-lite-photo,
.profile-screen .me-identity .me-ava,
.me-card .avatar.round,
.edit-photo .avatar.round {
  border-radius: 18px !important;
}
.user-row .row-ava .avatar,
.profile-lite-photo,
.profile-screen .me-identity .me-ava,
.me-card .avatar.round,
.edit-photo .avatar.round {
  border: 1px solid rgba(241, 229, 205, 0.34) !important;
  background: rgba(48, 55, 45, 0.72) !important;
  box-shadow:
    0 0 0 3px rgba(145, 165, 138, 0.16),
    0 10px 24px rgba(9, 12, 9, 0.34),
    inset 0 1px 0 rgba(247, 240, 227, 0.22) !important;
}
.profile-lite-photo {
  width: 128px;
  height: 128px;
  margin-top: -28px;
}
.profile-screen .me-identity .me-ava {
  width: 112px;
  height: 112px;
  box-shadow:
    0 0 0 4px rgba(27, 26, 23, 0.94),
    0 0 0 6px rgba(145, 165, 138, 0.42),
    0 14px 28px rgba(9, 12, 9, 0.38) !important;
}
.profile-avatar-presence {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.profile-avatar-presence .ava-on {
  right: 5px;
  bottom: 5px;
  width: 17px;
  height: 17px;
  z-index: 3;
  border-width: 3px;
  border-color: rgba(14, 10, 24, .94);
}
.profile-avatar-presence .ava-on.on {
  background: #39e27d;
  box-shadow: 0 0 0 2px rgba(57, 226, 125, .24), 0 0 12px rgba(57, 226, 125, .9);
}
.user-row.gender-male,
.user-row.gender-female {
  background: linear-gradient(180deg, rgba(241, 229, 205, 0.1), rgba(35, 42, 35, 0.28)) !important;
  border-color: rgba(145, 165, 138, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(247, 240, 227, 0.16), 0 0 18px rgba(145, 165, 138, 0.12) !important;
}
.user-row.gender-male:hover,
.user-row.gender-female:hover { background: rgba(145, 165, 138, 0.14) !important; }


/* Unified SAKARWINE welcome screen: shared neon frosted-glass background. */
.welcome-screen {
  position: relative;
  isolation: isolate;
  width: min(100%, 768px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(38px, env(safe-area-inset-top)) 28px max(34px, env(safe-area-inset-bottom));
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  background: var(--sw-canvas) !important;
}
.welcome-screen::before {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 2px solid rgba(255, 246, 208, .72);
  border-radius: 58px;
  box-shadow: 0 0 0 1px rgba(72, 53, 22, .26), inset 0 0 26px rgba(255, 246, 208, .12);
  pointer-events: none;
}
.welcome-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse at 50% 38%, transparent 12%, rgba(19, 24, 12, .25) 82%);
  pointer-events: none;
}
.welcome-hero {
  width: min(100%, 520px);
  margin: clamp(24px, 7vh, 96px) auto 0;
  text-align: center;
  color: #fff9e8;
  text-shadow: 0 3px 14px rgba(27, 31, 15, .52);
}
.welcome-hero .brand-lockup { padding: 0; }
.welcome-hero .brand-logo {
  width: clamp(92px, 22vw, 154px);
  max-width: none;
  filter: drop-shadow(0 4px 12px rgba(24, 30, 15, .36));
}
.welcome-hero h1 {
  height: auto;
  margin: 7px 0 0;
  overflow: visible;
  font-family: Nunito, sans-serif;
  font-size: clamp(1.8rem, 7vw, 3.3rem);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  color: #fffbed;
}
.welcome-kicker {
  margin: clamp(22px, 4vh, 52px) 0 0;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2rem, 9vw, 4.8rem);
  font-weight: 700;
  line-height: .98;
  color: #fff9ea;
}
.welcome-subtitle {
  margin: 10px 0 0;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.05rem, 4.2vw, 1.85rem);
  letter-spacing: .03em;
  color: rgba(255, 249, 229, .94);
}
.welcome-card {
  width: min(100%, 610px);
  margin: clamp(32px, 6vh, 76px) auto 0;
  padding: clamp(22px, 5vw, 36px) clamp(20px, 5vw, 42px) clamp(24px, 5vw, 34px);
  gap: 14px;
  background: linear-gradient(155deg, rgba(73, 77, 40, .46), rgba(35, 41, 19, .64)) !important;
  border: 1.5px solid rgba(255, 245, 207, .62) !important;
  border-radius: 34px !important;
  backdrop-filter: blur(18px) saturate(.82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(.82) !important;
  box-shadow: 0 18px 44px rgba(22, 27, 12, .48), inset 0 1px 0 rgba(255, 252, 226, .32) !important;
}
.welcome-card .lang-switch { display: none; }
.welcome-card .field label {
  display: block;
  margin: 0 0 8px;
  color: rgba(255, 248, 224, .88) !important;
  font-family: Nunito, sans-serif;
  font-size: clamp(.85rem, 2.6vw, 1.05rem);
  font-weight: 700;
}
.welcome-card .field input,
.password-control {
  min-height: 58px;
  border-radius: 20px !important;
}
.welcome-card .field input {
  width: 100%;
  padding: 0 18px;
  background: rgba(48, 49, 25, .34) !important;
  border: 1.5px solid rgba(255, 245, 207, .66) !important;
  color: #fff9e8 !important;
  font-size: 1.02rem;
  box-shadow: inset 0 1px 1px rgba(255, 255, 236, .12), 0 0 14px rgba(255, 235, 164, .05);
}
.password-control {
  position: relative;
  display: flex;
  align-items: center;
}
.password-control input { padding-right: 58px !important; }
.password-toggle {
  position: absolute;
  right: 10px;
  width: 42px;
  height: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  border: 0 !important;
  color: rgba(250, 245, 255, .78) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: pointer;
}
.password-toggle:hover,
.password-toggle:focus-visible {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  filter: drop-shadow(0 0 8px rgba(189, 87, 255, .5));
}
.password-toggle.is-visible {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  filter: drop-shadow(0 0 9px rgba(255, 99, 197, .9)) drop-shadow(0 0 18px rgba(189, 87, 255, .68));
}
.password-eye { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-eye circle { fill: currentColor; stroke: none; }
.password-eye-slash { opacity: 0; }
.password-toggle.is-visible .password-eye-slash { opacity: 1; }
.password-toggle.is-visible .password-eye-shape { opacity: .72; }
.welcome-card .field input:focus {
  border-color: rgba(255, 244, 194, .95) !important;
  box-shadow: 0 0 0 3px rgba(255, 225, 140, .2), 0 0 18px rgba(255, 225, 140, .12) !important;
}
.welcome-forgot {
  align-self: flex-end;
  min-height: 32px;
  margin: -2px 8px 0 0;
  padding: 0 !important;
  color: #fff2c4 !important;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(.85rem, 3vw, 1.15rem);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.welcome-login-btn {
  min-height: 64px;
  margin-top: 5px;
  border-radius: 36px !important;
  background: linear-gradient(100deg, #f6a244, #ef7640 54%, #e8673e) !important;
  border: 1.5px solid rgba(255, 241, 194, .8) !important;
  color: #fff9e9 !important;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.2rem, 4.2vw, 1.65rem);
  box-shadow: 0 11px 25px rgba(180, 80, 29, .32), inset 0 1px 0 rgba(255, 255, 231, .5) !important;
}
.welcome-login-btn span { float: right; padding-right: 12px; font-size: 1.8em; line-height: .55; }
.welcome-card .welcome-signup {
  min-height: 38px;
  margin-top: 5px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255, 249, 227, .9) !important;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(.9rem, 3vw, 1.18rem);
  box-shadow: none !important;
}
.welcome-signup strong { margin-left: 5px; color: #fff2b9; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 480px) {
  .welcome-screen { padding-left: 22px; padding-right: 22px; }
  .welcome-screen::before { inset: 7px; border-radius: 46px; }
  .welcome-hero { margin-top: 38px; }
  .welcome-card { margin-top: 34px; border-radius: 28px !important; }
}


/* Admin login + dashboard share the unified SAKARWINE UI background. */
body.is-admin-login,
body.is-admin-dash {
  background: var(--sw-canvas) !important;
}
body.is-admin-login::before,
body.is-admin-dash::before {
  content: '';
  position: fixed;
  inset: 10px;
  z-index: 0;
  border: 2px solid rgba(255, 246, 208, .58);
  border-radius: 54px;
  pointer-events: none;
}
.admin-login-stage {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 40px 18px;
}
.admin-login-glow { display: none; }
.admin-login-stage .card.login {
  width: min(100%, 540px);
  padding: clamp(26px, 5vw, 42px);
  background: linear-gradient(155deg, rgba(73, 77, 40, .48), rgba(35, 41, 19, .68)) !important;
  border: 1.5px solid rgba(255, 245, 207, .62) !important;
  border-radius: 34px !important;
  box-shadow: 0 18px 44px rgba(22, 27, 12, .48), inset 0 1px 0 rgba(255, 252, 226, .32) !important;
}
.admin-logo {
  width: clamp(86px, 20vw, 132px) !important;
  filter: drop-shadow(0 4px 12px rgba(24, 30, 15, .36));
}
.admin-login-stage h1 {
  color: #fffbed !important;
  font-family: Nunito, sans-serif !important;
  letter-spacing: .03em;
}
.admin-login-stage .muted,
.admin-login-stage label,
.admin-login-stage .field-ico { color: rgba(255, 248, 224, .88) !important; }
.admin-login-stage .underline-field { border-color: rgba(255, 245, 207, .5) !important; }
.admin-login-stage .underline-body input {
  color: #fff9e8 !important;
  background: rgba(48, 49, 25, .34) !important;
  border-color: rgba(255, 245, 207, .5) !important;
}
.admin-login-stage .login-cta {
  min-height: 60px;
  margin-top: 18px;
  border-radius: 34px !important;
  background: linear-gradient(100deg, #f6a244, #ef7640 54%, #e8673e) !important;
  color: #fff9e9 !important;
  box-shadow: 0 11px 25px rgba(180, 80, 29, .32), inset 0 1px 0 rgba(255, 255, 231, .5) !important;
}
body.is-admin-dash #admin-app { z-index: 1; }
body.is-admin-dash #admin-app .card,
body.is-admin-dash #admin-app .stat,
body.is-admin-dash #admin-app .desk-card,
body.is-admin-dash #admin-app .desk-bar,
body.is-admin-dash #admin-app .tabs {
  background: linear-gradient(155deg, rgba(73, 77, 40, .42), rgba(35, 41, 19, .62)) !important;
  border-color: rgba(255, 245, 207, .34) !important;
}
body.is-admin-dash #admin-app .tabs button.on,
body.is-admin-dash #admin-app button:not(.ghost):not(.danger):not(.warn) {
  background: linear-gradient(100deg, #f6a244, #ef7640 54%, #e8673e) !important;
  color: #fff9e9 !important;
}


/* Home People directory: square profile tiles for active and offline users.
   Content, Lv, Host, Admin, VIP and other role tags remain untouched. */
#user-list .user-row {
  min-height: 88px;
  gap: 14px;
  padding: 9px 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 245, 207, .26) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(73, 77, 40, .36), rgba(35, 41, 19, .58)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 252, 226, .18), 0 10px 22px rgba(22, 27, 12, .22) !important;
  backdrop-filter: blur(16px) saturate(.9);
  -webkit-backdrop-filter: blur(16px) saturate(.9);
}
#user-list .user-row:hover {
  background: linear-gradient(145deg, rgba(104, 124, 101, .42), rgba(48, 55, 29, .66)) !important;
  transform: translateY(-1px);
}
#user-list .row-ava {
  width: 70px;
  height: 70px;
  padding: 4px;
  border-radius: 15px !important;
  background: rgba(18, 20, 16, .48);
  border: 1px solid rgba(255, 245, 207, .42);
  box-shadow: inset 0 1px 0 rgba(255, 252, 226, .22), 0 7px 18px rgba(9, 12, 9, .26);
}
#user-list .row-ava .avatar,
#user-list .row-ava img.avatar {
  width: 60px;
  height: 60px;
  border-radius: 10px !important;
  object-fit: cover;
  display: block;
  border: 0 !important;
}
#user-list .user-row.gender-male { border-color: rgba(112, 166, 226, .62) !important; }
#user-list .user-row.gender-female { border-color: rgba(229, 145, 156, .62) !important; }
#user-list .user-row.gender-male .row-ava {
  border-color: rgba(112, 166, 226, .9);
  box-shadow: 0 0 0 2px rgba(112, 166, 226, .22), 0 0 18px rgba(82, 142, 210, .28), inset 0 1px 0 rgba(255,255,255,.25);
}
#user-list .user-row.gender-female .row-ava {
  border-color: rgba(229, 145, 156, .9);
  box-shadow: 0 0 0 2px rgba(229, 145, 156, .22), 0 0 18px rgba(211, 104, 125, .28), inset 0 1px 0 rgba(255,255,255,.25);
}
#user-list .row-ava .ava-on {
  right: -4px;
  bottom: -4px;
  width: 15px;
  height: 15px;
  border: 3px solid #30351f;
  background: #777b64 !important;
  box-shadow: none !important;
}
#user-list .row-ava .ava-on.on {
  background: #9fca8f !important;
  box-shadow: 0 0 0 2px rgba(159, 202, 143, .18), 0 0 12px rgba(159, 202, 143, .9) !important;
}
#user-list .row-ava .ava-on:not(.on) ~ .avatar,
#user-list .row-ava:has(.ava-on:not(.on)) .avatar {
  filter: saturate(.68) brightness(.72);
}
#user-list .meta .name { color: #fff9e8; font-weight: 800; }
@media (max-width: 480px) {
  #user-list .user-row { min-height: 82px; padding: 8px 10px; }
  #user-list .row-ava { width: 64px; height: 64px; }
  #user-list .row-ava .avatar, #user-list .row-ava img.avatar { width: 54px; height: 54px; }
}


/* Home People directory: square profile tiles for active and offline users.
   Content, Lv, Host, Admin, VIP and other role tags remain untouched. */
#user-list .user-row {
  min-height: 88px;
  gap: 14px;
  padding: 9px 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 245, 207, .26) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(73, 77, 40, .36), rgba(35, 41, 19, .58)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 252, 226, .18), 0 10px 22px rgba(22, 27, 12, .22) !important;
  backdrop-filter: blur(16px) saturate(.9);
  -webkit-backdrop-filter: blur(16px) saturate(.9);
}
#user-list .user-row:hover {
  background: linear-gradient(145deg, rgba(104, 124, 101, .42), rgba(48, 55, 29, .66)) !important;
  transform: translateY(-1px);
}
#user-list .row-ava {
  width: 70px;
  height: 70px;
  padding: 4px;
  border-radius: 15px !important;
  background: rgba(18, 20, 16, .48);
  border: 1px solid rgba(255, 245, 207, .42);
  box-shadow: inset 0 1px 0 rgba(255, 252, 226, .22), 0 7px 18px rgba(9, 12, 9, .26);
}
#user-list .row-ava .avatar,
#user-list .row-ava img.avatar {
  width: 60px;
  height: 60px;
  border-radius: 10px !important;
  object-fit: cover;
  display: block;
  border: 0 !important;
}
#user-list .user-row.gender-male { border-color: rgba(112, 166, 226, .62) !important; }
#user-list .user-row.gender-female { border-color: rgba(229, 145, 156, .62) !important; }
#user-list .user-row.gender-male .row-ava {
  border-color: rgba(112, 166, 226, .9);
  box-shadow: 0 0 0 2px rgba(112, 166, 226, .22), 0 0 18px rgba(82, 142, 210, .28), inset 0 1px 0 rgba(255,255,255,.25);
}
#user-list .user-row.gender-female .row-ava {
  border-color: rgba(229, 145, 156, .9);
  box-shadow: 0 0 0 2px rgba(229, 145, 156, .22), 0 0 18px rgba(211, 104, 125, .28), inset 0 1px 0 rgba(255,255,255,.25);
}
#user-list .row-ava .ava-on {
  right: -4px;
  bottom: -4px;
  width: 15px;
  height: 15px;
  border: 3px solid #30351f;
  background: #777b64 !important;
  box-shadow: none !important;
}
#user-list .row-ava .ava-on.on {
  background: #9fca8f !important;
  box-shadow: 0 0 0 2px rgba(159, 202, 143, .18), 0 0 12px rgba(159, 202, 143, .9) !important;
}
#user-list .row-ava:has(.ava-on:not(.on)) .avatar {
  filter: saturate(.68) brightness(.72);
}
#user-list .meta .name { color: #fff9e8; font-weight: 800; }
@media (max-width: 480px) {
  #user-list .user-row { min-height: 82px; padding: 8px 10px; }
  #user-list .row-ava { width: 64px; height: 64px; }
  #user-list .row-ava .avatar, #user-list .row-ava img.avatar { width: 54px; height: 54px; }
}


/* Final login polish: quieter glass card and compact reference proportions. */
.welcome-card {
  background: linear-gradient(145deg, rgba(73, 77, 40, .28), rgba(35, 41, 19, .42)) !important;
  border: 1px solid rgba(255, 245, 207, .45) !important;
  border-radius: 28px !important;
  backdrop-filter: blur(22px) saturate(.72) !important;
  -webkit-backdrop-filter: blur(22px) saturate(.72) !important;
  box-shadow: 0 14px 34px rgba(22, 27, 12, .34), inset 0 1px 0 rgba(255, 252, 226, .26) !important;
}
.welcome-hero h1 { font-size: clamp(1.4rem, 5vw, 2.35rem) !important; }
.welcome-kicker { font-size: clamp(1.65rem, 7vw, 3.4rem) !important; }
.welcome-subtitle { font-size: clamp(.9rem, 3.4vw, 1.35rem) !important; }
.welcome-card .field label { font-size: clamp(.72rem, 2.2vw, .9rem) !important; }
.welcome-card .field input, .welcome-card .password-control { min-height: 50px !important; font-size: .92rem !important; border-radius: 16px !important; }
.welcome-forgot { font-size: clamp(.72rem, 2.5vw, .92rem) !important; }
.welcome-login-btn {
  min-height: 52px !important;
  border-radius: 25px !important;
  background: linear-gradient(145deg, rgba(255, 205, 142, .34), rgba(222, 111, 67, .42)) !important;
  border: 1px solid rgba(255, 245, 207, .62) !important;
  color: #fff9e9 !important;
  font-size: clamp(.98rem, 3.3vw, 1.2rem) !important;
  box-shadow: 0 8px 18px rgba(180, 80, 29, .2), inset 0 1px 0 rgba(255, 255, 231, .42) !important;
  backdrop-filter: blur(12px) saturate(.8) !important;
  -webkit-backdrop-filter: blur(12px) saturate(.8) !important;
}
.welcome-login-btn span { font-size: 1.35em !important; }
.welcome-card .welcome-signup { font-size: clamp(.76rem, 2.7vw, 1rem) !important; }
.promo-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0 16px; }
.promo-plan-grid .field { margin: 0; }
.promo-plan-grid .field span { display: block; margin-bottom: 5px; font-size: .82rem; color: var(--sw-muted); }
.promo-plan-grid input { min-width: 0; }
@media (max-width: 600px) { .promo-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Unified semi-transparent glass UI: the background remains softly visible beneath every surface. */
:root {
  --glass-fill: rgba(20, 16, 34, 0.42);
  --glass-strong: rgba(20, 16, 34, 0.58);
  --glass-stroke: rgba(255, 255, 255, 0.22);
  --sw-blur: blur(20px) saturate(1.35);
}
.glass-card,
.card,
.auth-card,
.welcome-card,
.settings-list,
.settings-note-card,
.me-stat,
.quote-card,
.upgrade-promo-card,
.host-earnings-card,
.user-row,
.blocked-row,
.hidden-chat-row,
.chat-head,
.chat-log,
.composer,
.nav,
.topbar,
.modal .glass-card,
.toast,
.admin-head,
.stat,
.desk-card,
.desk-bar,
.tabs,
.table-scroll tr,
.dossier,
.lookup,
.notice,
.login {
  background: rgba(20, 16, 34, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(20px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
}
.bubble,
.composer-main,
.composer-pill,
.chat-tool,
.chat-send,
.chat-actions button,
.settings-row,
.icon-btn,
.lang-switch select,
.admin-lang select {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.16) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
}
.bubble.me { background: rgba(124, 58, 237, 0.42) !important; }
.bubble.them { background: rgba(255, 255, 255, 0.1) !important; }
button,
input,
select,
textarea {
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
input,
select,
textarea {
  background: rgba(8, 6, 16, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
button:not(.danger):not(.warn):not(.login-cta):not(.welcome-login-btn) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Home discovery: square full-photo profile tiles instead of a text list. */
.home-people-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}
.profile-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
  cursor: pointer;
  background: rgba(20, 16, 34, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  transition: transform .18s ease, border-color .18s ease;
}
.profile-tile:active { transform: scale(.98); }
.profile-tile:hover { border-color: rgba(255, 255, 255, 0.42); }
.profile-tile-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.profile-tile-photo .avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}
.profile-tile-info {
  min-height: 56px;
  padding: 9px 10px 10px;
}
.profile-tile-info .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}
.profile-tile-info .badge-lv,
.profile-tile-info .badge-neon { font-size: .68rem; }
@media (max-width: 360px) {
  .home-people-grid { gap: 8px; }
  .profile-tile-info { padding: 8px; }
}
.profile-tile-photo .row-ava,
.profile-tile-photo .row-ava .avatar {
  display: block;
  width: 100%;
  height: 100%;
}
.profile-tile-photo .row-ava { position: relative; }

/* Final SAKARWINE purple glass theme layer. */
:root {
  --sw-void: #07040f !important;
  --sw-deep: #10071f !important;
  --sw-mid: #21113d !important;
  --sw-ink: #faf5ff !important;
  --sw-muted: rgba(250, 245, 255, .74) !important;
  --neon-cyan: #b7a2ff !important;
  --neon-magenta: #f0a6ff !important;
  --neon-violet: #9b6cff !important;
  --neon-pink: #ff72c8 !important;
  --cta-a: #6d3cff !important;
  --cta-b: #bd57ff !important;
  --cta-c: #ff63c5 !important;
  --glass-fill: rgba(25, 12, 48, .56) !important;
  --glass-strong: rgba(28, 14, 52, .84) !important;
  --glass-stroke: rgba(238, 214, 255, .26) !important;
  --surface: rgba(214, 178, 255, .1) !important;
  --surface-hover: rgba(189, 87, 255, .2) !important;
  --green: #b7a2ff !important;
  --green-deep: #713dce !important;
  --green-soft: #ddccff !important;
  --hero-a: #6d3cff !important;
  --hero-b: #bd57ff !important;
  --hero-c: #ff63c5 !important;
  --wine: #f0a6ff !important;
  --wine-deep: #8c35bd !important;
  --rose: #ff8bd7 !important;
  --gold: #d7b8ff !important;
  --sw-canvas: radial-gradient(900px 520px at 10% 0%, rgba(125, 62, 255, .48), transparent 58%), radial-gradient(780px 500px at 95% 8%, rgba(255, 82, 197, .34), transparent 56%), linear-gradient(180deg, #241043, #10071f 62%, #07040f) !important;
  --sw-glow: radial-gradient(circle at 12% 0%, rgba(155, 108, 255, .34), transparent 44%), radial-gradient(circle at 88% 8%, rgba(255, 114, 200, .3), transparent 44%), radial-gradient(circle at 60% 100%, rgba(109, 60, 255, .22), transparent 46%) !important;
  --sw-cta: linear-gradient(100deg, #6d3cff, #bd57ff 55%, #ff63c5) !important;
}
html, body,
body.is-admin-login,
body.is-admin-dash,
#app, #admin-app { background-color: #10071f !important; background-image: var(--sw-canvas) !important; }
body.is-admin-login::before,
body.is-admin-dash::before,
.welcome-screen::before { border-color: rgba(220, 190, 255, .34) !important; box-shadow: 0 0 32px rgba(155, 108, 255, .18), inset 0 0 26px rgba(189, 87, 255, .1) !important; }
.welcome-screen,
body.is-admin-login,
body.is-admin-dash { background-image: var(--sw-canvas) !important; }
.welcome-screen::after { background: var(--sw-glow) !important; }
.welcome-card,
.auth-card,
.admin-login-stage .card.login,
.card, .stat, .desk-card, .desk-bar, .tabs, .notice,
.nav, .bottom-nav, .topbar, .modal-card, .popover, .sheet,
.user-card, .profile-card, .profile-tile {
  background: linear-gradient(145deg, rgba(65, 31, 112, .58), rgba(20, 9, 39, .66)) !important;
  border-color: rgba(226, 193, 255, .26) !important;
  box-shadow: 0 20px 48px rgba(5, 1, 16, .46), inset 0 1px 0 rgba(255, 238, 255, .18) !important;
}
.welcome-screen .welcome-hero,
.welcome-screen .welcome-kicker,
.welcome-screen .welcome-subtitle,
.welcome-screen h1 { color: #faf5ff !important; text-shadow: 0 4px 20px rgba(86, 30, 157, .5) !important; }
.welcome-screen .welcome-login-btn,
.welcome-card .btn,
.auth-card .btn,
body.is-admin-login .login-cta,
.tabs button.on { background: var(--sw-cta) !important; color: #fff !important; border-color: rgba(255, 226, 255, .4) !important; box-shadow: 0 12px 30px rgba(155, 70, 255, .38) !important; }
.field input, .field select, .field textarea,
input, select, textarea, button, button.ghost {
  background-color: rgba(13, 5, 28, .56) !important;
  border-color: rgba(221, 187, 255, .24) !important;
  color: #faf5ff !important;
}
button:not(.danger):not(.warn):not(.login-cta):not(.welcome-login-btn):hover,
.nav button.active, .bottom-nav button.active { background: rgba(189, 87, 255, .2) !important; }
.bubble.me { background: linear-gradient(135deg, rgba(109, 60, 255, .72), rgba(189, 87, 255, .54)) !important; }
.bubble.them { background: rgba(255, 255, 255, .1) !important; }
.logo-aura { background: linear-gradient(90deg, #9b6cff, #bd57ff 48%, #ff63c5) !important; opacity: .28 !important; }

/* Auth action order with the shared glass treatment for Login and Forgot password. */
.welcome-card .welcome-login-btn,
.welcome-card .welcome-forgot {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px !important;
  margin: 8px 0 0 !important;
  padding: 0 18px !important;
  border: 1px solid rgba(226, 193, 255, .4) !important;
  border-radius: 25px !important;
  background: linear-gradient(145deg, rgba(109, 60, 255, .58), rgba(189, 87, 255, .48)) !important;
  color: #faf5ff !important;
  font-family: Nunito, sans-serif !important;
  font-size: clamp(.98rem, 3.3vw, 1.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(109, 60, 255, .28), inset 0 1px 0 rgba(255, 238, 255, .22) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
}
.welcome-card .welcome-login-btn:hover,
.welcome-card .welcome-forgot:hover,
.welcome-card .welcome-login-btn:focus-visible,
.welcome-card .welcome-forgot:focus-visible {
  background: linear-gradient(145deg, rgba(125, 72, 255, .72), rgba(255, 99, 197, .58)) !important;
  border-color: rgba(255, 226, 255, .66) !important;
  box-shadow: 0 10px 26px rgba(189, 87, 255, .38), inset 0 1px 0 rgba(255, 238, 255, .28) !important;
}
.welcome-card .welcome-login-btn span { position: absolute; right: 24px; padding: 0 !important; font-size: 1.35em !important; }

/* Remove only the outer page-edge frames; keep all inner glass cards and controls. */
.welcome-screen::before,
body.is-admin-login::before,
body.is-admin-dash::before {
  display: none !important;
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Universal translucent glass buttons across every screen. */
button,
.btn,
button.btn,
button.ghost,
button.secondary,
button.danger,
button.warn,
button.login-cta,
button.welcome-login-btn,
button.welcome-forgot,
button.welcome-signup,
.nav button,
.bottom-nav button,
.tabs button,
.icon-btn,
.password-toggle {
  background: rgba(255, 255, 255, .075) !important;
  border: 1px solid rgba(238, 214, 255, .28) !important;
  color: #faf5ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 22px rgba(5, 1, 16, .2) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
}
@media (hover: hover) and (pointer: fine) {
  button:hover,
  .btn:hover {
    background: rgba(189, 87, 255, .2) !important;
    border-color: rgba(255, 226, 255, .52) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 26px rgba(109, 60, 255, .28) !important;
  }
}
button:focus-visible,
.btn:focus-visible,
.nav button.active,
.bottom-nav button.active,
.tabs button.on {
  background: rgba(189, 87, 255, .2) !important;
  border-color: rgba(255, 226, 255, .52) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 26px rgba(109, 60, 255, .28) !important;
}
button:active,
.btn:active { transform: translateY(1px); }
button.danger,
button.warn { background: rgba(255, 94, 145, .14) !important; border-color: rgba(255, 150, 190, .34) !important; }
button.login-cta,
button.welcome-login-btn { background: linear-gradient(135deg, rgba(109, 60, 255, .48), rgba(189, 87, 255, .34)) !important; }
button.welcome-signup { background: rgba(255, 255, 255, .055) !important; }

/* Auth fields match the rounded glass action controls. */
.welcome-card #login-user,
.welcome-card #login-pass,
.welcome-card .password-control {
  width: 100%;
  min-height: 52px !important;
  border: 1px solid rgba(238, 214, 255, .3) !important;
  border-radius: 25px !important;
  background: rgba(255, 255, 255, .075) !important;
  color: #faf5ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 22px rgba(5, 1, 16, .2) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
}
.welcome-card #login-user,
.welcome-card #login-pass { padding: 0 18px !important; }
.welcome-card .password-control { display: flex; align-items: center; padding: 0 8px 0 0; }
.welcome-card .password-control #login-pass { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.welcome-card #login-user:focus,
.welcome-card #login-pass:focus,
.welcome-card .password-control:focus-within {
  border-color: rgba(255, 226, 255, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 3px rgba(189, 87, 255, .16), 0 10px 26px rgba(109, 60, 255, .24) !important;
}

/* Liquid Glass welcome typography: stronger brand, quieter greeting. */
.welcome-hero .brand-logo { width: clamp(118px, 30vw, 190px) !important; filter: drop-shadow(0 8px 24px rgba(155, 108, 255, .42)) !important; }
.welcome-hero h1 {
  margin-top: 10px !important;
  font-size: clamp(2.35rem, 11vw, 5rem) !important;
  letter-spacing: .12em !important;
  font-weight: 900 !important;
  line-height: .96 !important;
  color: transparent !important;
  background: linear-gradient(110deg, #fff 5%, #e5d7ff 42%, #f0a6ff 72%, #b7a2ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 8px 26px rgba(109, 60, 255, .32) !important;
}
.welcome-kicker {
  display: inline-block;
  margin: clamp(18px, 3vh, 32px) auto 0 !important;
  padding: 8px 18px 9px !important;
  border: 1px solid rgba(238, 214, 255, .2) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .075) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
  font-family: Nunito, sans-serif !important;
  font-size: clamp(1.05rem, 4.2vw, 1.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  line-height: 1.1 !important;
  color: rgba(250, 245, 255, .9) !important;
  text-shadow: 0 3px 18px rgba(155, 108, 255, .34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 24px rgba(5, 1, 16, .18) !important;
}
.welcome-subtitle {
  margin-top: 10px !important;
  font-size: clamp(.82rem, 3vw, 1.25rem) !important;
  color: rgba(232, 220, 255, .68) !important;
  text-shadow: 0 2px 12px rgba(109, 60, 255, .24) !important;
}

/* Square Home photo frame preserves the crop selected in the profile photo editor. */
.profile-tile-photo {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, .08) !important;
}
.profile-tile-photo .tile-photo-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.profile-tile-photo .tile-avatar {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  box-shadow: none !important;
}
.profile-tile-photo .tile-photo-frame .ava-on {
  right: 9px;
  bottom: 9px;
  z-index: 2;
}

/* Home frame tags: ordinary users get calm glass pills; special accounts keep their badge effects. */
.profile-tile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: flex-start;
  margin-top: 6px;
  min-height: 22px;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}
.profile-tile:not(.special-account) .profile-tile-tags .badge-lv,
.profile-tile:not(.special-account) .profile-tile-tags .badge-neon {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: 999px;
  background: rgba(16, 12, 28, .5) !important;
  color: rgba(255, 255, 255, .92) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 12px rgba(5, 1, 16, .24) !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  font-size: .66rem;
  letter-spacing: .02em;
}
.profile-tile.special-account .profile-tile-tags .badge-lv,
.profile-tile.special-account .profile-tile-tags .badge-neon {
  font-size: .66rem;
}

.group-chat-toggle {
  justify-self: flex-start;
  min-height: 32px;
  padding: 5px 10px;
  font-size: .72rem;
}
.composer-mic:disabled { opacity: .32; filter: grayscale(.35); }
.group-audio-live-button {
  color: #fff !important;
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  border-color: rgba(254, 147, 147, .95) !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, .55);
}
.group-audio-countdown {
  display: grid;
  place-items: center;
  min-height: 54px;
  color: #d8b4fe;
  font-size: 2rem;
  font-weight: 800;
  animation: group-audio-countdown-pulse .7s ease-in-out infinite alternate;
}
@keyframes group-audio-countdown-pulse { from { transform: scale(.9); opacity: .55; } to { transform: scale(1.08); opacity: 1; } }
.group-audio-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 18px;
  margin-left: 3px;
  color: #c084fc;
}
.group-audio-wave i {
  display: block;
  width: 3px;
  height: 7px;
  border-radius: 3px;
  background: currentColor;
}
.group-audio-wave.speaking i { animation: group-audio-wave 1s ease-in-out infinite; }
.group-audio-wave.speaking i:nth-child(2) { animation-delay: -.75s; }
.group-audio-wave.speaking i:nth-child(3) { animation-delay: -.5s; }
.group-audio-wave.speaking i:nth-child(4) { animation-delay: -.25s; }
@keyframes group-audio-wave { 0%, 100% { height: 5px; opacity: .55; } 50% { height: 17px; opacity: 1; } }
.agent-group-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, .9);
  font-size: .76rem;
}
.agent-group-meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-group-meta-chat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  margin: 0;
  padding: 0;
  min-width: 0;
  background: transparent;
}
.agent-group-meta-title {
  display: flex;
  align-items: baseline;
  gap: 7px;
  width: 100%;
  min-width: 0;
  line-height: 1.08;
}
.agent-group-meta-chat .agent-group-label {
  flex: 0 0 auto;
  color: #f9a8d4;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.agent-group-meta-chat strong {
  color: #fff;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .01em;
}
.agent-group-member-count {
  color: rgba(233, 213, 255, .72);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
}
.group-members-list {
  max-height: 310px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 180, 254, .65) transparent;
}
.group-members-list .group-member-profile-row { cursor: pointer; }
.group-members-list::-webkit-scrollbar { width: 6px; }
.group-members-list::-webkit-scrollbar-thumb { background: rgba(216, 180, 254, .55); border-radius: 999px; }
.home-group-card > .agent-group-meta { padding: 2px 4px 0; }
.group-card-info .agent-group-meta { margin-bottom: 3px; }
.group-messages-hidden {
  display: none !important;
}

/* One consistent glass frame for every app action and navigation button. */
button,
.btn,
.icon-btn,
.nav button,
.bottom-nav button,
.tabs button,
.chat-tool,
.password-toggle {
  min-height: 42px;
  border: 1px solid rgba(238, 214, 255, .28) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .075) !important;
  color: #faf5ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 22px rgba(5, 1, 16, .2) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
}
@media (hover: hover) and (pointer: fine) {
  button:hover,
  .btn:hover {
    background: rgba(189, 87, 255, .2) !important;
    border-color: rgba(255, 226, 255, .52) !important;
    color: #fff !important;
  }
}
button:focus-visible,
.btn:focus-visible,
.nav button.active,
.bottom-nav button.active,
.tabs button.on {
  background: rgba(189, 87, 255, .2) !important;
  border-color: rgba(255, 226, 255, .52) !important;
  color: #fff !important;
}
button.danger,
button.warn,
.btn.danger {
  background: rgba(255, 94, 145, .14) !important;
  border-color: rgba(255, 150, 190, .34) !important;
}
button.login-cta,
button.welcome-login-btn,
.welcome-card .welcome-login-btn,
.auth-card .btn.block {
  background: rgba(255, 255, 255, .12) !important;
}
.nav button,
.bottom-nav button,
.tabs button { min-height: 46px; }
.nav button .icon-btn,
.bottom-nav button .icon-btn { min-height: 34px; border: 0 !important; background: transparent !important; box-shadow: none !important; }

/* Profile identity tags use the same calm glass treatment as ordinary home-card tags. */
.profile-glass-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px;
}
.profile-glass-tags .profile-role-tag-row {
  display: flex;
  flex: 0 0 100%;
  width: 100%;
  flex-wrap: wrap;
  justify-content: inherit;
  align-items: center;
  gap: 6px;
}
.profile-glass-tags .badge-lv,
.profile-glass-tags .badge-neon,
.profile-gender-tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  line-height: 1.2;
  border: 1px solid rgba(238, 214, 255, .3) !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08) !important;
  color: rgba(250, 245, 255, .94) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 16px rgba(5, 1, 16, .22) !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.profile-gender-tag { color: #e8dcff !important; --badge-glow: rgba(167, 139, 250, .42); }
.profile-meta-line { margin: 2px 0 4px; }
.me-tags .profile-glass-tags { margin-bottom: 9px; }

/* Verify-email frame: match the rounded auth/login cards instead of a square panel. */
.auth-screen .auth-card {
  width: min(100%, 380px);
  margin: 0 auto;
  border-radius: 36px !important;
  overflow: hidden;
  border: 1px solid rgba(238, 214, 255, .32) !important;
  background: rgba(25, 12, 48, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 24px 52px rgba(5, 1, 16, .38), 0 0 28px rgba(189, 87, 255, .14) !important;
}
/* Games follow the same warm botanical glass system as the rest of the app. */
.games-screen,
.gm-screen {
  --gm-bg: #171914;
  --gm-p1: #b97861;
  --gm-p2: #9aae8e;
  --gm-p3: #d9b878;
  --gm-p4: #c4b06f;
  --gm-gold: #e3c77e;
  --gm-txt: #f6f0e3;
  --gm-mut: rgba(246, 240, 227, .66);
  background:
    radial-gradient(80% 42% at 0% 0%, rgba(145, 165, 138, .2), transparent 72%),
    radial-gradient(70% 42% at 100% 22%, rgba(217, 184, 120, .16), transparent 72%),
    linear-gradient(180deg, #20271d, #171914 58%, #11130f) !important;
}
.gm-screen::before,
.games-screen::before { opacity: .16; }
.gm-panel,
.gm-card,
.gm-wallet,
.gm-arena,
.gm-pbar,
.gm-hrow,
.gm-dcell,
.gm-rhead,
.gm-chip,
.gm-seg,
.gm-pill,
.gm-balance-pill {
  background: linear-gradient(145deg, rgba(241, 229, 205, .12), rgba(35, 42, 35, .34)) !important;
  border: 1px solid rgba(217, 184, 120, .22) !important;
  box-shadow: inset 0 1px 0 rgba(247, 240, 227, .16), 0 12px 26px rgba(9, 12, 9, .34) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
}
.gm-b3,
.gm-b3.gy,
.gm-b3.gn,
.gm-b3.gd {
  border: 1px solid rgba(241, 229, 205, .28) !important;
  border-radius: 999px !important;
  background: rgba(241, 229, 205, .1) !important;
  color: #f7f0e3 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 20px rgba(9, 12, 9, .3) !important;
  text-shadow: none !important;
}
.gm-b3:hover,
.gm-b3.gy:hover,
.gm-b3.gn:hover,
.gm-b3.gd:hover,
.gm-seg button.on {
  background: rgba(217, 184, 120, .2) !important;
  border-color: rgba(217, 184, 120, .5) !important;
  color: #fff7e5 !important;
}
.gm-art,
.gm-slot .gm-face,
.gm-ring b,
.gm-cardback,
.gm-pick,
.gm-tm,
.gm-friend,
.gm-hicon {
  background: linear-gradient(145deg, rgba(145, 165, 138, .22), rgba(35, 42, 35, .56)) !important;
  border-color: rgba(217, 184, 120, .28) !important;
  box-shadow: inset 0 1px 0 rgba(247, 240, 227, .18), 0 8px 18px rgba(9, 12, 9, .34) !important;
}
.gm-pick { border-width: 2px !important; }
.gm-art.rps, .gm-art.dice, .gm-art.c4, .gm-art.ttt, .gm-art.bingo { border-color: rgba(217, 184, 120, .32) !important; }
.gm-tm.on { background: rgba(201, 133, 111, .32) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(201,133,111,.24) !important; }
.gm-overlay,
.gm-intro { background: rgba(17, 20, 15, .84) !important; }

/* Rounded page title bars to match the login screen's glass treatment. */
.topbar {
  border-radius: 28px !important;
}

/* Keep the bottom navigation floating without a rectangular outer frame. */
.nav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Bring Games onto the same SAKARWINE canvas and glass chrome as the other app screens. */
.games-screen,
.gm-screen {
  background: var(--sw-canvas) !important;
  color: var(--sw-ink) !important;
}
.games-screen .screen-body,
.gm-screen .gm-body { background: transparent !important; }
.gm-panel,
.gm-card,
.gm-wallet,
.gm-arena,
.gm-pbar,
.gm-rhead,
.gm-dcell,
.gm-hrow,
.gm-chip,
.gm-seg,
.gm-pill,
.gm-balance-pill {
  background: linear-gradient(145deg, rgba(241, 229, 205, .12), rgba(35, 42, 35, .34)) !important;
  border-color: rgba(241, 229, 205, .2) !important;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(247, 240, 227, .16) !important;
}
.gm-b3 {
  background: var(--sw-cta) !important;
  border: 1px solid rgba(241, 229, 205, .28) !important;
  color: #172016 !important;
  box-shadow: var(--sw-cta-shadow) !important;
  text-shadow: none !important;
}
.gm-b3.gy {
  background: rgba(241, 229, 205, .08) !important;
  color: var(--sw-ink) !important;
  box-shadow: inset 0 1px 0 rgba(247, 240, 227, .16), 0 8px 22px rgba(9, 12, 9, .22) !important;
}
.gm-b3:hover,
.gm-b3.gy:hover,
.gm-seg button.on {
  background: var(--surface-hover) !important;
  border-color: rgba(217, 184, 120, .5) !important;
  color: var(--sw-ink) !important;
}
.gm-tag,
.gm-friend {
  background: rgba(241, 229, 205, .07) !important;
  border-color: rgba(241, 229, 205, .16) !important;
  color: var(--sw-ink) !important;
}
.gm-overlay,
.gm-intro { background: rgba(27, 26, 23, .86) !important; }

/* Home People/Group tabs are frameless; only the active tab gets a quiet underline. */
.home-mode-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--tap);
  margin-bottom: 12px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.home-mode-tab {
  appearance: none;
  flex: 1;
  min-height: var(--tap);
  padding: 0 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.home-mode-tab[aria-selected="true"] {
  color: var(--auth-ink);
  border-bottom-color: var(--auth-ink);
}
.home-group-grid { display: grid; gap: 10px; align-content: start; }
.home-group-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 245, 207, .26) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(73, 77, 40, .36), rgba(35, 41, 19, .58)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 252, 226, .18), 0 10px 22px rgba(22, 27, 12, .22) !important;
  cursor: pointer;
}
.group-card-logo { flex: 0 0 58px; }
.group-card-logo .avatar { width: 58px; height: 58px; }
.group-card-info { flex: 1; min-width: 0; }
.group-card-info .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }

/* Logged-in screens should sit directly on the SAKARWINE canvas, without a square shell shadow. */
#app:has(.screen:not(.welcome-screen):not(.auth-screen)) {
  border: 0 !important;
  box-shadow: none !important;
}
#app:has(.screen:not(.welcome-screen):not(.auth-screen)) .screen,
#app:has(.screen:not(.welcome-screen):not(.auth-screen)) .screen-body {
  box-shadow: none !important;
}

/* Compact Home discovery grid: show three people or groups per row. */
.home-people-grid,
.home-group-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.home-people-grid .profile-tile {
  border-radius: 16px;
}
.home-people-grid .profile-tile-info {
  height: 104px;
  min-height: 104px;
  max-height: 104px;
  padding: 5px 6px 6px;
  overflow: hidden;
}
.home-people-grid .profile-tile-info .name { font-size: .8rem; line-height: 1.2; }
.home-people-grid .profile-tile-info .name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: normal;
}
.profile-tile-username {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-tile-username.guide-display-name-wrap {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.guide-display-name {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  white-space: nowrap;
}
.guide-display-name > span:first-child {
  font-weight: 800;
  letter-spacing: .02em;
}
.guide-display-name > span:last-child {
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .88;
}
.profile-tile-name-tags {
  flex: 1 1 100%;
  width: auto;
  min-height: 0;
  max-width: 100%;
  margin-top: 0;
  overflow: visible;
  white-space: normal;
}
.home-people-grid .profile-tile-info .sub { font-size: .7rem; }
.home-people-grid .profile-tile-info .profile-tile-tags {
  max-height: none;
  overflow: visible;
}
.home-group-grid .home-group-card {
  display: block;
  min-height: 0;
  padding: 8px 6px;
  border-radius: 16px !important;
  text-align: center;
}
.home-group-grid .home-group-card .group-card-logo {
  width: 100%;
  height: auto;
  margin: 0 auto 6px;
}
.home-group-grid .home-group-card .group-card-logo .avatar {
  display: block;
  width: min(100%, 72px);
  aspect-ratio: 1;
  height: auto;
  margin: 0 auto;
}
.home-group-grid .home-group-card .group-card-info .name { font-size: .8rem; }
.home-group-grid .home-group-card .group-card-info .sub { font-size: .68rem; }

/* Profile details: rounded glass chips with distinct tones for each identity item. */
.profile-screen .profile-meta-line {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 4px 0 8px;
  padding: 5px 12px;
  border: 1px solid rgba(217, 184, 120, .38) !important;
  border-radius: 999px !important;
  background: rgba(217, 184, 120, .14) !important;
  color: #f3d99a !important;
  box-shadow: inset 0 1px 0 rgba(255, 248, 220, .18), 0 8px 18px rgba(61, 45, 20, .2) !important;
}
.profile-screen .me-stat {
  min-height: 68px;
  display: grid;
  place-content: center;
  padding: 9px 8px;
  border: 1px solid rgba(145, 165, 138, .3) !important;
  border-radius: 22px !important;
  background: rgba(145, 165, 138, .14) !important;
  box-shadow: inset 0 1px 0 rgba(247, 240, 227, .16), 0 10px 22px rgba(9, 12, 9, .2) !important;
}
.profile-screen .me-stat:nth-child(2) {
  border-color: rgba(201, 133, 111, .34) !important;
  background: rgba(201, 133, 111, .14) !important;
}
.profile-screen .me-stat b { color: #f5e8c9; }
.profile-screen .me-stat:nth-child(2) b { color: #f0c4b4; }
.profile-screen .profile-glass-tags .badge-lv {
  border-color: rgba(145, 165, 138, .44) !important;
  background: rgba(145, 165, 138, .18) !important;
  color: #d7e3cc !important;
}
.profile-screen .profile-glass-tags .badge-neon[data-badge="Admin"] {
  border-color: rgba(201, 133, 111, .5) !important;
  background: rgba(201, 133, 111, .2) !important;
  color: #ffd2c2 !important;
}
.profile-screen .profile-glass-tags .badge-neon[data-badge="guide"] {
  border-color: rgba(145, 165, 138, .48) !important;
  background: rgba(145, 165, 138, .2) !important;
  color: #dce8d2 !important;
}
.profile-screen .profile-glass-tags .badge-neon[data-badge="host"],
.profile-screen .profile-glass-tags .badge-neon.badge-host {
  border-color: rgba(111, 177, 193, .48) !important;
  background: rgba(111, 177, 193, .18) !important;
  color: #c9f0f3 !important;
}
.profile-screen .profile-glass-tags .badge-neon[data-badge="agent"] {
  border-color: rgba(217, 184, 120, .5) !important;
  background: rgba(217, 184, 120, .18) !important;
  color: #f5dda0 !important;
}
.profile-screen .profile-glass-tags .profile-gender-tag {
  border-color: rgba(166, 139, 207, .46) !important;
  background: rgba(166, 139, 207, .18) !important;
  color: #e6d9ff !important;
}

/* Chat bubbles: remove the small square tails so Saka and DM frames stay fully rounded. */
.chat-screen .bubble.me,
.chat-screen .bubble.them,
.chat-screen .bubble.ai,
.chat-screen .bubble.system {
  border-radius: 22px !important;
}
.chat-screen .bubble.media,
.chat-screen .bubble.media.me {
  border-radius: 20px !important;
}

/* Keep image/audio messages from leaving an extra framed panel below the thread. */
.chat-screen .composer {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep the Help title comfortably inside its rounded topbar on small screens. */
.help-topbar {
  box-sizing: border-box;
  min-height: 44px;
  padding: 7px 16px;
  overflow: hidden;
}
.help-topbar h2 {
  font-size: clamp(1rem, 4.2vw, 1.2rem) !important;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Special-account Profile tags stay ordinary glass except for the intentionally distinct Admin tag. */
.profile-screen .profile-glass-tags .badge-neon:not([data-badge="Admin"]) {
  border-color: rgba(238, 214, 255, .3) !important;
  background: rgba(255, 255, 255, .08) !important;
  color: rgba(250, 245, 255, .94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 16px rgba(5, 1, 16, .22) !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Home Groups use the same full-photo profile frame as People tiles. */
.home-group-grid .home-group-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  aspect-ratio: 3 / 2;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(65, 31, 112, .58), rgba(20, 9, 39, .66)) !important;
  border: 1px solid rgba(226, 193, 255, .26) !important;
  box-shadow: 0 20px 48px rgba(5, 1, 16, .46), inset 0 1px 0 rgba(255, 238, 255, .18) !important;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.home-group-grid .home-group-card:active { transform: scale(.98); }
.home-group-grid .home-group-card:hover { border-color: rgba(255, 226, 255, .52) !important; }
.home-group-grid .home-group-card .group-card-logo {
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 1 1 0;
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.home-group-grid .home-group-card .group-card-logo .avatar {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0 !important;
  object-fit: cover;
}
.home-group-grid .home-group-card .group-card-info {
  min-height: 28px;
  flex: 0 0 14%;
  padding: 0 8px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.home-group-grid .home-group-card .group-card-info .name {
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  line-height: 1;
  min-width: 0;
  font-weight: 800;
}
.home-group-grid .home-group-card .group-card-info .sub {
  flex: 0 1 auto;
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  font-size: .62rem;
  line-height: 1;
  white-space: nowrap;
}

/* Keep profile images on Home, the main Profile, and profile view in the same square crop. */
.home-people-grid .profile-tile-photo {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
}
.home-group-grid .home-group-card .group-card-logo {
  min-height: 0;
  flex: 1 1 0;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.home-people-grid .profile-tile-photo .avatar,
.home-group-grid .home-group-card .group-card-logo .avatar {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
}
.profile-screen .me-identity .me-ava,
.profile-screen .edit-photo .avatar,
.profile-lite-photo {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
}
.ad-banner {
  aspect-ratio: 16 / 5;
  overflow: hidden;
  border-radius: 18px !important;
}
.ad-banner img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 5;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: inherit;
}
/* Groups intentionally use two wider cards per row; People remains three compact cards. */
.home-group-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px;
}
@media (max-width: 360px) {
  .home-group-grid { gap: 8px; }
}

/* Home feature carousel and vote ranking use the same rounded glass language. */
.feature-banner {
  position: relative;
  min-height: 78px;
  margin: 0 0 10px;
  padding: 0 !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(112, 61, 184, .5), rgba(25, 13, 52, .72)) !important;
  border: 1px solid rgba(238, 214, 255, .28) !important;
  box-shadow: 0 16px 34px rgba(5, 1, 16, .3), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
  overflow: hidden;
}
.feature-banner-slide {
  width: 100%;
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  animation: feature-banner-in .35s ease both;
}

.feature-banner-slide.is-game {
  isolation: isolate;
  background: radial-gradient(circle at 84% 18%, rgba(255, 209, 102, .28), transparent 28%), linear-gradient(118deg, rgba(18, 9, 43, .98), rgba(50, 18, 95, .82) 54%, rgba(9, 31, 59, .92));
}
.feature-banner-slide.is-upgrade {
  position: relative;
  min-height: 0;
  aspect-ratio: 21 / 9;
  padding: 0;
  isolation: isolate;
  background: #160b32;
}
.feature-banner-slide.is-upgrade > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.feature-banner-slide.is-upgrade::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(9, 3, 23, .28) 72%, rgba(9, 3, 23, .62));
}
.feature-banner-slide.is-upgrade .feature-banner-overlay { z-index: 2; }
.feature-banner-slide.is-upgrade .feature-banner-play-now {
  bottom: 9px;
  min-height: 28px;
  padding: 5px 13px;
  border-color: rgba(255, 232, 164, .72);
  background: linear-gradient(135deg, rgba(255, 209, 102, .96), rgba(214, 113, 255, .92));
  color: #25103f;
  font-size: .7rem;
  box-shadow: 0 5px 14px rgba(8, 1, 25, .42), inset 0 1px 0 rgba(255, 255, 255, .65);
}
.feature-banner-slide.is-game::before,
.feature-banner-slide.is-game::after { content: ""; position: absolute; pointer-events: none; }
.feature-banner-slide.is-game::before { z-index: 1; width: 170px; height: 170px; right: -42px; top: -78px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 0 0 12px rgba(255,255,255,.04), 0 0 0 24px rgba(255,255,255,.025); animation: feature-banner-orbit 8s linear infinite; }
.feature-banner-slide.is-game::after { z-index: 2; inset: 0; background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.12) 48%, transparent 62%); transform: translateX(-115%); animation: feature-banner-sheen 5.2s ease-in-out infinite; }
.feature-banner-game-art { z-index: 1; }
.feature-banner-game-art .gm-art { animation: feature-banner-float 2.7s ease-in-out infinite; filter: drop-shadow(0 10px 12px rgba(0,0,0,.55)); }
.feature-banner-orbit { position: absolute; width: 74px; height: 26px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; transform: rotate(-20deg); opacity: .6; animation: feature-banner-orbit 3.5s linear infinite reverse; }
.feature-banner-kicker { color: #ffd166 !important; font-size: .58rem !important; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
html[data-lang="my"] .feature-banner-kicker { text-transform: none; letter-spacing: 0; }
.feature-banner-actions button { box-shadow: 0 5px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .16s ease, filter .16s ease; }
.feature-banner-actions button:hover { transform: translateY(-2px); filter: brightness(1.14); }
.feature-banner-rps { background: radial-gradient(circle at 82% 20%, rgba(255,61,110,.35), transparent 32%), linear-gradient(118deg, #210b2b, #63183d 58%, #25114c) !important; }
.feature-banner-dice { background: radial-gradient(circle at 82% 20%, rgba(47,230,255,.34), transparent 32%), linear-gradient(118deg, #061a35, #124e72 58%, #1d1453) !important; }
.feature-banner-c4 { background: radial-gradient(circle at 82% 20%, rgba(138,91,255,.4), transparent 32%), linear-gradient(118deg, #110d3b, #31218a 58%, #081d46) !important; }
.feature-banner-ttt { background: radial-gradient(circle at 82% 20%, rgba(61,255,154,.3), transparent 32%), linear-gradient(118deg, #062b2b, #145b55 58%, #152052) !important; }
.feature-banner-bingo { background: radial-gradient(circle at 82% 20%, rgba(255,209,102,.36), transparent 32%), linear-gradient(118deg, #3b1d05, #825014 58%, #32134f) !important; }
@keyframes feature-banner-float { 0%, 100% { transform: translateY(0) rotate(-2deg) scale(.76); } 50% { transform: translateY(-6px) rotate(2deg) scale(.8); } }
@keyframes feature-banner-sheen { 0%, 55% { transform: translateX(-115%); } 75%, 100% { transform: translateX(115%); } }
@keyframes feature-banner-orbit { to { transform: rotate(340deg); } }
@media (prefers-reduced-motion: reduce) {
  .feature-banner-slide.is-game::before, .feature-banner-slide.is-game::after, .feature-banner-game-art .gm-art, .feature-banner-orbit, .vote-ranking-row.vote-rank-top-1, .vote-ranking-row.vote-rank-top-2, .vote-ranking-row.vote-rank-top-3 { animation: none; }
}
.feature-banner-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.14); color: #f7ddff; }
.feature-banner-icon svg { width: 23px; height: 23px; }
.feature-banner-icon.games { color: #9ee9ff; }
.feature-banner-icon.votes { color: #ffd38a; }
.feature-banner-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.feature-banner-copy strong { font-size: .9rem; }
.feature-banner-copy small { color: rgba(250,245,255,.72); font-size: .72rem; line-height: 1.3; }
.feature-banner-game-art { position: absolute; inset: 8px auto auto 12px; display: grid; place-items: center; width: 76px; height: 70px; border-radius: 20px; background: rgba(255,255,255,.12); }
.feature-banner-game-art .gm-art { transform: scale(.72); transform-origin: center; }
.feature-banner-game-art .gm-art svg { width: 58px; height: 58px; }
.feature-banner-play-now {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid rgba(238, 214, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: rgba(250, 245, 255, .96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 5px 14px rgba(5, 1, 16, .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: inherit;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.feature-banner-play-now:hover,
.feature-banner-play-now:focus-visible { background: rgba(255, 255, 255, .2); outline: none; }
.feature-banner-actions { display: flex; gap: 5px; align-items: center; }
.feature-banner-actions button { border: 1px solid rgba(255,255,255,.38); border-radius: 999px; padding: 5px 8px; color: #fff; background: rgba(124,58,237,.62); font: inherit; font-size: .62rem; font-weight: 800; cursor: pointer; }
.feature-banner-actions button + button { background: rgba(255,182,72,.28); }
.feature-banner-arrow { display: grid; place-items: center; width: 22px; color: rgba(255,255,255,.76); }
.feature-banner-arrow svg { width: 20px; height: 20px; }
.feature-banner-dots { position: absolute; right: 13px; bottom: 7px; display: flex; gap: 4px; }
.feature-banner-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.3); }
.feature-banner-dots i.active { width: 14px; border-radius: 999px; background: #f1b7ff; }
/* Full-screen game showcase: large 3D icon, cinematic backdrop, and clear play CTA. */
.feature-banner { min-height: 0; aspect-ratio: 16 / 9; border-radius: 30px !important; }
.feature-banner-slide { min-height: 0; height: 100%; padding: 18px 18px 22px; align-items: stretch; }
.feature-banner-slide.is-game .feature-banner-copy { padding: 24px 4px 8px 154px; justify-content: center; }
.feature-banner-copy strong { font-size: 1.28rem; line-height: 1.15; text-shadow: 0 3px 12px rgba(0,0,0,.38); }
.feature-banner-copy small { font-size: .78rem; }
.feature-banner-game-art { inset: 20px auto auto 18px; width: 142px; height: 164px; border-radius: 34px; background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.24); box-shadow: inset 0 1px rgba(255,255,255,.3), 0 18px 30px rgba(0,0,0,.3); }
.feature-banner-game-art .gm-art { transform: scale(1.22); }
.feature-banner-game-art .gm-art svg { width: 92px; height: 92px; }
.feature-banner-orbit { width: 132px; height: 48px; }
.feature-banner-actions button { padding: 8px 14px; font-size: .72rem; }
.feature-banner-dots { bottom: 12px; right: 18px; }
/* Game slides are visual-only: no game title, just the artwork and a glass CTA. */
.feature-banner-slide.is-game { padding: 0; min-height: 0; height: 100%; align-items: stretch; }
.feature-banner-slide.is-game > img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #120a2a; }
.feature-banner-slide.is-game .feature-banner-game-art { inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; box-shadow: none; }
.feature-banner-slide.is-game .feature-banner-game-art .gm-art { transform: scale(2.25); filter: drop-shadow(0 18px 22px rgba(0,0,0,.58)); }
.feature-banner-slide.is-game .feature-banner-game-art .gm-art svg { width: 110px; height: 110px; }
.feature-banner-slide.is-game .feature-banner-overlay { inset: 0; z-index: 3; padding: 18px 16px 20px; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, transparent 45%, rgba(6,2,18,.18) 65%, rgba(6,2,18,.78)); }
.feature-banner-slide.is-game .feature-banner-copy.game-copy { padding: 0; flex: 0 0 auto; align-items: center; }
.feature-banner-slide.is-game .feature-banner-play-now { right: 16px; bottom: 16px; left: auto; z-index: 4; transform: none; min-height: 30px; padding: 7px 12px; border-color: rgba(255,255,255,.55); background: rgba(12, 6, 30, .42); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px rgba(0,0,0,.38); -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35); font-size: .72rem; }
.feature-banner-slide.is-game .feature-banner-actions button { padding: 10px 20px; border-color: rgba(255,255,255,.52); background: rgba(255,255,255,.16); box-shadow: inset 0 1px rgba(255,255,255,.35), 0 10px 24px rgba(0,0,0,.3); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); font-size: .78rem; }
@media (max-width: 360px) {
  .feature-banner { min-height: 0; }
  .feature-banner-slide { min-height: 0; padding: 14px 12px 20px; }
  .feature-banner-game-art { width: 116px; height: 146px; left: 12px; }
  .feature-banner-slide.is-game .feature-banner-copy { padding-left: 124px; }
  .feature-banner-slide.is-game { min-height: 0; padding: 0; }
  .feature-banner-slide.is-game .feature-banner-game-art { width: 100%; height: 100%; left: 0; }
  .feature-banner-copy strong { font-size: 1.05rem; }
}
@keyframes feature-banner-in { from { opacity: .25; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vote-ranking { flex: 0 0 auto; margin: 0 0 10px; padding: 12px; border-radius: 24px; background: linear-gradient(145deg, rgba(65,31,112,.46), rgba(20,9,39,.68)); border: 1px solid rgba(226,193,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 30px rgba(5,1,16,.24); }
.vote-ranking-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.vote-ranking-title-line, .voting-ranking-title-line, .voting-reward-title-line { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vote-ranking-head h3 { margin: 0; font-size: .92rem; }
.vote-ranking-countdown { display: inline-flex; align-items: baseline; gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #8fd8ff; font-size: .92rem; font-weight: 900; line-height: 1; white-space: nowrap; animation: none !important; transition: none !important; opacity: 1 !important; }
.vote-countdown-part { display: inline-flex; align-items: baseline; gap: 2px; padding: 0; border-radius: 0; color: inherit; text-shadow: 0 1px 5px rgba(0,0,0,.5); }
.vote-countdown-part b, .vote-countdown-part small, .vote-countdown-separator { color: inherit; }
.vote-countdown-part b { font-size: 1em; font-weight: 950; }
.vote-countdown-part small { font-size: .72em; font-weight: 900; letter-spacing: .01em; }
.vote-countdown-separator { display: inline-block; padding: 0 1px; font-size: .9em; font-weight: 900; }
.vote-ranking-head p { margin: 3px 0 0; color: rgba(250,245,255,.64); font-size: .7rem; line-height: 1.25; }
.vote-ranking-crown { margin-left: auto; color: #ffd38a; }
.vote-ranking-crown svg { width: 24px; height: 24px; }
.vote-ranking-scroller { max-height: 178px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.voting-ranking-modal { width: min(94vw, 720px); max-height: min(88vh, 760px); overflow: hidden; }
.voting-ranking-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.voting-ranking-modal-head h2 { font-size: 1.05rem; }
.voting-ranking-close { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: #fff; background: rgba(255,255,255,.09); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.voting-ranking-close:hover, .voting-ranking-close:focus-visible { background: rgba(236,72,153,.38); outline: none; }
.modal .profile-bulk-vote-modal { box-sizing: border-box; display: block !important; width: min(92vw, 390px); height: auto !important; min-height: 0 !important; max-height: min(82dvh, 520px); padding: 18px; border-radius: 26px; overflow: hidden; background: linear-gradient(145deg, rgba(80, 39, 135, .78), rgba(18, 8, 38, .9)) !important; border-color: rgba(241, 211, 255, .34) !important; box-shadow: 0 24px 70px rgba(7, 2, 22, .6), inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(193, 112, 255, .1) !important; }
.profile-bulk-vote-modal *, .profile-bulk-vote-modal *::before, .profile-bulk-vote-modal *::after { box-sizing: border-box; }
.profile-bulk-vote-profile { display: flex; align-items: center; gap: 12px; min-height: 86px; padding: 12px 14px 34px; border-radius: 18px 18px 0 0; background: linear-gradient(145deg, rgba(189, 87, 255, .3), rgba(32, 12, 59, .2)); }
.profile-bulk-vote-avatar { width: 58px; height: 58px; flex: 0 0 58px; margin: 0; object-fit: cover; border: 2px solid rgba(255, 235, 255, .52); border-radius: 18px !important; box-shadow: 0 8px 20px rgba(5, 1, 16, .32), 0 0 0 3px rgba(189, 87, 255, .16); }
.profile-bulk-vote-profile-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.profile-bulk-vote-profile-copy strong { overflow: hidden; color: #fff; font-size: .98rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-bulk-vote-profile-copy span { color: rgba(250, 245, 255, .64); font-size: .68rem; }
.profile-bulk-vote-profile-kicker { color: #f2c76f !important; font-size: .56rem !important; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.profile-bulk-vote-sheet { margin-top: -22px; padding: 16px; border: 1px solid rgba(241, 211, 255, .24); border-radius: 20px; background: linear-gradient(145deg, rgba(80, 39, 135, .94), rgba(18, 8, 38, .97)); box-shadow: 0 16px 34px rgba(7, 2, 22, .38), inset 0 1px 0 rgba(255, 255, 255, .16); }
.profile-bulk-vote-modal .voting-ranking-modal-head { width: 100%; margin-bottom: 10px; }
.profile-bulk-vote-title { min-width: 0; }
.profile-bulk-vote-kicker { display: block; margin-bottom: 3px; color: #f2c76f; font-size: .58rem; font-weight: 900; letter-spacing: .16em; }
.profile-bulk-vote-title h3 { margin: 0; font-size: 1.08rem; line-height: 1.2; }
.profile-bulk-vote-help { margin: 0 0 14px; color: rgba(250, 245, 255, .68); font-size: .76rem; line-height: 1.45; }
.profile-bulk-vote-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.profile-bulk-vote-form .field { margin: 0; }
.profile-bulk-vote-form .field label { margin-bottom: 5px; font-size: .68rem; letter-spacing: .06em; }
.profile-bulk-vote-form .field input { min-height: 46px; border-radius: 15px; font-size: 1.05rem; font-weight: 800; text-align: center; }
.profile-bulk-vote-cost { min-height: 46px; display: flex; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid rgba(255, 215, 124, .3); border-radius: 15px; background: linear-gradient(135deg, rgba(255, 206, 91, .14), rgba(255, 255, 255, .06)); color: #ffe3a0; text-align: center; }
.profile-bulk-vote-cost strong { font-size: .82rem; line-height: 1.35; }
.profile-bulk-vote-form #profile-vote-bulk-error { min-height: 1.1em; margin: -2px 2px 0; color: #ff9eb8; font-size: .72rem; }
.profile-bulk-vote-form #profile-vote-bulk-submit { display: block; width: 100%; height: auto; min-height: 44px; margin-top: 0; border-radius: 15px; font-size: .86rem; }
.voting-ranking-overlay { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.voting-ranking-overlay .vote-ranking-scroller { max-height: calc(min(88vh, 760px) - 92px); overflow-y: auto; padding-right: 3px; }
.voting-ranking-overlay .vote-ranking-row { min-height: 58px; }
.earnings-ledger-scroll { max-height: 220px; overflow-y: auto; scrollbar-width: thin; padding-right: 3px; }
.earnings-ledger-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.earnings-ledger-row strong { color: #f6c8ff; white-space: nowrap; }
.earnings-ledger-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.earnings-ledger-row time, .linked-host-row time { color: rgba(250,245,255,.62); font-size: .72rem; white-space: nowrap; }
.linked-hosts-modal { width: min(94vw, 420px); max-height: min(88vh, 760px); }
.linked-hosts-overlay-list { max-height: calc(min(88vh, 760px) - 80px); overflow-y: auto; display: grid; gap: 7px; scrollbar-width: thin; }
.linked-host-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; }
.linked-hosts-fullscreen { width: min(96vw, 480px); height: min(90dvh, 820px); max-height: none; }
.linked-hosts-fullscreen .linked-hosts-overlay-list { max-height: calc(90dvh - 120px); }
.commission-history-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.commission-history-title { margin: 0 0 6px; color: rgba(250,245,255,.9); font-size: .88rem; }
.commission-spends-scroll { max-height: 220px; overflow-y: auto; scrollbar-width: thin; margin-top: 8px; padding-right: 3px; }
.commission-spend-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; }
.commission-spend-row strong, .commission-spend-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commission-spend-row b { color: #f6c8ff; white-space: nowrap; }
.commission-spend-row time { grid-column: 1 / -1; color: rgba(250,245,255,.62); font-size: .72rem; }
.earnings-ledger-scroll { max-height: 220px; overflow-y: auto; scrollbar-width: thin; padding-right: 3px; }
.earnings-ledger-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.earnings-ledger-row strong { color: #f6c8ff; white-space: nowrap; }
.earnings-ledger-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.earnings-ledger-row time, .linked-host-row time { color: rgba(250,245,255,.62); font-size: .72rem; white-space: nowrap; }
.linked-hosts-modal { width: min(94vw, 420px); max-height: min(88vh, 760px); }
.linked-hosts-overlay-list { max-height: calc(min(88vh, 760px) - 80px); overflow-y: auto; display: grid; gap: 7px; scrollbar-width: thin; }
.linked-host-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; }
.vote-ranking-row { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 7px; border-radius: 17px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.profile-voters,
.profile-voters-loading { width: 100%; margin-top: 4px; padding: 16px; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 28px !important; background: rgba(20,16,34,.42) !important; box-shadow: 0 18px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16) !important; backdrop-filter: blur(20px) saturate(1.35) !important; -webkit-backdrop-filter: blur(20px) saturate(1.35) !important; text-align: left; }
.profile-voters-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.profile-voters-heading h4 { margin: 0; font-size: .86rem; }
.profile-voters-heading > span { color: rgba(250,245,255,.62); font-size: .68rem; font-weight: 800; }
.profile-voters-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 5px; padding: 4px 2px 0; }
.profile-voter-card { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.profile-voter-podium-card { min-width: 0; height: 102px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; padding: 4px 2px 5px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; }
.profile-voter-podium-card.vote-rank-top-1 { height: 142px; }
.profile-voter-podium-card.vote-rank-top-2 { height: 119px; }
.profile-voter-podium-card.vote-rank-top-3 { height: 101px; }
.profile-voters .vote-ranking-avatar { border-radius: 50% !important; object-fit: cover; }
.profile-voter-podium-card .profile-voter-rank-number { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; font-size: .82rem; font-weight: 900; line-height: 1; }
.profile-voter-podium-card .vote-ranking-avatar { width: 50px; height: 50px; flex-basis: 50px; border: 2px solid rgba(255,255,255,.24); }
.profile-voter-podium-card.vote-rank-top-1 .vote-ranking-avatar { width: 64px; height: 64px; flex-basis: 64px; border-color: #f6c453; box-shadow: 0 0 16px rgba(246,196,83,.28); }
.profile-voter-podium-card.vote-rank-top-2 .vote-ranking-avatar { width: 56px; height: 56px; flex-basis: 56px; border-color: #d6e2f2; box-shadow: 0 0 12px rgba(214,226,242,.2); }
.profile-voter-podium-card.vote-rank-top-3 .vote-ranking-avatar { width: 50px; height: 50px; flex-basis: 50px; border-color: #e9a06f; box-shadow: 0 0 10px rgba(233,160,111,.18); }
.profile-voter-podium-card .vote-ranking-user { width: 100%; flex: 0 1 auto; align-items: center; gap: 1px; }
.profile-voter-podium-card .vote-ranking-user strong { max-width: 100%; font-size: .63rem; text-align: center; }
.profile-voter-podium-card .vote-ranking-user small { max-width: 100%; font-size: .56rem; text-align: center; }
.profile-voters-middle, .profile-voters-scroll { display: grid; gap: 5px; margin-top: 8px; }
.profile-voters-middle .profile-voter-card, .profile-voters-scroll .profile-voter-card { min-height: 42px; }
.profile-voters-scroll { max-height: 190px; overflow-y: auto; padding-right: 3px; overscroll-behavior: contain; scrollbar-width: thin; }
.profile-voters-empty { margin: 0; padding: 8px 3px; color: rgba(250,245,255,.66); font-size: .75rem; text-align: center; }
.profile-voters-loading { min-height: 72px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; color: rgba(250,245,255,.66); font-size: .75rem; text-align: center; }
.profile-voter-card:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.vote-ranking-row.vote-rank-top-1 { background: linear-gradient(100deg, rgba(255,198,76,.2), rgba(255,255,255,.07)); border-color: rgba(255,213,105,.58); animation: vote-top-one-glow 2.4s ease-in-out infinite; }
.vote-ranking-row.vote-rank-top-2 { background: linear-gradient(100deg, rgba(205,218,238,.16), rgba(255,255,255,.07)); border-color: rgba(210,225,247,.48); animation: vote-top-two-glow 2.8s ease-in-out infinite; }
.vote-ranking-row.vote-rank-top-3 { background: linear-gradient(100deg, rgba(220,139,88,.16), rgba(255,255,255,.07)); border-color: rgba(230,164,112,.46); animation: vote-top-three-glow 3.2s ease-in-out infinite; }
.vote-rank { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; min-width: 28px; height: 28px; text-align: center; color: #f5d99e; font-weight: 900; font-size: .78rem; }
.vote-rank-number { display: inline; }
.vote-rank-badge { position: absolute; left: 50%; top: -5px; transform: translateX(-50%); padding: 2px 4px; border-radius: 999px; font-size: .39rem; line-height: 1; letter-spacing: .04em; white-space: nowrap; color: #fff; background: rgba(124,58,237,.7); border: 1px solid rgba(255,255,255,.3); box-shadow: 0 2px 7px rgba(0,0,0,.24); }
.vote-rank-top-1 { color: #ffe09a; }
.vote-rank-top-1 .vote-rank-badge { background: linear-gradient(135deg, #b7791f, #f6c453); color: #351b00; }
.vote-rank-top-2 { color: #e5edf8; }
.vote-rank-top-2 .vote-rank-badge { background: linear-gradient(135deg, #718096, #d6e2f2); color: #172033; }
.vote-rank-top-3 { color: #ffc49d; }
.vote-rank-top-3 .vote-rank-badge { background: linear-gradient(135deg, #9c4f2d, #e9a06f); color: #35170b; }
.profile-voters .profile-voter-podium-card.vote-rank-top-1,
.profile-voters .profile-voter-podium-card.vote-rank-top-2,
.profile-voters .profile-voter-podium-card.vote-rank-top-3 { background: transparent !important; border-color: transparent !important; box-shadow: none !important; animation: none !important; }
.profile-voter-podium-card.vote-rank-top-1 .profile-voter-rank-number { color: #f6c453; }
.profile-voter-podium-card.vote-rank-top-2 .profile-voter-rank-number { color: #d6e2f2; }
.profile-voter-podium-card.vote-rank-top-3 .profile-voter-rank-number { color: #e9a06f; }
@keyframes vote-top-one-glow { 50% { box-shadow: 0 0 18px rgba(255,209,102,.2), inset 0 1px 0 rgba(255,255,255,.16); } }
@keyframes vote-top-two-glow { 50% { box-shadow: 0 0 14px rgba(210,225,247,.15), inset 0 1px 0 rgba(255,255,255,.14); } }
@keyframes vote-top-three-glow { 50% { box-shadow: 0 0 12px rgba(230,164,112,.14), inset 0 1px 0 rgba(255,255,255,.14); } }
.vote-ranking-avatar { width: 34px; height: 34px; flex: 0 0 34px; }
.vote-ranking-user { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vote-ranking-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.vote-ranking-user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(250,245,255,.6); font-size: .64rem; }
.vote-btn { min-height: 30px; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(240,185,255,.38); background: rgba(167,83,218,.2); color: #f8dcff; font: inherit; font-size: .67rem; font-weight: 800; cursor: pointer; }
.vote-btn.is-voted { border-color: rgba(255,211,138,.54); background: rgba(255,182,72,.2); color: #ffe0a4; }
.vote-btn:disabled { opacity: .55; }

/* Chat list, DM, group chat, and Saka all share one rounded glass frame. */
.user-list > .user-row,
.swipe-shell,
.group-card,
.chat-screen .composer,
.chat-screen .composer-faq {
  border-radius: 24px !important;
  border: 1px solid rgba(226,193,255,.22) !important;
  background: linear-gradient(145deg, rgba(65,31,112,.42), rgba(20,9,39,.66)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 26px rgba(5,1,16,.22) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.user-list > .user-row { margin: 0 0 8px; padding: 10px 12px; }
.user-list .user-row,
.user-list .user-row.gender-male,
.user-list .user-row.gender-female {
  border-radius: 24px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 24px);
  border-bottom: 0 !important;
}
.swipe-shell { margin-bottom: 8px; }
.swipe-shell .user-row { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.group-card { overflow: hidden; }
.chat-screen .composer { margin: 0 10px 8px; padding: 8px 10px calc(8px + var(--safe-bottom)); }
.chat-screen .composer-pill { background: rgba(8,6,16,.48); border-color: rgba(226,193,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 20px rgba(5,1,16,.2); }
.chat-screen .composer,
.chat-screen .composer-main,
.chat-screen .composer-pill,
.chat-screen .chat-send { border-radius: 999px !important; }
.group-composer-main { width: 100%; }
.group-live-audio {
  margin: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-radius: 24px !important;
  padding: 10px 12px !important;
}
.group-live-games {
  position: sticky;
  top: 0;
  z-index: 7;
  margin: 6px 10px 4px;
  padding: 10px;
  border: 1px solid rgba(217, 184, 120, .42);
  border-radius: 22px;
  background: rgba(35, 42, 35, .9);
  box-shadow: 0 8px 22px rgba(9, 12, 9, .34);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.group-live-games[hidden] { display: none; }
.group-live-games-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px 8px; }
.group-live-games-head strong { color: #e3c77e; font-size: .82rem; }
.group-live-games-head small { color: var(--sw-muted); font-size: .68rem; }
.group-live-games-list { display: grid; gap: 7px; max-height: 220px; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; }
.group-live-game-card { min-width: 0; padding: 8px; border: 1px solid rgba(241, 229, 205, .16); border-radius: 16px; background: rgba(241, 229, 205, .055); cursor: pointer; }
.group-live-game-card:hover, .group-live-game-card:focus-visible { border-color: rgba(217, 184, 120, .65); outline: none; }
.group-live-game-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.group-live-game-card-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.group-live-game-card-title img { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; object-fit: cover; }
.group-live-game-card-title strong, .group-live-game-card-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-live-game-card-title strong { font-size: .76rem; }
.group-live-game-card-title small { max-width: 170px; color: var(--sw-muted); font-size: .63rem; }
.group-live-game-status { flex: 0 0 auto; color: #9fca8f; font-size: .62rem; }
.group-live-game-card .gm-mini { max-width: 150px; margin: 7px auto 4px; }
.group-live-game-card .gm-mini .gm-c4board { padding: 5px 5px 7px; }
.group-live-game-card .gm-mini .gm-c4grid, .group-live-game-card .gm-mini .gm-c4col { gap: 3px; }
.group-live-game-card .gm-mini .gm-tile { border-radius: 9px; box-shadow: 0 2px 0 #1c1a38; }
.group-live-game-watch { width: 100%; min-height: 32px; padding: 5px 10px; font-size: .7rem; }
.group-live-audio > div:first-child { min-width: 100px; }
.group-live-audio small { color: var(--sw-muted); }
.group-audio-users { display: flex; gap: 6px; flex: 1 1 auto; flex-wrap: wrap; }
.group-audio-slots {
  width: 100%;
  flex: 1 1 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.group-audio-slot {
  min-height: 68px;
  padding: 7px 3px;
  border-radius: 14px;
}
.group-audio-slot img { width: 34px; height: 34px; }
.group-audio-slot.empty span { font-size: 1.35rem; }
.group-live-audio #group-audio-join {
  min-width: 108px;
  min-height: 36px;
  padding: 7px 12px;
}
.group-audio-invites {
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.group-audio-user { border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 4px 9px; background: rgba(255,255,255,.08); font-size: .8rem; }
.group-audio-invite { border: 0; border-radius: 999px; padding: 3px 7px; color: var(--ink); background: rgba(124,58,237,.35); font-size: .7rem; cursor: pointer; }
.group-live-audio svg { width: 16px; height: 16px; vertical-align: middle; }
.chat-screen .composer-faq,
.chat-screen .composer-faq .saka-faq {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.chat-screen .saka-faq { padding: 9px 10px; }

/* Admin is the only intentionally distinct tag; every other role/level tag stays calm glass. */
.badge-neon:not([data-badge="Admin"]),
.badge-host,
.badge-lv,
.profile-tile-tags .badge-neon:not([data-badge="Admin"]),
.profile-tile-tags .badge-lv {
  border: 1px solid rgba(238, 214, 255, .3) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: rgba(250, 245, 255, .92) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 5px 14px rgba(5, 1, 16, .18) !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
}
.badge-neon[data-badge="Admin"] {
  border-radius: 999px !important;
}
.paid-crown-tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 211, 106, .72);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 214, 112, .3), rgba(173, 104, 15, .18));
  color: #ffe7a6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 14px rgba(189, 125, 25, .2);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.paid-crown-tag svg { width: 13px; height: 13px; fill: currentColor; flex: 0 0 13px; }
.profile-tile-name-tags .paid-crown-tag { vertical-align: middle; }
.profile-glass-tags .paid-crown-tag {
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  line-height: 1.2;
}
.profile-detail .profile-glass-tags .badge-lv {
  border-color: rgba(74, 222, 128, .55) !important;
  background: rgba(34, 197, 94, .18) !important;
  color: #c9ffd9 !important;
}

/* Chat identity tags share one compact footprint: Lv and Paid are equal-sized pills. */
.home-screen #chat-list .chat-conversation-row .badge-lv,
.home-screen #chat-list .chat-conversation-row .paid-crown-tag,
.chat-screen .chat-head .badge-lv,
.chat-screen .chat-head .paid-crown-tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: .72rem !important;
  line-height: 1.2 !important;
  vertical-align: middle;
}
.home-screen #chat-list .chat-conversation-row .paid-crown-tag svg,
.chat-screen .chat-head .paid-crown-tag svg {
  width: 11px;
  height: 11px;
  flex-basis: 11px;
}

/* Incoming message bar: slides down once, stays glassy, then returns above the safe area. */
.message-notification {
  position: fixed;
  z-index: 120;
  top: max(10px, var(--safe-top));
  left: 50%;
  width: min(calc(100vw - 24px), 440px);
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 18px;
  color: var(--text, #fff);
  background: linear-gradient(135deg, rgba(36, 28, 55, .9), rgba(19, 35, 45, .82));
  box-shadow: 0 14px 36px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .22);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  transform: translate(-50%, calc(-140% - var(--safe-top)));
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  text-align: left;
  transition: transform .34s ease, opacity .25s ease;
}
.message-notification.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.message-notification-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: cover;
}
.message-notification-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}
.message-notification-copy strong,
.message-notification-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-notification-copy strong { font-size: .84rem; color: #fff5d8; }
.message-notification-copy span { font-size: .78rem; color: rgba(255, 255, 255, .78); }
.message-notification-arrow { display: inline-flex; color: rgba(255, 255, 255, .68); }
.message-notification-arrow svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .message-notification { transition: none; }
}
.profile-tile-tags .badge-lv {
  border-color: rgba(74, 222, 128, .55) !important;
  background: rgba(34, 197, 94, .18) !important;
  color: #c9ffd9 !important;
}
.profile-detail .profile-glass-tags .badge-neon.badge-host,
.profile-detail .profile-glass-tags .badge-neon[data-badge="host"] {
  border-color: rgba(56, 189, 248, .58) !important;
  background: rgba(14, 165, 233, .2) !important;
  color: #c9f2ff !important;
}
.profile-tile-tags .badge-neon.badge-host,
.profile-tile-tags .badge-neon[data-badge="host"] {
  border-color: rgba(56, 189, 248, .58) !important;
  background: rgba(14, 165, 233, .2) !important;
  color: #c9f2ff !important;
}
.profile-detail .profile-glass-tags .badge-neon[data-badge="agent"] {
  border-color: rgba(251, 146, 60, .6) !important;
  background: rgba(234, 88, 12, .2) !important;
  color: #ffe0c2 !important;
}
.profile-tile-tags .badge-neon[data-badge="agent"] {
  border-color: rgba(251, 146, 60, .6) !important;
  background: rgba(234, 88, 12, .2) !important;
  color: #ffe0c2 !important;
}
.profile-detail .profile-glass-tags .badge-neon[data-badge="Admin"] {
  border-color: rgba(244, 63, 94, .62) !important;
  background: rgba(225, 29, 72, .22) !important;
  color: #ffd0da !important;
}
.profile-detail .profile-glass-tags .profile-gender-tag {
  border-color: rgba(167, 139, 250, .56) !important;
  background: rgba(124, 58, 237, .2) !important;
  color: #e4d9ff !important;
}

/* Keep page titles such as Chat, Groups, Games and Profile inside the same
   padded header frame as Help instead of letting the display font escape. */
.screen .topbar {
  box-sizing: border-box;
  min-height: 48px;
  padding: 7px 16px !important;
  overflow: hidden;
  border-radius: 28px !important;
}
.screen .topbar h2 {
  min-width: 0;
  margin: 0 !important;
  font-size: clamp(1rem, 4.2vw, 1.2rem) !important;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screen .topbar > .icon-btn,
.screen .topbar > .chat-tool,
.screen .topbar > .btn,
.screen .topbar > .pill-slot,
.screen .topbar > .gm-balance-pill {
  flex: 0 0 auto;
}
.screen .topbar.chat-head {
  padding: 7px 12px !important;
}
.screen .topbar.chat-head .meta {
  min-width: 0;
  overflow: hidden;
}
.screen .topbar.chat-head .meta .name,
.screen .topbar.chat-head .meta .sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep Home controls fixed while the People/Groups result list gets its own scroll area. */
.home-screen .home-screen-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}
.home-screen .home-pinned { flex: 0 0 auto; min-width: 0; }
.home-screen .home-screen-body > #user-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.home-screen .home-screen-body > #user-list.home-people-grid {
  align-content: start;
  grid-auto-rows: max-content;
}
.home-screen .home-screen-body > #user-list.home-people-grid .profile-tile-info {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 0 0 104px;
  min-height: 104px;
  max-height: 104px;
  height: 104px;
  overflow: hidden;
}

/* Home hierarchy: tabs, a small rotating ranking strip, then an image-first ad. */
.home-screen .vote-ranking {
  margin: 0 0 9px;
  padding: 7px 9px;
  border-radius: 18px;
}
.home-screen .vote-ranking-head {
  min-height: 24px;
  margin-bottom: 5px;
}
.home-screen .vote-ranking-head h3 { font-size: .78rem; }
.home-screen .vote-ranking-countdown { font-size: .78rem; }
.home-screen .vote-ranking-scroller { max-height: 52px; overflow: hidden; }
.home-screen .vote-ranking-scroller.is-expanded {
  max-height: 230px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.home-screen .vote-ranking-row {
  min-height: 40px;
  padding: 4px 6px;
  border-radius: 14px;
}
.home-screen .vote-ranking-avatar { width: 30px; height: 30px; flex-basis: 30px; }
.home-screen .vote-ranking-scroller.is-compact .vote-ranking-row {
  animation: vote-ranking-up-step .36s cubic-bezier(.22, .7, .22, 1) both;
}
.home-screen .vote-ranking-scroller.is-compact .vote-ranking-row.vote-rank-top-1 {
  animation: vote-ranking-up-step .36s cubic-bezier(.22, .7, .22, 1) both, vote-top-one-glow 2.4s ease-in-out infinite;
}
.home-screen .vote-ranking-scroller.is-compact .vote-ranking-row.vote-rank-top-2 {
  animation: vote-ranking-up-step .36s cubic-bezier(.22, .7, .22, 1) both, vote-top-two-glow 2.8s ease-in-out infinite;
}
.home-screen .vote-ranking-scroller.is-compact .vote-ranking-row.vote-rank-top-3 {
  animation: vote-ranking-up-step .36s cubic-bezier(.22, .7, .22, 1) both, vote-top-three-glow 3.2s ease-in-out infinite;
}
@keyframes vote-ranking-up-step {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .home-screen .vote-ranking-scroller.is-compact .vote-ranking-row { animation: none !important; }
}
.home-screen .vote-btn { min-height: 26px; padding: 3px 7px; font-size: .62rem; }
.vote-all-btn {
  flex: 0 0 auto;
  min-width: 62px;
  min-height: 28px;
  margin-left: auto;
  border: 1px solid rgba(238,214,255,.3);
  border-radius: 999px;
  padding: 4px 12px;
  background: rgba(255,255,255,.08);
  color: rgba(250,245,255,.88);
  font: inherit;
  font-size: .63rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
}
.feature-banner {
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: 0 !important;
}
.feature-banner-slide { position: relative; min-height: 0; height: 100%; padding: 0; }
.feature-banner-slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .9;
}
.feature-banner-slide.is-sliding > img,
.feature-banner-slide.is-sliding .feature-banner-game-art {
  animation: feature-banner-scroll-in .48s cubic-bezier(.22, .7, .22, 1) both;
}
.feature-banner-slide.is-sliding .feature-banner-overlay {
  animation: feature-banner-copy-in .32s ease both;
}
@keyframes feature-banner-scroll-in {
  from { transform: translateX(8%); }
  to { transform: translateX(0); }
}
@keyframes feature-banner-copy-in {
  from { opacity: .45; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .feature-banner-slide.is-sliding > img,
  .feature-banner-slide.is-sliding .feature-banner-game-art,
  .feature-banner-slide.is-sliding .feature-banner-overlay { animation: none !important; }
}
.feature-banner-overlay {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 13px 10px;
  background: linear-gradient(transparent, rgba(14,5,30,.88));
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.feature-banner-slide:has(.feature-banner-game-art) .feature-banner-overlay { padding-left: 100px; }
.feature-banner-overlay strong { font-size: .82rem; }
.feature-banner-overlay svg { width: 18px; height: 18px; }

/* Photo and voice messages should show only their media, not a purple bubble frame. */
.chat-screen .bubble.media,
.chat-screen .bubble.media.me {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.chat-screen .bubble.media audio {
  display: block;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.composer-mic.live {
  color: #fff !important;
  background: #d62839 !important;
  border-color: #ff6b74 !important;
  box-shadow: 0 0 0 3px rgba(214, 40, 57, .22), 0 6px 16px rgba(111, 10, 20, .5) !important;
}

/* Photo frame editor: square crop with mobile-friendly controls. */
.photo-crop-modal {
  width: min(94vw, 430px) !important;
  max-height: min(92dvh, 760px);
  overflow-y: auto;
}
.photo-crop-modal canvas {
  border: 2px solid rgba(241, 229, 205, .5);
  box-shadow: 0 0 0 5px rgba(145, 165, 138, .14), 0 14px 28px rgba(9, 12, 9, .4);
}
.photo-crop-modal input[type="range"] {
  width: 100%;
  accent-color: var(--neon-cyan);
}


/* Fill Home profile frames edge-to-edge; crop as needed to avoid side gutters. */
.home-people-grid .profile-tile-photo .tile-avatar {
  object-fit: cover !important;
  object-position: center;
}

/* Give Settings actions breathing room; wrapped Myanmar labels need taller tap targets. */
.settings-screen .settings-actions-list {
  display: grid;
  gap: 8px;
  padding: 8px;
}
.settings-screen .settings-actions-list .settings-row {
  min-height: 54px;
  height: auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px;
  line-height: 1.4;
  white-space: normal;
}
.settings-screen .settings-actions-list .settings-row + .settings-row {
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}


/* Home People tags sit directly on the card canvas; only the individual pills keep a surface. */
.home-people-grid .profile-tile {
  background: transparent !important;
}
.home-people-grid .profile-tile-info,
.home-group-grid .home-group-card .group-card-info {
  position: relative;
}
.home-people-grid .profile-tile-info {
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.home-people-grid .profile-tile-info::before,
.home-people-grid .profile-tile-info::after,
.home-people-grid .profile-tile-name-tags::before,
.home-people-grid .profile-tile-name-tags::after,
.home-people-grid .profile-tile-info > .profile-tile-tags::before,
.home-people-grid .profile-tile-info > .profile-tile-tags::after {
  content: none !important;
  display: none !important;
}
.home-group-grid .home-group-card .group-card-info {
  background: transparent !important;
  border-top: 0 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}


/* Home identity badges reuse the matching Profile detail colors. */
.profile-detail .profile-glass-tags .badge-neon[data-badge="guide"],
.profile-tile-tags .badge-neon[data-badge="guide"] {
  border-color: rgba(145, 165, 138, .48) !important;
  background: rgba(145, 165, 138, .2) !important;
  color: #dce8d2 !important;
}
.profile-detail .profile-glass-tags .badge-neon[data-badge="Admin"],
.profile-tile-tags .badge-neon[data-badge="Admin"] {
  border-color: rgba(244, 63, 94, .62) !important;
  background: rgba(225, 29, 72, .22) !important;
  color: #ffd0da !important;
}


/* Canonical role-tag colors shared by own Profile, viewed Profile, and Home cards. */
.profile-screen .profile-glass-tags .badge-lv,
.profile-detail .profile-glass-tags .badge-lv,
.profile-tile-tags .badge-lv {
  border-color: rgba(74, 222, 128, .55) !important;
  background: rgba(34, 197, 94, .18) !important;
  color: #c9ffd9 !important;
}
.profile-screen .profile-glass-tags .badge-neon.badge-host,
.profile-screen .profile-glass-tags .badge-neon[data-badge="host"],
.profile-detail .profile-glass-tags .badge-neon.badge-host,
.profile-detail .profile-glass-tags .badge-neon[data-badge="host"],
.profile-tile-tags .badge-neon.badge-host,
.profile-tile-tags .badge-neon[data-badge="host"] {
  border-color: rgba(56, 189, 248, .58) !important;
  background: rgba(14, 165, 233, .2) !important;
  color: #c9f2ff !important;
}
.profile-screen .profile-glass-tags .badge-neon[data-badge="agent"],
.profile-detail .profile-glass-tags .badge-neon[data-badge="agent"],
.profile-tile-tags .badge-neon[data-badge="agent"] {
  border-color: rgba(251, 146, 60, .6) !important;
  background: rgba(234, 88, 12, .2) !important;
  color: #ffe0c2 !important;
}
.profile-screen .profile-glass-tags .badge-neon[data-badge="Admin"],
.profile-detail .profile-glass-tags .badge-neon[data-badge="Admin"],
.profile-tile-tags .badge-neon[data-badge="Admin"] {
  border-color: rgba(244, 63, 94, .62) !important;
  background: rgba(225, 29, 72, .22) !important;
  color: #ffd0da !important;
}
.profile-screen .profile-glass-tags .badge-neon[data-badge="guide"],
.profile-detail .profile-glass-tags .badge-neon[data-badge="guide"],
.profile-tile-tags .badge-neon[data-badge="guide"] {
  border-color: rgba(145, 165, 138, .48) !important;
  background: rgba(145, 165, 138, .2) !important;
  color: #dce8d2 !important;
}
.profile-screen .profile-glass-tags .profile-gender-tag,
.profile-detail .profile-glass-tags .profile-gender-tag,
.profile-tile-tags .profile-gender-tag {
  border-color: rgba(167, 139, 250, .56) !important;
  background: rgba(124, 58, 237, .2) !important;
  color: #e4d9ff !important;
}


/* Give every Home People card the same fixed-height photo/footer structure. */
.home-people-grid .profile-tile {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.home-people-grid .profile-tile-photo {
  flex: 0 0 auto;
}
.home-people-grid .profile-tile-info {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 0 0 104px;
  height: 104px;
  min-height: 104px;
  max-height: 104px;
  overflow: hidden;
}


/* Home role colors override the neutral, high-specificity tile pill base. */
.home-people-grid .profile-tile .profile-tile-tags .badge-lv {
  border-color: rgba(74, 222, 128, .55) !important;
  background: rgba(34, 197, 94, .18) !important;
  color: #c9ffd9 !important;
}
.home-people-grid .profile-tile .profile-tile-tags .badge-neon.badge-host,
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="host"] {
  border-color: rgba(56, 189, 248, .58) !important;
  background: rgba(14, 165, 233, .2) !important;
  color: #c9f2ff !important;
}
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="agent"] {
  border-color: rgba(251, 146, 60, .6) !important;
  background: rgba(234, 88, 12, .2) !important;
  color: #ffe0c2 !important;
}
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="Admin"] {
  border-color: rgba(244, 63, 94, .62) !important;
  background: rgba(225, 29, 72, .22) !important;
  color: #ffd0da !important;
}
.profile-glass-tags .badge-neon[data-badge="Admin"],
.profile-glass-tags .badge-neon[data-badge="admin"],
.profile-tile-tags .badge-neon[data-badge="Admin"],
.profile-tile-tags .badge-neon[data-badge="admin"] {
  border: 1px solid rgba(255, 94, 165, .72) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(219, 39, 119, .42), rgba(89, 23, 73, .55)) !important;
  color: #ffe4f1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 14px rgba(219, 39, 119, .24) !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
}
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="guide"] {
  border-color: rgba(145, 165, 138, .48) !important;
  background: rgba(145, 165, 138, .2) !important;
  color: #dce8d2 !important;
}


/* Keep Home role pills uniform when the Burmese Level label uses taller glyphs. */
.home-people-grid .profile-tile .profile-tile-tags .badge-lv,
.home-people-grid .profile-tile .profile-tile-tags .badge-neon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  line-height: 1.2;
  vertical-align: middle;
}
.home-people-grid .profile-tile .profile-tile-tags .paid-crown-tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  line-height: 1.2;
  vertical-align: middle;
}

/* Game banners use the supplied artwork edge-to-edge; Play Now is a compact corner CTA. */
.feature-banner-slide.is-game > img {
  object-fit: contain;
  object-position: center;
  opacity: 1;
  background: #120a2a;
}
.feature-banner-slide.is-game .feature-banner-overlay {
  inset: 0;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 14px 14px 13px;
  background: rgba(7, 3, 22, .28);
}
.feature-banner-slide.is-game .feature-banner-copy.game-copy {
  flex: 0 0 auto;
  padding: 0;
}
.feature-banner-slide.is-game .feature-banner-actions {
  position: static;
  z-index: 4;
}
.feature-banner-slide.is-game .feature-banner-play-now {
  position: absolute;
  right: 14px;
  bottom: 13px;
  z-index: 5;
}
.feature-banner-slide.is-game .feature-banner-actions button {
  min-height: 36px;
  padding: 8px 13px 8px 15px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px 6px 14px 14px;
  color: #fff;
  background: rgba(124, 58, 237, .9);
  box-shadow: 0 8px 20px rgba(10, 4, 32, .5), inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(255, 182, 237, .16);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .01em;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.feature-banner-slide.is-game .feature-banner-actions button:hover,
.feature-banner-slide.is-game .feature-banner-actions button:focus-visible {
  transform: translateY(-3px) rotate(-1deg);
  filter: brightness(1.14) saturate(1.12);
  box-shadow: 0 12px 26px rgba(10, 4, 32, .62), 0 0 18px rgba(236,72,153,.35), inset 0 1px 0 rgba(255,255,255,.65);
  outline: none;
}

/* Game Reward banner uses the supplied artwork with the same glass View CTA. */
.feature-banner-slide.is-reward > img {
  object-fit: cover;
  object-position: center;
  opacity: 1;
}
.feature-banner-slide.is-reward .feature-banner-overlay {
  inset: 0;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 14px 14px 13px;
  background: rgba(7, 3, 22, .2);
}
.feature-banner-slide.is-reward .feature-banner-copy.game-copy {
  flex: 0 0 auto;
  padding: 0;
}
.feature-banner-slide.is-reward .feature-banner-actions {
  position: static;
  z-index: 4;
}
.feature-banner-slide.is-reward .feature-banner-play-now {
  position: absolute;
  right: 14px;
  bottom: 13px;
  z-index: 5;
}
.feature-banner-slide.is-reward .feature-banner-actions button {
  min-height: 36px;
  padding: 8px 13px 8px 15px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px 6px 14px 14px;
  color: #fff;
  background: rgba(124, 58, 237, .9);
  box-shadow: 0 8px 20px rgba(10, 4, 32, .5), inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(255, 182, 237, .16);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .01em;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.feature-banner-slide.is-reward .feature-banner-actions button:hover,
.feature-banner-slide.is-reward .feature-banner-actions button:focus-visible {
  transform: translateY(-3px) rotate(-1deg);
  filter: brightness(1.14) saturate(1.12);
  box-shadow: 0 12px 26px rgba(10, 4, 32, .62), 0 0 18px rgba(236,72,153,.35), inset 0 1px 0 rgba(255,255,255,.65);
  outline: none;
}

/* Keep Upgrade, View, and Play Now CTAs in one stable corner position. */
.feature-banner-slide.is-upgrade > img {
  object-fit: cover;
  object-position: center;
  opacity: 1;
}

/* Every supplied banner fills the frame edge-to-edge; crop is intentional so no side gaps appear. */
.feature-banner-slide > img,
.feature-banner-slide.is-game > img,
.feature-banner-slide.is-reward > img,
.feature-banner-slide.is-upgrade > img {
  object-fit: cover;
  object-position: center;
  background: #120a2a;
}

.feature-banner-slide.is-upgrade .feature-banner-overlay {
  inset: 0;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 14px 14px 13px;
  background: rgba(7, 3, 22, .2);
}
.feature-banner-slide.is-upgrade .feature-banner-copy.game-copy {
  flex: 0 0 auto;
  padding: 0;
}
.feature-banner-slide.is-upgrade .feature-banner-actions { position: static; z-index: 4; }
.feature-banner-slide.is-upgrade .feature-banner-actions button {
  min-height: 36px;
  padding: 8px 13px 8px 15px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px 6px 14px 14px;
  color: #fff;
  background: rgba(124, 58, 237, .9);
  box-shadow: 0 8px 20px rgba(10, 4, 32, .5), inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(255, 182, 237, .16);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .01em;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.feature-banner-slide.is-game .feature-banner-play-now,
.feature-banner-slide.is-reward .feature-banner-play-now,
.feature-banner-slide.is-upgrade .feature-banner-play-now {
  left: auto;
  right: 14px;
  bottom: 13px;
  width: auto;
  max-width: calc(100% - 28px);
  transform: none;
}
.feature-banner-slide.is-game .feature-banner-actions button:hover,
.feature-banner-slide.is-game .feature-banner-actions button:focus-visible,
.feature-banner-slide.is-reward .feature-banner-actions button:hover,
.feature-banner-slide.is-reward .feature-banner-actions button:focus-visible,
.feature-banner-slide.is-upgrade .feature-banner-actions button:hover,
.feature-banner-slide.is-upgrade .feature-banner-actions button:focus-visible {
  transform: translateY(-3px);
}

/* Keep the original compact banner footprint while letting game artwork fill it. */
.feature-banner {
  aspect-ratio: 16 / 5;
  border-radius: 24px !important;
}


/* Keep Home People metadata on fixed lines so names and role badges cannot resize cards. */
.home-people-grid .profile-tile-info .name {
  box-sizing: border-box;
  flex: 0 0 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  overflow: hidden;
  align-content: flex-start;
}
.home-people-grid .profile-tile-name-tags {
  width: 100%;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  margin-top: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}
.home-people-grid .profile-tile-name-tags > * {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-people-grid .profile-tile-info > .profile-tile-tags {
  box-sizing: border-box;
  flex: 0 0 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  margin: 4px 0 0;
  flex-wrap: nowrap;
  align-items: center;
  overflow: visible;
}
.home-people-grid .profile-tile-info > .profile-tile-tags > * {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-people-grid .profile-tile-name-tags,
.home-people-grid .profile-tile-info > .profile-tile-tags {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.home-people-grid .profile-tile-info > .sub {
  box-sizing: border-box;
  flex: 0 0 14px;
  height: 14px;
  min-height: 14px;
  max-height: 14px;
  margin-top: 3px;
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Agent and ordinary groups share one fixed-size row in the bottom Groups list. */
#group-list .group-list-row {
  box-sizing: border-box;
  height: 88px;
  min-height: 88px;
  max-height: 88px;
  padding: 8px 10px;
  overflow: hidden;
}
#group-list .group-list-row > .avatar.round {
  box-sizing: border-box;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
}
#group-list .group-list-row .meta {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
#group-list .group-list-row .agent-group-meta {
  max-width: 100%;
  overflow: hidden;
}
#group-list .group-list-row .meta > .name,
#group-list .group-list-row .meta > .sub,
#group-list .group-list-row > .when {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#group-list .group-list-row > .when {
  flex: 0 1 auto;
  max-width: 28%;
}


/* Every Chat inbox entry uses the same card frame, size, and neutral glass color. */
#chat-list > .chat-conversation-row,
#chat-list > .chat-conversation-shell {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 76px;
  min-height: 76px;
  max-height: 76px;
  margin: 0 0 8px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(226, 193, 255, .22) !important;
  background: linear-gradient(145deg, rgba(65, 31, 112, .42), rgba(20, 9, 39, .66)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 26px rgba(5, 1, 16, .22) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  overflow: hidden !important;
}
#chat-list > .chat-conversation-row {
  padding: 8px 12px !important;
}
#chat-list > .chat-conversation-shell {
  padding: 0 !important;
}
#chat-list > .chat-conversation-row:hover,
#chat-list > .chat-conversation-shell:hover {
  background: linear-gradient(145deg, rgba(65, 31, 112, .42), rgba(20, 9, 39, .66)) !important;
}
#chat-list .chat-conversation-shell > .chat-conversation-row {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 76px;
  min-height: 76px;
  max-height: 76px;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  overflow: hidden !important;
}
#chat-list .chat-conversation-row.gender-male,
#chat-list .chat-conversation-row.gender-female {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}
#chat-list .chat-conversation-row .meta {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
#chat-list .chat-conversation-row .meta > .name,
#chat-list .chat-conversation-row .meta > .sub {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#chat-list .chat-conversation-row > .avatar.round {
  box-sizing: border-box;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  box-shadow: 0 0 0 1px rgba(226, 193, 255, .3), 0 6px 14px rgba(5, 1, 16, .22) !important;
}


/* Final Admin identity treatment: fixed red-pink glass pill, never rainbow. */
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="Admin"],
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="admin"],
.profile-screen .profile-glass-tags .badge-neon[data-badge="Admin"],
.profile-screen .profile-glass-tags .badge-neon[data-badge="admin"],
.profile-detail .profile-glass-tags .badge-neon[data-badge="Admin"],
.profile-detail .profile-glass-tags .badge-neon[data-badge="admin"] {
  border: 1px solid rgba(255, 94, 165, .72) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(219, 39, 119, .42), rgba(89, 23, 73, .55)) !important;
  color: #ffe4f1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 14px rgba(219, 39, 119, .24) !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Use the current static Admin pill in Admin upgrade cards and account dossiers too. */
body.is-admin-dash #admin-app .badge-neon[data-badge="Admin"],
body.is-admin-dash #admin-app .badge-neon[data-badge="admin"] {
  border: 1px solid rgba(255, 94, 165, .72) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(219, 39, 119, .42), rgba(89, 23, 73, .55)) !important;
  color: #ffe4f1 !important;
  -webkit-text-fill-color: #ffe4f1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 14px rgba(219, 39, 119, .24) !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
}
.agent-group-hosts-only {
  margin: 10px 0 0;
  color: #78b9ff;
  font-weight: 600;
  text-align: center;
}
/* Numeric unread counts are intentionally red and visible on both the Chat tab and each row. */
.nav button .icon-btn { position: relative; }
.nav-noti-count {
  position: absolute;
  top: -5px;
  right: -7px;
  z-index: 2;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid rgba(255, 220, 225, .72);
  border-radius: 999px;
  background: #e53952 !important;
  color: #fff !important;
  font: 800 11px/16px Arial, sans-serif;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(229, 57, 82, .42);
}
.chat-unread-badge {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e53952 !important;
  color: #fff !important;
  font: 800 12px/20px Arial, sans-serif;
  text-align: center;
  box-shadow: 0 3px 10px rgba(229, 57, 82, .3);
}

/* Group Bio uses the same bright turquoise accent as the Welcome label. */
.profile-bio.group-bio,
#group-bio {
  color: #5fffe1 !important;
  caret-color: #5fffe1 !important;
}

/* Voting reward claim: lit + tappable only when the viewer actually earned it. */
.reward-top-card .btn.vote-claim-btn.is-lit {
  background: linear-gradient(135deg, #ffd166, #f5b316 55%, #ff8a3d) !important;
  border-color: rgba(255, 233, 168, .85) !important;
  color: #2a1700 !important;
  font-weight: 900;
  box-shadow: 0 0 0 1px rgba(255, 233, 168, .5), 0 8px 24px rgba(245, 179, 22, .45), 0 0 28px rgba(255, 209, 102, .55) !important;
  animation: vote-claim-glow 1.8s ease-in-out infinite;
  cursor: pointer;
}
.reward-top-card .btn.vote-claim-btn.is-dim,
.reward-top-card .btn.vote-claim-btn:disabled {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(238, 214, 255, .14) !important;
  color: rgba(250, 245, 255, .45) !important;
  box-shadow: none !important;
  animation: none !important;
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
@keyframes vote-claim-glow {
  50% { box-shadow: 0 0 0 1px rgba(255, 233, 168, .7), 0 10px 30px rgba(245, 179, 22, .6), 0 0 42px rgba(255, 209, 102, .8); }
}
@media (prefers-reduced-motion: reduce) {
  .reward-top-card .btn.vote-claim-btn.is-lit { animation: none; }
}
/* Shared semantic tag colors across Profile, Home, chat, and the Admin dashboard. */
.admin-account-tag.custom {
  border-color: rgba(238, 214, 255, .3) !important;
  background: rgba(255, 255, 255, .08) !important;
  color: rgba(250, 245, 255, .92) !important;
  -webkit-text-fill-color: currentColor !important;
}

.badge-neon[data-badge="host"],
.badge-neon.badge-host,
.profile-screen .profile-glass-tags .badge-neon[data-badge="host"],
.profile-screen .profile-glass-tags .badge-neon.badge-host,
.profile-detail .profile-glass-tags .badge-neon[data-badge="host"],
.profile-detail .profile-glass-tags .badge-neon.badge-host,
.profile-tile-tags .badge-neon[data-badge="host"],
.profile-tile-tags .badge-neon.badge-host,
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="host"],
.home-people-grid .profile-tile .profile-tile-tags .badge-neon.badge-host,
.admin-account-tag[data-badge="host"],
.admin-account-tag.host {
  border-color: rgba(56, 189, 248, .58) !important;
  background: rgba(14, 165, 233, .2) !important;
  color: #c9f2ff !important;
  -webkit-text-fill-color: currentColor !important;
  --badge-glow: rgba(34, 211, 238, .48);
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 10px var(--badge-glow) !important;
}

.badge-neon[data-badge="agent"],
.profile-screen .profile-glass-tags .badge-neon[data-badge="agent"],
.profile-detail .profile-glass-tags .badge-neon[data-badge="agent"],
.profile-tile-tags .badge-neon[data-badge="agent"],
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="agent"],
.admin-account-tag[data-badge="agent"],
.admin-account-tag.agent {
  border-color: rgba(251, 146, 60, .6) !important;
  background: rgba(234, 88, 12, .2) !important;
  color: #ffe0c2 !important;
  -webkit-text-fill-color: currentColor !important;
  --badge-glow: rgba(251, 146, 60, .48);
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 10px var(--badge-glow) !important;
}

.badge-neon[data-badge="Admin"],
.badge-neon[data-badge="admin"],
.profile-screen .profile-glass-tags .badge-neon[data-badge="Admin"],
.profile-screen .profile-glass-tags .badge-neon[data-badge="admin"],
.profile-detail .profile-glass-tags .badge-neon[data-badge="Admin"],
.profile-detail .profile-glass-tags .badge-neon[data-badge="admin"],
.profile-tile-tags .badge-neon[data-badge="Admin"],
.profile-tile-tags .badge-neon[data-badge="admin"],
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="Admin"],
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="admin"],
.admin-account-tag[data-badge="admin"],
body.is-admin-dash #admin-app .badge-neon[data-badge="Admin"],
body.is-admin-dash #admin-app .badge-neon[data-badge="admin"],
.admin-account-tag[data-badge="Admin"],
.admin-account-tag.admin {
  border: 1px solid rgba(255, 94, 165, .72) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(219, 39, 119, .42), rgba(89, 23, 73, .55)) !important;
  color: #ffe4f1 !important;
  -webkit-text-fill-color: #ffe4f1 !important;
  --badge-glow: rgba(219, 39, 119, .42);
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 14px rgba(219, 39, 119, .24) !important;
}

.badge-neon[data-badge="guide"],
.profile-screen .profile-glass-tags .badge-neon[data-badge="guide"],
.profile-detail .profile-glass-tags .badge-neon[data-badge="guide"],
.profile-tile-tags .badge-neon[data-badge="guide"],
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="guide"],
.admin-account-tag[data-badge="guide"] {
  border-color: rgba(145, 165, 138, .48) !important;
  background: rgba(145, 165, 138, .2) !important;
  color: #dce8d2 !important;
  -webkit-text-fill-color: currentColor !important;
  --badge-glow: rgba(145, 165, 138, .48);
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 10px var(--badge-glow) !important;
}

.badge-neon[data-badge="VVIP"],
.profile-screen .profile-glass-tags .badge-neon[data-badge="VVIP"],
.profile-detail .profile-glass-tags .badge-neon[data-badge="VVIP"],
.profile-tile-tags .badge-neon[data-badge="VVIP"],
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="VVIP"],
.admin-account-tag[data-badge="VVIP"] {
  border-color: rgba(167, 139, 250, .56) !important;
  background: rgba(124, 58, 237, .2) !important;
  color: #e4d9ff !important;
  -webkit-text-fill-color: currentColor !important;
  --badge-glow: rgba(167, 139, 250, .48);
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 10px var(--badge-glow) !important;
}

.badge-neon[data-badge="officer"],
.profile-screen .profile-glass-tags .badge-neon[data-badge="officer"],
.profile-detail .profile-glass-tags .badge-neon[data-badge="officer"],
.profile-tile-tags .badge-neon[data-badge="officer"],
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="officer"],
.admin-account-tag[data-badge="officer"] {
  border-color: rgba(251, 191, 36, .56) !important;
  background: rgba(180, 83, 9, .2) !important;
  color: #ffedb3 !important;
  -webkit-text-fill-color: currentColor !important;
  --badge-glow: rgba(251, 191, 36, .45);
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 10px var(--badge-glow) !important;
}

.badge-neon[data-badge="sponsor"],
.profile-screen .profile-glass-tags .badge-neon[data-badge="sponsor"],
.profile-detail .profile-glass-tags .badge-neon[data-badge="sponsor"],
.profile-tile-tags .badge-neon[data-badge="sponsor"],
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="sponsor"],
.admin-account-tag[data-badge="sponsor"] {
  border-color: rgba(52, 211, 153, .56) !important;
  background: rgba(5, 150, 105, .2) !important;
  color: #c5ffe3 !important;
  -webkit-text-fill-color: currentColor !important;
  --badge-glow: rgba(52, 211, 153, .45);
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 10px var(--badge-glow) !important;
}

.badge-lv,
.profile-screen .profile-glass-tags .badge-lv,
.profile-detail .profile-glass-tags .badge-lv,
.profile-tile-tags .badge-lv,
.home-people-grid .profile-tile .profile-tile-tags .badge-lv,
.admin-account-tag[data-badge="level"],
.admin-account-tag.level {
  border-color: rgba(74, 222, 128, .55) !important;
  background: rgba(34, 197, 94, .18) !important;
  color: #c9ffd9 !important;
  -webkit-text-fill-color: currentColor !important;
  --badge-glow: rgba(52, 211, 153, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 10px var(--badge-glow) !important;
}

/* Per-tag glow: each pill owns its colored shadow; wrappers never cast a
   rectangular shadow. This is intentionally scoped to Home People and Chat
   conversation tags so the restored Profile layout remains untouched. */
.home-people-grid .profile-tile-tags,
.home-people-grid .profile-tile-name-tags,
.chat-conversation-row .meta,
.chat-conversation-row .chat-peer-tags {
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
}
.profile-tile-tags .badge-lv,
.profile-tile-tags .badge-neon,
.profile-lite-roles .badge-lv,
.profile-lite-roles .badge-neon,
.chat-conversation-row .badge-lv,
.chat-conversation-row .badge-neon,
.chat-screen .badge-lv,
.chat-screen .badge-neon,
.agent-group-meta .badge-neon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  filter: drop-shadow(0 6px 16px rgba(5, 1, 16, .22)) !important;
  text-shadow: none !important;
}
.profile-tile-tags .paid-crown-tag,
.profile-lite-roles .paid-crown-tag,
.chat-conversation-row .paid-crown-tag,
.chat-screen .paid-crown-tag,
.agent-group-meta .paid-crown-tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  line-height: 1.2 !important;
  border: 1px solid rgba(255, 211, 106, .72) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(255, 214, 112, .3), rgba(173, 104, 15, .18)) !important;
  color: #ffe7a6 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3) !important;
  filter: drop-shadow(0 4px 14px rgba(189, 125, 25, .2)) !important;
  text-shadow: none !important;
}
.home-people-grid .profile-tile-tags .badge-lv,
.chat-conversation-row .badge-lv {
  --tag-glow: rgba(52, 211, 153, .60);
}
.home-people-grid .profile-tile-tags .badge-neon[data-badge="host"],
.home-people-grid .profile-tile-tags .badge-neon.badge-host,
.chat-conversation-row .badge-neon[data-badge="host"],
.chat-conversation-row .badge-neon.badge-host {
  --tag-glow: rgba(34, 211, 238, .68);
}
.home-people-grid .profile-tile-tags .badge-neon[data-badge="agent"],
.chat-conversation-row .badge-neon[data-badge="agent"] {
  --tag-glow: rgba(251, 146, 60, .68);
}
.home-people-grid .profile-tile-tags .badge-neon[data-badge="VVIP"],
.chat-conversation-row .badge-neon[data-badge="VVIP"] {
  --tag-glow: rgba(167, 139, 250, .68);
}
.home-people-grid .profile-tile-tags .badge-neon[data-badge="Admin"],
.chat-conversation-row .badge-neon[data-badge="Admin"] {
  --tag-glow: rgba(244, 63, 94, .62);
}
.home-people-grid .profile-tile-tags .badge-neon[data-badge="guide"],
.chat-conversation-row .badge-neon[data-badge="guide"] {
  --tag-glow: rgba(145, 165, 138, .62);
}
.home-people-grid .profile-tile-tags .paid-crown-tag,
.chat-conversation-row .paid-crown-tag {
  --tag-glow: rgba(255, 211, 106, .70);
}
.home-people-grid .profile-tile-tags .badge-neon::after,
.home-people-grid .profile-tile-tags .badge-lv::after,
.chat-conversation-row .badge-neon::after,
.chat-conversation-row .badge-lv::after {
  border-radius: inherit !important;
}

/* Keep the Home/Chat parent frame, but prevent its rectangular shadow from
   being mistaken for tag glow. The individual pills retain their own glow. */
.home-people-grid .profile-tile-info,
.chat-conversation-row .meta {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Host has a higher-specificity colour rule above; explicitly restore the
   shared rounded pill shadow after it so Host cannot keep a square/old glow. */
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="host"],
.home-people-grid .profile-tile .profile-tile-tags .badge-neon.badge-host,
.chat-conversation-row .badge-neon[data-badge="host"],
.chat-conversation-row .badge-neon.badge-host,
.profile-screen .profile-glass-tags .badge-neon[data-badge="host"],
.profile-screen .profile-glass-tags .badge-neon.badge-host,
.profile-detail .profile-glass-tags .badge-neon[data-badge="host"],
.profile-detail .profile-glass-tags .badge-neon.badge-host {
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  filter: drop-shadow(0 6px 16px rgba(5, 1, 16, .22)) !important;
}

/* Agent uses the same higher-specificity semantic colour rule as Host. */
.home-people-grid .profile-tile .profile-tile-tags .badge-neon[data-badge="agent"],
.chat-conversation-row .badge-neon[data-badge="agent"],
.profile-screen .profile-glass-tags .badge-neon[data-badge="agent"],
.profile-detail .profile-glass-tags .badge-neon[data-badge="agent"] {
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  filter: drop-shadow(0 6px 16px rgba(5, 1, 16, .22)) !important;
}

/* Chat list Lv keeps the established Profile-card pill geometry. */
.home-screen #chat-list .chat-conversation-row .badge-lv {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: .72rem !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  filter: drop-shadow(0 6px 16px rgba(5, 1, 16, .22)) !important;
  text-shadow: none !important;
}

/* The Lv tag inside an opened conversation uses the compact 22px variant. */
.chat-screen .chat-head .badge-lv {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 10px !important;
  font-size: .66rem !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  filter: drop-shadow(0 6px 16px rgba(5, 1, 16, .22)) !important;
  text-shadow: none !important;
}

/* System notices use the same glass Chat frame, but remain read-only. */
.system-chat-screen {
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(720px 280px at 50% -8%, rgba(124, 58, 237, .28), transparent 58%),
    radial-gradient(520px 260px at 110% 100%, rgba(34, 211, 238, .12), transparent 52%),
    transparent !important;
}
.system-chat-screen .screen-body { padding: 0; }
.system-chat-screen .chat-head {
  margin: 0;
  padding: 10px 12px 8px;
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(14, 10, 24, .55), rgba(14, 10, 24, .08));
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: none;
}
.system-chat-screen .messages {
  padding: 10px 12px 8px;
  gap: 2px;
}
.system-chat-screen .bubble.system {
  align-self: flex-start;
  max-width: min(82%, 560px);
  margin: 2px 0;
  padding: 10px 14px;
  border-radius: 20px 20px 20px 6px !important;
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: var(--auth-ink);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 8px 24px rgba(5, 1, 16, .18) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.system-chat-screen .sys-note { font-size: inherit; }

/* Open Chat header: Lv and Paid use one compact 22px glass-pill geometry. */
.chat-screen .chat-head .badge-lv,
.chat-screen .chat-head .paid-crown-tag {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  font-size: .66rem !important;
  background-image: none !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 5px 14px rgba(5, 1, 16, .2) !important;
}
.chat-screen .chat-head .badge-lv {
  border: 1px solid rgba(74, 222, 128, .58) !important;
  background: rgba(34, 197, 94, .18) !important;
  color: #c9ffd9 !important;
  -webkit-text-fill-color: currentColor !important;
}
.chat-screen .chat-head .paid-crown-tag {
  border: 1px solid rgba(255, 211, 106, .72) !important;
  background: rgba(255, 214, 112, .2) !important;
  color: #ffe7a6 !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Direct and group messages use the same quiet glass frame as system notices.
   Incoming and outgoing bubbles differ only by a restrained tint. */
.chat-screen .messages .bubble.them:not(.media):not(.system),
.chat-screen .messages .bubble.me:not(.media):not(.system) {
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 0 8px 24px rgba(5, 1, 16, .18) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
}
.chat-screen .messages .bubble.them:not(.media):not(.system) {
  background: rgba(255, 255, 255, .08) !important;
  color: var(--auth-ink);
}
.chat-screen .messages .bubble.me:not(.media):not(.system) {
  background: rgba(124, 58, 237, .24) !important;
  border-color: rgba(232, 121, 249, .28) !important;
  color: #fff;
}

/* Group detail is a clean photo-first card: the Agent tag/username row is
   intentionally omitted and the group photo sits above the group name. */
.group-profile-card {
  gap: 10px;
}
.group-profile-logo {
  width: min(72vw, 320px);
  height: min(72vw, 320px);
  margin: 0 auto 4px;
  display: grid;
  place-items: center;
}
.group-profile-logo > .avatar.round {
  width: 100%;
  height: 100%;
  border-radius: 26px !important;
  object-fit: cover;
  box-shadow: 0 0 0 5px rgba(226, 193, 255, .16), 0 22px 48px rgba(5, 1, 16, .42) !important;
}
.group-profile-card .me-name {
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  text-align: center;
}

/* Canonical Paid frame: use the gold-border glass treatment everywhere.
   The scoped selectors intentionally match the existing profile/chat rules so
   no stronger legacy override can make one Paid tag look different. */
.paid-crown-tag,
.profile-tile-tags .paid-crown-tag,
.profile-lite-roles .paid-crown-tag,
.profile-glass-tags .paid-crown-tag,
.chat-conversation-row .paid-crown-tag,
.chat-screen .paid-crown-tag,
.chat-screen .chat-head .paid-crown-tag,
.agent-group-meta .paid-crown-tag {
  border: 1px solid rgba(255, 211, 106, .72) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255, 214, 112, .3), rgba(173, 104, 15, .18)) !important;
  color: #ffe7a6 !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3) !important;
  filter: drop-shadow(0 4px 14px rgba(189, 125, 25, .2)) !important;
  text-shadow: none !important;
}
.paid-crown-tag::after { display: none !important; content: none !important; }

/* The current support-period winner receives a gold frame on the photo only. */
.profile-avatar-presence.is-support-frame-winner .me-ava,
.profile-avatar-presence.is-vote-frame-winner .me-ava,
.profile-detail.is-support-frame-winner .profile-lite-photo,
.profile-detail.is-vote-frame-winner .profile-lite-photo {
  border: 2px solid rgba(255, 220, 132, .98) !important;
  box-shadow:
    0 0 0 2px rgba(132, 88, 26, .72),
    0 0 20px rgba(246, 193, 67, .58),
    inset 0 1px 0 rgba(255, 248, 218, .72) !important;
}

/* Admin-tagged accounts keep a purple glass avatar frame on their own and viewed profiles. */
.profile-avatar-presence.is-admin-frame .me-ava,
.profile-detail.is-admin-frame .profile-lite-photo {
  border: 2px solid rgba(150, 100, 225, .96) !important;
  background: linear-gradient(135deg, rgba(174, 133, 245, .34), rgba(98, 52, 157, .52) 52%, rgba(42, 22, 76, .7)) !important;
  box-shadow:
    0 0 0 2px rgba(42, 26, 73, .88),
    inset 0 1px 0 rgba(232, 216, 255, .74),
    inset 0 -1px 0 rgba(36, 19, 61, .72) !important;
  outline: 1px solid rgba(216, 197, 255, .55);
  outline-offset: -4px;
}

/* The gold frame follows the live Top 1 in Settings > Rewards. */
.vote-reward-top-avatar-frame {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border: 2px solid rgba(255, 220, 132, .98);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 239, 185, .24), rgba(153, 99, 22, .22));
  box-shadow: 0 0 0 2px rgba(132, 88, 26, .72), 0 0 16px rgba(246, 193, 67, .58), inset 0 1px 0 rgba(255, 248, 218, .72);
}
.vote-reward-top-avatar-frame .reward-top-avatar {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 239, 185, .82);
}