/* ==========================================================================
   SKYVRONETWORKS — Enhancements Layer
   Adds: bigger logo, dark/light theme, global hover + motion effects,
   and an interactive touch/pointer-reactive Hero background.
   Loaded AFTER style.css so these rules can safely override it.
   ========================================================================== */

/* ---------------------------------- Logo (bigger) ------------------------ */
.site-header .logo img{ height:64px !important; transition:transform .3s var(--ease); }
.site-header .logo:hover img{ transform:scale(1.05); }
.site-footer .logo img{ height:60px !important; }

/* ---------------------------------- Logo (light/dark swap) --------------- */
/* logo.png is a light-colored wordmark made for dark backgrounds; it goes
   invisible on a white surface, so we swap in a dark-wordmark variant
   (logo-light.png) whenever the site is in light mode. */
.logo{ position:relative; display:inline-flex; align-items:center; }
.logo .logo-light{ display:none; }
html[data-theme="light"] .logo .logo-dark{ display:none !important; }
html[data-theme="light"] .logo .logo-light{ display:block !important; }

/* ---------------------------------- Light / Dark theme -------------------- */
html[data-theme="light"]{
  --bg:            #f6f6f9;
  --bg-raised:     #ffffff;
  --bg-elevated:   #ffffff;
  --surface:       rgba(10,10,20,0.035);
  --surface-hover: rgba(10,10,20,0.065);
  --border:        rgba(10,10,20,0.10);
  --border-strong: rgba(10,10,20,0.20);
  --text:          #101018;
  --text-dim:      #52525c;
  --text-faint:    #83838d;
  --shadow-card:   0 20px 55px -22px rgba(20,20,35,0.16);
}
html[data-theme="light"] body{
  background:
    radial-gradient(80% 60% at 15% -10%, rgba(255,43,69,0.07) 0%, transparent 55%),
    radial-gradient(60% 50% at 100% 0%, rgba(255,43,69,0.05) 0%, transparent 50%),
    var(--bg);
}
html[data-theme="light"] .site-header{ background:rgba(255,255,255,0.72); }
html[data-theme="light"] .mobile-nav{ background:rgba(255,255,255,0.98); }
html[data-theme="light"] .mobile-backdrop{ background:rgba(20,20,30,0.35); }
html[data-theme="light"] .final-cta{ background:linear-gradient(160deg, var(--bg-elevated), #fdeaec); }
html[data-theme="light"] .auth-visual{
  background:
    radial-gradient(70% 60% at 30% 20%, rgba(255,43,69,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-raised), var(--bg));
}
html[data-theme="light"] ::selection{ background:rgba(255,43,69,0.18); }
html{ transition:background-color .35s ease; }
body, .site-header, .mobile-nav, .channel-card, .cat-card, .feat-card, .service-card,
.testi-card, .terminal, .mini-dash, .search-card, .stat, .analytics-panel, .faq-item,
.blog-card, .dash-card, .dash-panel, .wizard-panel{
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease, transform .3s var(--ease);
}

/* Theme toggle switch */
.theme-toggle{
  position:relative;
  width:52px; height:30px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  padding:3px;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.theme-toggle:hover{ border-color:var(--border-strong); }
.theme-toggle .tt-thumb{
  width:22px; height:22px;
  border-radius:50%;
  background:var(--red);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transform:translateX(0);
  transition:transform .35s var(--ease), background .35s var(--ease);
  box-shadow:0 4px 10px -2px var(--red-glow);
}
html[data-theme="light"] .theme-toggle .tt-thumb{ transform:translateX(22px); background:var(--gold); box-shadow:0 4px 10px -2px rgba(232,178,77,0.5); }
.theme-toggle .tt-thumb svg{ width:13px; height:13px; }
.theme-toggle .tt-icon-sun, .theme-toggle .tt-icon-moon{
  position:absolute; top:50%; transform:translateY(-50%);
  color:var(--text-faint); pointer-events:none;
}
.theme-toggle .tt-icon-moon{ left:6px; }
.theme-toggle .tt-icon-sun{ right:6px; }
@media (max-width:980px){ .theme-toggle{ display:none; } }
.mobile-nav .theme-toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; border-bottom:1px solid var(--border); margin-top:2px;
}
.mobile-nav .theme-toggle-row span{ font-family:var(--f-display); font-weight:700; font-size:15px; color:var(--text); }
.mobile-nav .theme-toggle{ display:inline-flex; }

/* Currency toggle switch — same pill/thumb shape as .theme-toggle so the
   two controls read as one family in the header, just with a wider track
   to fit the ₹ / $ labels instead of icons. */
.currency-toggle{
  position:relative;
  width:56px; height:30px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  padding:3px;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.currency-toggle:hover{ border-color:var(--border-strong); }
.currency-toggle .ct-thumb{
  position:absolute; top:3px; left:3px;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--red);
  transform:translateX(0);
  transition:transform .35s var(--ease), background .35s var(--ease);
  box-shadow:0 4px 10px -2px var(--red-glow);
}
.currency-toggle[aria-checked="true"] .ct-thumb{ transform:translateX(26px); background:var(--gold); box-shadow:0 4px 10px -2px rgba(232,178,77,0.5); }
.currency-toggle .ct-label{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:800; color:var(--text-faint); pointer-events:none;
}
.currency-toggle .ct-inr{ left:8px; }
.currency-toggle .ct-usd{ right:8px; }
@media (max-width:980px){ .currency-toggle{ display:none; } }
.mobile-nav .theme-toggle-row .currency-toggle{ display:inline-flex; }

/* ---------------------------------- Global entrance animation ------------- */
@keyframes fadeSlideUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeSlideRight{ from{ opacity:0; transform:translateX(-24px); } to{ opacity:1; transform:translateX(0); } }
@keyframes softPop{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:scale(1); } }

.js-anim{ opacity:0; }
.hero .eyebrow.js-anim{ animation:fadeSlideUp .7s var(--ease) .05s forwards; }
.hero h1.js-anim{ animation:fadeSlideUp .8s var(--ease) .15s forwards; }
.hero .hero-sub.js-anim{ animation:fadeSlideUp .8s var(--ease) .28s forwards; }
.hero .hero-cta.js-anim{ animation:fadeSlideUp .8s var(--ease) .4s forwards; }
.hero .ticker-wrap.js-anim{ animation:fadeSlideUp .8s var(--ease) .5s forwards; }
.hero .terminal.js-anim{ animation:softPop .8s var(--ease) .3s forwards; }
.hero .floating-card.js-anim{ animation:softPop .7s var(--ease) forwards; }
.hero .fc-1.js-anim{ animation-delay:.6s; }
.hero .fc-2.js-anim{ animation-delay:.75s; }

/* ---------------------------------- Buttons: shine + magnetic glow -------- */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.25), transparent 60%);
  opacity:0;
  transition:opacity .3s ease;
  z-index:0;
  pointer-events:none;
}
.btn:hover::before{ opacity:1; }
.btn > *{ position:relative; z-index:1; }
.btn-ghost::before{ background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%), var(--red-soft), transparent 60%); }
.btn-primary{ transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease); }
.btn-primary:active{ transform:translateY(0) scale(.97); }
.btn-ghost:active{ transform:translateY(0) scale(.97); }
.icon-btn{ transition:transform .3s var(--ease), color .25s, border-color .25s, background .25s; }
.icon-btn:hover{ transform:translateY(-2px) rotate(-6deg); color:var(--red); }
.icon-btn:active{ transform:scale(.92); }

