/* ============================================================
   Jako (جاكو) — Prototype Styles
   iPhone 15 Pro frame + glassmorphic app shell + screens
   Bilingual: RTL (default) / LTR via [dir] + logical properties
   ============================================================ */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

[hidden] { display: none !important; }

body {
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 800px at 20% -10%, #1a1166 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 110%, #14224d 0%, transparent 50%),
    #05031f;
  color: var(--on-surface);
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 28px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
img { display: block; max-width: 100%; }

/* hide scrollbars everywhere but keep scrolling */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ============================================================
   Backdrop label + device
   ============================================================ */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.stage-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--on-surface-variant);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.5px;
  opacity: 0.7;
}
.stage-brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary-fixed-dim);
  box-shadow: 0 0 12px var(--primary-fixed-dim);
}

/* ---------- iPhone 15 Pro ---------- */
.device {
  position: relative;
  width: 390px;
  height: 844px;
  border-radius: 56px;
  padding: 11px;
  background: linear-gradient(145deg, #2a2a32, #0c0c12 45%, #2a2a32);
  box-shadow:
    0 0 0 2px #07070b,
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(108, 211, 248, 0.08);
}
/* titanium side buttons */
.device::before,
.device::after {
  content: "";
  position: absolute;
  inset-inline-start: -3px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(#3a3a42, #16161c);
}
.device::before { top: 180px; height: 64px; }
.device::after  { top: 256px; height: 64px; }

.device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 46px;
  overflow: hidden;
  background: var(--surface-deep);
}

/* Dynamic Island */
.dynamic-island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 122px;
  height: 35px;
  background: #000;
  border-radius: var(--radius-full);
  z-index: 60;
}

/* Status bar */
.status-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 54px;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 30px 0;
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  pointer-events: none;
}
.status-bar .sb-right { display: flex; align-items: center; gap: 6px; }
.status-bar svg { width: 17px; height: 17px; }
.sb-time { letter-spacing: 0.3px; }

/* battery */
.battery { display: flex; align-items: center; gap: 2px; }
.battery .cell {
  width: 22px; height: 11px; border: 1.4px solid #fff;
  border-radius: 3px; position: relative; padding: 1.4px;
}
.battery .cell::after {
  content: ""; position: absolute; inset-inline-end: -3px; top: 3px;
  width: 1.6px; height: 4px; background: #fff; border-radius: 1px;
}
.battery .fill { height: 100%; width: 78%; background: #fff; border-radius: 1px; }

/* Home indicator */
.home-indicator {
  position: absolute;
  bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.55);
  z-index: 70;
}

/* ============================================================
   App shell & screen router
   ============================================================ */
.app {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--surface-deep);
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-deep);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateX(8%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur);
  z-index: 1;
}
[dir="ltr"] .screen { transform: translateX(-8%); }

.screen.active {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}
.screen.leaving {
  transform: translateX(-8%);
  opacity: 0;
  z-index: 1;
}
[dir="ltr"] .screen.leaving { transform: translateX(8%); }

/* scroll region inside a screen */
.scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Shared components
   ============================================================ */

/* Glass panel */
.glass {
  background: var(--surface-glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 16px;
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--primary-container);
  color: var(--on-primary);
  box-shadow: 0 6px 24px rgba(115, 218, 255, 0.28);
}
.btn-primary:active { filter: brightness(1.06); }
.btn-glass {
  background: var(--surface-glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border-strong);
  color: var(--on-surface);
}
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.4; pointer-events: none; }

.btn-pill {
  height: 36px; padding: 0 16px; font-size: 13px; border-radius: var(--radius-full);
}

/* Icon button (stroke icons) */
.icon-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  color: var(--on-surface);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast);
}
.icon-btn:active { transform: scale(1.06); }
.icon-btn svg { width: 24px; height: 24px; }

svg.ico { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round; }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border-radius: var(--radius-full);
  background: var(--surface-glass);
  border: 1px solid var(--glass-border);
  font-family: var(--font-label);
  font-size: 13px;
  color: var(--on-surface-variant);
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
}
.chip.active {
  background: var(--primary-container);
  color: var(--on-primary);
  border-color: transparent;
  font-weight: 600;
}
.hashtag { color: var(--secondary); font-family: var(--font-label); }

/* Avatar */
.avatar {
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  font-family: var(--font-headline);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar.live-ring {
  box-shadow: 0 0 0 2px var(--surface-deep), 0 0 0 4px var(--live);
  animation: pulse-ring 1.8s var(--ease) infinite;
}
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 2px var(--surface-deep), 0 0 0 4px var(--live); }
  50% { box-shadow: 0 0 0 2px var(--surface-deep), 0 0 0 5px rgba(255, 59, 92, 0.6); }
}

/* Live badge */
.live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  background: var(--live);
  border-radius: var(--radius);
  font-family: var(--font-label);
  font-size: 11px; font-weight: 700; color: #fff;
  letter-spacing: 0.5px;
}
.live-badge .blink {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: blink 1.2s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0.2; } }

.viewers {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-label); font-size: 12px;
  color: #fff; background: rgba(7,0,41,0.5);
  padding: 3px 8px; border-radius: var(--radius-full);
  backdrop-filter: blur(8px);
}

/* Section title */
.section-title {
  font-family: var(--font-headline);
  font-size: 18px; font-weight: 700;
  color: var(--on-surface);
  margin: 0 var(--margin-mobile) 12px;
}

/* App header (generic) */
.app-header {
  display: flex; align-items: center; gap: 12px;
  padding: 60px var(--margin-mobile) 12px;
}
.app-header .title {
  font-family: var(--font-headline); font-size: 22px; font-weight: 700;
}
.spacer { flex: 1; }

/* directional chevron flips with dir */
.chev-back { transform: scaleX(1); }
[dir="ltr"] .chev-back { transform: scaleX(-1); }

/* ============================================================
   Bottom navigation (floating glass pill)
   ============================================================ */
