/* ═══════════════════════════════════════
   TOKENS
═══════════════════════════════════════ */
:root {
  --bg: #0D0D0D;
  --bg2: #141414;
  --bg3: #1A1A1A;
  --bg4: #161616;
  --red: #E53E3E;
  --red2: #C53030;
  --red-dim: rgba(229,62,62,0.12);
  --border: rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.1);
  --text: #fff;
  --text-dim: rgba(255,255,255,0.45);
  --text-faint: rgba(255,255,255,0.2);
  --grad: linear-gradient(135deg,#E53E3E 0%,#C53030 50%,#9B2C2C 100%);
  --sat: env(safe-area-inset-top,0px);
  --sab: env(safe-area-inset-bottom,0px);
  --sal: env(safe-area-inset-left,0px);
  --sar: env(safe-area-inset-right,0px);
  --navbar-h: calc(56px + var(--sat));
  --bnav-h: calc(64px + var(--sab));
  --spd: 320ms;
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;overscroll-behavior:none;scroll-behavior:smooth}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);color:var(--text);min-height:100%;
  overflow-x:hidden;overscroll-behavior-y:contain;
  -webkit-font-smoothing:antialiased;
}
button{cursor:pointer;border:none;outline:none;font-family:inherit;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
input{font-family:inherit;outline:none;border:none}
img{display:block;width:100%;height:100%;object-fit:cover}
a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
nav,.bnav-item,.tab-btn,.chip,.ctrl-btn,.plan-btn,.mplan-btn{user-select:none;-webkit-user-select:none}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(229,62,62,0.3);border-radius:9px}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
}

/* ─── PAGE TRANSITIONS ─── */
#app{position:relative;overflow:hidden;min-height:100dvh}
.page{display:none;min-height:100dvh;will-change:transform}
.page.active{display:block}
@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideInLeft {from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.page.enter-right{animation:slideInRight var(--spd) cubic-bezier(.25,.46,.45,.94) forwards}
.page.enter-left {animation:slideInLeft  var(--spd) cubic-bezier(.25,.46,.45,.94) forwards}
.tab-content.fade-up{animation:fadeUp .2s ease forwards}

/* ─── RIPPLE ─── */
.ripple-container{position:relative;overflow:hidden}
.ripple-wave{position:absolute;border-radius:50%;background:rgba(255,255,255,0.16);
  transform:scale(0);pointer-events:none;animation:rippleAnim .5s linear}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* ─── UTILITY ─── */
.red-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.red-glow{box-shadow:0 0 20px rgba(229,62,62,.32),0 4px 12px rgba(0,0,0,.5)}
.red-glow-lg{box-shadow:0 0 36px rgba(229,62,62,.38),0 8px 24px rgba(0,0,0,.6)}
.live-badge{background:rgba(229,62,62,.9);color:#fff;font-size:9px;font-weight:800;
  padding:2px 7px;border-radius:99px;letter-spacing:.05em}
.no-scroll{overflow:hidden}
/* Pulse only where explicitly needed */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.pulse{animation:pulse 1.5s ease infinite}

/* ─── STATUS DOTS (inline, no per-element animation) ─── */
.sd-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px}
.sd-live   .sd-dot{background:#48BB78}
.sd-avail  .sd-dot{background:#ECC94B}
.sd-offline .sd-dot{background:#555}

/* ─── NAVBAR ─── */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--navbar-h);padding-top:var(--sat);
  display:flex;align-items:center;justify-content:space-between;
  padding-left:calc(16px + var(--sal));padding-right:calc(16px + var(--sar));
  background:rgba(13,13,13,.92);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
}
.nav-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px}
.nav-logo-icon{width:32px;height:32px;border-radius:8px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-size:14px;
  box-shadow:0 0 12px rgba(229,62,62,.4)}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-btn{padding:8px 16px;border-radius:10px;font-size:13px;font-weight:700;transition:all .2s}
.nav-btn-ghost{background:transparent;color:var(--text-dim)}
.nav-btn-ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-btn-red{background:var(--grad);color:#fff}

/* ─── BOTTOM NAV ─── */
#bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;
  height:var(--bnav-h);padding-bottom:var(--sab);
  padding-left:var(--sal);padding-right:var(--sar);
  background:rgba(14,14,14,.96);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border-top:1px solid var(--border);
  align-items:flex-start;justify-content:space-around;padding-top:4px;
}
#bottom-nav.visible{display:flex}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:transparent;color:var(--text-faint);
  font-size:10px;font-weight:700;padding:6px 4px;border-radius:12px;
  transition:color .2s;position:relative;overflow:hidden}