/* ---------------------------------- Nav link underline --------------------- */
.nav-main a{ padding-bottom:4px; }
.nav-main a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--red);
  border-radius:2px;
  transition:right .3s var(--ease);
}
.nav-main a:hover::after, .nav-main a.active-link::after{ right:0; }
.link-muted{ position:relative; transition:letter-spacing .25s ease; }
.link-muted:hover{ letter-spacing:.01em; }

/* ---------------------------------- Card hover polish ---------------------- */
.cat-card, .feat-card, .service-card, .testi-card, .stat, .faq-item, .dash-card{
  will-change:transform;
}
.feat-card, .testi-card, .dash-card{ transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.feat-card:hover, .testi-card:hover{
  transform:translateY(-6px);
  border-color:var(--border-strong);
  box-shadow:0 24px 50px -26px rgba(0,0,0,.55);
}
.feat-icon, .cat-icon{ transition:transform .4s var(--ease), background .3s ease; }
.feat-card:hover .feat-icon, .cat-card:hover .cat-icon{ transform:scale(1.12) rotate(-6deg); background:var(--red); color:#fff; }
.service-card{ will-change:transform; }
.service-card:hover{ transform:translateY(-5px); }
.service-card:hover .feat-icon{ transform:scale(1.1) rotate(-6deg); background:var(--red); color:#fff; }
.service-link{ transition:gap .25s ease; }
.service-card:hover .service-link{ gap:10px; }
.stat{ transition:background .3s ease, transform .3s var(--ease); }
.stat:hover{ background:var(--surface-hover); transform:translateY(-3px); }
.stat .num{ transition:color .3s ease; }
.stat:hover .num{ color:var(--red); }
.dash-card:hover{ transform:translateY(-4px); border-color:var(--border-strong); box-shadow:0 18px 40px -22px rgba(0,0,0,.5); }
.blog-cat-tag, .cc-badge, .cc-fav{ transition:transform .3s var(--ease); }
.blog-card:hover .blog-cat-tag{ transform:translateY(-2px); }
.cc-fav:hover{ transform:scale(1.15); color:var(--red); border-color:var(--red); }

/* Terminal + mini-dash + floating cards: gentle hover lift/tilt */
.terminal, .mini-dash{ transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.terminal:hover{ transform:translateY(-4px); box-shadow:0 30px 70px -24px rgba(0,0,0,.7); }
.mini-dash:hover{ transform:translateY(-4px); }
.floating-card{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.floating-card:hover{ box-shadow:0 24px 50px -18px rgba(0,0,0,.6); }

/* FAQ chevron rotate polish */
.faq-item{ transition:border-color .3s ease; }
.faq-item:hover{ border-color:var(--border-strong); }
.faq-q{ transition:color .25s ease; }
.faq-q:hover{ color:var(--red); }

/* Live pill pulse ring */
.live-pill{ position:relative; }
.live-pill .dot{ position:relative; }
.live-pill .dot::after{
  content:"";
  position:absolute; inset:-4px;
  border-radius:50%;
  border:1px solid var(--up);
  animation:pingRing 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pingRing{ 0%{ transform:scale(.6); opacity:.8;} 100%{ transform:scale(2.2); opacity:0;} }

/* Ticker items subtle hover pop */
.ticker-item{ transition:transform .25s var(--ease), color .25s ease; }
.ticker-item:hover{ transform:translateY(-2px); color:var(--text); }

/* ---------------------------------- Platform badge on listing cards ------- */
.cc-media .platform-badge{
  color:var(--platform-color, var(--up));
  border-color:rgba(255,255,255,0.14);
  font-weight:700;
}
.cc-media .platform-badge svg{ color:var(--platform-color, var(--up)); flex-shrink:0; }
.cc-name{ display:flex; align-items:center; gap:7px; }
.cc-name svg{ flex-shrink:0; }

/* ---------------------------------- Platforms — pill filter row (homepage) --
   "Filter By Platform"-style pill row: icon + name + count, one accent
   colour per platform, animated fill sweep + lift on hover, tactile press
   on click, and (for the very first "All Platforms" pill) a resting
   active/selected look identical to the hover state. */
.platform-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

/* Scroll-track: a thin progress bar under the row, only meaningful (and
   only shown) once the row actually scrolls — see platform-scroll-wrap
   below and the JS that sizes/positions the thumb. */
.platform-scroll-track{
  display:none;
  position:relative;
  height:4px;
  max-width:140px;
  margin:18px auto 0;
  border-radius:4px;
  background:var(--border);
  overflow:hidden;
}
.platform-scroll-thumb{
  position:absolute; top:0; left:0; height:100%;
  width:40%;
  border-radius:4px;
  background:var(--red);
  will-change:transform,width;
}

@media (max-width:820px){
  .platform-scroll-wrap{
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
    margin:0 -24px;
    padding:2px 24px 6px;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .platform-scroll-wrap::-webkit-scrollbar{ display:none; }
  .platform-grid{
    flex-wrap:nowrap;
    gap:10px;
  }
  .platform-pill{
    flex-shrink:0;
    scroll-snap-align:start;
  }
  .platform-scroll-wrap{ scroll-snap-type:x proximity; }
  .platform-scroll-track{ display:block; }
}
@media (max-width:420px){
  .platform-scroll-wrap{ margin:0 -16px; padding:2px 16px 6px; }
}

.platform-pill{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 20px 11px 12px;
  border-radius:999px;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  isolation:isolate;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease);
}
/* Radial glow that blooms in on hover, tinted per-platform */
.platform-pill::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--platform-color) 32%, transparent), transparent 70%);
  opacity:0;
  transition:opacity .35s ease;
  z-index:-2;
}
/* Diagonal shine that sweeps left→right on hover */
.platform-pill::after{
  content:"";
  position:absolute; top:0; bottom:0; left:-60%;
  width:40%;
  background:linear-gradient(115deg, transparent, color-mix(in srgb, var(--platform-color) 45%, transparent), transparent);
  transform:skewX(-18deg);
  opacity:0;
  transition:transform .8s var(--ease), opacity .3s ease;
  z-index:-1;
  pointer-events:none;
}
.platform-pill:hover,
.platform-pill:focus-visible,
.platform-pill.active{
  transform:translateY(-3px);
  border-color:var(--platform-color);
  background:color-mix(in srgb, var(--platform-color) 10%, var(--bg-elevated));
  box-shadow:0 16px 34px -18px color-mix(in srgb, var(--platform-color) 65%, transparent), 0 0 0 1px color-mix(in srgb, var(--platform-color) 25%, transparent);
}
.platform-pill:hover::before,
.platform-pill.active::before{ opacity:1; }
.platform-pill:hover::after{ opacity:1; transform:translateX(260%) skewX(-18deg); }
.platform-pill:active{ transform:translateY(-1px) scale(.97); }

.platform-pill .pp-icon{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--platform-color) 18%, transparent);
  color:var(--platform-color);
  transition:transform .4s var(--ease), background .3s ease, color .3s ease;
  position:relative; z-index:1;
}
.platform-pill:hover .pp-icon,
.platform-pill.active .pp-icon{
  background:var(--platform-color);
  color:#0a0a0c;
  transform:scale(1.12) rotate(-8deg);
}
.platform-pill .pp-name{
  font-family:var(--f-display); font-weight:700; font-size:14.5px;
  position:relative; z-index:1; white-space:nowrap;
}
.platform-pill .pp-count{
  font-size:11.5px; color:var(--text-faint);
  background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:2px 8px; margin-left:2px;
  position:relative; z-index:1;
  transition:color .3s ease, border-color .3s ease;
}
.platform-pill:hover .pp-count,
.platform-pill.active .pp-count{ color:var(--platform-color); border-color:color-mix(in srgb, var(--platform-color) 40%, transparent); }