.bottom-nav {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: 9px 4px 0;
  background: rgba(7, 0, 41, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.4);
  z-index: 40;
}
.nav-item {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--on-surface-variant);
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.nav-item svg { width: 25px; height: 25px; }
.nav-lbl { font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: 0.2px; }
.nav-item.active { color: #fff; }
.nav-item:active { transform: scale(0.94); }
.nav-create {
  flex: 0 0 auto;
  width: 52px; height: 40px;
  margin: -1px 6px 0;
  background: linear-gradient(135deg, #9b4dff, #7c3aed);
  color: #fff;
  border-radius: 14px;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.5);
  transition: transform var(--dur-fast);
}
.nav-create:active { transform: scale(0.95); }
.nav-create svg { width: 27px; height: 27px; stroke-width: 2.4; }

/* hide nav on screens that opt out */
.app[data-nav="hidden"] .bottom-nav { display: none; }

/* ============================================================
   SPLASH
   ============================================================ */
#screen-splash {
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(800px 600px at 50% 35%, #1d1270 0%, transparent 60%),
    linear-gradient(180deg, #0e014d, #070029);
}
.splash-logo {
  display: grid; place-items: center;
  margin-bottom: 26px;
  perspective: 900px;            /* gives the spin real 3D depth */
  filter: drop-shadow(0 0 70px rgba(108,211,248,0.45));
}
.splash-logo-img {
  width: 180px; height: 180px;
  transform-style: preserve-3d;
  /* gentle pop-in, then a continuous 3D rotation around its own axis */
  animation:
    splash-logo-in 700ms var(--ease) both,
    splash-spin3d 3.4s ease-in-out 700ms infinite;
}
@keyframes splash-logo-in {
  0%   { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes splash-spin3d {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
.splash-name {
  font-family: var(--font-display);
  font-size: 48px; font-weight: 800;
  color: var(--on-surface);
  letter-spacing: 1px;
  margin-top: 22px;
  opacity: 0;
  /* hidden → fully visible by 4s, then glows from 4s to 6s (splash end) */
  animation:
    splash-name-in 4s ease forwards,
    splash-name-glow 2s ease-in-out 4s forwards;
}
@keyframes splash-name-in {
  0%   { opacity: 0; transform: translateY(12px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes splash-name-glow {
  0%   { text-shadow: 0 0 0 rgba(108,211,248,0); }
  100% {
    text-shadow:
      0 0 18px rgba(108,211,248,0.95),
      0 0 44px rgba(108,211,248,0.7),
      0 0 72px rgba(138,221,40,0.45);
  }
}
.splash-tag {
  font-family: var(--font-body); font-size: 16px;
  color: var(--on-surface-variant); margin-top: 6px;
}
.splash-loader {
  margin-top: 40px;
  width: 180px; height: 4px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.splash-loader .bar {
  height: 100%; width: 40%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, var(--primary-fixed-dim), transparent);
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}

/* ============================================================
   ONBOARDING
   ============================================================ */
#screen-onboarding { background: linear-gradient(180deg, #120a52, #070029); }
.ob-top { padding: 60px var(--margin-mobile) 0; display: flex; justify-content: flex-end; }
.ob-skip { font-family: var(--font-label); font-size: 14px; color: var(--on-surface-variant); padding: 8px; }
.ob-track { flex: 1; display: flex; overflow: hidden; }
.ob-slide {
  min-width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 32px; text-align: center;
  transition: transform var(--dur) var(--ease);
}
.ob-art {
  width: 220px; height: 220px; border-radius: var(--radius-xl);
  display: grid; place-items: center;
  font-size: 92px; margin-bottom: 36px;
  background: var(--surface-glass);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 0 60px rgba(108,211,248,0.12), 0 20px 50px rgba(0,0,0,0.3);
}
.ob-slide h2 { font-family: var(--font-display); font-size: 30px; font-weight: 800; margin-bottom: 14px; }
.ob-slide p { font-family: var(--font-body); font-size: 17px; line-height: 28px; color: var(--on-surface-variant); max-width: 300px; }
.ob-bottom { padding: 0 32px 46px; }
.ob-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 26px; }
.ob-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); transition: all var(--dur); }
.ob-dots .dot.active { width: 26px; background: var(--primary-fixed-dim); border-radius: var(--radius-full); }

/* ============================================================
   AUTH
   ============================================================ */
#screen-auth { background: radial-gradient(700px 500px at 50% 20%, #1b1270, transparent 60%), linear-gradient(180deg,#0e014d,#070029); }
.auth-wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 28px 44px; }
.auth-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.auth-logo {
  width: 112px; height: 112px; display: grid; place-items: center;
  filter: drop-shadow(0 0 40px rgba(108,211,248,0.4));
}
.auth-logo svg { width: 46px; height: 46px; color: var(--surface-deep); }
.auth-logo-img { width: 112px; height: 112px; }
.auth-hero h1 { font-family: var(--font-display); font-size: 40px; font-weight: 800; }
.auth-hero p { font-family: var(--font-body); color: var(--on-surface-variant); font-size: 16px; text-align: center; }
.auth-row { display: flex; gap: 12px; }
.auth-row .btn { flex: 1; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--on-surface-variant); font-family: var(--font-label); font-size: 13px; margin: 18px 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
.auth-stack { display: flex; flex-direction: column; gap: 12px; }
.auth-foot { text-align: center; margin-top: 22px; font-family: var(--font-body); font-size: 14px; color: var(--on-surface-variant); }
.auth-foot a { color: var(--primary-fixed-dim); font-weight: 600; }
.auth-legal { display: flex; justify-content: center; gap: 18px; margin-top: 18px; font-family: var(--font-label); font-size: 12px; color: var(--outline); }

/* ============================================================
   HOME FEED
   ============================================================ */
/* ---- header: big "LIVE" title + search/chat/lang ---- */
.home-header {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 56px var(--margin-mobile) 4px;
}
.hh-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: 1px; color: #fff; }
.hh-actions { display: flex; align-items: center; gap: 4px; }
.hh-icon {
  position: relative;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius-full); color: var(--on-surface);
  transition: transform var(--dur-fast);
}
.hh-icon:active { transform: scale(1.08); }
.hh-icon svg { width: 24px; height: 24px; }
.hh-badge {
  position: absolute; top: 0; inset-inline-end: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--live); color: #fff;
  font-family: var(--font-label); font-size: 10px; font-weight: 700;
  border-radius: var(--radius-full); display: grid; place-items: center;
  border: 1.5px solid var(--surface-deep);
}

/* ---- feed tabs (5, scrollable, short centered underline) ---- */
.feed-tabs { display: flex; gap: 24px; padding: 4px var(--margin-mobile) 10px; overflow-x: auto; }
.feed-tab {
  position: relative; flex: 0 0 auto; padding: 4px 0;
  font-family: var(--font-headline); font-size: 17px; font-weight: 700;
  color: var(--on-surface-variant); white-space: nowrap;
  transition: color var(--dur-fast);
}
.feed-tab.active { color: #fff; }
.feed-tab.active::after {
  content: ""; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: var(--radius-full);
  background: var(--primary-fixed-dim); box-shadow: 0 0 8px var(--primary-fixed-dim);
}

/* ============================================================
   FEATURED CAROUSEL (PK battles + single lives)
   ============================================================ */
.featured { position: relative; padding: 4px var(--margin-mobile) 0; }
.feat-track {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
}
.feat-slide {
  flex: 0 0 100%; min-width: 100%; scroll-snap-align: center;
  border-radius: 18px; overflow: hidden;
  background: var(--surface-container-low);
  border: 1px solid var(--glass-border);
}

/* PK score bar (fixed physical L/R regardless of language) */
.pk-scorebar { position: relative; display: flex; height: 30px; direction: ltr;
  font-family: var(--font-display); font-weight: 800; color: #fff; }
.pk-score { flex: 1; display: flex; align-items: center; padding: 0 16px; font-size: 16px; }
.pk-score.s-left { background: linear-gradient(90deg, #5a2d8e, #3a1d6e); }
.pk-score.s-right { background: linear-gradient(90deg, #a8327d, var(--tertiary-container)); justify-content: flex-end; color: #2d1600; }
.pk-bolt {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-deep); border: 1px solid var(--glass-border-strong);
  display: grid; place-items: center;
}
.pk-bolt svg { width: 15px; height: 15px; color: var(--primary-fixed-dim); fill: var(--primary-fixed-dim); stroke: none; }

.pk-panels { position: relative; display: flex; gap: 3px; height: 264px; direction: ltr; }
.pk-panel { flex: 1; position: relative; display: grid; place-items: center; overflow: hidden; }
.pk-emoji { font-size: 78px; opacity: 0.85; }
.pk-win {
  position: absolute; top: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(7,0,41,0.55); backdrop-filter: blur(6px);
  border-radius: var(--radius-full); padding: 3px 10px;
  font-family: var(--font-label); font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 0.5px;
}
.pk-win b { color: var(--tertiary-fixed-dim); }
.pk-win.w-left { left: 10px; }
.pk-win.w-right { right: 10px; }
.pk-interact {
  position: absolute; bottom: 10px; right: 10px;
  background: var(--tertiary-container); color: var(--on-tertiary-container);
  border-radius: var(--radius-full); padding: 4px 11px;
  font-family: var(--font-label); font-size: 11px; font-weight: 700;
}
.pk-timer {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(7,0,41,0.6); backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-full); padding: 4px 13px;
  font-family: var(--font-label); font-size: 12px; font-weight: 700; color: #fff;
}
.pk-timer .chev { color: var(--primary-fixed-dim); }

.feat-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.feat-foot.over {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(7,0,41,0.9), transparent);
  padding-top: 26px;
}
.feat-name { font-family: var(--font-headline); font-weight: 700; font-size: 15px; color: #fff; }
.feat-host { width: 30px; height: 30px; font-size: 13px; }
.feat-mute {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(7,0,41,0.5); border: 1px solid var(--glass-border);
}
.feat-mute svg { width: 18px; height: 18px; color: #fff; }
.feat-avatars { display: flex; justify-content: space-between; padding: 2px 16px 14px; }
.avatar.feat-av { width: 40px; height: 40px; font-size: 15px; border: 2px solid var(--surface-container-low); }

/* single live preview slide */
.feat-single { position: relative; display: grid; place-items: center; }
.feat-bg-emoji { font-size: 120px; opacity: 0.4; }
.feat-top { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; gap: 8px; align-items: center; }
.feat-enter {
  position: absolute; left: 0; right: 0; bottom: 70px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.enter-live {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 28px; border-radius: var(--radius-full);
  background: rgba(7,0,41,0.5); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border-strong);
  font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #fff;
  transition: transform var(--dur-fast);
}
.enter-live:active { transform: scale(0.97); }
.enter-live .chevs { color: var(--primary-fixed-dim); letter-spacing: -1px; }
.enter-cancel { font-family: var(--font-body); font-size: 15px; color: var(--on-surface-variant); }

/* carousel dots */
.feat-dots { display: flex; justify-content: center; gap: 5px; padding: 12px 0 2px; }
.feat-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.25); transition: all var(--dur-fast); }
.feat-dot.active { width: 18px; border-radius: var(--radius-full); background: var(--primary-fixed-dim); }

/* ============================================================
   LIVE GRID (2-column thumbnails)
   ============================================================ */
.live-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px var(--margin-mobile) 88px;
}
.lg-tile {
  position: relative; aspect-ratio: 3/3.5; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center;
}
.lg-emoji { font-size: 50px; opacity: 0.55; }
.lg-live { position: absolute; top: 8px; inset-inline-end: 8px; }
.lg-badge {
  position: absolute; top: 8px; inset-inline-start: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--tertiary-container); color: var(--on-tertiary-container);
  border-radius: var(--radius-full); padding: 3px 9px;
  font-family: var(--font-label); font-size: 11px; font-weight: 700;
}
.lg-badge svg { width: 13px; height: 13px; }
.lg-tag { position: absolute; bottom: 42px; inset-inline-end: 8px; font-family: var(--font-label); font-size: 10px; color: rgba(255,255,255,0.7); }
.lg-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 20px 10px 8px;
  background: linear-gradient(to top, rgba(7,0,41,0.9), transparent);
}
.lg-user { display: flex; align-items: center; gap: 5px; font-family: var(--font-label); font-size: 11px; color: #fff; overflow: hidden; }
.lg-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar.lg-av { width: 20px; height: 20px; font-size: 9px; flex-shrink: 0; }
.lg-views { display: flex; align-items: center; gap: 3px; font-family: var(--font-label); font-size: 11px; color: #fff; flex-shrink: 0; }
.lg-views svg { width: 13px; height: 13px; }

/* ============================================================
   FOLLOWING TAB (recommendations + creator cards)
   ============================================================ */
.rec-quote {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px var(--margin-mobile) 6px;
  font-family: var(--font-body); font-size: 14px; color: var(--on-surface-variant);
}
.rec-quote .q { color: var(--primary-fixed-dim); font-size: 22px; line-height: 0; opacity: 0.55; align-self: flex-start; margin-top: 8px; }

.follow-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 8px var(--margin-mobile) 88px;
}
.fl-card {
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  background: var(--surface-container-low);
  border: 1px solid var(--glass-border);
}
.fl-media { position: relative; aspect-ratio: 1/1; display: grid; place-items: center; }
.fl-emoji { font-size: 56px; opacity: 0.55; }
.fl-live { position: absolute; top: 8px; inset-inline-start: 8px; }
.fl-info { padding: 9px 11px 2px; }
.fl-name {
  font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fl-followers { font-family: var(--font-label); font-size: 12px; color: var(--on-surface-variant); margin-top: 3px; }
.fl-follow {
  height: 40px; margin: 9px 11px 11px; border-radius: var(--radius-full);
  font-size: 14px; gap: 5px;
}
.fl-follow svg { width: 18px; height: 18px; }

/* ============================================================
   ENTERTAINMENT TAB (rich live-room grid)
   ============================================================ */
.ent-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px var(--margin-mobile) 88px;
}
/* Games tab: masonry via two fixed columns (positions stay physical, only text mirrors) */
.game-grid { display: flex; gap: 10px; direction: ltr; padding: 10px var(--margin-mobile) 88px; }
.gm-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
[dir="rtl"] .ent-info { direction: rtl; }

.ent-card { position: relative; border-radius: 14px; overflow: hidden; }
.ent-media { position: relative; aspect-ratio: 3/3.9; display: grid; place-items: center; overflow: hidden; }
.ent-emoji { font-size: 64px; opacity: 0.6; }

/* PK split + stacked dual-cam + multi-guest mosaic placeholders */
.ent-pksplit { position: absolute; inset: 0; display: flex; gap: 2px; direction: ltr; }
.ent-pksplit span { flex: 1; display: grid; place-items: center; font-size: 42px; opacity: 0.85; }
.ent-stack { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 2px; }
.ent-stack span { flex: 1; display: grid; place-items: center; font-size: 40px; opacity: 0.85; }

/* audio (voice) rooms: dark stage + centered speaker circle */
.ent-card.voice .ent-media,
.ent-card.voicepk .ent-media { background: radial-gradient(120% 90% at 50% 36%, #201747, #08041e); }
.aud-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.aud-pk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; direction: ltr; background: linear-gradient(90deg, #4a2d6e, #241a4a); }
.aud-circle {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-size: 40px; color: #fff;
  background-size: cover; border: 2px solid rgba(255,255,255,0.22);
}
.aud-circle.ring {
  border: 3px solid var(--primary-fixed-dim);
  box-shadow: 0 0 0 4px rgba(108,211,248,0.16), 0 0 22px rgba(108,211,248,0.5);
}
.aud-pk .aud-circle { width: 74px; height: 74px; font-size: 30px; }
.ent-mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; }
.ent-mosaic span { border-radius: 5px; display: grid; place-items: center; font-size: 13px; }

/* overlay badge clusters (fixed physical sides) */
.ent-tl { position: absolute; top: 8px; left: 8px; display: flex; gap: 5px; z-index: 2; direction: ltr; }
.ent-tr { position: absolute; top: 8px; right: 8px; display: flex; gap: 5px; z-index: 2; direction: ltr; }
.ent-pop {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--tertiary-container); color: var(--on-tertiary-container);
  border-radius: var(--radius); padding: 3px 8px;
  font-family: var(--font-label); font-size: 11px; font-weight: 700;
}
.ent-pop svg { width: 13px; height: 13px; }
.ent-icn {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: 14px;
  background: rgba(7,0,41,0.5); backdrop-filter: blur(6px);
  border: 1px solid var(--glass-border);
}
.ent-icn svg { width: 16px; height: 16px; color: #fff; }
.ent-pk {
  display: grid; place-items: center; height: 26px; padding: 0 9px;
  border-radius: 8px; background: var(--primary-container); color: var(--on-primary);
  font-family: var(--font-headline); font-weight: 800; font-size: 12px; letter-spacing: 0.5px;
}
.ent-top6 {
  display: grid; place-items: center; height: 26px; padding: 0 9px;
  border-radius: 8px; background: linear-gradient(135deg, #ff7a18, #ff3b5c); color: #fff;
  font-family: var(--font-headline); font-weight: 800; font-size: 11px;
}
.ent-interact {
  position: absolute; right: 8px; bottom: 64px; z-index: 2;
  background: var(--tertiary-container); color: var(--on-tertiary-container);
  border-radius: var(--radius-full); padding: 4px 11px;
  font-family: var(--font-label); font-size: 11px; font-weight: 700;
}
.ent-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 11px 10px;
  background: linear-gradient(to top, rgba(7,0,41,0.95), rgba(7,0,41,0.55) 55%, transparent);
}
.ent-name { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: #fff; display: flex; align-items: center; gap: 4px; }
.ent-name .verified { width: 14px; height: 14px; }
.ent-rank { font-family: var(--font-label); font-size: 9px; font-weight: 700; color: var(--primary-fixed-dim); align-self: flex-start; margin-top: 1px; }
.ent-status { font-family: var(--font-label); font-size: 11px; color: var(--on-surface-variant); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-likes { display: flex; align-items: center; gap: 16px; margin-top: 7px; font-family: var(--font-label); font-size: 13px; color: #fff; }
.ent-likes .stat { display: inline-flex; align-items: center; gap: 5px; }
.ent-likes svg { width: 18px; height: 18px; }
.ent-views svg { width: 17px; height: 17px; color: var(--on-surface-variant); }

/* ============================================================
   VIDEO (full-screen vertical feed)
   ============================================================ */
#screen-video { background: #000; }
.video-stage { position: absolute; inset: 0; }
.video-feed { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.video-feed::-webkit-scrollbar { display: none; }
.video-card {
  position: relative; height: 100%; scroll-snap-align: start;
  display: grid; place-items: center; overflow: hidden;
}
.vid-bg-emoji { font-size: 140px; opacity: 0.4; }
.video-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(7,0,41,0.85) 0%, transparent 28%),
              linear-gradient(to bottom, rgba(7,0,41,0.6) 0%, transparent 22%);
}

/* engagement rail — physical left in RTL, right in LTR */
.vid-rail {
  position: absolute; inset-inline-end: 10px; bottom: 96px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.vid-author { position: relative; margin-bottom: 6px; }
.avatar.vid-av { width: 46px; height: 46px; font-size: 18px; border: 2px solid #fff; }
.vid-plus {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary-container); color: var(--on-primary);
  display: grid; place-items: center; border: 2px solid var(--surface-deep);
}
.vid-plus svg { width: 13px; height: 13px; stroke-width: 3; }
.vid-act { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; }
.vid-act svg { width: 32px; height: 32px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.vid-act .n { font-family: var(--font-label); font-size: 12px; font-weight: 600; }
.vid-act.liked svg { fill: var(--live); stroke: var(--live); }
.vid-support .j {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--gold), #c79200); color: #4a2800;
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
}
.vid-disc {
  width: 46px; height: 46px; border-radius: 50%; margin-top: 4px; padding: 0;
  display: grid; place-items: center;
  background: radial-gradient(circle, #2a2a32 38%, #050509 40%);
  border: 1px solid rgba(255,255,255,0.15);
  animation: spin 4s linear infinite;
}
.avatar.vid-disc-av { width: 22px; height: 22px; font-size: 11px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* caption — bottom start */
.vid-caption {
  position: absolute; inset-inline-start: 16px; bottom: 96px; z-index: 3;
  width: 66%;
}
.vid-user { font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #fff; }
.vid-text { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: #fff; margin-top: 6px; }
.vid-more { color: var(--on-surface-variant); }

/* chrome overlay (title + tabs) */
.video-chrome { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.video-chrome .home-header { padding-bottom: 0; }
.video-tabs { display: flex; gap: 22px; padding: 6px var(--margin-mobile) 10px; }
.vtab {
  position: relative; padding: 4px 0;
  font-family: var(--font-headline); font-size: 17px; font-weight: 700;
  color: rgba(255,255,255,0.55);
}
.vtab.active { color: #fff; }
.vtab.active::after {
  content: ""; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: var(--radius-full);
  background: var(--primary-fixed-dim); box-shadow: 0 0 8px var(--primary-fixed-dim);
}

/* empty state (Following) */
.video-empty {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding-bottom: 40px;
}
.ve-icon { color: var(--primary-fixed-dim); opacity: 0.8; }
.ve-icon svg { width: 76px; height: 76px; stroke-width: 1.6; }
.ve-text { font-family: var(--font-body); font-size: 15px; color: var(--on-surface-variant); }
.ve-btn { height: 50px; padding: 0 30px; margin-top: 6px; }

/* ============================================================
   LIVE ROOM
   ============================================================ */
/* fixed physical layout (LTR) — only text mirrors; matches the real PK room */
#screen-live { background: linear-gradient(180deg, #1a0c3e, #0a0420); direction: ltr; }
@keyframes comment-in { from { opacity: 0; transform: translateY(12px); } }

/* header */
.lr-header { padding: 52px 12px 8px; }
.lr-head-row { display: flex; align-items: center; gap: 8px; }
.lr-streamer {
  display: flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--glass-border);
  border-radius: var(--radius-full); padding: 4px 5px 4px 8px;
}
.avatar.lr-host-av { width: 30px; height: 30px; font-size: 12px; }
.lr-host-meta { display: flex; flex-direction: column; line-height: 1.1; }
.lr-host-meta .r1 { display: flex; align-items: center; gap: 3px; }
.lr-host-meta .nm { font-family: var(--font-headline); font-weight: 700; font-size: 12px; color: #fff; }
.lr-host-meta .verified { width: 12px; height: 12px; }
.lr-host-meta .fol { font-family: var(--font-label); font-size: 10px; color: var(--on-surface-variant); }
.lr-follow {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-container); color: var(--on-primary);
}
.lr-follow svg { width: 16px; height: 16px; stroke-width: 3; }
.lr-follow.following { background: var(--surface-glass); color: var(--on-surface); }
.lr-viewers { display: flex; align-items: center; gap: 6px; }
.lr-vrow { display: flex; }
.lr-vav { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; border: 1.5px solid #1a0c3e; margin-inline-start: -8px; }
.lr-vav:first-child { margin-inline-start: 0; }
.lr-count { font-family: var(--font-label); font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.4); border-radius: var(--radius-full); padding: 4px 12px; }
.lr-close { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; }
.lr-close svg { width: 22px; height: 22px; }

.lr-head-row2 { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.lr-rankpills { display: flex; gap: 8px; }
.lr-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,0.35); border-radius: var(--radius-full); padding: 4px 10px;
  font-family: var(--font-label); font-size: 11px; font-weight: 700; color: #fff;
}
.lr-promo {
  height: 30px; padding: 0 12px; border-radius: 8px;
  background: linear-gradient(135deg, #3a2c12, #15100a); border: 1px solid rgba(245,215,110,0.4);
  display: grid; place-items: center;
}
.lr-promo-logo { font-family: var(--font-display); font-weight: 800; font-size: 12px; background: linear-gradient(180deg,#ffe9a8,#c9962e); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* PK team score bar */
.lr-scorebar {
  position: relative; display: flex; align-items: center; height: 26px; margin-top: 8px;
  font-family: var(--font-display); font-weight: 800; color: #fff;
}
.lr-score { flex: 1; display: flex; align-items: center; padding: 0 14px; font-size: 16px; }
.lr-score.l { background: linear-gradient(90deg, #7c3aed, #b14ad0); }
.lr-score.r { background: linear-gradient(90deg, #e0922d, #f5b53a); justify-content: flex-end; }
.lr-rocket { position: absolute; left: 50%; transform: translateX(-50%); width: 40px; height: 22px; display: grid; place-items: center; background: linear-gradient(90deg,#b14ad0,#e0922d); border-radius: var(--radius-full); }
.lr-rocket svg { width: 20px; height: 14px; color: #fff; fill: #fff; }

/* 2x2 PK video grid */
.lr-pkgrid {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  aspect-ratio: 1/1.02; background: #000;
}
.lr-cell { position: relative; display: grid; place-items: center; overflow: hidden; }
.lr-cell-emoji { font-size: 60px; opacity: 0.8; }
.lr-cell-mute { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.4); display: grid; place-items: center; }
.lr-cell-mute svg { width: 15px; height: 15px; color: #fff; }
.lr-cell-gifts { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.45); border-radius: var(--radius-full); padding: 2px 8px; font-family: var(--font-label); font-size: 11px; font-weight: 700; color: #fff; }
.lr-cell-name { position: absolute; bottom: 8px; right: 8px; font-family: var(--font-label); font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.lr-pktimer {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 3;
  background: rgba(20,10,40,0.7); backdrop-filter: blur(6px); border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-full); padding: 4px 12px;
  font-family: var(--font-label); font-size: 12px; font-weight: 700; color: #fff;
}
.lr-pktimer b { color: var(--secondary-fixed-dim); }

/* mid bar: supporters + gift goal */
.lr-midbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.lr-sup { display: flex; flex: 1; }
.lr-sup:last-child { justify-content: flex-end; }
.lr-supav { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; border: 1.5px solid #1a0c3e; margin-inline-start: -8px; }
.lr-sup .lr-supav:first-child { margin-inline-start: 0; }
.lr-supav .rk { position: absolute; bottom: -2px; inset-inline-end: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--primary-container); color: var(--on-primary); font-family: var(--font-label); font-size: 9px; font-weight: 700; display: grid; place-items: center; border: 1.5px solid #1a0c3e; }
.lr-giftgoal {
  display: flex; align-items: center; gap: 7px;
  background: rgba(124,58,237,0.35); border: 1px solid rgba(177,74,208,0.5);
  border-radius: var(--radius-full); padding: 6px 14px;
  font-family: var(--font-label); font-size: 12px; font-weight: 700; color: #fff;
}
.lr-giftgoal .gg-ff { display: inline-grid; }
.lr-giftgoal .gg-ff svg { width: 16px; height: 12px; color: var(--secondary-fixed-dim); fill: var(--secondary-fixed-dim); }
.lr-giftgoal .gg-sep { opacity: 0.4; }
.lr-giftgoal .gg-time { color: var(--secondary-fixed-dim); }

/* comments stream */
.lr-comments {
  flex: 1; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 7px;
  padding: 4px 12px; min-height: 60px;
  -webkit-mask-image: linear-gradient(to top, #000 80%, transparent);
  mask-image: linear-gradient(to top, #000 80%, transparent);
}
.lr-comments::-webkit-scrollbar { display: none; }
.lr-cmt {
  align-self: flex-start; max-width: 82%;
  background: rgba(0,0,0,0.3); border-radius: var(--radius-md); padding: 6px 11px;
  animation: comment-in 400ms var(--ease) both;
}
.lr-cmt .u { font-family: var(--font-label); font-size: 12px; font-weight: 700; color: var(--primary-fixed-dim); margin-inline-end: 6px; }
.lr-cmt .u.mod { color: var(--secondary); }
.lr-cmt .u.vip { color: var(--tertiary-fixed-dim); }
.lr-cmt .tx { font-family: var(--font-body); font-size: 13px; color: #fff; }
.lr-cmt.sys { background: rgba(124,58,237,0.18); display: flex; align-items: flex-start; gap: 7px; }
.lr-cmt.sys .ci { color: var(--on-surface-variant); flex-shrink: 0; margin-top: 1px; }
.lr-cmt.sys .ci svg { width: 15px; height: 15px; }
.lr-cmt.sys .tx { color: var(--on-surface-variant); font-size: 12px; }

/* bottom action bar */
.lr-bottombar { display: flex; align-items: center; gap: 8px; padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); }
.lr-sayhi {
  flex: 1; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
  border-radius: var(--radius-full); background: rgba(0,0,0,0.35); border: 1px solid var(--glass-border);
  font-family: var(--font-body); font-size: 14px; color: var(--on-surface-variant);
}
.lr-sayhi .emo { font-size: 16px; }
.lr-bbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; width: 46px; }
.lr-bbtn svg { width: 26px; height: 26px; }
.lr-bbtn .bl { font-family: var(--font-label); font-size: 10px; }
.lr-bbtn .lr-jc { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg,var(--gold),#c79200); color: #4a2800; font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.lr-bbtn .lr-gf { font-size: 24px; }

/* "More" sheet */
.more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; padding: 4px 0; }
.more-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mi-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; }
.mi-icon.dark { background: var(--surface-container-highest); }
.mi-lbl { font-family: var(--font-label); font-size: 11px; color: var(--on-surface-variant); text-align: center; line-height: 1.2; }
.more-divider { height: 1px; background: var(--glass-border); margin: 14px 0; }

/* floating hearts */
.float-heart {
  position: absolute; font-size: 28px; z-index: 35; pointer-events: none;
  animation: float-up 2.4s ease-out forwards;
}
@keyframes float-up {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  15% { opacity: 1; transform: translateY(-20px) scale(1.1); }
  100% { transform: translateY(-260px) scale(0.9) translateX(var(--drift, 20px)); opacity: 0; }
}

/* big gift animation */
.gift-anim {
  position: absolute; inset: 0; z-index: 45; pointer-events: none;
  display: grid; place-items: center;
}
.gift-anim .gift-emoji {
  font-size: 130px;
  animation: gift-jump 2.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes gift-jump {
  0%   { transform: translateY(140px) scale(0.2) rotate(0deg); opacity: 0; }
  14%  { transform: translateY(-34px) scale(1.3) rotate(200deg); opacity: 1; }
  28%  { transform: translateY(14px)  scale(0.95) rotate(360deg); }
  42%  { transform: translateY(-18px) scale(1.08) rotate(540deg); }
  56%  { transform: translateY(6px)   scale(0.98) rotate(680deg); }
  70%  { transform: translateY(0)     scale(1) rotate(720deg); opacity: 1; }
  100% { transform: translateY(-70px) scale(1.12) rotate(720deg); opacity: 0; }
}
.gift-anim .gift-burst { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.gift-anim .gift-spark {
  position: absolute; font-size: 26px; opacity: 0;
  animation: gift-spark 1.3s ease-out forwards;
}
@keyframes gift-spark {
  0%   { transform: translate(0, 0) scale(0.3) rotate(0deg); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.1) rotate(200deg); opacity: 0; }
}
.gift-anim .gift-label {
  position: absolute; bottom: 30%;
  font-family: var(--font-headline); font-weight: 700; font-size: 16px;
  color: var(--gold); text-shadow: 0 0 18px rgba(255,215,0,0.6);
  animation: comment-in 600ms var(--ease) both;
}

/* ============================================================
   DISCOVER (Explore) — long scrollable page
   ============================================================ */
.disc-list { display: flex; flex-direction: column; gap: 16px; padding: 6px var(--margin-mobile) 96px; }
.disc-card { border-radius: var(--radius-xl); border: 1px solid var(--glass-border); overflow: hidden; }

/* section header (title + subtitle, optional View button) */
.disc-head { display: flex; align-items: flex-start; padding: 16px 16px 12px; }
.disc-head.plain { padding: 4px 2px 12px; }
.dh-text .t { font-family: var(--font-headline); font-weight: 800; font-size: 18px; color: #fff; }
.dh-text .d { font-family: var(--font-label); font-size: 12px; color: var(--on-surface-variant); margin-top: 3px; }
.disc-view {
  height: 34px; padding: 0 18px; border-radius: var(--radius-full);
  background: var(--surface-glass); border: 1px solid var(--glass-border-strong);
  font-family: var(--font-headline); font-weight: 700; font-size: 13px; color: var(--on-surface);
  align-self: center;
}
.disc-view.light { background: rgba(255,255,255,0.18); color: #fff; }
.disc-corner {
  position: absolute; top: 12px; inset-inline-end: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
}
.disc-corner.jcoin-lg {
  background: linear-gradient(145deg, var(--gold), #c79200); color: #4a2800;
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  box-shadow: 0 4px 14px rgba(255,215,0,0.4);
}

/* ---- JACO PRIME banner ---- */
.dp-card { border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-container-low); border: 1px solid var(--glass-border); position: relative; }
.dp-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dp-track::-webkit-scrollbar { display: none; }
.dp-slide {
  position: relative; flex: 0 0 100%; min-width: 100%; scroll-snap-align: center;
  height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.dp-slide .dp-logo {
  font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: 1px;
  background: linear-gradient(180deg, #ffe9a8, #c9962e); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 12px rgba(255,200,80,0.3); text-align: center; line-height: 0.95;
}
.dp-slide .dp-logo-sub { font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: var(--tertiary-fixed-dim); margin-top: 6px; }
.dp-tk { position: absolute; font-size: 26px; opacity: 0.85; }
.dp-tk1 { top: 22px; inset-inline-end: 28px; transform: rotate(20deg); }
.dp-tk2 { bottom: 30px; inset-inline-start: 30px; transform: rotate(-15deg); }
.dp-tk3 { top: 40px; inset-inline-start: 50px; transform: rotate(35deg); }
.dp-dots { position: absolute; top: 188px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; z-index: 3; }
.dp-foot { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--surface-container); }
.dp-meta .t { font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #fff; }
.dp-meta .d { font-family: var(--font-label); font-size: 12px; color: var(--on-surface-variant); margin-top: 2px; }

/* ---- ranking rows (shared) ---- */
.disc-card.armies { background: linear-gradient(180deg, #1c1c20, #0c0c10); border-color: rgba(255,255,255,0.06); position: relative; }
.disc-card.creators { background: linear-gradient(180deg, #2a1438, var(--surface-container-low) 60%); position: relative; }
.disc-card.supporters { background: linear-gradient(180deg, #2e2410, var(--surface-container-low) 60%); position: relative; }
.disc-card.creators .disc-head, .disc-card.supporters .disc-head { padding-inline-end: 64px; }

.rk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.rk-num { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--on-surface-variant); width: 22px; text-align: center; }
.rk-num.gold { color: var(--tertiary-fixed-dim); }
.rk-row.first .rk-num { color: var(--gold); }
.avatar.rk-av { width: 42px; height: 42px; font-size: 16px; }
.rk-name { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: #fff; display: flex; align-items: center; gap: 5px; }
.rk-name .verified { width: 15px; height: 15px; }
.rk-val { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: var(--on-surface-variant); display: flex; align-items: center; gap: 4px; }
.rk-val .gem { font-size: 14px; }
.rk-val .jcoin, .lvl .lv { }
.jcoin { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; background: linear-gradient(145deg, var(--gold), #c79200); color: #4a2800; font-family: var(--font-display); font-weight: 800; font-size: 11px; }
.lvl { display: flex; align-items: center; gap: 4px; }
.lvl .lv { background: linear-gradient(135deg, #8b5cf6, #d36cf0); color: #fff; border-radius: var(--radius-full); padding: 2px 7px; font-family: var(--font-label); font-size: 10px; font-weight: 700; }
.lvl .crown { font-size: 13px; }

/* armies row (EXP variant, dark) */
.rk-row.army { border-top-color: rgba(255,255,255,0.04); }
.rk-row.army.first { background: linear-gradient(90deg, rgba(245,215,110,0.16), transparent); }
.rk-emblem { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; border: 1px solid rgba(255,255,255,0.15); }
.rk-exp { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.rk-exp .lbl { font-family: var(--font-label); font-size: 10px; color: var(--on-surface-variant); }
.rk-exp .v { font-family: var(--font-headline); font-weight: 800; font-size: 14px; color: #fff; }

/* ---- hourly trending ---- */
.disc-section { }
.disc-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.disc-filters::-webkit-scrollbar { display: none; }
.disc-chip {
  flex: 0 0 auto; height: 32px; padding: 0 16px; border-radius: var(--radius-full);
  background: var(--surface-container); border: 1px solid var(--glass-border);
  font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); white-space: nowrap;
}
.disc-chip.active { background: var(--primary-container); color: var(--on-primary); border-color: transparent; font-weight: 700; }
.disc-hourly-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.disc-hourly-row::-webkit-scrollbar { display: none; }
.dh-card {
  position: relative; flex: 0 0 56%; aspect-ratio: 3/3.7; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center;
}
.dh-emoji { font-size: 54px; opacity: 0.55; }
.dh-fire {
  position: absolute; top: 8px; inset-inline-start: 8px;
  background: linear-gradient(135deg, #ff7a18, #ff3b5c); color: #fff;
  border-radius: 8px; padding: 3px 8px;
  font-family: var(--font-headline); font-weight: 800; font-size: 12px;
}
.dh-mute {
  position: absolute; top: 8px; inset-inline-end: 8px;
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(7,0,41,0.5); backdrop-filter: blur(6px);
}
.dh-mute svg { width: 15px; height: 15px; color: #fff; }
.dh-info {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 9px;
  background: linear-gradient(to top, rgba(7,0,41,0.92), transparent);
}
.dh-name { font-family: var(--font-headline); font-weight: 700; font-size: 13px; color: #fff; display: flex; align-items: center; gap: 4px; }
.dh-name .verified { width: 13px; height: 13px; }
.dh-status { font-family: var(--font-label); font-size: 11px; color: var(--on-surface-variant); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-like { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-family: var(--font-label); font-size: 12px; color: #fff; }
.dh-like svg { width: 16px; height: 16px; }

/* ---- suggested accounts (floating bubbles) ---- */
.disc-suggested {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(150deg, #2a3a6e, #6e3a5a 55%, #6e5a3a);
  border: 1px solid var(--glass-border);
}
.ds-bubbles { display: flex; flex-direction: column; gap: 14px; padding: 20px 14px 6px; }
.ds-row { display: flex; gap: 10px; align-items: center; }
.ds-row.r1 { padding-inline-start: 34px; }
.ds-row.r2 { padding-inline-start: 14px; }
.ds-bubble {
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.13); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-full); padding: 5px; padding-inline-end: 14px;
}
.avatar.ds-av { width: 38px; height: 38px; font-size: 14px; flex-shrink: 0; }
.ds-meta { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.ds-name { font-family: var(--font-headline); font-weight: 700; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.ds-name .verified { width: 13px; height: 13px; flex-shrink: 0; }
.ds-fol { font-family: var(--font-label); font-size: 10px; color: rgba(255,255,255,0.75); white-space: nowrap; }
.ds-foot { display: flex; align-items: flex-end; gap: 10px; padding: 14px 16px 18px; position: relative; z-index: 2; }
.ds-title { text-align: start; }
.ds-title .t { font-family: var(--font-headline); font-weight: 800; font-size: 18px; color: #fff; }
.ds-title .d { font-family: var(--font-label); font-size: 12px; color: rgba(255,255,255,0.8); margin-top: 2px; }

/* ============================================================
   PROFILE
   ============================================================ */
.pf-cover {
  position: relative; padding: 56px var(--margin-mobile) 18px;
  background: linear-gradient(180deg, #e7d24e 0%, #cdb13f 42%, #6e5e2a 100%);
  overflow: hidden;
}
.pf-topbar { position: relative; z-index: 3; display: flex; align-items: center; gap: 6px; }
.pf-topbar .hh-icon { width: 36px; height: 36px; color: #fff; }
.pf-topbar .hh-icon svg { width: 22px; height: 22px; }
.pf-limited {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
}
.pf-emblem {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px;
  background: linear-gradient(145deg, #ffcf6e, #b9791a); border: 1.5px solid rgba(255,255,255,0.5);
}
.pf-lim-txt { display: flex; flex-direction: column; line-height: 1.05; align-items: stretch; border-radius: 6px; overflow: hidden; }
.pf-lim-txt .t { background: #7c3aed; color: #fff; font-family: var(--font-label); font-size: 9px; font-weight: 700; padding: 2px 7px; text-align: center; }
.pf-lim-txt .d { background: linear-gradient(145deg, #ffcf6e, #d49a2a); color: #4a2800; font-family: var(--font-label); font-size: 8px; font-weight: 700; padding: 1px 7px; text-align: center; }

.pf-mascot { text-align: center; font-size: 150px; line-height: 1; margin: 4px 0 6px; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.3)); }
.pf-id { position: relative; z-index: 2; }
.pf-name { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: #fff; }
.pf-handle { font-family: var(--font-label); font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.pf-row { display: flex; align-items: flex-end; gap: 12px; margin-top: 16px; }
.pf-stats { display: flex; gap: 22px; }
.pf-stat { display: flex; flex-direction: column; align-items: flex-start; text-align: start; }
.pf-stat .n { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #fff; }
.pf-stat .l { font-family: var(--font-label); font-size: 12px; color: rgba(255,255,255,0.7); }
.pf-edit {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 18px; border-radius: var(--radius-full);
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.25);
  font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: #fff;
}
.pf-edit svg { width: 16px; height: 16px; }

/* lower body (dark theme) */
.pf-body { padding: 4px var(--margin-mobile) 96px; background: var(--surface-deep); }
.pf-sec-head { display: flex; align-items: center; gap: 8px; padding: 22px 2px 12px; }
.pf-sec-head .t { font-family: var(--font-headline); font-weight: 800; font-size: 19px; color: #fff; }
.chev-fwd { display: inline-grid; place-items: center; color: var(--on-surface-variant); transform: scaleX(1); }
.chev-fwd svg { width: 20px; height: 20px; }
[dir="ltr"] .chev-fwd { transform: scaleX(-1); }
.pf-sec-head .chev-fwd { margin-inline-start: auto; }

/* LIVE Hub ticket */
.pf-ticket {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-container-low); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); padding: 18px 16px;
  position: relative;
}
.pf-ticket::before, .pf-ticket::after {
  content: ""; position: absolute; inset-inline-end: 30%;
  width: 18px; height: 18px; border-radius: 50%; background: var(--surface-deep);
}
.pf-ticket::before { top: -9px; }
.pf-ticket::after { bottom: -9px; }
.pf-ticket-main { flex: 1; }
.pf-ticket-main .t { font-family: var(--font-headline); font-weight: 700; font-size: 15px; color: #fff; }
.pf-ticket-main .d { font-family: var(--font-label); font-size: 12px; color: var(--on-surface-variant); margin-top: 4px; }
.pf-sched { height: 42px; padding: 0 18px; font-size: 14px; border-radius: var(--radius); flex-shrink: 0; }

/* Next LIVE ticket (after scheduling) */
.pf-ticket-live .pf-golive {
  height: 42px; padding: 0 22px; font-size: 14px; border-radius: var(--radius);
  flex-shrink: 0; color: #fff; font-family: var(--font-headline); font-weight: 700;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.35);
}
.pf-ticket-live .pf-golive:active { filter: brightness(1.06); }

/* LIVE Data stat cards */
.pf-livedata { display: flex; gap: 10px; }
.pf-ld-card {
  flex: 1; background: var(--surface-container-low); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); padding: 14px 12px; min-width: 0;
}
.pf-ld-card .n { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #fff; }
.pf-ld-card .l { font-family: var(--font-label); font-size: 12px; color: var(--on-surface-variant); margin-top: 4px; }

/* Badge Gallery */
.pf-badge {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-container-low); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); padding: 12px 14px; width: 100%;
}
.pf-medal {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: #d8d8e0;
  background: radial-gradient(circle at 38% 32%, #f0f0f5, #8a8a98 70%); border: 2px solid #b8b8c4;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.pf-badge-lbl { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); }
.pf-badge .chev-fwd { margin-inline-start: auto; }

/* Management */
.pf-mgmt { display: flex; gap: 10px; }
.pf-mgmt-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 50px; border-radius: var(--radius-md);
  background: var(--surface-container-low); border: 1px solid var(--glass-border);
  font-family: var(--font-headline); font-weight: 700; font-size: 13px; color: var(--on-surface);
}
.pf-mgmt-btn svg { width: 19px; height: 19px; color: var(--primary-fixed-dim); }

/* content tabs */
.pf-tabs { display: flex; gap: 22px; overflow-x: auto; border-bottom: 1px solid var(--glass-border); margin-top: 22px; scrollbar-width: none; }
.pf-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
  position: relative; flex: 0 0 auto; padding: 12px 2px 14px;
  font-family: var(--font-headline); font-weight: 700; font-size: 15px;
  color: var(--on-surface-variant); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.profile-tab.active { color: #fff; }
.profile-tab.active::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2.5px;
  background: var(--primary-fixed-dim); border-radius: var(--radius-full); box-shadow: 0 0 8px var(--primary-fixed-dim);
}
.profile-tab .lk { display: inline-grid; place-items: center; color: var(--outline); }
.profile-tab .lk svg { width: 13px; height: 13px; }

/* empty state */
.pf-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 70px 0 30px; }
.pf-empty-icon { color: var(--outline); }
.pf-empty-icon svg { width: 64px; height: 64px; stroke-width: 1.6; }
.pf-empty-t { font-family: var(--font-body); font-size: 15px; color: var(--on-surface-variant); }
.pf-empty-btn { height: 48px; padding: 0 26px; }

/* ============================================================
   WALLET
   ============================================================ */
.balance-card {
  margin: 8px var(--margin-mobile) 18px;
  border-radius: var(--radius-xl);
  padding: 24px;
  background: linear-gradient(135deg, #1a73a8, #0e3a5c 70%);
  border: 1px solid var(--glass-border-strong);
  position: relative; overflow: hidden;
}
.balance-card::after {
  content: ""; position: absolute; top: -40px; inset-inline-end: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(108,211,248,0.4), transparent 70%);
}
.balance-card .lbl { font-family: var(--font-label); font-size: 13px; color: var(--primary); opacity: 0.9; }
.balance-card .amount { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: #fff; margin-top: 6px; display: flex; align-items: baseline; gap: 8px; }
.balance-card .amount .coin { font-size: 28px; }
.balance-card .approx { font-family: var(--font-label); font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 4px; }
.wallet-actions { display: flex; gap: 12px; padding: 0 var(--margin-mobile) 20px; }
.wallet-tabs { display: flex; gap: 8px; padding: 0 var(--margin-mobile) 14px; }
.wallet-tab { flex: 1; height: 38px; border-radius: var(--radius-full); display: grid; place-items: center; font-family: var(--font-headline); font-weight: 700; font-size: 13px; background: var(--surface-container-low); color: var(--on-surface-variant); border: 1px solid var(--glass-border); }
.wallet-tab.active { background: var(--primary-container); color: var(--on-primary); border-color: transparent; }
.tx-list { padding: 0 var(--margin-mobile) 110px; display: flex; flex-direction: column; gap: 10px; }
.tx-item { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-md); background: var(--surface-container-low); border: 1px solid var(--glass-border); }
.tx-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; }
.tx-icon.in { background: rgba(143,226,45,0.16); color: var(--secondary); }
.tx-icon.out { background: rgba(255,180,171,0.16); color: var(--error); }
.tx-meta { flex: 1; }
.tx-meta .t { font-family: var(--font-headline); font-weight: 700; font-size: 14px; }
.tx-meta .d { font-family: var(--font-label); font-size: 12px; color: var(--on-surface-variant); }
.tx-amt { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.tx-amt.in { color: var(--secondary); }
.tx-amt.out { color: var(--error); }

/* ============================================================
   Bottom sheet (Create / Gifts / Comments)
   ============================================================ */
.sheet-scrim {
  position: absolute; inset: 0; z-index: 80;
  background: rgba(3,0,20,0.55);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.sheet-scrim.open { opacity: 1; visibility: visible; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(20,10,70,0.92);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
  max-height: 78%;
  overflow-y: auto;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(108,211,248,0.06);
}
.sheet-scrim.open .sheet { transform: translateY(0); }
.sheet-grip { width: 40px; height: 4px; border-radius: var(--radius-full); background: rgba(255,255,255,0.25); margin: 0 auto 16px; }
.sheet-title { font-family: var(--font-headline); font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 16px; }

.sheet-option { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius-md); background: var(--surface-container); border: 1px solid var(--glass-border); margin-bottom: 10px; transition: transform var(--dur-fast); }
.sheet-option:active { transform: scale(0.98); }
.sheet-option .so-icon { width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center; font-size: 20px; background: var(--surface-container-highest); }
.sheet-option .so-text .t { font-family: var(--font-headline); font-weight: 700; font-size: 15px; }
.sheet-option .so-text .d { font-family: var(--font-label); font-size: 12px; color: var(--on-surface-variant); }

/* Language picker — iOS-style action sheet */
.action-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 8px calc(10px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}
.sheet-scrim.open .action-sheet { transform: translateY(0); }
.as-group {
  background: rgba(20,10,70,0.92);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 8px;
}
.as-btn {
  display: block; width: 100%;
  padding: 18px;
  font-family: var(--font-headline); font-size: 17px; font-weight: 600;
  color: #fff; text-align: center;
  transition: background var(--dur-fast);
}
.as-group .as-btn + .as-btn { border-top: 1px solid var(--glass-border); }
.as-btn:active { background: var(--surface-container); }
.as-cancel {
  background: rgba(20,10,70,0.92);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  font-weight: 700;
}

/* ---- Schedule a LIVE sheet ---- */
.sheet-sched { max-height: 86%; }
.wheel-wrap { position: relative; height: 200px; margin: 4px 0 18px; }
.wheel-band {
  position: absolute; left: 0; right: 0; top: 80px; height: 40px;
  background: rgba(255,255,255,0.07); border-radius: var(--radius);
  pointer-events: none; z-index: 0;
}
.sched-wheels { position: relative; z-index: 1; display: flex; height: 100%; direction: ltr; }
.wheel-col {
  flex: 1; height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory;
  text-align: center; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}
.wheel-col::-webkit-scrollbar { display: none; }
.wheel-pad { height: 80px; }
.wheel-item {
  height: 40px; line-height: 40px; scroll-snap-align: center;
  font-family: var(--font-headline); font-size: 17px; font-weight: 600;
  color: var(--on-surface-variant); opacity: 0.6; transition: color var(--dur-fast), opacity var(--dur-fast);
  cursor: pointer; white-space: nowrap;
}
.wheel-item.sel { color: #fff; opacity: 1; font-weight: 800; }

.sched-info {
  list-style: none; background: var(--surface-container-low); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); padding: 14px 16px; margin: 0 0 16px;
}
.sched-info li {
  position: relative; padding-inline-start: 16px; margin: 6px 0;
  font-family: var(--font-label); font-size: 12.5px; line-height: 1.5; color: var(--on-surface-variant);
}
.sched-info li::before { content: "•"; position: absolute; inset-inline-start: 2px; color: var(--on-surface-variant); }

.sched-cta {
  height: 52px; color: #fff; font-size: 16px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 8px 26px rgba(124, 58, 237, 0.4);
}
.sched-cta:active { filter: brightness(1.06); }

/* gift grid */
.gift-balance { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface-container); margin-bottom: 16px; }
.gift-balance .b { font-family: var(--font-headline); font-weight: 700; }
.gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gift-item { text-align: center; padding: 12px 4px; border-radius: var(--radius-md); background: var(--surface-container); border: 1px solid var(--glass-border); transition: all var(--dur-fast); }
.gift-item.selected { border-color: var(--primary-fixed-dim); background: rgba(108,211,248,0.12); transform: translateY(-2px); }
.gift-item .g-emoji { font-size: 32px; }
.gift-item .g-name { font-family: var(--font-label); font-size: 10px; margin-top: 4px; color: var(--on-surface-variant); }
.gift-item .g-price { font-family: var(--font-headline); font-size: 12px; font-weight: 700; color: var(--gold); margin-top: 2px; }
.gift-item.legendary { background: linear-gradient(135deg, rgba(255,215,0,0.14), var(--surface-container)); }

/* comments sheet */
.comment-row { display: flex; gap: 10px; padding: 10px 0; align-items: flex-start; }
.comment-row .avatar { width: 36px; height: 36px; font-size: 13px; }
.comment-row .c-body .c-u { font-family: var(--font-label); font-size: 12px; font-weight: 700; }
.comment-row .c-body .c-tx { font-family: var(--font-body); font-size: 14px; }
.comment-row .c-body .c-time { font-family: var(--font-label); font-size: 11px; color: var(--outline); margin-top: 2px; }
.comment-row .c-like { margin-inline-start: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--on-surface-variant); font-family: var(--font-label); font-size: 11px; }
.comment-row .c-like svg { width: 18px; height: 18px; }

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 90;
  padding: 12px 20px; border-radius: var(--radius-full);
  background: rgba(20,10,70,0.95); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border-strong);
  font-family: var(--font-body); font-size: 14px; color: #fff;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ============================================================
   Language toggle button
   ============================================================ */
.lang-toggle {
  display: flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 12px; border-radius: var(--radius-full);
  background: var(--surface-glass); border: 1px solid var(--glass-border);
  font-family: var(--font-label); font-size: 12px; font-weight: 700;
  color: var(--primary-fixed-dim);
}
.lang-toggle svg { width: 16px; height: 16px; }

/* ============================================================
   Live Room — rotating header (left pills/announce + right banner)
   ============================================================ */
.lr-leftrot { min-width: 0; overflow: hidden; }
.lr-leftrot.rot-in { animation: rot-slide 420ms var(--ease) both; }
@keyframes rot-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
[dir="ltr"] .lr-leftrot.rot-in { animation-name: rot-slide-ltr; }
@keyframes rot-slide-ltr { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

.lr-announce {
  display: inline-flex; align-items: center; max-width: 220px;
  padding: 5px 12px; border-radius: var(--radius-full);
  background: linear-gradient(90deg, #e0398a, #8b2fd0);
  box-shadow: 0 2px 10px rgba(224,57,138,0.4);
}
.lr-announce .ann-tx {
  font-family: var(--font-label); font-size: 11px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lr-banner { display: flex; }
.lr-banner-rc {
  display: flex; align-items: center; gap: 6px; max-width: 200px;
  height: 34px; padding: 0 12px; border-radius: 8px;
  background: linear-gradient(135deg, #4a2c8e, #7c3aed); border: 1px solid rgba(177,74,208,0.5);
}
.lr-banner-rc .i { font-size: 13px; }
.lr-banner-rc .tx { font-family: var(--font-label); font-size: 10px; font-weight: 600; color: #fff; line-height: 1.15; }
.lr-banner-rc .tx b { color: var(--gold); }
.lr-banner-arena {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px; border-radius: 8px;
  background: linear-gradient(135deg, #241a44, #120d2a); border: 1px solid rgba(245,215,110,0.35);
}
.lr-banner-arena .ar-logo { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--gold); }
.lr-banner-arena .ar-meta { display: flex; flex-direction: column; line-height: 1.05; font-family: var(--font-label); font-size: 9px; color: #fff; }
.lr-banner-arena .ar-meta .t { color: var(--on-surface-variant); }
.lr-banner-arena .ar-meta b { color: var(--gold); }
.lr-banner-arena .ar-time { color: var(--secondary-fixed-dim); }

.lr-bbtn .lr-candy { font-size: 24px; }

/* ============================================================
   Emoji picker (native-style keyboard)
   ============================================================ */
.emoji-scrim { position: absolute; inset: 0; z-index: 70; opacity: 0; visibility: hidden; transition: opacity var(--dur), visibility var(--dur); }
.emoji-scrim.open { opacity: 1; visibility: visible; }
.emoji-panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 75;
  background: #eceef1; color: #1a1a1a;
  transform: translateY(100%); transition: transform var(--dur) var(--ease);
  border-radius: 14px 14px 0 0; overflow: hidden;
}
.emoji-panel.open { transform: translateY(0); }
.emoji-inputbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: #fff; border-bottom: 1px solid #e3e5e8;
}
.emoji-kbd { width: 34px; height: 34px; border-radius: 50%; background: #f0f1f3; display: grid; place-items: center; flex-shrink: 0; }
.emoji-kbd .eg-dots { width: 16px; height: 16px; border-radius: 4px; background:
  radial-gradient(circle, #444 1.2px, transparent 1.4px) 0 0/5.3px 5.3px; }
.emoji-field {
  flex: 1; height: 38px; min-width: 0;
  padding: 0 16px; border-radius: var(--radius-full); background: #f0f1f3;
  font-family: var(--font-body); font-size: 16px; color: #1a1a1a;
  border: none; outline: none;
}
.emoji-field::placeholder { color: #8a8f98; font-size: 15px; }
.emoji-send { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(145deg,#9b5cf6,#7c3aed); display: grid; place-items: center; flex-shrink: 0; }
.emoji-send svg { width: 18px; height: 18px; color: #fff; fill: #fff; }
.emoji-body { padding: 10px 12px 18px; max-height: 280px; overflow-y: auto; }
.emoji-cat { font-family: var(--font-label); font-size: 11px; font-weight: 600; color: #8a8f98; letter-spacing: 0.5px; margin: 4px 4px 8px; }
.emoji-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 2px; }
.emoji-cell { font-size: 28px; line-height: 1; padding: 5px 0; border-radius: 8px; transition: transform var(--dur-fast); }
.emoji-cell:active { transform: scale(1.25); background: #e3e5e8; }

/* ============================================================
   Gift Store (Top-Up Bonus Activity)
   ============================================================ */
.sheet-gs { padding-inline: 14px; }
.jcoin.sm { width: 14px; height: 14px; font-size: 9px; }
.gs-actbar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 2px 12px; }
.gs-shield { font-size: 16px; }
.gs-actt { font-family: var(--font-headline); font-weight: 700; font-size: 15px; color: #fff; }
.gs-actbar .chev-fwd { margin-inline-start: auto; }

.gs-tabsrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.gs-tabs { display: flex; gap: 14px; align-items: center; }
.gs-tab { font-family: var(--font-headline); font-size: 14px; font-weight: 700; color: var(--on-surface-variant); display: inline-flex; align-items: center; gap: 3px; }
.gs-tab.active { color: #fff; }
.gs-sort { font-size: 11px; color: var(--on-surface-variant); }
.gs-coinbtn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 8px; background: var(--surface-container-highest); font-family: var(--font-label); font-size: 11px; font-weight: 600; color: #fff; }
.gs-coinbtn .gs-clock { font-size: 12px; }
.gs-coinbtn.primary { background: linear-gradient(145deg, var(--gold), #c79200); color: #4a2800; }
.gs-coinbtn.primary .jcoin { background: #fff; }

.gs-unlock {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; margin-bottom: 14px; border-radius: var(--radius-md);
  background: linear-gradient(100deg, #5a2db0, #7c3aed); border: 1px solid rgba(177,74,208,0.5);
}
.gs-unlock .gsu-emoji { font-size: 20px; }
.gs-unlock .gsu-text { display: flex; flex-direction: column; line-height: 1.25; text-align: start; }
.gs-unlock .gsu-text .t { font-family: var(--font-headline); font-weight: 700; font-size: 13px; color: #fff; }
.gs-unlock .gsu-text .d { font-family: var(--font-label); font-size: 11px; color: rgba(255,255,255,0.8); }
.gs-unlock .gsu-text .d b { color: var(--gold); }
.gs-unlock .chev-fwd { margin-inline-start: auto; color: rgba(255,255,255,0.8); }

.gs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gs-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 4px 10px; border-radius: var(--radius-md);
  background: var(--surface-container); border: 1px solid var(--glass-border);
  transition: transform var(--dur-fast);
}
.gs-cell:active { transform: scale(0.96); }
.gs-cell.glow { background: radial-gradient(circle at 50% 38%, rgba(108,211,248,0.25), var(--surface-container)); }
.gs-cell .gsc-emoji { font-size: 30px; }
.gs-cell .gsc-name { font-family: var(--font-label); font-size: 10px; color: var(--on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gs-cell .gsc-price { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-label); font-size: 11px; font-weight: 700; color: var(--gold); }
.gs-promo {
  background: linear-gradient(160deg, #8b5cf6, #5a2db0);
  border-color: rgba(177,74,208,0.6); justify-content: center; gap: 4px;
}
.gs-promo .gsp-coins { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--gold); text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.gs-promo .gsp-free { font-family: var(--font-label); font-size: 9px; font-weight: 600; color: #fff; }
.gs-promo .gsp-claim { margin-top: 3px; font-family: var(--font-headline); font-size: 11px; font-weight: 700; color: #4a2800; background: var(--gold); border-radius: var(--radius-full); padding: 2px 14px; }

/* ============================================================
   Poll overlay ("In progress")
   ============================================================ */
.poll-tabs { display: flex; gap: 4px; margin: 4px -20px 22px; padding: 0; }
.poll-tab { flex: 1; height: 52px; display: grid; place-items: center; font-family: var(--font-headline); font-weight: 800; font-size: 20px; color: #fff; transform: skewX(-12deg); }
.poll-tab.l { background: linear-gradient(90deg, #7c3aed, #5a2db0); border-radius: 0 0 4px 0; }
.poll-tab.r { background: linear-gradient(90deg, #b8761f, #e0922d); border-radius: 0 0 0 4px; max-width: 70px; }
.poll-tab > * { display: inline-block; transform: skewX(12deg); }
.poll-q { font-family: var(--font-headline); font-weight: 700; font-size: 20px; color: #fff; margin: 0 0 18px; }
.poll-opts { display: flex; flex-direction: column; gap: 14px; }
.poll-opt {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 16px; border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface-container-high); width: 100%;
}
.poll-opt .po-fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: linear-gradient(90deg, rgba(124,58,237,0.55), rgba(124,58,237,0.3)); z-index: 0; }
.poll-opt .po-key { position: relative; z-index: 1; font-family: var(--font-headline); font-weight: 800; font-size: 16px; color: #fff; }
.poll-opt .po-lbl { position: relative; z-index: 1; font-family: var(--font-body); font-size: 16px; color: #fff; }
.poll-opt .po-pct { position: relative; z-index: 1; margin-inline-start: auto; font-family: var(--font-headline); font-weight: 800; font-size: 16px; color: #fff; }

/* ============================================================
   Recharge / First Top-up
   ============================================================ */
.rc-hero { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.rc-htext { flex: 1; }
.rc-title { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.1; color: #fff; }
.rc-desc { font-family: var(--font-body); font-size: 12px; color: var(--on-surface-variant); margin-top: 8px; max-width: 200px; }
.rc-gift { position: relative; width: 110px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.rc-burst { font-family: var(--font-label); font-size: 9px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#8b5cf6,#6d28d9); padding: 5px 10px; border-radius: 50% 50% 50% 0; transform: rotate(-8deg); align-self: flex-end; }
.rc-gift-emoji { font-size: 56px; filter: drop-shadow(0 4px 14px rgba(248,186,127,0.5)); }
.rc-gift-lbl { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-label); font-size: 10px; color: #fff; }
.rc-timer { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 16px; border-radius: var(--radius-md); background: linear-gradient(100deg, rgba(124,58,237,0.3), rgba(90,45,176,0.15)); border: 1px solid rgba(177,74,208,0.4); }
.rc-timer-lbl { font-family: var(--font-label); font-size: 12px; color: #fff; }
.rc-clock { margin-inline-start: auto; font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); }
.rc-clock b { color: var(--gold); font-weight: 800; font-size: 15px; margin-inline-start: 2px; }
.rc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.rc-pkg {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 16px 4px 12px; border-radius: var(--radius-md);
  background: var(--surface-container); border: 1.5px solid var(--glass-border);
}
.rc-pkg.selected { border-color: var(--primary-fixed-dim); background: rgba(108,211,248,0.10); }
.rc-pkg .rc-freebadge { position: absolute; top: -8px; inset-inline-start: 6px; display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-label); font-size: 8px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#8b5cf6,#6d28d9); padding: 3px 7px; border-radius: var(--radius-full); }
.rc-pkg .rc-was { font-family: var(--font-label); font-size: 11px; color: var(--outline); text-decoration: line-through; }
.rc-pkg .rc-coins { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--gold); }
.rc-pkg .rc-eur { font-family: var(--font-label); font-size: 11px; color: var(--on-surface-variant); }
.rc-cta { display: flex; align-items: center; justify-content: center; gap: 4px; }

/* First Purchase Offer */
.fp-title { font-family: var(--font-headline); font-weight: 800; font-size: 19px; color: #fff; text-align: center; margin-bottom: 18px; }
.fp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fp-coins { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.fp-coins .jcoin { width: 30px; height: 30px; font-size: 16px; border: 2px solid rgba(0,0,0,0.25); }
.fp-coins .fp-c2 { margin-inline-start: -12px; }
.fp-coins .fp-spark { position: absolute; top: -4px; inset-inline-end: -4px; font-size: 12px; }
.fp-htext { display: flex; flex-direction: column; line-height: 1.3; }
.fp-htext .t { font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #fff; }
.fp-htext .d { font-family: var(--font-label); font-size: 11px; color: var(--on-surface-variant); }

/* ============================================================
   Revenue & Bounty pages
   ============================================================ */
.app-header.dark { position: relative; justify-content: center; background: var(--surface-deep); }
.app-header.dark .icon-btn { position: absolute; inset-inline-start: var(--margin-mobile); top: 56px; color: #fff; }
.app-header.dark .title { font-size: 18px; }

/* shared empty tray */
.empty-tray { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 64px 30px; text-align: center; }
.empty-tray.big { padding-top: 130px; }
.empty-tray .et-icon { color: #b14ad0; display: inline-grid; }
.empty-tray .et-icon svg { width: 72px; height: 72px; stroke-width: 1.4; }
.empty-tray .et-text { font-family: var(--font-body); font-size: 14px; color: var(--on-surface-variant); max-width: 290px; line-height: 1.6; }

/* Revenue */
.rev-hero {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 22px var(--margin-mobile) 28px;
  background: radial-gradient(130% 130% at 88% 0%, #a64dff, #7c2ae0);
}
.rev-amt { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; color: #fff; }
.rev-dia { font-family: var(--font-label); font-size: 13px; color: rgba(255,255,255,0.88); margin-top: 8px; }
.rev-analysis { font-family: var(--font-label); font-size: 12px; color: var(--gold); margin-top: 8px; }
.rev-withdraw { background: #fff; color: #7c2ae0; border-radius: var(--radius-full); padding: 11px 18px; font-family: var(--font-headline); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.rev-bills { padding: 18px var(--margin-mobile); }
.rev-bills-head { display: flex; align-items: center; }
.rev-bills-head .t { font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #fff; }
.rev-link { font-family: var(--font-label); font-size: 13px; color: var(--primary-fixed-dim); }

/* Bounty */
/* per-tier tint vars (set on #screen-bounty by JS); default = purple */
#screen-bounty { --tier-a: #9b4dff; --tier-b: #7c2ae0; }
#screen-bounty.t-bronze   { --tier-a: #f3d7bf; --tier-b: #e0a87c; }
#screen-bounty.t-silver   { --tier-a: #d6e3f2; --tier-b: #a9bdd6; }
#screen-bounty.t-gold     { --tier-a: #ffe6a3; --tier-b: #e3b154; }
#screen-bounty.t-platinum { --tier-a: #cdb6f4; --tier-b: #9b78ee; }
.bounty-top { background: linear-gradient(160deg, #9b4dff 0%, #7c2ae0 100%); padding: 56px var(--margin-mobile) 18px; transition: background var(--dur) var(--ease); }
#screen-bounty.live-tab .bounty-top { background: linear-gradient(160deg, var(--tier-a) 0%, var(--tier-b) 100%); }
.bounty-topbar { display: flex; align-items: center; gap: 10px; }
.bounty-topbar .icon-btn { color: #fff; }
.bounty-tabs { flex: 1; display: flex; justify-content: center; gap: 24px; }
.bounty-toptab, .bounty-topbar .icon-btn, .bounty-help { text-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.bounty-toptab { font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: rgba(255,255,255,0.6); position: relative; padding-bottom: 5px; }
.bounty-toptab.active { color: #fff; }
.bounty-toptab.active::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 50%; transform: translateX(-50%); width: 22px; height: 2.5px; border-radius: 2px; background: #fff; }
[dir="ltr"] .bounty-toptab.active::after { transform: translateX(50%); }
.bounty-help { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.7); display: grid; place-items: center; font-family: var(--font-headline); font-size: 13px; font-weight: 700; color: #fff; }
.bounty-hero { margin-top: 20px; padding: 20px 18px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.13); text-align: center; }
.bounty-total { font-family: var(--font-label); font-size: 12px; color: rgba(255,255,255,0.85); }
.bounty-amt { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: #fff; margin: 8px 0 4px; }
.bounty-dia { font-family: var(--font-label); font-size: 12px; color: rgba(255,255,255,0.88); }
.bounty-subtabs { display: flex; background: var(--surface-deep); border-bottom: 1px solid var(--glass-border); }
.bounty-subtab { flex: 1; padding: 16px 0; font-family: var(--font-headline); font-weight: 700; font-size: 15px; color: var(--on-surface-variant); position: relative; }
.bounty-subtab.active { color: #fff; }
.bounty-subtab.active::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 50%; transform: translateX(-50%); width: 44px; height: 2.5px; border-radius: 2px; background: #fff; }
[dir="ltr"] .bounty-subtab.active::after { transform: translateX(50%); }
.bounty-hero[hidden], .bounty-subtabs[hidden] { display: none; }

/* LIVE Bounty — tier carousel */
.bt-top { background: linear-gradient(180deg, var(--tier-b) 0%, var(--tier-a) 100%); padding-bottom: 4px; transition: background var(--dur) var(--ease); }
.bt-carousel { overflow: hidden; padding-top: 8px; }
.bt-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bt-track::-webkit-scrollbar { display: none; }
.bt-slide { flex: 0 0 100%; scroll-snap-align: center; padding: 8px var(--margin-mobile) 0; }
.bt-card {
  position: relative; min-height: 150px; border-radius: var(--radius-lg);
  padding: 22px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.bt-card.t-bronze   { background: linear-gradient(135deg, #f3d0a8 0%, #d49a68 100%); color: #5c3a18; }
.bt-card.t-silver   { background: linear-gradient(135deg, #e2ecf6 0%, #aabdd2 100%); color: #2c3e57; }
.bt-card.t-gold     { background: linear-gradient(135deg, #ffe287 0%, #e0a431 100%); color: #6a4710; }
.bt-card.t-platinum { background: linear-gradient(135deg, #cbb0ff 0%, #8458ee 100%); color: #34206b; }
.bt-badge {
  position: absolute; top: 14px; inset-inline-start: 16px;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-label); font-size: 10px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--radius-full); background: rgba(0,0,0,0.22); color: inherit;
}
.bt-emblem {
  position: absolute; inset-inline-end: 22px; top: 50%; transform: translateY(-50%);
  width: 92px; height: 92px; border-radius: 20px;
  background: linear-gradient(150deg, rgba(255,255,255,0.55), rgba(255,255,255,0.05));
  box-shadow: inset 0 2px 8px rgba(255,255,255,0.5), inset 0 -6px 16px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.2);
}
.bt-emblem::after {
  content: "ﻝ"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 46px; color: rgba(255,255,255,0.65);
}
.bt-name { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; }
.bt-sub { font-family: var(--font-label); font-size: 11px; margin-top: 14px; opacity: 0.85; max-width: 62%; }
.bt-dots { display: flex; justify-content: center; gap: 6px; padding: 12px 0 4px; }

/* benefits — sit on the (light) tier tint, so use dark text */
.bt-benefits { padding: 8px var(--margin-mobile) 20px; min-height: 8px; }
.bt-ben-divider { display: flex; align-items: center; gap: 12px; justify-content: center; color: rgba(30,18,48,0.6); font-family: var(--font-label); font-size: 13px; margin-bottom: 14px; }
.bt-ben-divider::before, .bt-ben-divider::after { content: ""; height: 1px; width: 70px; background: rgba(30,18,48,0.22); }
.bt-ben-row { display: flex; justify-content: center; gap: 40px; }
.bt-ben { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bt-ben-ic { position: relative; width: 52px; height: 52px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: 24px; background: rgba(255,255,255,0.4); box-shadow: inset 0 1px 2px rgba(255,255,255,0.6); }
.bt-ben-pct { position: absolute; top: -10px; inset-inline-end: -16px; background: linear-gradient(135deg,#4a2d8e,#2e1a5e); color: #fff; font-family: var(--font-label); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); }
.bt-ben-lbl { font-family: var(--font-label); font-size: 12px; color: rgba(30,18,48,0.85); }

/* monthly earnings — dark section with rounded top, overlapping the tint */
.bt-earn { position: relative; z-index: 1; margin-top: -14px; padding: 22px var(--margin-mobile) 18px; border-radius: 20px 20px 0 0; background: var(--surface-deep); box-shadow: 0 -8px 24px rgba(0,0,0,0.25); }
.bt-sec-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-headline); font-weight: 700; font-size: 17px; color: #fff; }
.bt-sec-head .bar { width: 4px; height: 18px; border-radius: 2px; background: var(--gold); }
.bt-earn-amt { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--gold); margin-top: 12px; }
.bt-earn-sub { font-family: var(--font-label); font-size: 13px; color: var(--gold); opacity: 0.8; margin-top: 2px; }
.bt-prog-card { margin-top: 16px; padding: 18px 16px 14px; border-radius: var(--radius-md); background: var(--surface-container); border: 1px solid var(--glass-border); }
.bt-prog-msg { font-family: var(--font-body); font-size: 14px; color: #fff; text-align: center; margin-bottom: 18px; }
.bt-prog { position: relative; display: flex; }
.bt-prog::before { content: ""; position: absolute; top: 6px; inset-inline: 12%; height: 2px; background: var(--outline-variant); }
.bt-node { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; }
.bt-pdot { width: 13px; height: 13px; border-radius: 50%; background: var(--outline); border: 2px solid var(--surface-container); }
.bt-node.active .bt-pdot { background: var(--gold); box-shadow: 0 0 0 4px rgba(255,215,0,0.25); }
.bt-pname { font-family: var(--font-label); font-size: 11px; color: var(--on-surface-variant); }
.bt-node.active .bt-pname { color: #fff; }
.bt-pamt { font-family: var(--font-label); font-size: 10px; color: var(--outline); }
.bt-node.active .bt-pamt { color: var(--gold); }
.bt-settle { font-family: var(--font-label); font-size: 11px; color: var(--on-surface-variant); text-align: center; margin-top: 16px; }

/* how to upgrade */
.bt-howto { padding: 6px var(--margin-mobile) 30px; }
.bt-tip { padding: 14px 16px; margin-top: 10px; border-radius: var(--radius-md); background: var(--surface-container); border: 1px solid var(--glass-border); }
.bt-tip-t { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: var(--gold); }
.bt-tip-d { font-family: var(--font-body); font-size: 13px; color: var(--on-surface-variant); margin-top: 6px; line-height: 1.5; }

/* ============================================================
   Edit Profile
   ============================================================ */
.ep-cover { position: relative; height: 270px; background: radial-gradient(120% 100% at 50% 30%, #d4bd4e, #a8923a); display: grid; place-items: center; overflow: hidden; }
.ep-mascot { font-size: 150px; line-height: 1; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.3)); }
.ep-cam { position: absolute; bottom: 16px; inset-inline-end: 16px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.4); display: grid; place-items: center; font-size: 19px; }
.ep-list { background: var(--surface-deep); }
.ep-row { display: flex; align-items: center; width: 100%; padding: 19px var(--margin-mobile); border-bottom: 1px solid var(--glass-border); }
.ep-lbl { margin-inline-end: auto; font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #fff; }
.ep-val { font-family: var(--font-body); font-size: 15px; color: var(--on-surface-variant); }
.ep-row .chev-fwd { margin-inline-start: 8px; color: var(--outline); }
.ep-row .chev-fwd svg { width: 18px; height: 18px; }
.ep-toggle { width: 46px; height: 26px; border-radius: var(--radius-full); background: var(--outline-variant); position: relative; transition: background var(--dur-fast); }
.ep-toggle .knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: inset-inline-start var(--dur-fast); }
.ep-toggle.on { background: linear-gradient(135deg, #b14ad0, #7c3aed); }
.ep-toggle.on .knob { inset-inline-start: 23px; }

/* ============================================================
   Badge Gallery
   ============================================================ */
.badge-top { display: flex; align-items: center; gap: 10px; padding: 56px var(--margin-mobile) 14px; background: linear-gradient(180deg, #2a1a5e, var(--surface-deep)); }
.badge-top .icon-btn { color: #fff; }
.badge-tabs { flex: 1; display: flex; justify-content: center; gap: 26px; }
.badge-tab { font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: rgba(255,255,255,0.55); position: relative; padding-bottom: 6px; }
.badge-tab.active { color: #fff; }
.badge-tab.active::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 50%; transform: translateX(-50%); width: 24px; height: 2.5px; border-radius: 2px; background: #fff; }
[dir="ltr"] .badge-tab.active::after { transform: translateX(50%); }
#screen-badges .scroll { background: var(--surface-deep); }

.badge-sec { padding: 0; }
.badge-sec-title { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); margin: 22px var(--margin-mobile) 34px; }
.badge-grid { display: flex; gap: 12px; overflow-x: auto; padding: 0 var(--margin-mobile) 6px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.badge-grid::-webkit-scrollbar { display: none; }
.badge-card { position: relative; flex: 0 0 100px; margin-top: 26px; padding: 36px 6px 12px; border-radius: var(--radius-md); text-align: center; background: linear-gradient(180deg, #4e2f96 0%, #38216f 100%); scroll-snap-align: start; }
.badge-emblem {
  --em: #f4c430;
  position: absolute; top: -28px; inset-inline-start: 50%; transform: translateX(-50%);
  width: 60px; height: 60px; display: grid; place-items: center; font-size: 28px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--em) 45%, #ffffff), var(--em) 62%, color-mix(in srgb, var(--em) 55%, #000000));
  border: 2px solid color-mix(in srgb, var(--em) 45%, #ffffff);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--em) 55%, transparent), inset 0 2px 7px rgba(255,255,255,0.5), inset 0 -3px 7px rgba(0,0,0,0.25);
}
.badge-lv { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.45); }
.badge-count { font-family: var(--font-label); font-weight: 400; font-size: 12px; color: var(--outline); }
.badge-card { cursor: pointer; }

/* Badge detail sheet */
.sheet-badge { text-align: center; }
.bd-title { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-headline); font-weight: 700; font-size: 18px; color: #fff; margin: 6px 0 26px; }
.bd-laurel { font-size: 18px; opacity: 0.85; }
.bd-laurel.flip { transform: scaleX(-1); }
.bd-flow { display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 140px; margin-bottom: 26px; }
.bd-flow .badge-emblem { position: static; transform: none; top: auto; }
.bd-flow .badge-emblem.center { width: 124px; height: 124px; font-size: 54px; box-shadow: 0 0 50px color-mix(in srgb, var(--em) 70%, transparent), inset 0 3px 10px rgba(255,255,255,0.55), inset 0 -4px 10px rgba(0,0,0,0.25); }
.bd-flow .badge-emblem.center .badge-lv { font-size: 44px; }
.bd-flow .badge-emblem.side { width: 64px; height: 64px; opacity: 0.4; }
.bd-spacer { width: 64px; flex: none; }
.bd-get { font-family: var(--font-body); font-size: 16px; color: #fff; margin-bottom: 8px; }
.bd-status { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); margin-bottom: 22px; }

/* Supporter Level ladder ("Get it now") */
#screen-suplevel .scroll { background: var(--surface-deep); }
.sl-intro { padding: 16px var(--margin-mobile) 8px; }
.sl-top { display: flex; align-items: center; gap: 14px; }
.sl-av { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; background: radial-gradient(circle at 50% 40%, #ffe08a, #f4c430); }
.sl-meta { flex: 1; text-align: start; }
.sl-name { font-family: var(--font-headline); font-weight: 800; font-size: 20px; color: #fff; }
.sl-desc { font-family: var(--font-label); font-size: 12.5px; color: var(--on-surface-variant); line-height: 1.5; margin-top: 4px; }
.sl-getbtn { margin-top: 16px; width: 180px; }
.sl-group { display: flex; align-items: center; gap: 8px; font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #f0e6c8; padding: 22px var(--margin-mobile) 10px; }
.sl-group svg { width: 18px; height: 18px; }
.sl-row { display: flex; align-items: center; gap: 14px; padding: 10px var(--margin-mobile); }
.sl-text { flex: 1; text-align: start; }
.sl-lv { display: flex; align-items: center; gap: 7px; font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #fff; }
.sl-lv svg { width: 15px; height: 15px; color: var(--on-surface-variant); }
.sl-rtitle { font-family: var(--font-body); font-size: 14px; color: #fff; margin-top: 6px; }
.sl-sub { font-family: var(--font-label); font-size: 12px; color: var(--on-surface-variant); line-height: 1.5; margin-top: 4px; }
.sl-vis { flex: none; width: 84px; height: 84px; display: grid; place-items: center; font-size: 46px; }
[dir="ltr"] .badge-emblem { transform: translateX(50%); }
.badge-emblem.sh-coin { border-radius: 50%; }
.badge-emblem.sh-crown { border-radius: 14px 14px 18px 18px; }
.badge-emblem.sh-shield { border-radius: 12px 12px 16px 16px; clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); }
.badge-mult {
  position: absolute; bottom: -4px; inset-inline-start: 50%; transform: translateX(-50%);
  background: #2a2030; color: #fff; font-family: var(--font-label); font-size: 9px; font-weight: 700;
  padding: 1px 7px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.25); white-space: nowrap;
}
[dir="ltr"] .badge-mult { transform: translateX(50%); }
.badge-name { display: block; font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: #f2e3bd; }
.badge-status { display: block; font-family: var(--font-label); font-size: 11px; color: var(--on-surface-variant); margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.12); }

/* ============================================================
   Settings
   ============================================================ */
#screen-settings .scroll,
#screen-general .scroll,
#screen-privacy .scroll,
#screen-blocked-accounts .scroll,
#screen-blocked-keywords .scroll,
#screen-account .scroll,
#screen-username .scroll,
#screen-phone .scroll,
#screen-email .scroll,
#screen-withdraw .scroll,
#screen-delete-account .scroll,
#screen-about .scroll,
#screen-switch-account .scroll { background: var(--surface-deep); }

/* Switch Account */
.sa-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px var(--margin-mobile); }
.sa-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: radial-gradient(circle at 50% 40%, #ffe08a, #f4c430); }
.sa-info { display: flex; flex-direction: column; gap: 2px; text-align: start; }
.sa-name { font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #fff; }
.sa-handle { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); }
.sa-check { flex: none; margin-inline-start: auto; width: 24px; height: 24px; border-radius: 50%; background: #9b3dff; color: #fff; display: grid; place-items: center; font-size: 13px; }
.sa-add { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-container-high); display: grid; place-items: center; color: #fff; }
.sa-add svg { width: 24px; height: 24px; }
.sa-addlbl { font-family: var(--font-headline); font-weight: 600; font-size: 16px; color: #fff; }

/* Add Account auth sheet */
.sheet-auth { text-align: center; }
.sa-logo { display: grid; place-items: center; padding: 22px 0 34px; }
.sa-logo .about-mark { width: 78px; height: 78px; border-radius: 22px 22px 22px 10px; }
.sa-logo .about-mark::after { top: 20px; width: 15px; height: 15px; }
.sa-auth-stack { display: flex; flex-direction: column; gap: 14px; }
.sa-auth-btn { display: flex; align-items: center; justify-content: center; gap: 12px; height: 56px; border-radius: var(--radius-md); background: var(--surface-container); border: 1px solid var(--glass-border); color: #fff; font-family: var(--font-headline); font-weight: 700; font-size: 15px; }
.sa-auth-btn svg { width: 22px; height: 22px; }
.sa-auth-btn .ic-green { color: #3ddc84; }
.sa-auth-btn .ic-blue { color: #4a9eff; }
.sa-auth-foot { padding: 26px 0 0; font-family: var(--font-body); font-size: 14px; color: #fff; }
.sa-auth-foot a { color: #b14ad0; font-weight: 700; }
.sa-auth-legal { padding: 22px 0 8px; font-family: var(--font-label); font-size: 12px; color: var(--on-surface-variant); line-height: 1.7; }
.sa-link { color: #4a9eff; }
[dir="rtl"] .sa-link { color: #b14ad0; }

/* About page */
.about-hero { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 0 34px; }
.about-icon { width: 108px; height: 108px; border-radius: 26px; background: #fff; display: grid; place-items: center; box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
.about-mark { position: relative; width: 62px; height: 62px; border-radius: 18px 18px 18px 8px; background: linear-gradient(115deg, #7c3aed 0 52%, #ff7a1a 52% 100%); }
.about-mark::after { content: ""; position: absolute; top: 16px; inset-inline-start: 13px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.about-name { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: 1px; color: #fff; }
.about-ver { font-family: var(--font-label); font-size: 14px; color: var(--on-surface-variant); }
.set-list { padding: 8px 0 24px; }
.set-group { background: var(--surface-container-low); margin-bottom: 12px; }
.set-row {
  display: flex; align-items: center; width: 100%;
  padding: 19px var(--margin-mobile);
  border-bottom: 1px solid var(--glass-border);
}
.set-group .set-row:last-child { border-bottom: none; }
.set-row:active { background: var(--surface-container); }
.set-lbl { margin-inline-end: auto; font-family: var(--font-headline); font-weight: 600; font-size: 16px; color: #fff; }
.set-val { font-family: var(--font-body); font-size: 14px; color: var(--on-surface-variant); margin-inline-end: 8px; }
.set-row .chev-fwd { color: var(--outline); }
.set-row .chev-fwd svg { width: 18px; height: 18px; }
.set-row.danger .set-lbl { color: var(--live); }
.set-val.blue { color: #3d9bff; }

/* section titles + security note (Account page) */
.set-sec-title { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); padding: 18px var(--margin-mobile) 8px; }
.set-note { display: flex; align-items: flex-start; gap: 8px; padding: 4px var(--margin-mobile) 12px; color: var(--live); font-family: var(--font-label); font-size: 12.5px; line-height: 1.55; }
.set-note-ic { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--live); color: #fff; font-size: 11px; font-weight: 700; font-style: italic; display: grid; place-items: center; margin-top: 1px; }

/* Username edit page (Account > Username) */
.un-field { display: flex; align-items: center; gap: 10px; padding: 18px var(--margin-mobile) 14px; border-bottom: 1px solid var(--glass-border); }
.un-input { flex: 1; min-width: 0; background: transparent; border: none; color: #fff; font-family: var(--font-body); font-size: 17px; outline: none; }
.un-clear { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--outline-variant); color: #fff; font-size: 15px; line-height: 1; display: grid; place-items: center; }
.un-count { flex: none; font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); }
.un-hints { padding: 20px var(--margin-mobile); display: flex; flex-direction: column; gap: 16px; }
.un-hints li { position: relative; padding-inline-start: 16px; list-style: none; font-family: var(--font-label); font-size: 12.5px; line-height: 1.6; color: var(--on-surface-variant); }
.un-hints li::before { content: "•"; position: absolute; inset-inline-start: 0; }
.un-hints b { color: var(--on-surface); font-weight: 700; }
.un-link { color: var(--on-surface); word-break: break-all; }
.un-confirm { margin: 24px var(--margin-mobile); }

/* Location country list (Edit Profile > Location) */
#screen-location .scroll { background: var(--surface-deep); }
.loc-row { display: flex; align-items: center; width: 100%; padding: 18px var(--margin-mobile); border-bottom: 1px solid var(--glass-border); text-align: start; }
.loc-name { flex: 1; font-family: var(--font-body); font-size: 16px; color: #fff; }
.loc-row.sel .loc-name, .loc-row.none .loc-name { color: #3d9bff; }
.loc-check { flex: none; color: #3d9bff; }
.loc-check svg { width: 22px; height: 22px; }

/* Website / social link (Edit Profile > Website) */
#screen-website .scroll { background: var(--surface-deep); }
.wb-field { display: flex; align-items: center; gap: 12px; position: relative; margin: 18px var(--margin-mobile) 0; padding-bottom: 12px; border-bottom: 1px solid var(--glass-border); }
.wb-platform { flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid var(--outline); border-radius: var(--radius-full); }
.wb-pic { font-size: 18px; }
.wb-caret { color: var(--on-surface-variant); font-size: 12px; }
.wb-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-family: var(--font-body); font-size: 15px; }
.wb-paste { flex: none; color: var(--on-surface-variant); }
.wb-paste svg { width: 20px; height: 20px; }
.wb-count { display: block; padding: 6px var(--margin-mobile) 0; color: var(--on-surface-variant); font-family: var(--font-label); font-size: 13px; }
.wb-menu { position: absolute; top: 48px; inset-inline-start: 0; z-index: 10; min-width: 190px; background: var(--surface-container-high); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 4px 0; box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
.wb-mitem { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; color: #fff; font-family: var(--font-body); font-size: 15px; text-align: start; }
.wb-mic { font-size: 18px; width: 22px; text-align: center; }

/* Birthday wheel picker (Edit Profile > Birthday) */
.sheet-bday { text-align: center; }
.bday-title { font-family: var(--font-headline); font-weight: 700; font-size: 18px; color: #fff; margin-bottom: 8px; }
.bday-wheels { position: relative; display: flex; height: 200px; overflow: hidden; }
.bday-col { flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; padding: 80px 0; scrollbar-width: none; }
.bday-col::-webkit-scrollbar { display: none; }
.bday-item { height: 40px; display: grid; place-items: center; scroll-snap-align: center; font-family: var(--font-headline); font-size: 18px; color: var(--on-surface-variant); }
.bday-item.sel { color: #fff; font-weight: 700; }
.bday-band { position: absolute; top: 80px; left: 0; right: 0; height: 40px; background: rgba(255,255,255,0.06); border-radius: 10px; pointer-events: none; }
.bday-hide { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: flex-start; padding: 16px 4px; color: var(--on-surface); font-family: var(--font-body); font-size: 14px; }
.bday-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--outline); }
.bday-hide.on .bday-radio { border-color: #8b3dff; background: radial-gradient(circle at 50% 50%, #8b3dff 0 5px, transparent 6px); }
.bday-actions { display: flex; gap: 12px; }
.bday-actions .btn { flex: 1; }

/* LIVE Hub + When-to-stream */
#screen-livehub .scroll, #screen-whenstream .scroll { background: var(--surface-deep); }
.app-header.dark .lh-bell { inset-inline-start: auto; inset-inline-end: var(--margin-mobile); }
#screen-livehub .pf-sec-head, #screen-livehub .pf-ticket { margin: 0 var(--margin-mobile); }
#screen-livehub .pf-sec-head { padding-top: 18px; }
.ws-info { margin: 18px var(--margin-mobile) 0; padding: 16px 18px; border-radius: var(--radius-md); background: var(--surface-container-low); list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ws-info li { position: relative; padding-inline-start: 16px; font-family: var(--font-label); font-size: 12.5px; line-height: 1.6; color: var(--on-surface-variant); }
.ws-info li::before { content: "•"; position: absolute; inset-inline-start: 0; }
.ws-sec { font-family: var(--font-headline); font-weight: 700; font-size: 17px; color: #fff; padding: 22px var(--margin-mobile) 12px; text-align: start; }
.ws-stats { display: flex; gap: 12px; padding: 0 var(--margin-mobile); }
.ws-stat { flex: 1; padding: 18px; border-radius: var(--radius-md); border: 1px solid var(--glass-border); text-align: start; }
.ws-stat .n { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #fff; }
.ws-stat .l { font-family: var(--font-label); font-size: 12px; color: var(--on-surface-variant); margin-top: 6px; }
.ws-bar { display: flex; gap: 12px; padding: 12px var(--margin-mobile) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--glass-border); background: var(--surface-deep); }
.ws-bar .btn { flex: 1; }

/* Create · content-type picker + location */
.ctype-sub { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); line-height: 1.6; text-align: center; margin-bottom: 14px; }
.ctype-list { display: flex; flex-direction: column; }
.ctype-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 4px; border-bottom: 1px solid var(--glass-border); }
.ctype-lbl { flex: 1; text-align: start; font-family: var(--font-headline); font-weight: 600; font-size: 16px; color: #fff; }
.ctype-ic { flex: none; width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center; font-size: 22px; }
.crloc-hero { display: grid; place-items: center; padding: 8px 0 4px; }
.crloc-pin { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 50% 35%, #9b4dff, #6c2bd9); box-shadow: 0 8px 26px rgba(124,58,237,0.45); }
.crloc-pin svg { width: 32px; height: 32px; }
.sheet-crloc .sheet-title { margin-top: 12px; }
.crloc-row { display: flex; align-items: center; gap: 14px; margin: 6px 4px 16px; padding: 16px; border-radius: var(--radius-md); background: var(--surface-container-low); }
.crloc-text { flex: 1; display: flex; flex-direction: column; gap: 4px; text-align: start; }
.crloc-text .t { font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #fff; }
.crloc-text .d { font-family: var(--font-label); font-size: 12.5px; color: var(--on-surface-variant); line-height: 1.5; }
.cr-loc.off { opacity: 0.5; }

/* Suggested accounts (Video > Following > Recommendation to follow) */
#screen-suggested { background: #f1f1f4; }
#screen-suggested .scroll { background: #f1f1f4; }
.sug-header { position: relative; justify-content: center; background: #f1f1f4; }
.sug-header .icon-btn { position: absolute; inset-inline-start: var(--margin-mobile); top: 56px; color: #111; }
.sug-header .title { font-size: 18px; color: #111; }
.sug-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px var(--margin-mobile) calc(20px + env(safe-area-inset-bottom)); }
.sug-card { background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.sug-media { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.sug-emoji { font-size: 64px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); }
.sug-live { position: absolute; top: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,0.55); color: #fff; font-family: var(--font-label); font-size: 11px; font-weight: 700; }
.sug-live .blink { width: 7px; height: 7px; border-radius: 50%; background: #ff3b5c; animation: blink 1.2s steps(2, start) infinite; }
.sug-body { padding: 10px 12px 14px; text-align: center; }
.sug-name { font-family: var(--font-headline); font-weight: 700; font-size: 15px; color: #111; display: flex; align-items: center; justify-content: center; gap: 5px; }
.sug-name .verified { color: #7c3aed; }
.sug-sub { display: inline-block; margin: 8px 0 12px; padding: 4px 12px; border-radius: 999px; background: #ececf0; font-family: var(--font-label); font-size: 12px; color: #6b6b73; }
.sug-follow { width: 100%; gap: 6px; }

/* Creator profile · Live Center (tapped video author avatar) */
#screen-creator .scroll { background: #fff; }
.cr-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.cr-cover { position: relative; height: 200px; display: grid; place-items: center; }
.cr-topbar { position: absolute; top: 0; inset-inline: 0; display: flex; align-items: center; padding: 50px var(--margin-mobile) 0; }
.cr-topbar .hh-icon { color: #fff; }
.cr-mascot { font-size: 96px; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.4)); }
.cr-id { padding: 16px var(--margin-mobile) 0; text-align: center; }
.cr-name { font-family: var(--font-headline); font-weight: 700; font-size: 22px; color: #111; display: inline-flex; align-items: center; gap: 6px; }
.cr-name .verified { color: #7c3aed; }
.cr-handle { font-family: var(--font-label); font-size: 13px; color: #8a8a93; margin-top: 4px; }
.cr-stats { display: flex; justify-content: center; gap: 28px; margin: 16px 0; }
.cr-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cr-stat b { font-family: var(--font-headline); font-size: 18px; color: #111; }
.cr-stat span { font-family: var(--font-label); font-size: 12px; color: #8a8a93; }
.cr-actions { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cr-follow { min-width: 180px; gap: 6px; }
.cr-icon-btn { width: 44px; height: 40px; border-radius: var(--radius-md); background: #ececf0; color: #333; display: grid; place-items: center; }
.cr-icon-btn .ico { width: 20px; height: 20px; }
.cr-chev { font-size: 18px; line-height: 1; }
.cr-livecenter { margin: 22px var(--margin-mobile) 0; }
.cr-lc-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #111; margin-bottom: 10px; }
.cr-lc-head .chev-fwd { color: #c4c4cc; }
.cr-lc-card { display: flex; align-items: center; gap: 14px; background: #f5f5f7; border-radius: var(--radius-md); padding: 16px; }
.cr-lc-req { flex: 0 0 auto; gap: 6px; padding: 10px 20px; }
.cr-lc-req .ico { width: 18px; height: 18px; }
.cr-lc-text { flex: 1; text-align: start; }
.cr-lc-t { font-family: var(--font-headline); font-weight: 700; font-size: 15px; color: #111; }
.cr-lc-d { font-family: var(--font-label); font-size: 12px; color: #8a8a93; margin-top: 4px; line-height: 1.4; }
.cr-tabs { display: flex; gap: 24px; padding: 22px var(--margin-mobile) 12px; border-bottom: 1px solid #eee; }
.cr-tab { font-family: var(--font-headline); font-size: 15px; font-weight: 600; color: #9a9aa2; display: inline-flex; align-items: center; gap: 4px; }
.cr-tab.active { color: #111; }
.cr-tab-chev { font-size: 12px; }
.cr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px var(--margin-mobile) 0; }
.cr-clip { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: 4px; overflow: hidden; }
.cr-clip-emoji { font-size: 44px; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4)); }
.cr-pin { position: absolute; top: 6px; inset-inline-start: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 4px; background: rgba(0,0,0,0.45); color: #fff; font-family: var(--font-label); font-size: 10px; font-weight: 600; }
.cr-pin .ico { width: 11px; height: 11px; }
.cr-clip-views { position: absolute; bottom: 6px; inset-inline-start: 6px; display: inline-flex; align-items: center; gap: 3px; color: #fff; font-family: var(--font-label); font-size: 12px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.cr-clip-views .ico { width: 14px; height: 14px; }

/* Original sound page (tapped spinning disc) */
#screen-sound .scroll { background: #faf7fd; }
.snd-header { position: relative; justify-content: center; background: #f3ecfb; }
.snd-header .icon-btn { color: #111; }
.snd-header .icon-btn:first-child { position: absolute; inset-inline-start: var(--margin-mobile); top: 56px; }
.snd-header .icon-btn:last-child { position: absolute; inset-inline-end: var(--margin-mobile); top: 56px; }
.snd-header .title { font-size: 18px; color: #111; }
.snd-dots { font-size: 22px; line-height: 1; color: #111; }
.snd-top { display: flex; align-items: center; gap: 14px; padding: 12px var(--margin-mobile); }
.snd-cover { position: relative; width: 78px; height: 78px; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #e0398a, #8b2fd0); display: grid; place-items: center; flex: 0 0 auto; }
.snd-emoji { font-size: 34px; }
.snd-dur { position: absolute; bottom: 5px; inset-inline-start: 5px; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,0.55); color: #fff; font-family: var(--font-label); font-size: 10px; font-weight: 600; }
.snd-meta { flex: 1; text-align: start; }
.snd-name { font-family: var(--font-headline); font-weight: 700; font-size: 18px; color: #111; }
.snd-handle { font-family: var(--font-label); font-size: 13px; color: #6b6b73; margin-top: 4px; }
.snd-used { font-family: var(--font-label); font-size: 13px; color: #9a9aa2; margin-top: 4px; }
.snd-fav { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px var(--margin-mobile) 14px; padding: 14px; border-radius: 10px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); font-family: var(--font-headline); font-weight: 600; font-size: 15px; color: #111; }
.snd-star { font-size: 17px; }
.snd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0 var(--margin-mobile); }
.snd-clip { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: 6px; overflow: hidden; }
.snd-clip-emoji { font-size: 44px; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4)); }
.snd-clip-tag { position: absolute; top: 6px; inset-inline-start: 6px; padding: 3px 8px; border-radius: 5px; background: #8b5cf6; color: #fff; font-family: var(--font-label); font-size: 11px; font-weight: 700; }
.snd-clip-views { position: absolute; bottom: 6px; inset-inline-start: 6px; display: inline-flex; align-items: center; gap: 3px; color: #fff; font-family: var(--font-label); font-size: 12px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.snd-clip-views .ico { width: 14px; height: 14px; }
.snd-bar { padding: 12px var(--margin-mobile) calc(16px + env(safe-area-inset-bottom)); background: #faf7fd; }
.snd-use { width: 100%; gap: 8px; }
.snd-cam { font-size: 17px; }

/* Support-creator sheet (coins) */
.vsup-sheet { text-align: center; }
.vsup-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 0; }
.vsup-title { font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #fff; }
.vsup-bal { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-label); font-size: 14px; color: #f5c842; }
.vsup-coin { font-size: 15px; }
.vsup-creator { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; }
.vsup-av { width: 64px; height: 64px; font-size: 30px; }
.vsup-cname { font-family: var(--font-headline); font-size: 15px; color: #fff; }
.vsup-bigcoin { font-size: 56px; margin: 16px 0 6px; }
.vsup-amount { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-headline); font-weight: 700; font-size: 18px; color: #f5c842; }
.vsup-amount .ico { width: 16px; height: 16px; }
.vsup-ruler { position: relative; height: 46px; margin: 14px 0 4px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.30) 0 2px, transparent 2px 14px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.vsup-needle { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 3px; height: 40px; background: #f5c842; border-radius: 2px; }
.vsup-total { font-family: var(--font-headline); font-weight: 800; font-size: 26px; color: #fff; text-align: end; padding-inline-end: 4px; }
.vsup-confirm { margin-top: 14px; }
.vsup-rank { display: block; width: 100%; margin-top: 14px; font-family: var(--font-label); font-size: 13px; color: #f5c842; }

/* Video More sheet cancel */
.vmore-cancel { display: block; width: 100%; margin-top: 10px; padding: 14px; border-radius: var(--radius-md); background: var(--surface-container-highest); font-family: var(--font-headline); font-weight: 600; font-size: 15px; color: #fff; }

/* Comment composer (video comments sheet) */
.cmt-inputbar { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--glass-border-strong); }
.cmt-input { flex: 1; height: 42px; border-radius: 999px; padding: 0 16px; background: var(--surface-container-highest); color: var(--on-surface); font-size: 14px; border: none; outline: none; }
.cmt-input::placeholder { color: var(--on-surface-variant); }
.cmt-send { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; flex: 0 0 auto; }
.cmt-send .ico { width: 18px; height: 18px; }
.lr-cmt.mine .u { color: #f5c842; }

/* clickable account areas (open profile) */
.sug-media, .sug-name, .fl-media, .fl-name, .lr-host-av[data-action] { cursor: pointer; }

/* Profile inbox (Notifications / Messages) */
#screen-inbox .scroll { background: var(--surface-deep); }
.inbox-header { display: flex; align-items: center; gap: 10px; padding: 54px var(--margin-mobile) 14px; }
.inbox-header .icon-btn { color: #fff; }
.inbox-tabs { flex: 1; display: flex; justify-content: center; gap: 32px; }
.inbox-tab { font-family: var(--font-headline); font-weight: 700; font-size: 17px; color: var(--on-surface-variant); position: relative; padding-bottom: 8px; }
.inbox-tab.active { color: #fff; }
.inbox-tab.active::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 50%; transform: translateX(-50%); width: 24px; height: 2.5px; border-radius: 2px; background: #fff; }
[dir="ltr"] .inbox-tab.active::after { transform: translateX(50%); }
.nf-sec { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); padding: 14px var(--margin-mobile) 8px; }
.nf-item { display: flex; gap: 12px; width: 100%; padding: 14px var(--margin-mobile); text-align: start; align-items: flex-start; border-bottom: 1px solid var(--glass-border); }
.nf-av, .msg-av { flex: none; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(from 40deg, #7c3aed, #b14ad0, #ff6a3d, #ffc02e, #7c3aed); }
.nf-body { flex: 1; min-width: 0; }
.nf-title { font-family: var(--font-headline); font-weight: 700; font-size: 15px; color: #fff; line-height: 1.4; }
.nf-desc { font-family: var(--font-label); font-size: 12.5px; color: var(--on-surface-variant); line-height: 1.6; margin-top: 4px; }
.nf-time { font-family: var(--font-label); font-size: 11px; color: var(--outline); margin-top: 6px; }
.nf-item .chev-fwd { flex: none; color: var(--outline); align-self: center; }
.msg-top { display: flex; align-items: center; gap: 12px; padding: 14px var(--margin-mobile); }
.msg-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: var(--radius-full); background: var(--surface-container); color: var(--on-surface-variant); }
.msg-search svg { width: 18px; height: 18px; }
.msg-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-family: var(--font-body); font-size: 14px; }
.msg-add { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-container); display: grid; place-items: center; color: #fff; }
.msg-add svg { width: 20px; height: 20px; }
.msg-item { display: flex; gap: 12px; width: 100%; padding: 12px var(--margin-mobile); text-align: start; align-items: center; }
.msg-body { flex: 1; min-width: 0; }
.msg-row1 { display: flex; align-items: center; gap: 6px; }
.msg-name { font-family: var(--font-headline); font-weight: 700; font-size: 15px; color: #fff; }
.msg-headset { font-size: 13px; }
.msg-verified .verified { width: 15px; height: 15px; color: #9b3dff; }
.msg-official { background: var(--surface-container-high); color: var(--on-surface-variant); font-family: var(--font-label); font-size: 10px; padding: 2px 7px; border-radius: var(--radius); }
.msg-time { font-family: var(--font-label); font-size: 11px; color: var(--outline); }
.msg-preview { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* New message / contacts (Messages > +) */
#screen-newmsg .scroll { background: var(--surface-deep); }
.nm-header { display: flex; align-items: center; gap: 12px; padding: 50px var(--margin-mobile) 14px; }
.nm-header .icon-btn { color: #fff; }
.nm-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: var(--radius-full); background: var(--surface-container); color: var(--on-surface-variant); }
.nm-search svg { width: 18px; height: 18px; }
.nm-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-family: var(--font-body); font-size: 14px; }
.nm-create { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px var(--margin-mobile); color: #3d9bff; }
.nm-cg-ic { color: #3d9bff; display: grid; place-items: center; }
.nm-cg-ic svg { width: 24px; height: 24px; }
.nm-cg-lbl { flex: 1; text-align: start; font-family: var(--font-headline); font-weight: 700; font-size: 15px; }
.nm-create .chev-fwd { color: var(--outline); }
.nm-sec { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); padding: 14px var(--margin-mobile) 10px; background: rgba(0,0,0,0.25); }
.nm-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px var(--margin-mobile); border-bottom: 1px solid var(--glass-border); }
.nm-av { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.nm-av.purple { background: #8b3dff; }
.nm-av.purple svg { width: 24px; height: 24px; }
.nm-av.jaco { background: conic-gradient(from 40deg, #7c3aed, #b14ad0, #ff6a3d, #ffc02e, #7c3aed); }
.nm-name { font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #fff; text-align: start; }
.nm-info { display: flex; flex-direction: column; gap: 3px; text-align: start; }
.nm-r1 { display: flex; align-items: center; gap: 6px; font-family: var(--font-headline); font-weight: 700; font-size: 15px; color: #fff; }
.nm-handle { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); }
.nm-nomore { text-align: center; font-family: var(--font-label); font-size: 13px; color: var(--outline); padding: 24px 0; }
.cg-next { flex: none; height: 42px; padding: 0 18px; border-radius: var(--radius-md); background: #8b3dff; color: #fff; font-family: var(--font-headline); font-weight: 700; font-size: 14px; }
#screen-creategroup .scroll, #screen-savedgroups .scroll { display: grid; place-items: center; background: var(--surface-deep); }

/* Profile share-to sheet */
.sheet-share { text-align: center; }
.share-title { font-family: var(--font-headline); font-weight: 700; font-size: 17px; color: #fff; margin-bottom: 18px; }
.share-row { display: flex; gap: 18px; overflow-x: auto; padding: 0 4px 8px; scrollbar-width: none; }
.share-row::-webkit-scrollbar { display: none; }
.share-opt { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 64px; }
.share-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.share-ic svg { width: 26px; height: 26px; }
.share-lbl { font-family: var(--font-label); font-size: 11px; color: var(--on-surface-variant); white-space: nowrap; }
.share-cancel { width: 100%; margin-top: 18px; padding: 16px; border-radius: var(--radius-md); background: var(--surface-container); color: #fff; font-family: var(--font-headline); font-weight: 700; font-size: 15px; }

/* Theme Management (Edit Profile > Theme) */
#screen-theme { background: linear-gradient(180deg, #1b2454 0%, #10163a 45%, var(--surface-deep) 100%); }
.th-preview { position: relative; padding: 8px var(--margin-mobile) 6px; text-align: center; }
.th-plabel { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); margin-bottom: 14px; }
.th-card { position: relative; height: 150px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #2c2f6e, #1a1c44); border: 1px solid var(--glass-border-strong); box-shadow: 0 0 40px rgba(108,120,255,0.25); overflow: hidden; }
.th-card-av { position: absolute; top: 24px; inset-inline-end: 22px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; background: radial-gradient(circle at 50% 40%, #ffe08a, #f4c430); }
.th-card-name { position: absolute; top: 40px; inset-inline-end: 100px; font-family: var(--font-headline); font-weight: 700; font-size: 17px; color: #fff; }
.th-cbar { position: absolute; inset-inline-start: 22px; height: 12px; border-radius: 6px; background: rgba(255,255,255,0.12); }
.th-cbar.b1 { top: 70px; width: 120px; }
.th-cbar.b2 { top: 96px; width: 40px; height: 26px; border-radius: 13px; }
.th-cbar.b3 { top: 96px; inset-inline-start: 72px; width: 150px; height: 26px; border-radius: 13px; }
.th-tabs { display: flex; gap: 22px; justify-content: center; padding: 8px var(--margin-mobile) 12px; border-bottom: 1px solid var(--glass-border); }
.th-tab { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: var(--on-surface-variant); position: relative; padding-bottom: 8px; }
.th-tab.active { color: #fff; }
.th-tab.active::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 50%; transform: translateX(-50%); width: 22px; height: 2.5px; border-radius: 2px; background: #fff; }
[dir="ltr"] .th-tab.active::after { transform: translateX(50%); }
#screen-theme .scroll { background: var(--surface-deep); }
.th-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px var(--margin-mobile) 30px; }
.th-item { position: relative; padding: 16px 8px 12px; border-radius: var(--radius-md); background: var(--surface-container-low); text-align: center; }
.th-item.use { border: 1px solid #b89a5a; }
.th-lock { position: absolute; top: 8px; inset-inline-end: 8px; font-size: 12px; opacity: 0.7; }
.th-using { position: absolute; top: 0; inset-inline-start: 0; background: #6e5e2a; color: #f0e0b0; font-family: var(--font-label); font-size: 10px; padding: 3px 8px; border-radius: var(--radius-md) 0 8px 0; }
.th-vis { width: 64px; height: 64px; margin: 8px auto 12px; }
.th-vis.vis-ring { border-radius: 50%; border: 4px solid var(--c); box-shadow: 0 0 14px var(--c), inset 0 0 8px var(--c); }
.th-vis.vis-plain { border-radius: 50%; background: var(--surface-container-high); }
.th-vis.vis-bar { height: 26px; margin-top: 24px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); box-shadow: 0 0 14px var(--c); }
.th-vis.vis-bg { width: 76px; height: 56px; border-radius: 10px; background: linear-gradient(135deg, var(--c), #14163a); border: 1px solid var(--glass-border); }
.th-vis.vis-bgplain { width: 76px; height: 56px; border-radius: 10px; background: var(--surface-container-high); }
.th-name { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: #f0e6c8; }
.th-desc { font-family: var(--font-label); font-size: 11px; color: var(--on-surface-variant); margin-top: 4px; }
.th-status { font-family: var(--font-label); font-size: 10px; color: var(--outline); margin-top: 6px; }
/* styles tab: level-70 card */
.th-grid.styles { grid-template-columns: 1fr; }
.th-l70 { position: relative; padding: 18px; border-radius: var(--radius-md); background: var(--surface-container-low); }
.th-l70-head { display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-family: var(--font-headline); font-weight: 700; font-size: 15px; color: #f0e6c8; }
.th-q { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--outline); font-size: 11px; display: grid; place-items: center; color: var(--on-surface-variant); }
.th-l70-desc { font-family: var(--font-label); font-size: 12px; color: var(--on-surface-variant); line-height: 1.6; margin: 10px 0 16px; }
.th-l70-row { display: flex; gap: 12px; justify-content: center; }
.th-l70-it { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0.55; }
.th-l70-it span:last-child { font-family: var(--font-label); font-size: 11px; color: var(--on-surface-variant); }
.th-l70-vis { width: 70px; height: 50px; border-radius: 8px; background: var(--surface-container-high); }
.th-l70-vis.ring { border-radius: 50%; width: 50px; height: 50px; border: 3px solid var(--c); }
.th-l70-vis.bar { height: 22px; margin-top: 14px; border-radius: var(--radius-full); background: var(--c); }
.th-l70-lock { position: absolute; bottom: 10px; inset-inline-start: 10px; font-size: 12px; opacity: 0.6; }

/* Bio textarea (Edit Profile > Bio) */
.bio-field { padding: 20px var(--margin-mobile) 0; }
.bio-input { width: 100%; min-height: 120px; background: transparent; border: none; outline: none; resize: none; color: #fff; font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
.bio-count { display: block; text-align: end; padding: 6px var(--margin-mobile) 0; color: var(--on-surface-variant); font-family: var(--font-label); font-size: 13px; }

/* Phone Number page (Account > Phone) */
.ph-title { font-family: var(--font-headline); font-weight: 800; font-size: 32px; color: #fff; padding: 44px var(--margin-mobile) 28px; }
.ph-row { display: flex; direction: ltr; gap: 12px; padding: 0 var(--margin-mobile); }
.ph-country { display: flex; align-items: center; justify-content: center; gap: 8px; width: 84px; height: 58px; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: rgba(255,255,255,0.03); }
[dir="rtl"] .ph-country { flex-direction: row-reverse; }
.ph-flag { width: 26px; height: 18px; border-radius: 3px; background: #157347; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.ph-caret { color: var(--on-surface-variant); font-size: 14px; line-height: 1; }
.ph-number { flex: 1; display: flex; direction: ltr; align-items: center; gap: 12px; height: 58px; padding: 0 16px; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: rgba(255,255,255,0.03); }
.ph-code { font-family: var(--font-headline); font-weight: 700; font-size: 18px; color: #fff; }
.ph-divider { width: 1px; height: 22px; background: var(--glass-border-strong); }
.ph-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-family: var(--font-body); font-size: 16px; }
.ph-send { margin: 22px var(--margin-mobile) 14px; }
.ph-note { padding: 0 var(--margin-mobile); color: var(--on-surface-variant); font-family: var(--font-label); font-size: 13px; line-height: 1.6; }

/* Email Address page (Account > Email) */
.em-field { display: flex; align-items: center; margin: 0 var(--margin-mobile); height: 58px; padding: 0 16px; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: rgba(255,255,255,0.03); }
.em-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-family: var(--font-body); font-size: 16px; }
.em-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px var(--margin-mobile) 0; }
.em-chip { padding: 9px 14px; border-radius: var(--radius); background: rgba(255,255,255,0.06); color: var(--on-surface-variant); font-family: var(--font-body); font-size: 13px; direction: ltr; transition: background var(--dur-fast); }
.em-chip:active { background: rgba(255,255,255,0.12); }

/* Withdrawal Password page (Account > Withdrawal Settings) */
.wp-field { display: flex; align-items: center; gap: 12px; margin: 0 var(--margin-mobile); padding: 22px 0 14px; border-bottom: 1px solid var(--glass-border); }
.wp-field:first-of-type { margin-top: 16px; }
.wp-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-family: var(--font-body); font-size: 16px; }
.wp-eye { flex: none; color: var(--on-surface-variant); display: grid; place-items: center; }
.wp-eye svg { width: 22px; height: 22px; }
.wp-note { padding: 16px var(--margin-mobile) 0; color: var(--on-surface-variant); font-family: var(--font-label); font-size: 13px; line-height: 1.5; }
.wp-confirm { margin: 28px var(--margin-mobile) 0; }

/* Centered confirmation dialog (e.g. unlink Google) */
.dialog-scrim { display: grid; place-items: center; padding: 0 32px; }
.dialog {
  width: 100%; max-width: 320px;
  background: #2b2733;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 30px 22px 20px;
  text-align: center;
  transform: scale(0.92); opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur);
}
.sheet-scrim.open .dialog { transform: scale(1); opacity: 1; }
.dialog-msg { font-family: var(--font-headline); font-weight: 700; font-size: 18px; color: #fff; line-height: 1.45; margin-bottom: 24px; }
.dialog-actions { display: flex; gap: 12px; }
.dialog-actions .btn { flex: 1; }

/* Agency Invitation Code sheet */
.sheet-invite { text-align: center; padding-top: 20px; }
.inv-title { font-family: var(--font-headline); font-weight: 700; font-size: 18px; color: #fff; margin-bottom: 16px; }
.inv-art { height: 200px; border-radius: var(--radius-lg); margin-bottom: 18px; display: grid; place-items: center; font-size: 86px; background: radial-gradient(120% 100% at 50% 28%, #ffc02e, #ff6a3d 65%, #e23b6d); }
.inv-desc { text-align: start; color: var(--on-surface); font-family: var(--font-body); font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
.inv-code { border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 22px 12px; font-family: var(--font-headline); font-weight: 800; font-size: 26px; letter-spacing: 8px; text-indent: 8px; color: #fff; margin-bottom: 12px; }
.inv-valid { color: var(--on-surface-variant); font-family: var(--font-label); font-size: 13px; margin-bottom: 18px; }
.inv-actions { display: flex; gap: 12px; }
.inv-actions .btn { flex: 1; }

/* Account Verification sheets */
.vf-title { font-family: var(--font-headline); font-weight: 700; font-size: 18px; color: #fff; text-align: center; margin-bottom: 16px; }
.vf-art { height: 190px; border-radius: var(--radius-lg); margin-bottom: 16px; display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 28%, #9b3dff, #5b18c4); }
.vf-seal { width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; font-size: 46px; font-weight: 800; color: #fff; background: radial-gradient(circle at 50% 38%, #ff8ae8, #b14ad0); box-shadow: 0 10px 34px rgba(177,74,208,0.55); }
.vf-desc { text-align: start; color: var(--on-surface-variant); font-family: var(--font-body); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.vf-head { display: flex; align-items: center; gap: 10px; padding-top: 6px; margin-bottom: 18px; }
.vf-htitle { flex: 1; text-align: center; font-family: var(--font-headline); font-weight: 700; font-size: 18px; color: #fff; }
.vf-back, .vf-help { flex: none; width: 32px; height: 32px; display: grid; place-items: center; color: #fff; }
.vf-back svg { width: 24px; height: 24px; }
.vf-help { border: 1.5px solid var(--outline); border-radius: 50%; font-family: var(--font-headline); font-size: 14px; color: var(--on-surface-variant); }
.verify-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; margin-bottom: 12px; border-radius: var(--radius-md); background: linear-gradient(90deg, rgba(139,61,255,0.16), rgba(139,61,255,0.05)); border: 1px solid transparent; transition: border-color var(--dur-fast); }
.verify-opt.selected { border-color: #8b3dff; }
.vo-ic { width: 24px; height: 24px; display: grid; place-items: center; color: #fff; font-size: 20px; }
.vo-ic svg { width: 24px; height: 24px; }
.vo-label { font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #fff; }
.vo-badge { margin-inline-start: auto; padding: 6px 12px; border: 1px solid #8b3dff; border-radius: var(--radius-full); font-family: var(--font-label); font-size: 11px; font-weight: 700; color: #c79bff; letter-spacing: 0.5px; direction: ltr; }
.vf-next { margin-top: 8px; }

/* Delete Account page */
.da-heading { font-family: var(--font-headline); font-weight: 700; font-size: 18px; color: #fff; text-align: center; padding: 24px var(--margin-mobile) 12px; }
.da-sub { color: var(--on-surface-variant); font-family: var(--font-body); font-size: 13px; line-height: 1.6; padding: 0 var(--margin-mobile) 10px; }
.da-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 20px var(--margin-mobile); border-bottom: 1px solid var(--glass-border); }
.da-label { flex: 1; text-align: start; font-family: var(--font-body); font-size: 16px; color: #fff; }
.da-radio { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--outline); transition: border-color var(--dur-fast); }
.da-opt.selected .da-radio { border-color: #8b3dff; }
.da-opt.selected .da-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #8b3dff; }
.da-continue { margin: 28px var(--margin-mobile) 0; }

/* Vertically-centered empty states (blocked accounts, following, followers) */
#screen-blocked-accounts .scroll,
#screen-following .scroll,
#screen-followers .scroll { display: grid; place-items: center; background: var(--surface-deep); }

/* Blocked Keywords page */
.bk-note { display: flex; gap: 12px; margin: 16px var(--margin-mobile) 0; padding: 16px; border-radius: var(--radius-md); background: var(--surface-container-low); }
.bk-logo { flex: none; width: 38px; height: 38px; border-radius: 10px; background: conic-gradient(from 40deg, #7c3aed, #b14ad0, #ff6a3d, #ffc02e, #7c3aed); }
.bk-note p { color: var(--on-surface-variant); font-family: var(--font-label); font-size: 12.5px; line-height: 1.6; }
.bk-head { display: flex; align-items: baseline; gap: 6px; padding: 22px var(--margin-mobile) 6px; font-family: var(--font-headline); font-weight: 700; font-size: 16px; color: #fff; }
.bk-count { font-family: var(--font-label); font-weight: 400; font-size: 13px; color: var(--on-surface-variant); }
.bk-sub { padding: 0 var(--margin-mobile) 16px; color: var(--on-surface-variant); font-family: var(--font-label); font-size: 13px; }
.bk-add { width: 96px; height: 44px; margin: 0 var(--margin-mobile); display: grid; place-items: center; border: 1px solid var(--outline); border-radius: var(--radius-full); color: #fff; }
.bk-add svg { width: 22px; height: 22px; }

/* Content Preferences (Explore · Select your Interest) */
#screen-content { background: linear-gradient(180deg, #2b2348 0%, var(--surface-deep) 55%); }
.ct-top { position: relative; padding: 54px var(--margin-mobile) 8px; }
.ct-back { color: #fff; }
.ct-title { margin-top: 22px; font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.25; color: #fff; text-align: start; }
.ct-title .accent { color: #b14ad0; }
.ct-cards { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 0 26px; }
.ct-card { flex: none; width: 96px; height: 280px; border-radius: 16px; display: grid; place-items: center; font-size: 40px; opacity: 0.55; transition: all var(--dur) var(--ease); }
.ct-card.center { width: 184px; height: 330px; opacity: 1; z-index: 2; box-shadow: 0 24px 56px rgba(0,0,0,0.55); }
.ct-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 0 var(--margin-mobile) 20px; }
.ct-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0.65; transition: opacity var(--dur-fast); }
.ct-cat.sel { opacity: 1; }
.ct-cat-ic { font-size: 26px; line-height: 1; }
.ct-cat-lbl { font-family: var(--font-label); font-size: 12px; color: var(--on-surface-variant); max-width: 80px; text-align: center; }
.ct-cat.sel .ct-cat-lbl { color: #fff; }
.ct-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 var(--margin-mobile) 16px; min-height: 18px; }
.ct-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius); background: var(--surface-container); color: #fff; font-family: var(--font-label); font-size: 13px; }
.ct-chip-x { color: var(--on-surface-variant); font-size: 15px; line-height: 1; }
.ct-confirm { margin: 8px var(--margin-mobile) 0; }

/* Help Center (support chat) */
#screen-help { background: linear-gradient(180deg, #2a1f47 0%, var(--surface-deep) 40%); }
.help-header { display: flex; align-items: center; gap: 10px; padding: 54px var(--margin-mobile) 14px; }
.help-header .icon-btn { color: #fff; }
.help-htitle { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-headline); font-weight: 700; font-size: 17px; color: #fff; }
.help-headset { font-size: 17px; }
.help-verified .verified { width: 18px; height: 18px; color: #9b3dff; }
.help-time { text-align: center; color: var(--on-surface-variant); font-family: var(--font-label); font-size: 12px; padding: 6px 0 14px; }
.help-bot { display: flex; align-items: flex-start; gap: 10px; padding: 0 var(--margin-mobile) 16px; }
.help-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(from 40deg, #7c3aed, #b14ad0, #ff6a3d, #ffc02e, #7c3aed); }
.help-bubble { background: var(--surface-container); border-radius: 16px; padding: 14px 16px; font-family: var(--font-body); font-size: 15px; color: #fff; }
.help-tabs { display: flex; gap: 12px; overflow-x: auto; padding: 0 var(--margin-mobile) 14px; }
.help-tab { flex: none; width: 92px; height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius-md); background: var(--surface-container); border: 1.5px solid transparent; }
.help-tab.sel { border-color: #9b3dff; background: rgba(155,61,255,0.12); }
.help-tab-ic { font-size: 24px; color: #fff; display: grid; place-items: center; height: 28px; }
.help-tab-ic svg { width: 26px; height: 26px; }
.help-tab.sel .help-tab-ic, .help-tab.sel .help-tab-lbl { color: #c79bff; }
.help-tab-lbl { font-family: var(--font-label); font-size: 12px; color: var(--on-surface-variant); }
.help-livebadge { border: 1.4px solid currentColor; border-radius: 5px; padding: 1px 5px; font-family: var(--font-display); font-weight: 800; font-size: 11px; }
.help-faq { margin: 0 var(--margin-mobile); background: var(--surface-container); border-radius: var(--radius-md); overflow: hidden; }
.help-q { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border-bottom: 1px solid var(--glass-border); text-align: start; }
.help-q-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #9b3dff; color: #fff; font-family: var(--font-headline); font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.help-q-tx { flex: 1; font-family: var(--font-body); font-size: 14px; color: #fff; line-height: 1.5; }
.help-q .chev-fwd { flex: none; color: var(--outline); }
.help-more { width: 100%; padding: 14px; color: #c79bff; font-family: var(--font-label); font-size: 13px; }
.help-bar { padding: 10px var(--margin-mobile) calc(12px + env(safe-area-inset-bottom)); background: var(--surface-deep); border-top: 1px solid var(--glass-border); }
.help-quick { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 10px; }
.help-qbtn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--glass-border); border-radius: var(--radius-full); color: #fff; font-family: var(--font-label); font-size: 12px; }
.help-qbtn svg { width: 15px; height: 15px; }
.help-q-ic.sm { width: 16px; height: 16px; font-size: 10px; }
.help-input { display: flex; align-items: center; gap: 10px; }
.help-msg { flex: 1; min-width: 0; height: 44px; padding: 0 16px; background: var(--surface-container); border: none; border-radius: var(--radius-full); color: #fff; font-family: var(--font-body); font-size: 15px; outline: none; }
.help-emoji { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; color: var(--on-surface-variant); }

/* section header (Notifications groups) */
.set-sec {
  font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant);
  padding: 18px var(--margin-mobile) 8px;
}
/* two-line row: title + current value */
.set-row-2 { align-items: center; }
.set-txt { display: flex; flex-direction: column; gap: 4px; margin-inline-end: auto; min-width: 0; }
.set-txt .t { font-family: var(--font-headline); font-weight: 600; font-size: 16px; color: #fff; }
.set-txt .d { font-family: var(--font-body); font-size: 13px; color: var(--on-surface-variant); }
#screen-notifications .scroll,
#screen-notif-detail .scroll { background: var(--surface-deep); }

/* notification-detail page */
.notif-dt-title { max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-foot {
  font-family: var(--font-label); font-size: 12.5px; line-height: 1.6;
  color: var(--on-surface-variant); padding: 14px var(--margin-mobile) 0;
}

/* toggle switch (logical props → flips correctly in RTL) */
.switch {
  width: 46px; height: 27px; border-radius: var(--radius-full); flex-shrink: 0;
  background: var(--surface-container-highest); position: relative;
  transition: background var(--dur-fast) var(--ease);
}
.switch.on { background: linear-gradient(135deg, #b07cf6, #8b3df0); }
.switch .knob {
  position: absolute; top: 3px; inset-inline-start: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transition: inset-inline-start var(--dur-fast) var(--ease), inset-inline-end var(--dur-fast) var(--ease);
}
.switch.on .knob { inset-inline-start: auto; inset-inline-end: 3px; }

/* ============================================================
   Go-Live composer (the + button) — Video / LIVE / Audio / Share
   ============================================================ */
#screen-create { background: linear-gradient(165deg, #2c2933, #1b1923 60%, #100e18); }
.cr-stage { flex: 1; position: relative; display: flex; flex-direction: column; min-height: 0; padding: 52px 16px 12px; }

.cr-close { position: absolute; top: 50px; inset-inline-start: 14px; z-index: 6; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; }
.cr-close svg { width: 24px; height: 24px; }
.cr-ind { position: absolute; top: 50px; inset-inline-end: 16px; z-index: 6; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: var(--radius-full); background: #16c060; color: #fff; font-size: 13px; }

/* top card (LIVE / Audio / Share) */
.cr-card { display: flex; align-items: stretch; gap: 14px; margin-top: 44px; padding: 16px; border-radius: var(--radius-md); background: rgba(70,70,78,0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cr-thumb { flex: none; width: 84px; min-height: 76px; border-radius: var(--radius); background: rgba(255,255,255,0.92); display: grid; place-items: center; color: #555; position: relative; }
.cr-thumb-face { font-size: 30px; color: #6b6b73; }
.cr-thumb-lbl { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 11px; color: #777; }
.cr-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 2px; }
.cr-title { font-family: var(--font-headline); font-weight: 700; font-size: 19px; color: rgba(255,255,255,0.92); }
.cr-loc { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.4); color: rgba(255,255,255,0.85); font-size: 13px; font-family: var(--font-label); }
.cr-loc svg { width: 15px; height: 15px; }
.cr-category { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 14px 16px; border-radius: var(--radius-md); background: rgba(70,70,78,0.55); color: rgba(255,255,255,0.9); font-family: var(--font-headline); font-weight: 600; font-size: 15px; }
.cr-category .cr-cat-ic { display: inline-grid; place-items: center; }
.cr-category .cr-cat-ic svg { width: 20px; height: 20px; }
.cr-category .cr-cat-lbl { margin-inline-end: auto; }
.cr-category .chev-fwd { color: rgba(255,255,255,0.6); }

.cr-spacer { flex: 1; }

/* center avatar (Audio) */
.cr-audio-center { flex: 1; display: grid; place-items: center; }
.cr-audio-av { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 50px; background: radial-gradient(circle at 50% 35%, #b25cff, #7c2ae0); border: 3px solid rgba(255,255,255,0.85); box-shadow: 0 8px 30px rgba(124,42,224,0.5); }

/* toolbar (LIVE / Audio / Share) */
.cr-toolbar { display: grid; gap: 18px 4px; margin-bottom: 18px; }
.cr-toolbar.two { grid-template-columns: repeat(4, 1fr); }
.cr-toolbar.three { grid-template-columns: repeat(3, 1fr); }
.cr-tool { display: flex; flex-direction: column; align-items: center; gap: 7px; color: #fff; }
.cr-tool.dim { opacity: 0.4; }
.cr-tool-ic { position: relative; display: grid; place-items: center; }
.cr-tool-ic svg { width: 27px; height: 27px; stroke-width: 1.8; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.cr-tool-lbl { font-family: var(--font-label); font-size: 12px; color: rgba(255,255,255,0.9); }
.cr-tool-chk { position: absolute; bottom: -2px; inset-inline-end: -5px; width: 14px; height: 14px; border-radius: 50%; background: #8b3df0; color: #fff; font-size: 9px; display: grid; place-items: center; border: 1.5px solid #1b1923; }

/* Start LIVE / Pre-check */
.cr-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.cr-start { height: 54px; color: #fff; font-size: 17px; background: linear-gradient(135deg, #8b3df0, #7c2ae0); box-shadow: 0 8px 26px rgba(124,42,224,0.45); }
.cr-start:active { filter: brightness(1.06); }
.cr-precheck { font-family: var(--font-label); font-size: 13px; color: rgba(255,255,255,0.8); }

/* Video tab (TikTok-style recorder) */
.cr-music { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--radius-full); background: rgba(0,0,0,0.4); color: #fff; font-size: 13px; font-family: var(--font-label); z-index: 5; }
.cr-music svg { width: 15px; height: 15px; }
.cr-side { position: absolute; top: 100px; inset-inline-end: 12px; display: flex; flex-direction: column; gap: 20px; z-index: 5; }
.cr-side-item { display: flex; align-items: center; gap: 10px; color: #fff; }
.cr-side-lbl { font-family: var(--font-label); font-size: 13px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.55); white-space: nowrap; }
.cr-side-ic { position: relative; display: grid; place-items: center; }
.cr-side-ic svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55)); }
.cr-side-collapse { align-self: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.35); display: grid; place-items: center; color: #fff; }
.cr-side-collapse svg { width: 18px; height: 18px; }
.cr-vbottom { position: absolute; bottom: 16px; inset-inline: 0; display: flex; align-items: center; justify-content: space-around; z-index: 5; }
.cr-vbtn { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; }
.cr-vbtn-ic { display: inline-grid; place-items: center; }
.cr-vbtn-ic svg { width: 30px; height: 30px; }
.cr-eff-av { font-size: 24px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.15); }
.cr-vbtn-lbl { font-family: var(--font-label); font-size: 12px; }
.cr-record { width: 74px; height: 74px; border-radius: 50%; background: #8b3df0; border: 5px solid rgba(255,255,255,0.95); box-shadow: 0 0 0 3px rgba(124,42,224,0.4); }
.cr-record:active { transform: scale(0.94); }

/* bottom tabs */
.cr-tabs { flex: none; display: flex; align-items: flex-start; justify-content: space-around; gap: 4px; padding: 11px 12px calc(12px + env(safe-area-inset-bottom)); background: rgba(0,0,0,0.3); }
.cr-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 4px; color: rgba(255,255,255,0.5); font-family: var(--font-headline); font-weight: 700; font-size: 14px; white-space: nowrap; }
.cr-tab.active { color: #fff; }
.cr-tab-caret { font-size: 8px; line-height: 1; visibility: hidden; }
.cr-tab.active .cr-tab-caret { visibility: visible; }
.cr-tab-badge { position: absolute; top: -7px; inset-inline-end: -8px; background: var(--live); color: #fff; font-family: var(--font-label); font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: var(--radius-full); }

/* ============================================================
   JACO PRIME — campaign landing page (gold-on-black theme)
   ============================================================ */
#screen-prime .scroll { background: #060606; }

.prime-header {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 56px var(--margin-mobile) 12px;
  background: #0a0a0c; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.prime-header .title { font-family: var(--font-headline); font-weight: 800; font-size: 18px; color: #fff; }
.prime-header > .icon-btn { position: absolute; inset-inline-start: var(--margin-mobile); top: 52px; color: #fff; }
.prime-head-actions { position: absolute; inset-inline-end: var(--margin-mobile); top: 52px; display: flex; gap: 2px; }
.prime-head-actions .icon-btn { color: #fff; }
.prime-head-actions .icon-btn svg { width: 22px; height: 22px; }

.prime-body { display: flex; flex-direction: column; gap: 16px; padding: 16px var(--margin-mobile) 96px; }

/* ---- Hero banner ---- */
.pm-hero {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  min-height: 300px; padding: 30px 16px 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,196,90,0.18), transparent 60%),
    linear-gradient(180deg, #1a1206 0%, #0c0a07 55%, #060504 100%);
  border: 1px solid rgba(255,200,90,0.12);
}
.pm-hero-tk { position: absolute; top: 16px; font-size: 26px; opacity: 0.9; filter: drop-shadow(0 2px 6px rgba(255,180,60,0.4)); }
.pm-hero-tk.t1 { inset-inline-start: 40px; transform: rotate(-18deg); }
.pm-hero-tk.t2 { inset-inline-end: 40px; transform: rotate(20deg); }
.pm-hero-logo {
  font-family: var(--font-display); font-weight: 800; font-size: 52px; line-height: 0.92;
  letter-spacing: 2px; text-align: center;
  background: linear-gradient(180deg, #ffe9a8, #f0b03c 55%, #b5781d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 4px 20px rgba(255,180,60,0.35);
}
.pm-hero-art { display: flex; align-items: center; gap: 6px; margin-top: 18px; }
.pm-hero-car { font-size: 84px; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.5)); }
.pm-hero-phones { font-size: 56px; }

/* ---- Generic card ---- */
.pm-card {
  position: relative; border-radius: var(--radius-xl); padding: 20px 16px 18px;
  background: linear-gradient(180deg, #14110c 0%, #0c0b08 100%);
  border: 1px solid rgba(255,200,90,0.10);
  box-shadow: inset 0 1px 0 rgba(255,220,140,0.08);
}
.pm-card-title {
  text-align: center; font-family: var(--font-headline); font-weight: 800; font-size: 20px;
  background: linear-gradient(180deg, #ffe9a8, #d09a32);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 14px;
}
.pm-intro { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); text-align: center; margin: -4px 0 16px; line-height: 1.5; }

/* ---- Three ways ---- */
.pm-way {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px 14px; margin-bottom: 12px;
  border-radius: var(--radius-lg); border: 1px solid rgba(255,200,90,0.14);
  background: rgba(255,255,255,0.02);
}
.pm-way:last-child { margin-bottom: 0; }
.pm-way-n {
  position: absolute; top: -9px; inset-inline-start: 14px;
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  background: linear-gradient(180deg, #ffe9a8, #d09a32);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pm-way-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; flex: none; background: rgba(255,200,90,0.08); }
.pm-svip {
  font-family: var(--font-display); font-weight: 800; font-size: 12px; color: #4a2e08;
  background: linear-gradient(145deg, #ffe9a8, #c79200); padding: 4px 6px; border-radius: 6px;
}
.pm-way-title { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: #f3e6c8; line-height: 1.3; }
.pm-way-btn {
  margin-inline-start: auto; flex: none; height: 34px; padding: 0 18px; border-radius: var(--radius-full);
  background: linear-gradient(145deg, #ffe6b0, #e0ab48); color: #4a2e08;
  font-family: var(--font-headline); font-weight: 800; font-size: 13px;
}
.pm-way-btn:active { transform: scale(0.96); }

/* ---- Rewards ---- */
.pm-rewards { display: flex; align-items: flex-end; justify-content: space-around; gap: 12px; margin-bottom: 16px; }
.pm-reward { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.pm-reward-art { font-size: 64px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)); }
.pm-reward-name { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: var(--tertiary-fixed-dim); text-align: center; }
.pm-tickets-box {
  border-radius: var(--radius-lg); padding: 14px; text-align: center;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,190,80,0.18), rgba(255,190,80,0.02));
  border: 1px solid rgba(255,200,90,0.2);
}
.pm-tickets-lbl { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: var(--tertiary-fixed-dim); margin-bottom: 4px; }
.pm-tickets-val {
  font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: 1px;
  background: linear-gradient(180deg, #ffe9a8, #e0ab48);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Countdown ---- */
.pm-countdown {
  border-radius: var(--radius-lg); padding: 14px; margin-bottom: 14px; text-align: center;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,200,90,0.10);
}
.pm-cd-lbl { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: var(--on-surface-variant); margin-bottom: 12px; }
.pm-cd-clock { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pm-cd-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pm-cd-cell b {
  display: grid; place-items: center; min-width: 38px; height: 40px; padding: 0 6px;
  border-radius: 10px; background: linear-gradient(180deg, #2a2110, #14100a);
  border: 1px solid rgba(255,200,90,0.18);
  font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #ffe9a8;
}
.pm-cd-cell i { font-family: var(--font-label); font-style: normal; font-size: 11px; color: var(--on-surface-variant); }

/* ---- Ranking rows ---- */
.pm-rk-list { display: flex; flex-direction: column; }
.pm-rk-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid rgba(255,255,255,0.05); }
.pm-rk-row:first-child { border-top: none; }
.pm-rk-num { width: 22px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--on-surface-variant); }
.pm-rk-num.r1 { color: #ffd95e; }
.pm-rk-num.r2 { color: #d8d8e0; }
.pm-rk-num.r3 { color: #e0a86a; }
.pm-rk-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; flex: none; border: 1px solid rgba(255,255,255,0.12); }
.pm-rk-name { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: #fff; display: flex; align-items: center; gap: 5px; }
.pm-rk-name .verified { width: 15px; height: 15px; }
.pm-rk-tk { display: flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #ffe9a8; }
.pm-ticket { font-size: 15px; }

/* ---- FAQ ---- */
.pm-faq { display: flex; flex-direction: column; gap: 18px; }
.pm-faq-q { font-family: var(--font-headline); font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 6px; }
.pm-faq-a { font-family: var(--font-body); font-size: 13px; color: var(--on-surface-variant); line-height: 1.6; white-space: pre-line; }

/* ============================================================
   JACO PRIME — "How to Collect Tickets" (recharge + social)
   ============================================================ */
#screen-collect .scroll { background: #060606; }
.pm-hero-sm { min-height: 210px; padding-top: 22px; }
.pm-hero-sm .pm-hero-logo { font-size: 44px; }
.pm-hero-sm .pm-hero-car { font-size: 64px; }
.pm-hero-sm .pm-hero-phones { font-size: 44px; }

.cl-title {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-headline); font-weight: 800; font-size: 22px;
  background: linear-gradient(180deg, #ffe9a8, #d09a32);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 4px 0 4px;
}
.cl-title-tk { font-size: 22px; -webkit-text-fill-color: initial; }

/* conversion rows */
.cl-rows { display: flex; flex-direction: column; gap: 14px; }
.cl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #14110c 0%, #0b0a07 100%);
  border: 1px solid rgba(255,200,90,0.16);
  box-shadow: inset 0 1px 0 rgba(255,220,140,0.08);
}
.cl-coins, .cl-tk {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #ffe9a8;
}
.cl-coin-ic, .cl-tk-ic { font-size: 26px; filter: drop-shadow(0 2px 6px rgba(255,180,60,0.4)); }
.cl-eq { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--on-surface-variant); }

/* info note + warning + CTA (shared by both modes) */
.cl-note {
  margin-top: 18px; padding: 16px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-body); font-size: 14px; color: #f3e6c8; text-align: center; line-height: 1.6;
}
.cl-warn {
  margin-top: 16px; padding: 0 8px; text-align: center; line-height: 1.6;
  font-family: var(--font-label); font-weight: 700; font-size: 13px; color: #f0843c;
}
.cl-cta {
  margin-top: 22px; width: 100%; height: 52px; border-radius: var(--radius-full);
  background: linear-gradient(145deg, #ffe6b0, #e0ab48); color: #4a2e08;
  font-family: var(--font-headline); font-weight: 800; font-size: 16px;
}
.cl-cta:active { transform: scale(0.98); }

/* social mode */
.cl-gift { font-size: 96px; text-align: center; margin: 24px 0; filter: drop-shadow(0 10px 22px rgba(255,180,60,0.45)); }
.cl-bullets { display: flex; flex-direction: column; gap: 16px; text-align: start; }
.cl-bullet { display: flex; align-items: flex-start; gap: 10px; }
.cl-bp { color: #e0ab48; font-weight: 800; flex: none; }

/* ============================================================
   JACO PRIME — Prestige tier event
   ============================================================ */
#screen-prestige .scroll {
  background: radial-gradient(120% 70% at 50% 0%, rgba(60,140,90,0.22), transparent 60%),
              linear-gradient(180deg, #0e2a1d 0%, #08160f 60%, #050d09 100%);
}
#screen-prestige .prime-header { background: #0c1f16; border-bottom-color: rgba(255,255,255,0.06); }
.pst-help {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1.6px solid #fff; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: #fff;
}
.pst-body { display: flex; flex-direction: column; padding: 18px var(--margin-mobile) 96px; }

/* tier tabs */
.pst-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pst-tabs::-webkit-scrollbar { display: none; }
.pst-tab {
  flex: none; height: 36px; padding: 0 18px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06); color: #cfe6da;
  font-family: var(--font-headline); font-weight: 700; font-size: 14px;
}
.pst-tab.active { background: linear-gradient(145deg, #ffe6b0, #d6a23f); color: #3a2a08; }

.pst-date { text-align: center; margin: 18px 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #f0d488; }

/* badge stage */
.pst-stage { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 0 8px; }
.pst-arrow { color: rgba(255,255,255,0.5); }
.pst-arrow .ico { width: 26px; height: 26px; }
.pst-arrow.end .chev-fwd { transform: scaleX(-1); }
[dir="rtl"] .pst-arrow .chev-back, [dir="rtl"] .pst-arrow .ico { } /* RTL flip handled globally */
.pst-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pst-badge-emoji {
  width: 150px; height: 150px; display: grid; place-items: center; font-size: 86px;
  border-radius: 24px;
  background: radial-gradient(120% 120% at 50% 30%, rgba(40,80,60,0.9), rgba(10,28,20,0.95));
  border: 3px solid; border-image: linear-gradient(160deg, #ffe9a8, #b5781d) 1;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 24px rgba(255,200,90,0.12);
}
.pst-badge-tier {
  padding: 4px 22px; border-radius: 6px; transform: translateY(-12px);
  background: linear-gradient(180deg, #1a3a2a, #0c2018); border: 1px solid rgba(255,200,90,0.4);
  font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: #f0d488;
}

.pst-lock {
  align-self: center; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; border-radius: var(--radius-full); margin-top: 2px;
  background: linear-gradient(145deg, #2a3a30, #14241c); border: 1px solid rgba(255,200,90,0.3);
  font-family: var(--font-label); font-weight: 700; font-size: 13px; color: #f0d488;
}
.pst-lock .ico { width: 15px; height: 15px; }

/* privileges */
.pst-priv-head {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 28px 0 16px;
  font-family: var(--font-headline); font-weight: 800; font-size: 16px; color: #f0d488;
}
.pst-wing { font-size: 16px; opacity: 0.85; }
.pst-wing.flip { transform: scaleX(-1); }
.pst-privs { display: flex; gap: 16px; justify-content: center; }
.pst-priv { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 120px; }
.pst-priv-art {
  position: relative; width: 120px; height: 90px; border-radius: 12px; display: grid; place-items: center;
  font-size: 44px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 30%, rgba(40,90,65,0.85), rgba(8,24,16,0.95));
  border: 1px solid rgba(255,200,90,0.25);
}
.pst-priv-badge {
  position: absolute; bottom: 6px; inset-inline-start: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 800; font-size: 13px; color: #ffe9a8;
}
[dir="rtl"] .pst-priv-badge { transform: translateX(50%); }
.pst-priv-play {
  position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,0.5); color: #fff;
}
[dir="rtl"] .pst-priv-play { transform: translate(50%, -50%); }
.pst-priv-play .ico { width: 18px; height: 18px; }
.pst-priv-name { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: #eaf5ef; }

/* footer */
.pst-footer {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  margin-top: 40px; padding: 16px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: #eaf5ef;
}
.pst-footer .pst-coin { font-size: 16px; }
.pst-footer b { color: #f0d488; }

/* ====== ARMY RANKINGS screen ====== */
#screen-armies { background: #0a0a0d; }
.arm-sky { position: relative; padding: 0 0 8px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(245,200,80,0.14), transparent 60%),
    linear-gradient(180deg, #16140f, #0a0a0d);
  overflow: hidden; }
.arm-sky::before { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 85% 45%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 40% 50%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.5px 1.5px at 10% 60%, rgba(255,255,255,.3), transparent);
  pointer-events: none; }
.arm-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 50px 18px 0; }
.arm-help, .arm-back { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #fff; cursor: pointer; }
.arm-q { font-size: 18px; font-weight: 700; }
.arm-back .ico { width: 22px; height: 22px; }
[dir="rtl"] .arm-back .chev-back { transform: scaleX(-1); }
.arm-title { position: relative; z-index: 2; text-align: center; padding: 6px 0 16px; }
.arm-title-sm { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: rgba(255,255,255,0.22); letter-spacing: 1px; }
.arm-title-lg { font-family: var(--font-display); font-size: 40px; font-weight: 900; letter-spacing: 1px; margin-top: -6px;
  background: linear-gradient(180deg,#ffe9a8,#f5c842 55%,#c8901a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 8px rgba(245,200,66,0.35)); }

.arm-body { padding: 14px 14px 28px; }
.arm-intro { background: var(--surface-container-high); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 16px; }
.arm-intro-head { display: flex; align-items: flex-start; }
.arm-intro-q { flex: 1; text-align: start; font-family: var(--font-headline); font-size: 17px; font-weight: 800; color: #f5c842; }
.arm-more { display: inline-flex; align-items: center; gap: 2px; background: none; border: none; color: #f5c842; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.arm-more-chev { width: 14px; height: 14px; }
[dir="rtl"] .arm-more-chev { transform: scaleX(-1); }
.arm-intro-d { text-align: start; color: var(--on-surface-variant); font-size: 13px; line-height: 1.7; margin: 10px 0 16px; }
.arm-intro-btns { display: flex; gap: 12px; }
.arm-btn { flex: 1; height: 46px; border-radius: var(--radius-full); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.arm-btn.primary { background: linear-gradient(180deg,#ffd95e,#f0b521); border: none; color: #3a2800; }
.arm-btn.ghost { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.18); color: #fff; }

.arm-range { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 14px; color: #e8e2d0; font-size: 14px; font-weight: 600; }
.arm-spark { color: #f5c842; }

.arm-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin-bottom: 12px; }
.arm-pod { flex: 1; max-width: 33%; cursor: pointer; }
.arm-pod-flag { position: relative; border-radius: 10px 10px 4px 4px; padding: 26px 8px 16px; text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%); }
.arm-pod.p1 .arm-pod-flag { background: linear-gradient(180deg,#5a4410,#2a1f08); border-top: 4px solid #f5c842; padding-top: 34px; }
.arm-pod.p2 .arm-pod-flag { background: linear-gradient(180deg,#3a3530,#1c1a17); border-top: 4px solid #b8b8b8; }
.arm-pod.p3 .arm-pod-flag { background: linear-gradient(180deg,#3a2a1a,#1c150d); border-top: 4px solid #c8773a; }
.arm-pod.p1 { margin-bottom: 4px; }
.arm-pod-rank { position: absolute; top: 6px; inset-inline-start: 0; inset-inline-end: 0; font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.arm-pod.p1 .arm-pod-rank { color: #ffe9a8; font-size: 18px; }
.arm-pod.p2 .arm-pod-rank { color: #d8d8d8; }
.arm-pod.p3 .arm-pod-rank { color: #e0a070; }
.arm-pod-emblem { width: 56px; height: 62px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 28px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: inset 0 2px 6px rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.35); }
.arm-pod.p1 .arm-pod-emblem { width: 64px; height: 70px; font-size: 32px; }
.arm-pod-name { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
.arm-pod-pts { margin-top: 6px; font-size: 13px; font-weight: 700; color: #f5c842; }
.arm-cup { margin-inline-start: 2px; }

.arm-list { display: flex; flex-direction: column; }
.arm-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); cursor: pointer; }
.arm-row-num { width: 22px; text-align: center; font-size: 18px; font-weight: 800; color: #fff; }
.arm-row-emblem { width: 42px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 22px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: inset 0 2px 5px rgba(255,255,255,.22), inset 0 -2px 5px rgba(0,0,0,.32); }
.arm-row-name { font-size: 16px; font-weight: 700; color: #fff; }
.arm-row-pts { display: flex; flex-direction: column; align-items: flex-start; }
.arm-row-pts .lbl { font-size: 11px; color: var(--on-surface-variant); }
.arm-row-pts .v { font-size: 15px; font-weight: 700; color: #fff; }

/* ====== EXPLORE ARMIES + CREATE ARMY ====== */
.ax-header { display: flex; align-items: center; padding: 50px 16px 12px; }
.ax-back { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: #fff; cursor: pointer; }
.ax-back .ico { width: 24px; height: 24px; }
[dir="rtl"] .ax-back .chev-back { transform: scaleX(-1); }
.ax-title { flex: 1; text-align: center; font-family: var(--font-headline); font-size: 20px; font-weight: 800; color: #fff; }
.ax-spacer { width: 38px; }

.ax-body { padding: 4px 16px 24px; }
.ax-search { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; margin-bottom: 14px;
  background: var(--surface-container-high); border-radius: var(--radius-lg); }
.ax-search-ico { opacity: .6; }
.ax-search-ico .ico { width: 20px; height: 20px; }
.ax-search-input { flex: 1; background: none; border: none; outline: none; color: var(--on-surface); font: inherit; font-size: 15px; text-align: start; }
.ax-search-input::placeholder { color: var(--on-surface-variant); }

.ax-list { display: flex; flex-direction: column; gap: 12px; }
.ax-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer;
  background: var(--surface-container); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-lg); }
.ax-emblem { width: 48px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 24px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: inset 0 2px 5px rgba(255,255,255,.22), inset 0 -2px 5px rgba(0,0,0,.32); }
.ax-name { font-size: 17px; font-weight: 700; color: #fff; }
.ax-members { font-size: 14px; color: var(--on-surface-variant); white-space: nowrap; }

.ac-body { padding: 8px 18px 28px; }
.ac-sec-title { font-family: var(--font-headline); font-size: 22px; font-weight: 800; color: #fff; text-align: start; margin: 18px 0 14px; }
.ac-card { background: var(--surface-container); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-lg); padding: 18px 16px; }
.ac-req { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; }
.ac-req-ic { width: 26px; height: 26px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; }
.ac-req-ic.ok { background: #f5b81e; }
.ac-req-ic.no { background: #e6452f; }
.ac-req-txt { flex: 1; text-align: start; font-size: 15px; line-height: 1.6; color: var(--on-surface); }
.ac-note { margin-top: 10px; padding: 14px 16px; text-align: center; font-size: 13px; color: #b89a5a;
  background: rgba(160,120,40,0.10); border: 1px solid rgba(160,120,40,0.30); border-radius: var(--radius-md); }
.ac-fund-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.ac-fund-star { flex: none; }
.ac-fund-txt { flex: 1; text-align: start; font-size: 15px; line-height: 1.7; color: var(--on-surface-variant); }
.ac-bar { padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); background: var(--surface-deep); border-top: 1px solid var(--glass-border); }
.ac-cta { width: 100%; height: 52px; border-radius: var(--radius-full); border: none; cursor: pointer;
  background: linear-gradient(180deg,#e6b53e,#bf8a17); color: #2a1d00; font: inherit; font-size: 17px; font-weight: 800; }

/* ====== SEARCH screen ====== */
.srch-header { position: relative; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 52px 16px 8px; }
.srch-box { flex: 1; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  background: var(--surface-container-high); border-radius: var(--radius-full); }
.srch-ico { display: inline-flex; opacity: .7; }
.srch-ico .ico { width: 18px; height: 18px; }
.srch-input { flex: 1; background: none; border: none; outline: none; color: var(--on-surface);
  font: inherit; font-size: 15px; text-align: start; }
.srch-input::placeholder { color: var(--on-surface-variant); }
.srch-go { background: none; border: none; padding: 4px; color: var(--on-surface); cursor: pointer; }
.srch-go .ico { width: 24px; height: 24px; }
[dir="rtl"] .srch-go .chev-back { transform: scaleX(-1); }

.srch-body { padding: 8px 16px 24px; }
.srch-sec-head { display: flex; align-items: center; margin: 10px 0 14px; }
.srch-sec-title { flex: 1; text-align: start; font-family: var(--font-headline); font-size: 19px; font-weight: 800; }
.srch-refresh { display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  color: var(--on-surface-variant); font: inherit; font-size: 14px; cursor: pointer; }
.srch-refresh .ico { width: 16px; height: 16px; }

#srch-suggest { display: flex; flex-direction: column; }
.srch-sug, .srch-cat { display: flex; align-items: center; gap: 10px; width: 100%; background: none;
  border: none; padding: 11px 0; color: var(--on-surface); font: inherit; font-size: 16px;
  cursor: pointer; text-align: start; }
.srch-sug-name { flex: 1; text-align: start; }
.srch-cat { font-weight: 600; }
.srch-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-full);
  background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.srch-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.srch-jk { font-size: 10px; font-weight: 800; color: var(--primary); vertical-align: super; }
.srch-tr { font-size: 10px; font-weight: 800; color: var(--on-surface-variant); vertical-align: super; }

.srch-rank-head { display: flex; align-items: center; gap: 8px; justify-content: flex-start;
  margin: 22px 0 8px; font-family: var(--font-headline); font-size: 18px; font-weight: 800; color: #ff7a3d; }
.srch-rank-fire { font-size: 18px; }
.srch-rank-list { display: flex; flex-direction: column; }
.srch-rank-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none;
  padding: 13px 0; color: var(--on-surface); font: inherit; cursor: pointer; }
.srch-rank-num { width: 22px; text-align: center; font-size: 17px; font-weight: 700; color: var(--on-surface); }
.srch-rank-name { flex: 1; text-align: start; font-size: 16px; font-weight: 600; }
.srch-views { color: var(--on-surface-variant); font-size: 14px; }

/* small util */
.muted { color: var(--on-surface-variant); }
.center { text-align: center; }
.gap { height: 12px; }

/* ============================================================
   Inline videos — real media layered over the gradient fallbacks
   ============================================================ */
.tile-video, .vc-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.tile-video { pointer-events: none; }
/* pk-split / dual-cam cells host their own video layer */
.ent-pksplit span, .ent-stack span { position: relative; overflow: hidden; }

/* video feed: pause overlay (single tap) */
.vc-pause {
  position: absolute; inset: 0; z-index: 2;
  display: none; place-items: center; pointer-events: none;
}
.vc-pause .ico {
  width: 64px; height: 64px; color: rgba(255,255,255,0.85);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5));
}
.video-card.user-paused .vc-pause { display: grid; }

/* video feed: floating sound toggle (below the top chrome) */
.vc-sound {
  position: absolute; top: 102px; inset-inline-end: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(7,0,41,0.45); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18); cursor: pointer;
}
.vc-sound .ico { width: 17px; height: 17px; }