.bnav-item.active{color:var(--red)}
.bnav-item.active .bnav-icon{transform:translateY(-1px) scale(1.1)}
.bnav-icon{font-size:21px;line-height:1;transition:transform .2s}
.bnav-dot{position:absolute;top:4px;right:50%;transform:translateX(10px);
  width:6px;height:6px;border-radius:50%;background:var(--red);display:none}
.bnav-item.has-dot .bnav-dot{display:block}

/* ─── INSTALL BANNER ─── */
#install-banner{
  display:none;position:fixed;bottom:calc(var(--bnav-h) + 12px);left:12px;right:12px;z-index:300;
  background:var(--bg2);border:1px solid rgba(229,62,62,.4);border-radius:16px;padding:14px 16px;
  box-shadow:0 8px 32px rgba(0,0,0,.7);align-items:center;gap:12px;
  animation:slideUpBanner .4s cubic-bezier(.25,.46,.45,.94)}
#install-banner.show{display:flex}
@keyframes slideUpBanner{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.banner-icon{width:44px;height:44px;border-radius:12px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.banner-text{flex:1}
.banner-text p:first-child{font-weight:800;font-size:13px}
.banner-text p:last-child{font-size:11px;color:var(--text-dim)}
.banner-install{background:var(--grad);color:#fff;font-weight:800;font-size:12px;padding:8px 14px;border-radius:10px;flex:none}
.banner-close{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);
  font-size:12px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--text-dim)}

/* ─── SPLASH ─── */
#splash{
  position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .4s ease}
#splash.fade-out{opacity:0;pointer-events:none}
.splash-logo{width:80px;height:80px;border-radius:20px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-size:40px;
  margin-bottom:20px;box-shadow:0 0 40px rgba(229,62,62,.5)}
.splash-name{font-size:26px;font-weight:900}
.splash-sub{color:var(--text-dim);font-size:13px;margin-top:6px}
.splash-bar{width:120px;height:3px;background:rgba(255,255,255,.08);border-radius:99px;margin-top:32px;overflow:hidden}
.splash-bar-fill{height:100%;background:var(--grad);border-radius:99px;animation:splashLoad 1s ease forwards}
@keyframes splashLoad{from{width:0}to{width:100%}}

/* ─── HOME ─── */
#page-home{padding-top:var(--navbar-h)}
.hero{position:relative;padding:36px 16px 28px;overflow:hidden}
.hero-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:700px;height:380px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(229,62,62,.5),transparent 70%);
  opacity:.13;pointer-events:none}
.hero-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:32px;flex-wrap:wrap;justify-content:center}
.hero-copy{flex:1;min-width:260px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;
  background:rgba(229,62,62,.1);border:1px solid rgba(229,62,62,.3);
  border-radius:99px;padding:5px 14px;font-size:12px;font-weight:800;color:var(--red);margin-bottom:16px}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 1.5s infinite}
.hero-h1{font-size:clamp(26px,6.5vw,42px);font-weight:900;line-height:1.15;margin-bottom:12px}
.hero-sub{color:var(--text-dim);font-size:15px;line-height:1.7;margin-bottom:24px;max-width:400px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-red-lg{background:var(--grad);color:#fff;font-weight:800;font-size:15px;padding:14px 28px;border-radius:12px;transition:opacity .2s,transform .1s}
.btn-red-lg:active{transform:scale(.97);opacity:.88}
.btn-ghost-lg{background:transparent;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.15);
  font-weight:600;font-size:14px;padding:14px 22px;border-radius:12px;transition:all .2s}
.btn-ghost-lg:active{background:rgba(255,255,255,.05)}
.hero-stats{display:flex;gap:32px;margin-top:28px}
.hero-stat p:first-child{font-size:22px;font-weight:900;color:var(--red)}
.hero-stat p:last-child{font-size:11px;color:var(--text-dim);margin-top:2px}

.hero-card-wrap{position:relative;flex:none}
.hero-card{width:180px;border-radius:18px;overflow:hidden;border:2px solid rgba(229,62,62,.6);aspect-ratio:3/4;position:relative}
.hero-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,transparent 55%)}
.hero-card-live{position:absolute;top:10px;left:10px}
.hero-card-info{position:absolute;bottom:0;left:0;right:0;padding:14px}
.hero-card-info h3{font-weight:800;font-size:15px}
.hero-card-info p{color:rgba(255,255,255,.5);font-size:11px;margin-bottom:10px}
.hero-card-info button{width:100%;background:var(--grad);color:#fff;font-weight:800;font-size:12px;padding:8px;border-radius:10px}
.hero-mini-cards{position:absolute;right:-52px;top:16px;display:flex;flex-direction:column;gap:8px}
.hero-mini{width:44px;height:62px;border-radius:10px;overflow:hidden;border:1px solid rgba(229,62,62,.4)}

.section{padding:20px 16px;content-visibility:auto;contain-intrinsic-size:0 400px}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-title{font-weight:800;font-size:16px}
.live-count{display:flex;align-items:center;gap:6px;background:rgba(229,62,62,.1);
  border:1px solid rgba(229,62,62,.3);border-radius:99px;padding:4px 12px;font-size:11px;font-weight:800;color:var(--red)}

.reels-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.reels-strip::-webkit-scrollbar{display:none}
.reel-card{flex:none;width:110px;border-radius:12px;overflow:hidden;position:relative;aspect-ratio:3/4;
  background:var(--bg3);cursor:pointer;scroll-snap-align:start;transition:transform .18s}
.reel-card:active{transform:scale(.95)}
.reel-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 55%)}
.reel-live{position:absolute;top:6px;left:6px}
.reel-info{position:absolute;bottom:0;left:0;right:0;padding:8px}
.reel-info p:first-child{font-weight:700;font-size:11px}
.reel-info p:last-child{color:rgba(255,255,255,.5);font-size:9px}