@media (max-width:640px){
  .platform-grid{ gap:10px; }
  .platform-pill{ padding:9px 16px 9px 10px; }
  .platform-pill .pp-name{ font-size:13.5px; }
}

/* ---------------------------------- Search bar: extra Platform field ------ */
.search-card{ grid-template-columns:0.9fr 1.3fr 0.9fr 0.9fr 0.9fr auto; }
@media (max-width:1180px){
  .search-card{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:980px){
  .search-card{ grid-template-columns:1fr 1fr; }
  .search-card .btn{ grid-column:1 / -1; }
}
@media (max-width:480px){
  .search-card{ grid-template-columns:1fr; }
}

/* Platform filter chips (Buy Channels page) */
.chip-row{ flex-wrap:wrap; }
.platform-chip{ display:inline-flex; align-items:center; gap:6px; }
.platform-chip svg{ width:13px; height:13px; }

/* ---------------------------------- HERO: interactive touch background ---- */
.hero{ position:relative; isolation:isolate; }
.hero-touch-bg{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(480px circle at var(--hx,50%) var(--hy,28%), rgba(255,43,69,0.22), transparent 62%),
    radial-gradient(320px circle at var(--hx,50%) var(--hy,28%), rgba(232,178,77,0.10), transparent 70%);
  transition:background .55s cubic-bezier(0.16,1,0.3,1);
}
.hero-dot-grid{
  position:absolute; inset:-10%;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(60% 55% at 50% 30%, #000 0%, transparent 75%);
  mask-image:radial-gradient(60% 55% at 50% 30%, #000 0%, transparent 75%);
  transform:translate(calc(var(--hx,50%) * -0.04), calc(var(--hy,28%) * -0.04));
  transition:transform .5s cubic-bezier(0.16,1,0.3,1);
}
html[data-theme="light"] .hero-dot-grid{ background-image:radial-gradient(rgba(10,10,20,0.10) 1px, transparent 1px); }
.hero > .container{ position:relative; z-index:1; }

.hero-ripple{
  position:absolute;
  width:10px; height:10px;
  border-radius:50%;
  left:0; top:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,43,69,0.55), rgba(255,43,69,0) 70%);
  border:1px solid rgba(255,43,69,0.45);
  pointer-events:none;
  z-index:0;
  animation:heroRipple 1.1s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes heroRipple{
  0%{ width:10px; height:10px; opacity:.9; }
  100%{ width:460px; height:460px; opacity:0; }
}

/* subtle parallax tilt on hero visuals via inline transform vars set in JS */
.hero .terminal, .hero .floating-card{
  transform: translate3d(var(--px,0px), var(--py,0px), 0);
}

@media (prefers-reduced-motion: reduce){
  .hero-touch-bg, .hero-dot-grid, .hero-ripple, .js-anim{ animation:none !important; transition:none !important; }
  .js-anim{ opacity:1 !important; }
}
@media (max-width:980px){
  .hero-dot-grid{ display:none; }
}

/* ============================================================
   TOAST / FLASH NOTIFICATIONS
   Fixes: flash message used to be an inline-styled, permanently
   fixed box (top:78px; right:20px) with no auto-dismiss and no
   mobile handling, so it visually "floated" over page content
   (including the footer) on small screens. Now it is a proper
   stacked toast, anchored under the header, auto-dismissing,
   closable, and safe on mobile widths.
   ============================================================ */
.flash-stack{
  position:fixed;
  left:0; right:0;
  top:calc(var(--header-h,72px) + 12px);
  z-index:10050;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  padding:0 20px;
  pointer-events:none;
}
.site-flash{
  pointer-events:auto;
  max-width:360px;
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px 14px;
  border-radius:12px;
  background:var(--panel,#161616);
  border:1px solid var(--border,#2a2a2a);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  color:var(--text,#fff);
  font-size:13.5px;
  line-height:1.4;
  animation:flashIn .28s cubic-bezier(.16,1,.3,1) both;
}
.site-flash.success{ border-color:rgba(34,197,94,.4); }
.site-flash.success::before{ content:"✓"; color:#22c55e; font-weight:800; }
.site-flash.error{ border-color:rgba(255,73,97,.45); }
.site-flash.error::before{ content:"!"; color:#ff4961; font-weight:800; }
.site-flash::before{ flex:0 0 auto; }
.site-flash span.flash-msg{ flex:1 1 auto; word-break:break-word; }
.site-flash .flash-close{
  flex:0 0 auto;
  background:none; border:0; cursor:pointer;
  color:var(--text-faint,#888); font-size:16px; line-height:1;
  padding:0 0 0 4px;
}
.site-flash .flash-close:hover{ color:var(--text,#fff); }
.site-flash.leaving{ animation:flashOut .22s ease forwards; }
@keyframes flashIn{ from{ opacity:0; transform:translateY(-8px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes flashOut{ from{ opacity:1; transform:translateY(0); } to{ opacity:0; transform:translateY(-8px); } }

@media (max-width:640px){
  .flash-stack{
    top:calc(var(--header-h,64px) + 8px);
    padding:0 12px;
    align-items:stretch;
  }
  .site-flash{ max-width:none; font-size:13px; }
}

/* Admin panel toasts sit below the fixed admin topbar instead of the
   public site header. */
.admin-body .flash-stack{ top:calc(var(--admin-topbar-h,64px) + 10px); right:14px; left:auto; padding:0; }
@media (max-width:700px){
  .admin-body .flash-stack{ left:14px; right:14px; }
  .admin-body .site-flash{ max-width:none; }
}

/* ============================================================
   BUYER / SELLER DASHBOARD SIDEBAR — group labels + count badges
   ============================================================ */
.dash-nav-group{ margin-bottom:6px; }
.dash-nav-label{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint,#7c7c7c); padding:14px 14px 6px;
}
.dash-nav-link{ position:relative; justify-content:space-between; }
.dash-nav-link .dash-nav-left{ display:flex; align-items:center; gap:12px; }
.dash-nav-count{
  font-size:11px; font-weight:800; min-width:20px; text-align:center;
  padding:2px 6px; border-radius:999px; background:var(--surface,#1d1d1d); color:var(--text-dim,#aaa);
}
.dash-nav-link.active .dash-nav-count{ background:rgba(255,43,69,.16); color:var(--red,#ff2b45); }

/* Dashboard section quick-jump chips (mobile-friendly horizontal scroller) */
.dash-quicknav{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin:4px 0 24px; -webkit-overflow-scrolling:touch; }
.dash-quicknav a{
  flex:0 0 auto; font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:999px;
  background:var(--bg-elevated,#161616); border:1px solid var(--border,#2a2a2a); color:var(--text-dim,#aaa); white-space:nowrap;
}
.dash-quicknav a:hover{ color:var(--text,#fff); border-color:var(--red,#ff2b45); }

.dash-panel + .dash-panel{ margin-top:20px; }
.dash-section-title{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:36px 0 14px; }
.dash-section-title h2{ font-size:18px; margin:0; }
.dash-section-title a{ font-size:12.5px; font-weight:700; }

.product-mini-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:1100px){ .product-mini-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .product-mini-grid{ grid-template-columns:1fr; } }
.product-mini-card{ background:var(--bg-elevated,#161616); border:1px solid var(--border,#2a2a2a); border-radius:14px; padding:16px; }
.product-mini-card h4{ font-size:14px; margin:0 0 6px; }
.product-mini-card p{ font-size:12px; color:var(--text-faint,#888); margin:0 0 10px; }
.product-mini-card .price{ font-weight:800; font-family:var(--f-mono); }

.profile-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .profile-form-grid{ grid-template-columns:1fr; } }

/* ============================================================
   BADGES + EMPTY STATE (shared utility — was referenced across
   the site with no styling; adding here fixes plain/unstyled
   status pills on buyer & seller pages too)
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:4px 10px; border-radius:999px;
  background:var(--surface,#1d1d1d); color:var(--text-dim,#aaa);
  border:1px solid var(--border,#2a2a2a); white-space:nowrap;
}
.badge.up{ background:rgba(56,217,122,.12); color:var(--up,#38d97a); border-color:rgba(56,217,122,.25); }
.badge.red{ background:var(--red-soft,rgba(255,43,69,.1)); color:var(--red,#ff2b45); border-color:rgba(255,43,69,.25); }
.badge.gold{ background:rgba(232,178,77,.12); color:var(--gold,#e8b24d); border-color:rgba(232,178,77,.25); }
.badge.blue{ background:rgba(88,150,255,.12); color:#5896ff; border-color:rgba(88,150,255,.25); }

.empty-state{
  text-align:center; padding:32px 16px; color:var(--text-faint,#7c7c7c); font-size:13.5px;
}
.empty-state h3{ font-size:15px; color:var(--text-dim,#aaa); margin-bottom:6px; }

/* ============================================================
   SELLER/BUYER SIDEBAR — collapsible dropdown groups
   ============================================================ */
.dash-nav-parent{ margin-bottom:2px; }
.dash-nav-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:11px; font-size:14px; font-weight:600;
  color:var(--text-dim); cursor:pointer; user-select:none;
}
.dash-nav-toggle:hover{ background:var(--surface); color:var(--text); }
.dash-nav-parent.open > .dash-nav-toggle{ color:var(--text); }
.dash-nav-toggle .chev{ font-size:10px; color:var(--text-faint); transition:transform .2s var(--ease,ease); flex-shrink:0; }
.dash-nav-parent.open > .dash-nav-toggle .chev{ transform:rotate(90deg); color:var(--red); }

.dash-nav-submenu{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s var(--ease,ease);
  margin-left:14px; border-left:1px solid var(--border);
}
.dash-nav-parent.open .dash-nav-submenu{ grid-template-rows:1fr; }
.dash-nav-submenu-inner{ overflow:hidden; }
.dash-nav-submenu a{
  display:block; padding:8px 14px 8px 18px; font-size:13px; color:var(--text-faint);
  border-radius:9px; margin:1px 6px;
}
.dash-nav-submenu a:hover{ color:var(--text); background:var(--surface); }
.dash-nav-submenu a.active{ color:var(--red); font-weight:700; background:var(--red-soft); }

/* Local tab filters (Products / Orders quick status tabs) */
.dash-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.dash-tab{
  font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:999px;
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-dim);
  cursor:pointer;
}
.dash-tab:hover{ color:var(--text); border-color:var(--border-strong); }
.dash-tab.active{ background:var(--red-soft); border-color:rgba(255,43,69,.3); color:var(--red); }

/* Simple horizontal bar rows for lightweight analytics (no chart lib) */
.bar-row{ display:flex; align-items:center; gap:12px; padding:9px 0; }
.bar-row .bar-label{ width:120px; flex-shrink:0; font-size:12.5px; color:var(--text-dim); }
.bar-row .bar-track{ flex:1; height:8px; background:var(--surface); border-radius:6px; overflow:hidden; }
.bar-row .bar-fill{ height:100%; background:linear-gradient(90deg,var(--red-dim),var(--red)); border-radius:6px; }
.bar-row .bar-value{ width:96px; text-align:right; font-family:var(--f-mono); font-size:12.5px; flex-shrink:0; }

.coming-soon-panel{
  border:1px dashed var(--border-strong); border-radius:16px; padding:26px; text-align:center;
  color:var(--text-faint); font-size:13px;
}
.coming-soon-panel strong{ display:block; color:var(--text-dim); font-size:14.5px; margin-bottom:6px; }

/* ============================================================
   Multi-page dashboard additions (KYC, alerts, notif rows)
   ============================================================ */
.dash-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}

.notif-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.notif-row:last-child{border-bottom:0}

/* KYC prompt banner shown on the dashboard overview */
.kyc-alert{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:1px solid var(--gold,#e2b53e);background:color-mix(in srgb,var(--gold,#e2b53e) 10%,transparent)}
.kyc-alert strong{display:block;font-size:15px}

/* KYC status card on the KYC page */
.kyc-status-card{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.kyc-status-left{display:flex;flex-direction:column;gap:8px;min-width:150px}
.kyc-status-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#8a8f98)}
.kyc-status-msg{flex:1;min-width:240px;font-size:13.5px;line-height:1.55;color:var(--muted,#8a8f98)}

/* Sidebar KYC status pill colours */
.dash-nav-count.kyc-ok{background:var(--up,#2ecc71);color:#07120a}
.dash-nav-count.kyc-wait{background:var(--gold,#e2b53e);color:#1a1400}
.dash-nav-count.kyc-todo{background:var(--red,#e5484d);color:#fff}

/* File input inside dashboard forms */
.profile-form-grid input[type="file"]{width:100%;padding:9px 10px;border:1px dashed var(--border);border-radius:10px;
  background:var(--surface-2,rgba(255,255,255,.02));color:inherit;font-size:13px;cursor:pointer}

/* ============================================================
   Feedback batch 2 fixes
   ============================================================ */

/* WhatsApp float must not overlap the fixed mobile bottom-nav.
   The bottom-nav shows at <=768px and occupies the bottom ~72px, so lift
   the floating button above it on those widths. */
@media (max-width:768px){
  .whatsapp-float{
    bottom:calc(88px + env(safe-area-inset-bottom,0px)) !important;
    right:16px !important;
  }
}

/* Mobile dashboard drawer: keep each nav group full-width and stop long
   labels (Notifications / Support / Store Settings) from clipping. */
@media (max-width:900px){
  .dash-sidebar .dash-nav-group{ width:100%; }
  .dash-sidebar .dash-nav-link,
  .dash-sidebar .dash-nav-toggle,
  .dash-sidebar .dash-nav-submenu a{ white-space:normal; word-break:break-word; }
  .dash-sidebar .dash-nav-label{ width:100%; }
}

/* ============================================================
   Buy page — listing cards (image on top, price, metrics, CTAs)
   Previously unstyled; this styles the whole component.
   ============================================================ */
.listing-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
@media (max-width:560px){ .listing-grid{ grid-template-columns:1fr; } }

.listing-card{
  background:var(--bg-elevated,#141414); border:1px solid var(--border,#2a2a2a);
  border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s var(--ease,ease), border-color .18s, box-shadow .18s;
}
.listing-card:hover{ transform:translateY(-3px); border-color:var(--red,#ff2b45); box-shadow:0 22px 50px -24px rgba(0,0,0,.7); }

.listing-shot{
  position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,#1b1b22,#0f0f14);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.listing-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.listing-shot-fallback{ font-family:var(--f-mono,monospace); font-size:40px; font-weight:800; color:var(--red,#ff2b45); letter-spacing:1px; opacity:.85; }
.listing-shot-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background:rgba(56,217,122,.16); color:var(--up,#38d97a); border:1px solid rgba(56,217,122,.35);
  font-size:11px; font-weight:800; padding:4px 9px; border-radius:999px; backdrop-filter:blur(6px);
}

.listing-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.listing-body h3{ font-size:16px; margin:0; line-height:1.25; }
.listing-price{ font-family:var(--f-mono,monospace); font-size:22px; font-weight:800; color:var(--red,#ff2b45); }

.listing-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:2px; }
.listing-metrics > div{ background:var(--surface,rgba(255,255,255,.03)); border:1px solid var(--border,#262626); border-radius:10px; padding:8px 9px; min-width:0; }
.listing-metrics span{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint,#7c7c7c); margin-bottom:3px; }
.listing-metrics strong{ font-size:13px; font-family:var(--f-mono,monospace); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }

.listing-actions{ display:flex; gap:8px; margin-top:auto; padding-top:4px; }
.listing-actions .btn{ flex:1; text-align:center; justify-content:center; }
.listing-actions .btn-wa{ flex:0 0 44px; padding-left:0; padding-right:0; }

/* WhatsApp button used on cards + channel detail */
.btn-wa{ background:#25D366; color:#07120a !important; border:0; font-weight:800; }
.btn-wa:hover{ background:#1fbf5b; color:#07120a !important; }

/* ============================================================
   Legal / policy pages
   ============================================================ */
.legal-content{ max-width:820px; margin:0 auto; }
.legal-content .legal-lead{ font-size:16px; line-height:1.7; color:var(--text-dim,#b8bcc6); margin-bottom:26px; }
.legal-content h2{ font-size:19px; margin:30px 0 10px; color:var(--text,#fff); }
.legal-content p{ font-size:14.5px; line-height:1.75; color:var(--text-dim,#b0b4be); margin:0 0 12px; }
.legal-content a{ color:var(--red,#ff2b45); }
.legal-content .legal-note{ margin-top:32px; padding-top:18px; border-top:1px solid var(--border,#2a2a2a); font-size:12.5px; color:var(--text-faint,#7c7c7c); }

/* ============================================================
   Mobile card tables for buyer/seller dashboards (.data-table)
   ============================================================ */
@media (max-width:760px){
  .table-scroll{ overflow:visible; }
  .data-table{ min-width:0 !important; border-collapse:collapse; }
  .data-table thead{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .data-table, .data-table tbody, .data-table tr, .data-table td{ display:block; width:100%; }
  .data-table tr{ background:var(--bg-elevated,#141414); border:1px solid var(--border,#2a2a2a); border-radius:14px; padding:6px 14px; margin-bottom:12px; }
  .data-table td{ border:0 !important; border-bottom:1px solid var(--border,#262626) !important; padding:9px 0 9px 42%; position:relative; text-align:right; white-space:normal !important; min-height:20px; }
  .data-table tr td:last-child{ border-bottom:0 !important; }
  .data-table td::before{ content:attr(data-label); position:absolute; left:0; top:9px; width:38%; text-align:left; font-weight:600; color:var(--text-faint,#7c7c7c); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; white-space:normal; line-height:1.3; }
  .data-table td:empty{ display:none; }
  .data-table td:not([data-label]){ padding-left:0; text-align:center; color:var(--text-dim,#9aa); }
  .data-table td:not([data-label])::before{ display:none; }
}

/* Channel DP thumbnail in seller product tables */
.ch-cell{ display:flex; align-items:center; gap:10px; min-width:0; }
.ch-dp{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 34px; border:1px solid var(--border,#2a2a2a); background:#0f0f0f; }
.ch-dp-fallback{ display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; background:linear-gradient(135deg,#d92b45,#7a1120); }
.ch-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:760px){ .ch-cell{ justify-content:flex-end; } }

/* Channel card: image + title clickable to WhatsApp enquiry */
a.listing-shot{ display:block; cursor:pointer; position:relative; }
.listing-body h3 a:hover{ color:var(--brand,#25D366); }

/* ================================================================
   PAYMENTS + POLISH LAYER (buyer / seller / public)  — v2
   ================================================================ */
.checkout-card{max-width:100%}
.checkout-summary{margin:14px 0 8px;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.checkout-summary .cs-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);font-size:14px}
.checkout-summary .cs-row:last-child{border-bottom:0}
.checkout-summary .cs-row span{opacity:.72}
.checkout-summary .cs-total{background:rgba(255,50,80,.07);font-size:15px}
.checkout-summary .cs-total strong{color:var(--red,#ff3250);font-size:18px}
.checkout-gateway{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--border);border-radius:14px;margin:16px 0}
.checkout-gateway .cg-icon{font-size:26px;line-height:1}
.checkout-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.checkout-actions .btn{flex:1 1 220px}

.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:820px){.pay-grid{grid-template-columns:1fr}}
.pay-method{border:1px solid var(--border);border-radius:14px;padding:16px;margin-top:14px;text-align:center}
.pay-method:first-of-type{margin-top:10px}
.pay-method-head{font-weight:700;margin-bottom:10px;text-align:left}
.pay-qr{display:flex;justify-content:center;margin:6px 0 12px}
.pay-qr img{width:200px;height:200px;max-width:70vw;object-fit:contain;border-radius:12px;border:1px solid var(--border);background:#fff;padding:8px}
.pay-copy{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.05);border:1px dashed var(--border);border-radius:10px;padding:9px 12px;font-size:13px}
.pay-copy span{opacity:.6}
.pay-copy code{font-weight:700}
.pay-status-banner{border-radius:14px;padding:14px 18px;margin-bottom:18px;font-weight:600;font-size:14px}
.pay-status-banner.ok{background:rgba(46,204,113,.14);border:1px solid rgba(46,204,113,.4);color:#2ecc71}
.pay-status-banner.wait{background:rgba(240,180,40,.14);border:1px solid rgba(240,180,40,.4);color:#f0b428}
.pay-status-banner a{color:inherit;text-decoration:underline}

/* ---- General placement / readability polish ---- */
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.dash-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.dash-head h1{line-height:1.15}
.dash-section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0 12px}
.dash-panel{overflow-wrap:anywhere}
.badge{white-space:nowrap}
@media(max-width:640px){
  .dash-head{align-items:flex-start}
  .dash-head .btn,.dash-head-actions .btn{flex:1 1 100%}
  .checkout-actions .btn{flex:1 1 100%}
  .details-stats{grid-template-columns:1fr 1fr !important}
  .sell-graph{gap:8px}
  .sell-graph-bar{max-width:36px}
  .pay-qr img{width:170px;height:170px}
}
@media(max-width:400px){
  .details-stats{grid-template-columns:1fr !important}
}

/* ============================================================
   Buy Youtube Channels — filter sidebar + platform tabs + card
   badges/metrics redesign (dark theme colors, no new palette).
   ============================================================ */

/* Mobile "☰ Filters" toggle button — hidden on desktop, where the
   sidebar (.filter-panel) is already visible via .market-layout. */
.filter-toggle{ display:none; margin-bottom:14px; }

/* Second corner badge (e.g. MONETIZED) sits opposite the first
   (e.g. PRIME) so both can show at once, matching the reference's
   dual-corner badge layout. Base .listing-shot-badge already
   positions top-left in green (verified); .left/.right + color
   modifiers let a card show two badges in the two top corners. */
.listing-shot-badge.left{ left:10px; right:auto; }
.listing-shot-badge.right{ left:auto; right:10px; }
.listing-shot-badge.gold{ background:rgba(232,178,77,.16); color:var(--gold); border-color:rgba(232,178,77,.35); }
.listing-shot-badge.up{ background:rgba(56,217,122,.16); color:var(--up); border-color:rgba(56,217,122,.35); }

/* Attractive fallback "photo" for listings with no screenshot/DP yet —
   a soft branded gradient circle with initials instead of bare text on
   a flat background, so every card still reads as having a profile
   image even when no real one is available. */
.listing-shot{ background:linear-gradient(155deg, var(--bg-elevated), var(--bg-raised)); display:flex; align-items:center; justify-content:center; }
.listing-shot-fallback-avatar{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 28%, rgba(255,43,69,.35), rgba(232,178,77,.18) 55%, rgba(255,255,255,.03) 100%);
  border:1px solid var(--border-strong);
  font-size:20px; font-weight:800; letter-spacing:.5px; opacity:1;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.6);
}

/* Platform filter tabs — reuses .chip/.chip-row, just adds icon+label
   layout and horizontal scroll instead of wrap on narrow screens. */
.platform-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
.platform-tabs::-webkit-scrollbar{ display:none; }
.platform-tabs .chip{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; text-decoration:none; }
.platform-tabs .chip svg{ flex-shrink:0; }

/* 2x2 stat cell grid (Subs / Category / Monetized / Revenue) — a
   4-column variant of the existing 3-column .listing-metrics. */
.listing-metrics-4{ grid-template-columns:1fr 1fr; }
.listing-metrics-4 .lm-ico{ display:flex; align-items:center; gap:4px; }
.listing-metrics-4 .lm-ico svg{ flex-shrink:0; opacity:.8; }

/* Grid / list view toggle buttons in the market toolbar. */
.view-toggle{ display:flex; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:3px; flex-shrink:0; }
.view-btn{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:none; background:transparent; color:var(--text-faint); cursor:pointer; }
.view-btn.active{ background:var(--red); color:#fff; }
.view-btn:hover:not(.active){ color:var(--text); }

/* List view — single-column cards laid out as a horizontal row. */
.listing-grid-list{ grid-template-columns:1fr !important; }
.listing-grid-list .listing-card{ flex-direction:row; }
.listing-grid-list .listing-shot{ width:220px; aspect-ratio:auto; flex-shrink:0; }
.listing-grid-list .listing-body{ flex:1; }
@media (max-width:768px){
  .listing-grid-list .listing-card{ flex-direction:column; }
  .listing-grid-list .listing-shot{ width:100%; aspect-ratio:16/9; }
}

/* Filter panel header row (title + mobile-only close button). */
.filter-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.filter-panel-head h3{ margin:0; }
.filter-panel-close{ display:none; width:32px; height:32px; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text-dim); cursor:pointer; font-size:15px; line-height:1; }
.filter-panel-close:hover{ color:var(--text); border-color:var(--border-strong); }

@media (max-width:980px){
  /* Collapse the filters sidebar into a full-screen slide-in drawer on
     tablets/phones instead of an inline expand — avoids any chance of the
     card grid showing through at the edges, and reads as a proper mobile
     filter UX instead of a cramped inline panel. */
  .filter-toggle{ display:flex; }
  .filter-panel-close{ display:flex; }
  .market-layout .filter-panel{
    position:fixed; inset:0; z-index:1000;
    max-height:none; height:100dvh; width:100%;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:var(--bg-elevated);
    border-width:0; opacity:0; visibility:hidden;
    padding:20px 20px calc(100px + env(safe-area-inset-bottom,0px));
    margin:0; border-radius:0;
    transform:translateY(12px);
    transition:opacity .22s var(--ease,ease), transform .22s var(--ease,ease), visibility .22s;
  }
  .market-layout .filter-panel.open{ opacity:1; visibility:visible; transform:translateY(0); box-shadow:0 -20px 60px rgba(0,0,0,.5); }
  body.filters-open{ overflow:hidden; }
  .market-toolbar{ align-items:stretch; }
  .market-toolbar-right{ justify-content:space-between; }
}

@media (max-width:640px){
  .listing-metrics-4{ grid-template-columns:1fr 1fr; gap:6px; }
  .listing-metrics-4 > div{ padding:7px 8px; }
  .view-toggle{ display:none; }
}