.profiles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:480px){.profiles-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:700px){.profiles-grid{grid-template-columns:repeat(4,1fr)}}
.profile-card{border-radius:12px;overflow:hidden;position:relative;aspect-ratio:3/4;
  background:var(--bg3);cursor:pointer;transition:transform .18s}
.profile-card:active{transform:scale(.97)}
.profile-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.05) 55%,transparent 100%)}
.profile-live{position:absolute;top:8px;left:8px}
.profile-verified{position:absolute;top:8px;right:8px;width:20px;height:20px;background:rgba(229,62,62,.9);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.profile-info{position:absolute;bottom:0;left:0;right:0;padding:10px}
.profile-info h4{font-weight:800;font-size:13px}
.profile-info .loc{color:rgba(255,255,255,.4);font-size:10px;margin-bottom:6px}
.profile-btns{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.pbtn-voice{display:flex;align-items:center;justify-content:center;height:30px;border-radius:8px;font-size:10px;font-weight:700;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15)}
.pbtn-video{display:flex;align-items:center;justify-content:center;height:30px;border-radius:8px;font-size:10px;font-weight:800;color:#fff;background:var(--grad)}

.plans-section{padding:28px 16px;content-visibility:auto;contain-intrinsic-size:0 320px}
.plans-title{text-align:center;margin-bottom:20px}
.plans-title p:first-child{color:var(--text-dim);font-size:13px;margin-bottom:4px}
.plans-title h2{font-weight:800;font-size:20px}
.plans-grid{display:grid;grid-template-columns:1fr;gap:12px;max-width:700px;margin:0 auto}
@media(min-width:500px){.plans-grid{grid-template-columns:repeat(3,1fr)}}
.plan-card{border-radius:14px;padding:20px 16px;text-align:center;
  border:1px solid rgba(255,255,255,.08);background:var(--bg4);position:relative}
.plan-card.popular{border-color:rgba(229,62,62,.6);background:linear-gradient(135deg,rgba(229,62,62,.12),rgba(197,48,48,.06))}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad);
  color:#fff;font-size:10px;font-weight:800;padding:2px 14px;border-radius:99px;white-space:nowrap}
.plan-name{color:var(--text-dim);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.plan-price{font-size:30px;font-weight:900;margin-bottom:4px}
.plan-desc{color:rgba(255,255,255,.35);font-size:11px;margin-bottom:16px}
.plan-btn{width:100%;padding:10px;border-radius:10px;font-size:13px;font-weight:800;transition:opacity .2s,transform .1s}
.plan-btn:active{transform:scale(.97)}
.plan-btn.red{background:var(--grad);color:#fff}
.plan-btn.outline{background:rgba(229,62,62,.08);border:1px solid rgba(229,62,62,.4);color:var(--red)}

.why-section{padding:28px 16px;background:#111;content-visibility:auto;contain-intrinsic-size:0 280px}
.why-title{font-weight:800;font-size:18px;text-align:center;margin-bottom:18px}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:600px;margin:0 auto}
@media(min-width:500px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-card{border-radius:12px;padding:16px;border:1px solid var(--border);background:var(--bg4)}
.why-card .emoji{font-size:22px}
.why-card h4{font-weight:700;font-size:13px;margin-top:8px}
.why-card p{color:rgba(255,255,255,.4);font-size:11px;margin-top:4px}

.cta-section{padding:48px 16px;text-align:center;position:relative;overflow:hidden}
.cta-glow{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(229,62,62,.09),transparent 70%);pointer-events:none}
.cta-section h2{font-size:clamp(20px,5vw,28px);font-weight:900;margin-bottom:6px}
.cta-section p{color:var(--text-dim);font-size:13px;margin-bottom:24px}

footer{border-top:1px solid var(--border);padding:24px 16px calc(24px + var(--sab));text-align:center;background:#0A0A0A}
.footer-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px}
.footer-logo .icon{width:20px;height:20px;border-radius:5px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:10px}
.footer-logo span{font-weight:800;font-size:14px}
footer p{color:var(--text-faint);font-size:11px}

/* ─── AUTH ─── */
#page-login,#page-register{padding-top:var(--navbar-h);display:flex;align-items:center;justify-content:center;min-height:100dvh}
.auth-box{width:100%;max-width:380px;background:var(--bg2);border:1px solid var(--border2);border-radius:20px;padding:28px 24px;margin:20px 16px}
.auth-logo{text-align:center;margin-bottom:20px}
.auth-logo .big-icon{width:56px;height:56px;border-radius:14px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 10px}
.auth-logo h1{font-weight:800;font-size:22px}
.auth-logo p{color:var(--text-dim);font-size:13px;margin-top:4px}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;font-weight:700;color:var(--text-dim);margin-bottom:6px}
.form-group input{width:100%;background:var(--bg3);border:1px solid rgba(255,255,255,.08);border-radius:10px;
  padding:13px 14px;font-size:14px;color:#fff;transition:border-color .2s}
.form-group input::placeholder{color:rgba(255,255,255,.2)}
.form-group input:focus{border-color:rgba(229,62,62,.5)}
.auth-submit{width:100%;background:var(--grad);color:#fff;font-weight:800;font-size:15px;padding:14px;border-radius:12px;margin-top:4px;transition:opacity .2s,transform .1s}
.auth-submit:active{transform:scale(.98);opacity:.9}
.auth-footer{text-align:center;margin-top:16px;font-size:13px;color:var(--text-dim)}
.auth-footer a{color:var(--red);font-weight:700;cursor:pointer}
.auth-error{background:rgba(229,62,62,.12);border:1px solid rgba(229,62,62,.3);border-radius:10px;
  padding:10px 14px;font-size:13px;color:var(--red);margin-bottom:12px;display:none}

/* ─── DASHBOARD ─── */
#page-dashboard{padding-top:var(--navbar-h);padding-bottom:var(--bnav-h)}
.user-desk{margin:12px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.desk-banner{height:52px;background:var(--grad);position:relative}
.desk-banner::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 50%,rgba(255,255,255,.1),transparent 60%)}
.desk-body{padding:0 16px 16px}
.desk-top{display:flex;align-items:flex-end;gap:12px;margin-top:-22px}
.desk-avatar{width:52px;height:52px;border-radius:14px;background:var(--grad);border:2px solid var(--bg);
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;flex:none}
.desk-info{flex:1;padding-bottom:2px}
.desk-info h3{font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px}
.desk-premium{display:flex;align-items:center;gap:4px;background:rgba(229,62,62,.15);
  border:1px solid rgba(229,62,62,.3);color:var(--red);font-size:9px;font-weight:800;padding:2px 7px;border-radius:99px}
.desk-email{color:var(--text-faint);font-size:11px}
.desk-coins-btn{display:flex;align-items:center;gap:6px;background:var(--grad);color:#fff;
  font-size:12px;font-weight:800;padding:6px 12px;border-radius:10px;flex:none;transition:opacity .2s,transform .1s}
.desk-coins-btn:active{transform:scale(.95)}
.desk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.desk-stat{background:var(--bg3);border:1px solid rgba(255,255,255,.05);border-radius:10px;padding:10px 8px;text-align:center}
.desk-stat .ds-icon{font-size:15px}
.desk-stat .ds-val{font-weight:800;font-size:14px;margin:2px 0}
.desk-stat .ds-lbl{font-size:9px;color:var(--text-faint)}
.desk-upgrade{width:100%;margin-top:12px;background:rgba(229,62,62,.06);border:1px solid rgba(229,62,62,.3);
  color:var(--red);font-weight:800;font-size:12px;padding:9px 16px;border-radius:10px;transition:background .2s,transform .1s}
.desk-upgrade:active{transform:scale(.98);background:rgba(229,62,62,.12)}

.tab-bar{display:flex;gap:4px;background:#181818;border-radius:12px;padding:4px;margin:8px 12px}
.tab-btn{flex:1;padding:8px;border-radius:8px;font-size:12px;font-weight:800;color:var(--text-dim);background:transparent;transition:all .2s}
.tab-btn.active{background:var(--grad);color:#fff;box-shadow:0 2px 8px rgba(229,62,62,.3)}

.explore-wrap{padding:0 12px}
.filter-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;-webkit-overflow-scrolling:touch}
.filter-chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:6px 16px;border-radius:99px;font-size:12px;font-weight:800;white-space:nowrap;
  background:#181818;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.45);transition:all .2s}
.chip.active{background:var(--grad);color:#fff;border-color:var(--red)}
.chip-live{flex:none;display:flex;align-items:center;gap:6px;background:#181818;
  border:1px solid rgba(255,255,255,.1);border-radius:99px;padding:6px 14px;font-size:10px;color:rgba(255,255,255,.4)}

/* Dashboard grid — 2 col, paginated */
.dash-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding-bottom:12px}
@media(min-width:480px){.dash-grid{grid-template-columns:repeat(3,1fr)}}
.dash-card{border-radius:12px;overflow:hidden;position:relative;aspect-ratio:3/4;background:var(--bg3);transition:transform .15s}
.dash-card:active{transform:scale(.97)}
.dash-card.offline{opacity:.48}
.dash-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.93) 0%,rgba(0,0,0,.04) 55%,transparent 100%)}
.dash-card-live{position:absolute;top:8px;left:8px}
.dash-card-verified{position:absolute;top:8px;right:8px;width:18px;height:18px;background:rgba(229,62,62,.9);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800}
.dash-card-info{position:absolute;bottom:0;left:0;right:0;padding:10px}
.dash-card-info h4{font-weight:800;font-size:13px}
.dash-card-info .loc{color:rgba(255,255,255,.35);font-size:10px}
.status-dot{display:flex;align-items:center;font-size:10px;font-weight:800;margin:3px 0 6px}
.sd-live{color:#48BB78}.sd-avail{color:#ECC94B}.sd-offline{color:rgba(255,255,255,.25)}
.dash-btns{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.db-voice{display:flex;align-items:center;justify-content:center;height:30px;border-radius:8px;font-size:10px;font-weight:700;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);transition:background .15s,transform .1s}
.db-voice:active{transform:scale(.95)}
.db-video{display:flex;align-items:center;justify-content:center;height:30px;border-radius:8px;font-size:10px;font-weight:800;color:#fff;background:var(--grad);transition:opacity .15s,transform .1s}
.db-video:active{transform:scale(.95);opacity:.85}
.db-video:disabled{background:rgba(100,100,100,.4);cursor:not-allowed}

/* Load more button */
.load-more-btn{display:block;width:calc(100% - 0px);margin:12px 0 4px;padding:12px;
  background:rgba(229,62,62,.08);border:1px solid rgba(229,62,62,.35);
  color:var(--red);font-weight:800;font-size:13px;border-radius:12px;transition:background .2s,transform .1s}
.load-more-btn:active{transform:scale(.98);background:rgba(229,62,62,.14)}

/* ─── WALLET ─── */
.wallet-wrap{padding:0 12px 12px}
.wallet-card{position:relative;border-radius:18px;overflow:hidden;background:var(--grad);padding:20px;margin-bottom:16px}
.wallet-card::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.1)}
.wallet-card .coin-icon{font-size:22px;margin-bottom:8px}
.wallet-card .bal-label{color:rgba(255,255,255,.6);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.wallet-card .bal-amt{font-size:52px;font-weight:900;color:#fff;line-height:1.1;margin:4px 0 2px}
.wallet-card .bal-sub{color:rgba(255,255,255,.5);font-size:13px}
.wallet-card .bal-row{display:flex;gap:28px;margin-top:12px}
.wallet-card .bal-row div p:first-child{color:rgba(255,255,255,.35);font-size:10px;text-transform:uppercase}
.wallet-card .bal-row div p:last-child{font-weight:800;font-size:14px;color:#fff}
.plan-status{display:flex;align-items:center;gap:12px;border-radius:12px;padding:14px;
  border:1px solid rgba(229,62,62,.4);background:rgba(229,62,62,.08);margin-bottom:16px}
.plan-icon{width:36px;height:36px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;flex:none}
.buy-plan-btn{width:100%;background:var(--grad);color:#fff;font-weight:800;font-size:14px;padding:13px;border-radius:12px;margin-bottom:16px;transition:opacity .2s,transform .1s}
.buy-plan-btn:active{transform:scale(.98)}
.tx-label{font-size:10px;font-weight:800;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.tx-list{display:flex;flex-direction:column;gap:6px}
.tx-item{display:flex;align-items:center;gap:12px;background:var(--bg4);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:11px 14px}
.tx-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;font-size:14px}
.tx-icon.plus{background:rgba(72,187,120,.12)}.tx-icon.minus{background:rgba(245,101,101,.12)}
.tx-name{flex:1;min-width:0}
.tx-name p:first-child{font-size:13px;font-weight:600}
.tx-name p:last-child{font-size:10px;color:var(--text-faint)}
.tx-amt{font-weight:800;font-size:14px;flex:none}
.tx-amt.plus{color:#48BB78}.tx-amt.minus{color:#FC8181}
.empty-state{text-align:center;padding:48px 16px}
.empty-state .emoji{font-size:40px;margin-bottom:12px}
.empty-state p{color:rgba(255,255,255,.25);font-size:14px}

/* ─── HISTORY ─── */
.history-wrap{padding:0 12px 12px}
.history-label{font-size:10px;font-weight:800;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.call-item{display:flex;align-items:center;gap:12px;background:var(--bg4);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:12px 14px;margin-bottom:6px}
.call-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;font-size:14px}
.call-icon.video{background:rgba(229,62,62,.15)}.call-icon.voice{background:rgba(255,255,255,.07)}
.call-info{flex:1}
.call-info p:first-child{font-size:13px;font-weight:600}
.call-info p:last-child{font-size:10px;color:var(--text-faint);margin-top:2px}
.call-meta{text-align:right;flex:none}
.call-meta p:first-child{font-size:11px;font-weight:800;color:#48BB78}
.call-meta p:last-child{font-size:10px;color:#FC8181;margin-top:2px}

/* ─── CALL PAGE ─── */
#page-call{position:fixed;inset:0;z-index:200;background:#000}
.call-bg{position:absolute;inset:0}
.call-bg img{filter:blur(4px) brightness(.33)}
.call-bg-grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.7) 100%)}
.call-top{position:absolute;top:calc(var(--sat) + 16px);left:16px;right:16px;display:flex;align-items:center;justify-content:space-between}
.call-label{font-size:12px;font-weight:800;color:rgba(255,255,255,.7)}
.call-status-badge{display:flex;align-items:center;gap:6px;background:rgba(229,62,62,.3);
  border:1px solid rgba(229,62,62,.5);border-radius:99px;padding:4px 12px;font-size:11px;font-weight:800;color:#fff}
.call-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);text-align:center;width:100%;padding:0 20px}
.call-avatar{width:96px;height:96px;border-radius:50%;margin:0 auto 16px;overflow:hidden;border:3px solid rgba(229,62,62,.7)}
.call-center h2{font-size:22px;font-weight:900;margin-bottom:6px}
.call-center .call-sub{color:rgba(255,255,255,.6);font-size:14px;margin-bottom:8px}
.call-timer{font-size:36px;font-weight:900;letter-spacing:.05em;color:var(--red);text-shadow:0 0 20px rgba(229,62,62,.5)}
.wave-wrap{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:16px;height:32px}
.wave-bar{width:4px;border-radius:99px;background:rgba(229,62,62,.7);animation:wave 1.2s ease-in-out infinite}
@keyframes wave{0%,100%{height:8px;opacity:.5}50%{height:28px;opacity:1}}
.wave-bar:nth-child(1){animation-delay:0s}.wave-bar:nth-child(2){animation-delay:.15s}
.wave-bar:nth-child(3){animation-delay:.3s}.wave-bar:nth-child(4){animation-delay:.45s}
.wave-bar:nth-child(5){animation-delay:.6s}.wave-bar:nth-child(6){animation-delay:.75s}
.call-controls{position:absolute;bottom:calc(var(--sab) + 40px);left:0;right:0;display:flex;align-items:center;justify-content:center;gap:20px}
.ctrl-btn{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);transition:transform .15s,background .2s}
.ctrl-btn:active{transform:scale(.9)}
.ctrl-btn.end{background:var(--grad);width:72px;height:72px;font-size:26px;box-shadow:0 0 24px rgba(229,62,62,.5)}
.ctrl-btn.muted{background:rgba(229,62,62,.3);border:1px solid rgba(229,62,62,.5)}
.connecting-text{color:rgba(255,255,255,.7);font-size:14px;font-weight:600;margin-top:8px}
.small-self{position:absolute;bottom:calc(var(--sab) + 130px);right:16px;width:80px;height:110px;
  border-radius:12px;overflow:hidden;border:2px solid rgba(229,62,62,.5)}
.self-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#1a1a1a,#2a2a2a);display:flex;align-items:center;justify-content:center;font-size:28px}

/* ─── PAYMENT MODAL ─── */
.modal-backdrop{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center}
@media(min-width:480px){.modal-backdrop{align-items:center}}
.modal-box{width:100%;max-width:420px;background:var(--bg2);border:1px solid rgba(255,255,255,.1);
  border-radius:24px 24px 0 0;overflow:hidden;max-height:92dvh;animation:sheetUp .3s cubic-bezier(.25,.46,.45,.94)}
@media(min-width:480px){.modal-box{border-radius:20px;animation:scaleIn .28s cubic-bezier(.25,.46,.45,.94)}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes scaleIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.modal-handle{width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,.15);margin:10px auto 0}
.modal-header{background:var(--grad);padding:16px 20px 18px;position:relative}
.modal-header::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.12),transparent 60%)}
.modal-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.15);font-size:14px;color:#fff;display:flex;align-items:center;justify-content:center}
.modal-header .call-type{font-size:11px;font-weight:800;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.modal-header h2{font-size:17px;font-weight:900;color:#fff}
.modal-header p{font-size:11px;color:rgba(255,255,255,.55);margin-top:2px}
.modal-plans{padding:14px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:55dvh}
.mplan{border-radius:14px;padding:14px;border:1px solid rgba(255,255,255,.07);background:#1E1E1E;
  position:relative;display:flex;gap:12px;align-items:flex-start;transition:transform .1s}
.mplan:active{transform:scale(.99)}
.mplan.popular{border-color:rgba(229,62,62,.5);background:linear-gradient(135deg,rgba(229,62,62,.13),rgba(197,48,48,.06))}
.mplan-badge{position:absolute;top:-11px;left:14px;background:var(--grad);color:#fff;font-size:9px;font-weight:800;padding:2px 10px;border-radius:99px}
.mplan-info{flex:1}
.mplan-price{font-size:24px;font-weight:900}
.mplan-coins{display:inline-block;font-size:10px;font-weight:800;background:rgba(229,62,62,.15);color:var(--red);padding:2px 8px;border-radius:99px;margin-left:6px}
.mplan-name{font-size:12px;color:var(--text-dim);font-weight:600;margin-top:2px}
.mplan-features{margin-top:6px;display:flex;flex-direction:column;gap:2px}
.mplan-features span{font-size:11px;color:rgba(255,255,255,.3)}
.mplan-features span::before{content:'✓ ';color:var(--red)}
.mplan-btn{flex:none;min-width:76px;padding:8px 12px;border-radius:10px;font-size:12px;font-weight:800;transition:opacity .2s,transform .1s;align-self:center}
.mplan-btn:active{transform:scale(.95)}
.mplan-btn.red{background:var(--grad);color:#fff}
.mplan-btn.outline{background:rgba(229,62,62,.08);border:1px solid rgba(229,62,62,.4);color:var(--red)}
.modal-footer{text-align:center;padding:8px 16px calc(16px + var(--sab));color:rgba(255,255,255,.2);font-size:10px}

/* ─── TOAST ─── */
.toast-wrap{position:fixed;top:calc(var(--navbar-h) + 8px);right:14px;z-index:500;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--bg2);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 16px;
  max-width:280px;box-shadow:0 8px 32px rgba(0,0,0,.6);animation:slideInToast .28s cubic-bezier(.25,.46,.45,.94);font-size:13px;font-weight:600}
.toast.success{border-left:3px solid #48BB78}
.toast.error{border-left:3px solid var(--red)}
@keyframes slideInToast{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ─── RAZORPAY PAYMENT BUTTON ─── */
.rzp-btn-form{display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* Override Razorpay's injected button to match app theme */
.rzp-btn-form .razorpay-payment-button{
  background:linear-gradient(135deg,#E53E3E,#C53030,#9B2C2C) !important;
  color:#fff !important;border:none !important;border-radius:10px !important;
  padding:10px 16px !important;font-size:13px !important;font-weight:700 !important;
  cursor:pointer !important;white-space:nowrap !important;
  box-shadow:0 4px 14px rgba(229,62,62,.4) !important;
  font-family:'Poppins',sans-serif !important;
  min-width:88px !important;
  transition:transform .15s !important;
}
.rzp-btn-form .razorpay-payment-button:active{transform:scale(.95) !important}

/* ─── LIVE STREAM SECTION ─── */
.ls-section{padding:0 0 24px}
.ls-stage{
  position:relative;width:100%;max-width:420px;margin:0 auto;
  aspect-ratio:9/16;max-height:82vh;border-radius:16px;overflow:hidden;
  background:#111;box-shadow:0 16px 48px rgba(229,62,62,.2);
  cursor:pointer;
}
.ls-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:opacity .35s}
.ls-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 30%,transparent 55%,rgba(0,0,0,.85) 100%)}

/* progress bars */
.ls-progress-bar{position:absolute;top:10px;left:10px;right:10px;z-index:5;display:flex;gap:4px}
.ls-seg{flex:1;height:3px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden}
.ls-seg .ls-fill{height:100%;width:0%;background:#fff;border-radius:2px}
.ls-seg.done .ls-fill{width:100%}
.ls-seg.active .ls-fill{animation:lsFill var(--ls-dur,8s) linear forwards}
@keyframes lsFill{from{width:0%}to{width:100%}}

/* top bar */
.ls-top{position:absolute;top:22px;left:12px;right:12px;z-index:6;display:flex;justify-content:space-between;align-items:center}
.ls-live-badge{display:flex;align-items:center;gap:5px;background:var(--red);color:#fff;font-size:11px;font-weight:800;letter-spacing:.5px;padding:4px 8px;border-radius:6px}
.ls-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse .9s infinite}
.ls-viewers{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;padding:4px 8px;border-radius:20px;backdrop-filter:blur(4px)}

/* chat */
.ls-chat{position:absolute;bottom:90px;left:10px;right:80px;z-index:6;display:flex;flex-direction:column;gap:5px;pointer-events:none;overflow:hidden;max-height:140px;justify-content:flex-end}
.ls-msg{display:inline-flex;align-items:center;gap:5px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);border-radius:16px;padding:5px 9px;font-size:12px;font-weight:600;color:#fff;animation:lsMsgIn .3s ease;width:fit-content;max-width:100%}
.ls-msg .ls-mu{color:var(--red);font-size:11px;white-space:nowrap}
.ls-msg .ls-mt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes lsMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* bottom */
.ls-bottom{position:absolute;bottom:0;left:0;right:0;z-index:6;display:flex;align-items:flex-end;justify-content:space-between;padding:12px 12px calc(12px + var(--sab))}
.ls-info .ls-name{font-size:16px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.ls-info .ls-city{font-size:12px;color:rgba(255,255,255,.7);margin-top:2px}
.ls-join-btn{background:var(--grad);color:#fff;border:none;border-radius:22px;padding:10px 16px;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;box-shadow:0 4px 16px rgba(229,62,62,.4);transition:transform .15s}
.ls-join-btn:active{transform:scale(.95)}

/* nav arrows */
.ls-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:7;background:rgba(0,0,0,.45);border:none;color:#fff;font-size:28px;line-height:1;padding:8px 12px;cursor:pointer;border-radius:8px;backdrop-filter:blur(4px);transition:background .2s}
.ls-nav:hover{background:rgba(229,62,62,.5)}
.ls-prev{left:6px}
.ls-next{right:6px}

/* ─── SOCIAL PROOF NOTIFICATION ─── */
.sp-notif{
  position:fixed;bottom:calc(72px + var(--sab));left:14px;z-index:600;
  display:flex;align-items:center;gap:10px;
  background:#1a1a1a;border:1px solid rgba(229,62,62,.35);border-left:3px solid var(--red);
  border-radius:12px;padding:10px 12px 10px 10px;max-width:265px;
  box-shadow:0 8px 32px rgba(0,0,0,.75);
  animation:spIn .35s cubic-bezier(.25,.46,.45,.94) both;
}
.sp-notif.sp-hide{opacity:0;transform:translateX(-24px);transition:opacity .42s,transform .42s}
.sp-icon{font-size:20px;flex-shrink:0;line-height:1}
.sp-body{flex:1;min-width:0}
.sp-title{font-size:12px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-sub{font-size:11px;color:rgba(255,255,255,.55);margin-top:2px}
.sp-close{background:none;border:none;color:rgba(255,255,255,.35);font-size:18px;line-height:1;cursor:pointer;padding:0 0 0 4px;flex-shrink:0;transition:color .2s}
.sp-close:hover{color:#fff}
@keyframes spIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}

/* Lazy image placeholder */
img[data-src]{background:var(--bg3)}