/* ==========================================================================
   SKYVRONETWORKS — Design System
   Direction: "trading terminal for YouTube channels." Deep charcoal ground,
   a single signal-red accent, monospace figures for anything that is data
   (subscribers, revenue, growth) so pricing a channel feels like reading a
   quote, not a marketing stat.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* --- surfaces --- */
  --bg:            #0a0a0c;
  --bg-raised:     #0f0f13;
  --bg-elevated:   #141418;
  --surface:       rgba(255,255,255,0.035);
  --surface-hover: rgba(255,255,255,0.06);
  --border:        rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);

  /* --- signal red (accent, not YouTube red) --- */
  --red:        #ff2b45;
  --red-dim:    #7a1120;
  --red-glow:   rgba(255,43,69,0.35);
  --red-soft:   rgba(255,43,69,0.10);
  --accent:     #ff2b45;  /* alias for chart bars */

  /* --- restrained secondary, used only on price/value figures --- */
  --gold: #e8b24d;

  /* --- positive/negative data signals --- */
  --up:   #38d97a;
  --down: #ff2b45;

  /* --- text --- */
  --text:       #f4f4f6;
  --text-dim:   #a3a3ad;
  --text-faint: #64646d;

  /* --- type --- */
  --f-display: 'Manrope', sans-serif;
  --f-body:    'Inter', sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  /* --- radii / shadow --- */
  --r-card: 20px;
  --r-sm: 12px;
  --shadow-card: 0 20px 60px -20px rgba(0,0,0,0.6);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
img,svg,video,iframe{ max-width:100%; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

html{ overflow-x:hidden; }
/* Force native form controls (select/option dropdowns, checkboxes, scrollbars)
   to render in the same palette as the active theme — without this, browsers
   fall back to the OS preference and pop the <select> list up in a jarring
   white box even while the rest of the page is dark. */
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }
body{
  margin:0;
  overflow-x:hidden;
  background:
    radial-gradient(80% 60% at 15% -10%, rgba(255,43,69,0.10) 0%, transparent 55%),
    radial-gradient(60% 50% at 100% 0%, rgba(255,43,69,0.06) 0%, transparent 50%),
    var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}
@media (max-width:420px){ .container{ padding:0 16px; } }

.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.08;
  margin:0;
  letter-spacing:-0.02em;
}

p{ margin:0; color:var(--text-dim); line-height:1.65; }

.eyebrow{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 10px 2px var(--red-glow);
}

.section{ padding:80px 0; position:relative; }
.section + .section{ padding-top:0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px,3.6vw,42px); margin-top:14px; }
.section-head p{ font-size:17px; margin-top:14px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------------------------------- Buttons ---------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  border-radius:12px;
  font-family:var(--f-body);
  font-weight:600;
  font-size:14.5px;
  border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--red);
  color:#fff;
  box-shadow:0 8px 24px -8px var(--red-glow), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -10px var(--red-glow); }
.btn-ghost{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
  backdrop-filter:blur(12px);
}
.btn-ghost:hover{ border-color:var(--border-strong); background:var(--surface-hover); transform:translateY(-2px); }
.btn-sm{ padding:10px 18px; font-size:13.5px; border-radius:10px; }
.btn-block{ width:100%; }

/* ---------------------------------- Header ------------------------------ */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  padding:16px 0;
  background:rgba(10,10,12,0.55);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.logo{
  font-family:var(--f-display);
  font-weight:800;
  font-size:20px;
  letter-spacing:-0.01em;
  display:flex;
  align-items:center;
  gap:9px;
}
.logo .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 12px 3px var(--red-glow);
}
.nav-main{
  display:flex;
  align-items:center;
  gap:34px;
}
.nav-main a{
  font-size:14px;
  font-weight:500;
  color:var(--text-dim);
  transition:color .2s;
  position:relative;
}
.nav-main a:hover{ color:var(--text); }
.nav-main a.active-link{ color:var(--text); }
.header-actions{ display:flex; align-items:center; gap:14px; }
.icon-btn{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-dim);
  transition:all .2s;
}
.icon-btn:hover{ color:var(--text); border-color:var(--border-strong); }
.link-muted{ font-size:14px; color:var(--text-dim); font-weight:500; }
.link-muted:hover{ color:var(--text); }
.hamburger{ display:none; }

/* This used to switch to the hamburger menu at 980px, but the full nav
   (5 links) plus header actions for a LOGGED-IN user ("Hi, Name" + Logout
   + Create Account + Sell Your Asset) actually need ~1100px+ to lay out
   without wrapping — .header-row has no flex-wrap, so between 980px and
   ~1100px the row silently overflowed instead of collapsing, squeezing
   and clipping the nav links (the exact "menu items overlapping /
   cut off" bug reported on real laptop-width windows). Raised to 1199px
   — comfortable margin above the measured overflow point, and matches
   the tablet/desktop split already used elsewhere on the site. */
@media (max-width:1199px){
  .nav-main{ display:none; }
  .header-actions .link-muted{ display:none; }
  .header-actions .icon-btn{ display:none; }
  .hamburger{ display:flex; }
}
@media (max-width:560px){
  .header-actions .btn-ghost{ display:none; }
  .header-row{ gap:12px; }
}
@media (max-width:360px){
  .header-actions .btn-primary.btn-sm{ padding:9px 12px; font-size:12.5px; }
}

/* ---------------------------------- Hero -------------------------------- */
.hero{
  padding:76px 0 100px;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:60px;
  align-items:center;
}
.hero-grid > div{ min-width:0; }
.hero h1{
  font-size:clamp(38px,5vw,64px);
  margin-top:20px;
}
.hero h1 .accent{ color:var(--red); }
.hero-sub{
  margin-top:22px;
  font-size:18px;
  max-width:480px;
}
.hero-cta{
  margin-top:34px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* ticker tape */
.ticker-wrap{
  margin-top:52px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:14px 0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track{
  display:flex;
  gap:36px;
  width:max-content;
  animation:ticker 32s linear infinite;
}
@keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.ticker-item{
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--text-dim);
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.ticker-item b{ color:var(--text); font-weight:600; }
.ticker-item .up{ color:var(--up); }
.ticker-item .down{ color:var(--down); }

/* terminal card */
.terminal{
  background:linear-gradient(180deg, var(--bg-elevated), var(--bg-raised));
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  position:relative;
}
.terminal::before{
  content:"";
  position:absolute; inset:-40% -20% auto auto;
  width:340px; height:340px;
  background:radial-gradient(circle, var(--red-glow), transparent 70%);
  filter:blur(10px);
  pointer-events:none;
}
.terminal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.terminal-dots{ display:flex; gap:6px; }
.terminal-dots span{ width:9px;height:9px;border-radius:50%; background:var(--border-strong); }
.terminal-title{ font-family:var(--f-mono); font-size:12px; color:var(--text-faint); letter-spacing:.06em; }
.live-pill{
  display:flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:11px; color:var(--up);
  border:1px solid rgba(56,217,122,0.3); background:rgba(56,217,122,0.08);
  padding:4px 10px; border-radius:20px;
}
.live-pill .dot{ width:6px;height:6px;border-radius:50%; background:var(--up); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }

.terminal-body{ padding:22px 20px 24px; }
.channel-id{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.channel-thumb{
  width:44px;height:44px;border-radius:10px;
  background:linear-gradient(135deg, var(--red), #7a1120);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display); font-weight:800; color:#fff; font-size:15px;
}
.channel-id .name{ font-family:var(--f-display); font-weight:700; font-size:15px; display:flex; align-items:center; gap:6px; }
.channel-id .cat{ font-size:12.5px; color:var(--text-faint); }

.metric-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:18px;
}
.metric{
  background:var(--bg-raised);
  padding:16px 18px;
}
.metric .label{ font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }
.metric .value{
  font-family:var(--f-mono);
  font-size:20px;
  font-weight:600;
  margin-top:6px;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.metric .value small{ font-size:11px; color:var(--up); font-weight:600; }

.spark{ display:block; width:100%; max-width:100%; height:44px; margin:4px 0 18px; }
.terminal-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; border-top:1px solid var(--border);
}
.status-verified{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--up); font-weight:600;
}

.floating-card{
  position:absolute;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:var(--shadow-card);
  display:flex; align-items:center; gap:10px;
  animation:float 6s ease-in-out infinite;
}
.floating-card .fc-name{ font-size:12.5px; font-weight:600; }
.floating-card .fc-sub{ font-family:var(--f-mono); font-size:11px; color:var(--text-faint); }
.fc-1{ top:-24px; left:-30px; animation-delay:0s; }
.fc-2{ bottom:10px; right:-36px; animation-delay:1.2s; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }

@media (max-width:980px){
  .hero{ padding:44px 0 64px; }
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .floating-card{ display:none; }
  .hero-sub{ max-width:none; font-size:16px; }
  .ticker-wrap{ margin-top:32px; }
}
@media (max-width:560px){
  .hero{ padding:32px 0 56px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ text-align:center; }
  .terminal-body{ padding:18px 16px 20px; }
  .metric-grid{ grid-template-columns:1fr 1fr; }
  .metric{ padding:14px; }
  .metric .value{ font-size:17px; }
  .channel-id .name{ font-size:14px; }
  .ticker-item{ font-size:12px; }
}
@media (max-width:400px){
  .metric-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------- Search bar --------------------------- */
.search-panel{
  margin-top:-52px;
  position:relative;
  z-index:5;
}
.search-card{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:20px;
  box-shadow:var(--shadow-card);
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr auto;
  gap:12px;
}
.search-field{
  display:flex; flex-direction:column; gap:6px;
  padding:8px 14px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--border);
}
.search-field label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); }
.search-field input, .search-field select{
  background:transparent; border:none; color:var(--text);
  font-family:var(--f-body); font-size:14px; outline:none; padding:0;
}
.search-field select{ appearance:none; cursor:pointer; }
@media (max-width:980px){
  .search-card{ grid-template-columns:1fr 1fr; }
  .search-card .btn{ grid-column:1 / -1; }
  .search-panel{ margin-top:-28px; }
}
@media (max-width:480px){
  .search-card{ grid-template-columns:1fr; padding:16px; }
  .search-panel{ margin-top:-18px; }
}

/* ---------------------------------- Stats -------------------------------- */
.stats-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  overflow:hidden;
}
.stat{ background:var(--bg-raised); padding:30px 24px; text-align:left; }
.stat .num{ font-family:var(--f-mono); font-size:34px; font-weight:700; color:var(--text); }
.stat .lbl{ font-size:13px; color:var(--text-dim); margin-top:6px; }
@media (max-width:768px){ .stats-row{ grid-template-columns:1fr 1fr; } }

/* ---------------------------------- Channel cards ------------------------ */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:1080px){ .card-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .card-grid{ grid-template-columns:1fr; } }

.channel-card{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.channel-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,43,69,0.4);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.65), 0 0 0 1px rgba(255,43,69,0.15);
}
.cc-media{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(135deg, #1a1a20, #101013);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.cc-media img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .5s var(--ease); }
.channel-card:hover .cc-media img{ transform:scale(1.06); }
/* Fallback initials thumb (no listing image) — fills the same 16:9 media
   container the real image would, instead of floating as a tiny 44px badge
   inside a large empty gradient area. */
.cc-media .cc-media-fallback{ width:100%; height:100%; border-radius:0; font-size:clamp(28px,7vw,44px); }
.cc-badge{
  position:absolute; top:12px; left:12px;
  display:flex; align-items:center; gap:5px;
  background:rgba(10,10,12,0.75); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.14);
  padding:5px 10px; border-radius:20px;
  font-size:11.5px; font-weight:600; color:var(--up);
}
.cc-fav{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; border-radius:50%;
  background:rgba(10,10,12,0.75); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.14);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim);
}
.cc-body{ padding:20px; }
.cc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.cc-cat{ font-family:var(--f-mono); font-size:11px; color:var(--red); text-transform:uppercase; letter-spacing:.05em; }
.cc-name{ font-family:var(--f-display); font-weight:700; font-size:17.5px; margin-top:2px; }
.cc-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.cc-stat .label{ font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.cc-stat .value{ font-family:var(--f-mono); font-size:15px; font-weight:600; margin-top:3px; }
.cc-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; border-top:1px solid var(--border);
}
.cc-price{ font-family:var(--f-mono); font-weight:700; font-size:17px; color:var(--gold); }
.cc-price small{ display:block; font-family:var(--f-body); font-weight:500; font-size:10.5px; color:var(--text-faint); }

/* ---------------------------------- Category cards ------------------------ */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:980px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .cat-grid{ grid-template-columns:1fr 1fr; } }
.cat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  display:flex; flex-direction:column; gap:14px;
  transition:all .25s var(--ease);
}
.cat-card:hover{ border-color:var(--border-strong); background:var(--surface-hover); transform:translateY(-3px); }
.cat-icon{
  width:42px;height:42px;border-radius:11px;
  background:var(--red-soft);
  color:var(--red);
  display:flex; align-items:center; justify-content:center;
}
.cat-card .cat-name{ font-family:var(--f-display); font-weight:700; font-size:15.5px; }
.cat-card .cat-count{ font-family:var(--f-mono); font-size:12px; color:var(--text-faint); }
.cat-card .cat-arrow{ margin-left:auto; align-self:flex-end; color:var(--text-faint); transition:transform .25s; }
.cat-card:hover .cat-arrow{ transform:translateX(4px); color:var(--red); }

/* ---------------------------------- Feature cards ------------------------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:980px){ .feat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .feat-grid{ grid-template-columns:1fr; } }
/* 4-column variant (e.g. homepage "More Than a Marketplace" grid) */
.feat-grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .feat-grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .feat-grid-4{ grid-template-columns:1fr; } }
.feat-card{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:18px;
  padding:26px;
}
.feat-num{ font-family:var(--f-mono); font-size:12px; color:var(--red); letter-spacing:.08em; }
.feat-icon{
  width:44px;height:44px;border-radius:12px;
  background:var(--red-soft); color:var(--red);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.feat-card h3{ font-size:17.5px; margin-bottom:8px; }
.feat-card p{ font-size:14.5px; }

/* ---------------------------------- Timeline ------------------------------ */
.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.timeline::before{
  content:""; position:absolute; top:22px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--border) 8%, var(--border) 92%, transparent);
}
.tl-step{ position:relative; padding-right:20px; }
.tl-num{
  width:44px;height:44px;border-radius:50%;
  background:var(--bg-elevated); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-weight:600; color:var(--red);
  position:relative; z-index:2; margin-bottom:20px;
}
.tl-step h3{ font-size:16.5px; margin-bottom:8px; }
.tl-step p{ font-size:14px; }
@media (max-width:900px){
  .timeline{ grid-template-columns:1fr; gap:32px; }
  .timeline::before{ top:0; bottom:0; left:22px; right:auto; width:1px; height:auto; }
}

/* ---------------------------------- Split / conversion -------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:980px){ .split{ grid-template-columns:1fr; gap:40px; } }
.split h2{ font-size:clamp(26px,3.2vw,38px); }
.split p{ font-size:16px; margin-top:16px; max-width:460px; }
.split-cta{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }

.mini-dash{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:22px;
  box-shadow:var(--shadow-card);
}
.mini-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border); }
.mini-row:last-child{ border-bottom:none; }
.mini-row .label{ font-size:13.5px; color:var(--text-dim); }
.mini-row .value{ font-family:var(--f-mono); font-weight:600; font-size:15px; }
.pill-status{ font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:20px; background:rgba(56,217,122,0.1); color:var(--up); }

/* ---------------------------------- Services ------------------------------ */
.service-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:24px; display:flex; flex-direction:column; height:100%;
  transition:all .25s var(--ease);
}
.service-card:hover{ border-color:var(--border-strong); background:var(--surface-hover); }
.service-card .feat-icon{ margin-bottom:18px; }
.service-card h3{ font-size:16px; margin-bottom:8px; }
.service-card p{ font-size:13.5px; flex:1; }
.service-link{ margin-top:16px; font-size:13px; font-weight:600; color:var(--red); display:inline-flex; align-items:center; gap:6px; }

/* ---------------------------------- Analytics section ---------------------- */
.analytics-panel{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:30px;
  box-shadow:var(--shadow-card);
}
.analytics-tabs{ display:flex; gap:6px; margin-bottom:26px; flex-wrap:wrap; }
.a-tab{
  padding:9px 16px; border-radius:10px; font-size:13px; font-weight:600;
  color:var(--text-dim); border:1px solid var(--border); background:var(--surface);
}
.a-tab.active{ color:#fff; background:var(--red); border-color:var(--red); }
.analytics-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-bottom:24px; }
.analytics-metrics .metric{ background:var(--bg-raised); }
@media (max-width:900px){ .analytics-metrics{ grid-template-columns:1fr 1fr; } }
.chart-wrap{ height:220px; }

/* ---------------------------------- Testimonials ---------------------------- */
.testi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:1080px){ .testi-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px; padding:24px; }
.testi-stars{ color:var(--gold); font-size:13px; letter-spacing:2px; margin-bottom:14px; }
.testi-card p{ font-size:14.5px; color:var(--text); font-style:italic; }
.testi-who{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.testi-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg, var(--red), #4a0d16);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:13px;
}
.testi-name{ font-size:13.5px; font-weight:600; }
.testi-country{ font-size:12px; color:var(--text-faint); }

/* ---------------------------------- FAQ ---------------------------------- */
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; background:none; border:none; color:var(--text);
  font-family:var(--f-display); font-weight:600; font-size:15.5px; text-align:left;
}
.faq-q .chev{ transition:transform .3s var(--ease); color:var(--text-faint); flex-shrink:0; margin-left:16px; }
.faq-item.open .faq-q .chev{ transform:rotate(45deg); color:var(--red); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a-inner{ padding:0 22px 20px; font-size:14.5px; color:var(--text-dim); }

/* ---------------------------------- Final CTA ------------------------------ */
.final-cta{
  background:linear-gradient(160deg, var(--bg-elevated), #16090c);
  border:1px solid var(--border);
  border-radius:28px;
  padding:80px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.final-cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 50% 0%, var(--red-glow), transparent 70%);
  opacity:.5; pointer-events:none;
}
.final-cta h2{ font-size:clamp(28px,4vw,46px); position:relative; }
.final-cta p{ max-width:520px; margin:18px auto 0; font-size:16px; position:relative; }
.final-cta .hero-cta{ justify-content:center; margin-top:30px; position:relative; }

/* ---------------------------------- Footer --------------------------------- */
.site-footer{ border-top:1px solid var(--border); padding:70px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; margin-bottom:56px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-brand p{ font-size:13.5px; margin-top:14px; max-width:260px; }
.footer-col h4{ font-family:var(--f-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin-bottom:16px; font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:13.5px; color:var(--text-dim); }
.footer-col a:hover{ color:var(--text); }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:26px; border-top:1px solid var(--border);
  font-size:12.5px; color:var(--text-faint); flex-wrap:wrap; gap:12px;
}
.footer-social{ display:flex; gap:10px; }

/* ---------------------------------- Reveal on scroll ------------------------ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (max-width:640px){
  .section{ padding:56px 0; }
  .stats-row, .card-grid, .feat-grid, .testi-grid{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------------------------------- Mobile nav drawer ---------------------- */
.hamburger{
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface);
  align-items:center; justify-content:center; gap:4px; flex-direction:column;
}
.hamburger span{ width:16px; height:2px; background:var(--text); transition:all .25s var(--ease); }
.hamburger.active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Menu drops down and appears directly under the sticky header, instead of
   covering the whole screen. --header-h is set by main.js to the header's
   real rendered height so this lines up on every page/device. */
.mobile-nav{
  position:fixed;
  top:var(--header-h, 80px);
  left:0; right:0;
  z-index:200;
  background:rgba(8,8,10,0.98);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border);
  box-shadow:0 30px 60px -24px rgba(0,0,0,0.65);
  display:flex; flex-direction:column;
  padding:6px 24px 8px;
  gap:0;
  max-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  opacity:0;
  transform:translateY(-6px);
  transition:max-height .38s var(--ease), opacity .28s var(--ease), transform .38s var(--ease);
  pointer-events:none;
}
.mobile-nav.open{
  max-height:min(560px, calc(100vh - var(--header-h, 80px) - 16px));
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  padding:18px 24px 28px;
}
.mobile-nav a{
  font-family:var(--f-display); font-weight:700; font-size:19px;
  padding:14px 0; border-bottom:1px solid var(--border); color:var(--text);
}
.mobile-nav .mobile-cta{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.mobile-nav .mobile-cta .btn{ flex:1 1 140px; }
.mobile-close{ display:none; }
.mobile-backdrop{
  position:fixed; inset:0; z-index:190;
  background:rgba(4,4,6,0.55);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.mobile-backdrop.open{ opacity:1; pointer-events:auto; }

/* ==========================================================================
   CUSTOM THEMED DROPDOWN (progressive enhancement over <select>)
   Native <select> option lists are drawn by the OS/browser and often ignore
   color-scheme in practice, producing pale text on a white popup in dark
   mode. custom-select.js wraps every <select> with this fully themed
   dropdown; the original <select> stays in the DOM (hidden) so any existing
   form/JS logic reading .value or listening for 'change' keeps working.
   ========================================================================== */
.cs{ position:relative; display:inline-block; }
.cs-native{
  position:absolute !important; opacity:0; width:1px; height:1px;
  overflow:hidden; pointer-events:none; clip:rect(0 0 0 0);
}
.cs-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:10px; font-family:var(--f-body); font-size:13.5px;
  text-align:left; transition:border-color .2s ease, background .2s ease;
  appearance:none; -webkit-appearance:none; margin:0; cursor:pointer; line-height:1.3;
}
.cs-trigger:hover{ border-color:var(--border-strong); }
.cs.open .cs-trigger{ border-color:var(--red); }
.cs-trigger:disabled{ opacity:.5; cursor:not-allowed; }
.cs-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-arrow{ display:flex; color:var(--text-faint); flex-shrink:0; transition:transform .2s ease; }
.cs.open .cs-arrow{ transform:rotate(180deg); color:var(--red); }

.cs-panel{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:200;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-card); padding:6px; max-height:264px; overflow-y:auto;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.cs-panel::-webkit-scrollbar{ width:8px; }
.cs-panel::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:8px; }
.cs-panel::-webkit-scrollbar-track{ background:transparent; }
.cs.open .cs-panel{ opacity:1; transform:translateY(0); pointer-events:auto; }
.cs-panel.cs-panel-up{ top:auto; bottom:calc(100% + 6px); transform:translateY(6px); }
.cs.open .cs-panel.cs-panel-up{ transform:translateY(0); }

.cs-option{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px; border-radius:8px; font-size:13.5px; color:var(--text-dim);
  cursor:pointer; transition:background .12s ease, color .12s ease;
}
.cs-option.hover{ background:var(--surface); color:var(--text); }
.cs-option.selected{ background:var(--red-soft); color:var(--red); font-weight:600; }
.cs-option[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }
.cs-check{ display:flex; color:var(--red); flex-shrink:0; }

/* Inline / compact contexts (toolbar sort, search bar) — content-sized, not full width */
.market-toolbar .cs{ display:inline-block; min-width:200px; }
.search-field .cs{ display:block; width:100%; }
.search-field .cs-trigger{ background:transparent; border:none; padding:0; height:auto; font-size:14px; }
.search-field .cs.open .cs-trigger{ border:none; }
.search-field .cs-panel{ left:-14px; right:-14px; top:calc(100% + 14px); }

/* Block contexts that already stretched their native <select> to 100% width */
.filter-group .cs, .form-field .cs{ display:block; width:100%; }

/* ================================================================
   INTERIOR PAGES — filters, tabs, wizard, dashboards, forms
   ================================================================ */

/* ---------- Page header band ---------- */
.page-hero{ padding:56px 0 40px; border-bottom:1px solid var(--border); }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-faint); margin-bottom:18px; }
.breadcrumb a{ color:var(--text-faint); }
.breadcrumb a:hover{ color:var(--text); }
.page-hero h1{ font-size:clamp(28px,4vw,40px); }
.page-hero p{ margin-top:12px; font-size:16px; max-width:560px; }

/* ---------- Marketplace layout (filters + grid) ---------- */
.market-layout{ display:grid; grid-template-columns:270px 1fr; gap:36px; padding:44px 0 100px; align-items:start; }
@media (max-width:980px){ .market-layout{ grid-template-columns:1fr; } }

.filter-panel{
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px;
  padding:22px; position:sticky; top:96px;
}
.filter-panel h3{ font-size:14px; margin-bottom:18px; }
.filter-group{ padding:16px 0; border-bottom:1px solid var(--border); }
.filter-group:first-of-type{ padding-top:0; }
.filter-group:last-of-type{ border-bottom:none; }
.filter-group label{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); display:block; margin-bottom:10px; }
.filter-group select, .filter-group input[type="text"]{
  width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:10px; font-family:var(--f-body); font-size:13.5px; outline:none;
}
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-size:12.5px; padding:7px 13px; border-radius:20px; border:1px solid var(--border);
  background:var(--surface); color:var(--text-dim); cursor:pointer; transition:all .2s;
}
.chip.active{ background:var(--red-soft); border-color:rgba(255,43,69,0.4); color:var(--red); }

.market-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.market-toolbar .count{ font-size:14px; color:var(--text-dim); }
.market-toolbar .count b{ color:var(--text); }
.sort-select{
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:9px 14px; border-radius:10px; font-size:13.5px; font-family:var(--f-body); outline:none;
}
.pagination{ display:flex; justify-content:center; gap:8px; margin-top:48px; }
.page-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface);
  color:var(--text-dim); font-family:var(--f-mono); font-size:13px; display:flex; align-items:center; justify-content:center;
}
.page-btn.active{ background:var(--red); border-color:var(--red); color:#fff; }

/* ---------- Channel details ---------- */
.details-layout{ display:grid; grid-template-columns:1fr 340px; gap:40px; padding:40px 0 100px; align-items:start; }
@media (max-width:980px){ .details-layout{ grid-template-columns:1fr; } }

.details-media{
  aspect-ratio:21/9; border-radius:20px; overflow:hidden; position:relative;
  background:linear-gradient(135deg,#1a1a20,#101013); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); margin-bottom:28px;
}
.details-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; flex-wrap:wrap; gap:12px; }
.details-title-row h1{ font-size:clamp(24px,3vw,32px); display:flex; align-items:center; gap:10px; }

.tabs-bar{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin:32px 0 28px; overflow-x:auto; }
.tab-btn{
  padding:12px 18px; font-size:14px; font-weight:600; color:var(--text-faint);
  border-bottom:2px solid transparent; white-space:nowrap; background:none; border-top:none; border-left:none; border-right:none;
}
.tab-btn.active{ color:var(--text); border-bottom-color:var(--red); }

.info-block{ margin-bottom:32px; }
.info-block h3{ font-size:17px; margin-bottom:12px; }
.info-block p{ font-size:14.5px; }
.data-list{ display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.data-list .row{ background:var(--bg-raised); display:flex; justify-content:space-between; padding:14px 18px; font-size:14px; }
.data-list .row span:first-child{ color:var(--text-dim); }
.data-list .row span:last-child{ font-family:var(--f-mono); font-weight:600; }

.video-row{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); }
.video-row:last-child{ border-bottom:none; }
.video-thumb{ width:96px; aspect-ratio:16/9; border-radius:10px; background:linear-gradient(135deg,#1c1c22,#101013); flex-shrink:0; }
.video-row .v-title{ font-size:14px; font-weight:600; }
.video-row .v-meta{ font-family:var(--f-mono); font-size:12px; color:var(--text-faint); margin-top:4px; }

.geo-row{ display:flex; align-items:center; gap:12px; padding:10px 0; }
.geo-bar-track{ flex:1; height:8px; border-radius:6px; background:var(--surface); overflow:hidden; }
.geo-bar-fill{ height:100%; background:var(--red); border-radius:6px; }
.geo-row .geo-label{ width:110px; font-size:13.5px; color:var(--text-dim); }
.geo-row .geo-pct{ width:44px; text-align:right; font-family:var(--f-mono); font-size:13px; }

.sidebar-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px; padding:24px; margin-bottom:20px; }
.price-tag{ font-family:var(--f-mono); font-size:28px; font-weight:700; color:var(--gold); }
.price-tag small{ display:block; font-family:var(--f-body); font-size:12px; color:var(--text-faint); font-weight:500; margin-top:2px; }
.sidebar-card .btn{ margin-top:16px; }

.seller-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.seller-avatar{
  width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--red),#4a0d16);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:700; font-size:15px;
}
.seller-name{ font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:6px; }
.seller-meta{ font-size:12.5px; color:var(--text-faint); }
.seller-stats{ display:flex; justify-content:space-between; padding-top:14px; margin-top:4px; border-top:1px solid var(--border); }
.seller-stats div{ text-align:center; }
.seller-stats .n{ font-family:var(--f-mono); font-weight:700; font-size:15px; }
.seller-stats .l{ font-size:11px; color:var(--text-faint); margin-top:2px; }

.trust-panel-list{ display:flex; flex-direction:column; gap:12px; }
.trust-panel-list .row{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-dim); }
.trust-panel-list .row svg{ color:var(--up); flex-shrink:0; }

/* ---------- Listing wizard ---------- */
.wizard-layout{ display:grid; grid-template-columns:240px 1fr; gap:44px; padding:48px 0 110px; }
@media (max-width:900px){ .wizard-layout{ grid-template-columns:1fr; } }
.wizard-steps{ display:flex; flex-direction:column; gap:4px; position:sticky; top:96px; }
.wizard-step{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; color:var(--text-faint); font-size:13.5px; font-weight:600; }
.wizard-step .num{ width:26px; height:26px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:11.5px; flex-shrink:0; }
.wizard-step.active{ color:var(--text); background:var(--surface); }
.wizard-step.active .num{ background:var(--red); border-color:var(--red); color:#fff; }
.wizard-step.done .num{ background:var(--up); border-color:var(--up); color:#0a0a0c; }

.wizard-panel{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:20px; padding:36px; }
.wizard-panel h2{ font-size:22px; margin-bottom:8px; }
.wizard-panel > p{ font-size:14.5px; margin-bottom:28px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field.full{ grid-column:1/-1; }
.form-field label{ font-size:13px; font-weight:600; color:var(--text-dim); }
.form-field input, .form-field select, .form-field textarea{
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:12px 14px; border-radius:12px; font-family:var(--f-body); font-size:14px; outline:none;
  transition:border-color .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--red); }
.form-field textarea{ resize:vertical; min-height:100px; }
.form-hint{ font-size:12px; color:var(--text-faint); }
.wizard-nav{ display:flex; justify-content:space-between; margin-top:32px; padding-top:24px; border-top:1px solid var(--border); }
.upload-box{
  border:1.5px dashed var(--border-strong); border-radius:14px; padding:32px; text-align:center;
  color:var(--text-faint); font-size:13.5px;
}

/* ---------- Dashboards ---------- */
.dash-shell{ display:grid; grid-template-columns:260px 1fr; min-height:calc(100vh - 73px); }
@media (max-width:900px){ .dash-shell{ grid-template-columns:1fr; } }
.dash-sidebar{ border-right:1px solid var(--border); padding:28px 18px; position:sticky; top:73px; height:calc(100vh - 73px); overflow-y:auto; }
@media (max-width:900px){ .dash-sidebar{ display:none; } }
.dash-nav-link{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:11px; font-size:14px; font-weight:600; color:var(--text-dim); margin-bottom:2px; }
.dash-nav-link.active{ background:var(--red-soft); color:var(--red); }
.dash-nav-link:hover:not(.active){ background:var(--surface); color:var(--text); }
.dash-main{ padding:36px 32px 80px; }
.dash-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; flex-wrap:wrap; gap:14px; }
.dash-head h1{ font-size:24px; }
.dash-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:36px; }
@media (max-width:1100px){ .dash-cards{ grid-template-columns:1fr 1fr; } }
.dash-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:16px; padding:20px; }
/* Channel details "hero stats" row (Subscribers / Views / etc.) — this had
   no base layout rule at all (only narrow-width grid-column overrides
   existed), so its <span>Label</span><strong>Value</strong> pairs fell
   back to default inline flow with zero gap, running together as
   "Subscribers98,000" especially on mobile where the single-column
   override made each stat full width. */
.details-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px 16px; margin:20px 0; }
.details-stats > div{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.details-stats > div > span{ font-size:12px; color:var(--text-faint); }
.details-stats > div > strong{ font-size:17px; font-weight:700; overflow-wrap:anywhere; }
.dash-card .label{ font-size:12.5px; color:var(--text-faint); }
.dash-card .value{ font-family:var(--f-mono); font-size:24px; font-weight:700; margin-top:8px; }
.dash-card .delta{ font-size:12px; margin-top:6px; font-weight:600; }
.dash-panel{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px; padding:26px; margin-bottom:24px; }
.dash-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.dash-panel-head h3{ font-size:16px; }
.muted{ color:var(--text-dim); }

/* =====================================================================
   Channel Details page (rebuilt) — "cd-*" namespace, kept independent
   from the older .details-* rules above (still used by order.php) so
   neither layout can break the other.
   ===================================================================== */
.cd-breadcrumb-section{ padding-top:26px; }
.cd-breadcrumb{ flex-wrap:wrap; row-gap:6px; }
.cd-breadcrumb .bc-sep{ color:var(--text-faint); }
.cd-breadcrumb .bc-current{ color:var(--text); font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* .cd-layout's children (.cd-col-main / .cd-col-side) are placed directly
   on the grid rather than nested inside one big wrapper per column, so
   each flows independently within its own column (the price card can sit
   beside the hero at row 1 while the rest of the main content keeps
   stacking beneath it) — see the source-order comment in the PHP file. */
.cd-layout{ display:grid; grid-template-columns:1fr 360px; gap:0 36px; padding:26px 0 100px; align-items:start; }
.cd-col-main{ grid-column:1; min-width:0; }
.cd-col-side{ grid-column:2; min-width:0; position:sticky; top:96px; margin-bottom:18px; }

.cd-hero{ display:flex; gap:22px; align-items:flex-start; margin-bottom:34px; }
.cd-hero-media{ flex:0 0 auto; }
/* Premium channel identity image: fixed square aspect-ratio so it never
   stretches or crops oddly regardless of the source image's own
   dimensions, plus a platform icon "badge" chip anchored to the corner —
   the wrap has visible overflow so the badge can sit half on / half off
   the image edge without being clipped by the image's own border-radius. */
.cd-hero-img-wrap{ position:relative; width:128px; height:128px; flex:0 0 auto; }
.cd-hero-img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; border-radius:20px; border:1px solid var(--border); display:block; box-shadow:0 12px 30px -12px rgba(0,0,0,.5); background:var(--bg-elevated); }
.cd-hero-thumb{ width:100%; height:100%; font-size:40px; border-radius:20px; box-shadow:0 12px 30px -12px rgba(0,0,0,.5); }
.cd-hero-platform-badge{ position:absolute; right:-8px; bottom:-8px; width:34px; height:34px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; border:3px solid var(--bg-raised); box-shadow:0 4px 12px rgba(0,0,0,.4); }
.cd-hero-info{ min-width:0; flex:1 1 auto; }
.cd-hero-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.cd-hero-badges .badge{ display:inline-flex; align-items:center; gap:5px; }
.cd-hero-title{ font-size:clamp(22px,3vw,32px); font-weight:800; overflow-wrap:anywhere; margin-bottom:10px; }
.cd-hero-quickstats{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; font-size:13.5px; color:var(--text-dim); }
.cd-hero-quickstat strong{ color:var(--text); font-weight:700; }
.cd-hero-quickstat-sep{ color:var(--text-faint); }
.cd-hero-desc{ font-size:14.5px; line-height:1.65; }
.cd-platform-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }

.cd-section{ margin-bottom:32px; }
.cd-section-title{ font-size:18px; font-weight:700; margin-bottom:14px; }
.cd-panel{ margin-bottom:0; }

/* Channel Statistics grid — icon-free compact tiles, wraps cleanly at any width */
.stat-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px 16px; }
.stat-tile{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.stat-tile-label{ font-size:12px; color:var(--text-faint); }
.stat-tile-value{ font-size:17px; font-weight:700; overflow-wrap:anywhere; }
.stat-na{ color:var(--text-faint); font-style:italic; font-weight:500; font-size:0.92em; }

/* Channel URL card */
.url-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px; padding:22px; }
.url-row{ display:flex; align-items:center; gap:10px; margin-bottom:16px; min-width:0; }
.url-icon{ flex:0 0 auto; color:var(--text-faint); }
.url-text{ font-family:var(--f-mono); font-size:13.5px; color:var(--text-dim); word-break:break-all; overflow-wrap:anywhere; min-width:0; }
.url-card-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }

/* Verification / Trust badges */
.trust-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.trust-badge{ font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:20px; border:1px solid var(--border); white-space:nowrap; }
.trust-badge.is-up{ background:rgba(56,217,122,.1); color:var(--up); border-color:rgba(56,217,122,.25); }
.trust-badge.is-off{ background:var(--bg-elevated); color:var(--text-faint); }

.cd-about-block{ margin-bottom:16px; }
.cd-about-block h3{ font-size:15px; margin-bottom:10px; }
.cd-about-text{ font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.cd-shot-hint{ margin:-4px 0 14px; font-size:12.5px; }

/* Price / CTA card — previously had ZERO CSS (undefined class), which is
   why the sidebar rendered as unstyled stacked text with no card, no
   padding and no price emphasis. */
.price-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:12px; }
.price-card-label{ font-size:12.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.big-price{ font-family:var(--f-mono); font-size:clamp(26px,3vw,34px); font-weight:800; margin-bottom:4px; overflow-wrap:anywhere; }
.price-card .btn{ margin:0; }
.cd-contact-form{ display:flex; flex-direction:column; gap:10px; margin:0; }
.cd-contact-form textarea{ width:100%; min-height:100px; resize:vertical; }

.seller-card{ display:flex; flex-direction:column; gap:12px; }
.seller-card-head{ display:flex; align-items:center; gap:12px; }
.seller-avatar{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1px solid var(--border); }
.seller-avatar-fallback{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--red), #7a1120); color:#fff; font-weight:800; font-size:17px; }
.seller-card-label{ font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.seller-card-name{ font-size:15px; }
.seller-kyc-badge{ align-self:flex-start; }
.seller-card-note{ font-size:12.5px; }

@media (max-width:1199px){
  /* Single column: every child falls back to natural source order —
     hero, price/CTA, stats, URL, verification, about, screenshots,
     seller — so the CTA appears right under the hero instead of at the
     bottom of a long page, without needing to reorder any markup. */
  .cd-layout{ grid-template-columns:1fr; gap:0; }
  .cd-col-main,.cd-col-side{ grid-column:1; position:static; margin-bottom:28px; }
  .stat-tiles{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:767px){
  .cd-layout{ padding:18px 0 70px; }
  .cd-hero{ flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:26px; }
  .cd-hero-img-wrap{ width:88px; height:88px; }
  .cd-hero-thumb{ font-size:28px; }
  .cd-hero-platform-badge{ width:28px; height:28px; right:-6px; bottom:-6px; }
  .cd-hero-quickstats{ font-size:12.5px; }
  .stat-tiles{ grid-template-columns:1fr 1fr; }
  .cd-section-title{ font-size:16px; }
  .price-card,.url-card{ padding:18px; border-radius:15px; }
  .dash-panel.cd-panel{ padding:18px; border-radius:15px; }
}
@media (max-width:480px){
  .stat-tiles{ grid-template-columns:1fr 1fr; gap:10px; }
  .stat-tile{ padding:12px; }
  .stat-tile-value{ font-size:15px; }
  .cd-hero-badges{ gap:6px; }
  .trust-badges{ gap:8px; }
  .trust-badge{ padding:7px 11px; font-size:11.5px; }
  .big-price{ font-size:24px; }
}
@media (max-width:360px){
  .stat-tiles{ grid-template-columns:1fr; }
}

/* Channel Screenshots gallery — large primary viewer + labelled
   prev/zoom/next control row + thumbnail strip + full-screen lightbox.
   Rules live centrally here (not inline in the PHP) like every other
   component on this page. */
.shot-viewer-panel h3{ margin-bottom:0; }
.shot-viewer-panel{ padding:24px; }
.cd-shot-hint{ margin:-4px 0 16px; }
.shot-main{ position:relative; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:rgba(255,255,255,.02); display:flex; align-items:center; justify-content:center; min-height:280px; max-height:560px; cursor:zoom-in; box-shadow:0 16px 40px -20px rgba(0,0,0,.55); }
.shot-main:focus-visible{ outline:2px solid var(--brand,#ff3150); outline-offset:2px; }
.shot-main img{ width:100%; height:100%; max-height:560px; object-fit:contain; display:block; }
.shot-controls{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.shot-controls-single{ justify-content:center; }
.shot-ctrl-btn{ display:inline-flex; align-items:center; gap:6px; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-dim); font-size:13px; font-weight:600; padding:9px 16px; border-radius:10px; cursor:pointer; white-space:nowrap; transition:border-color .2s, color .2s; }
.shot-ctrl-btn:hover{ color:var(--text); border-color:var(--border-strong,rgba(255,255,255,.2)); }
.shot-ctrl-btn span{ font-size:17px; line-height:1; }
.shot-zoom-btn{ background:none; border:none; color:var(--text-faint); font-size:12.5px; cursor:pointer; white-space:nowrap; padding:6px 8px; }
.shot-zoom-btn:hover{ color:var(--text-dim); }
.shot-caption-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; }
.shot-caption{ font-weight:600; font-size:13.5px; text-align:center; overflow-wrap:anywhere; }
.shot-counter{ font-family:var(--f-mono); font-size:11.5px; color:var(--text-faint); }
.shot-thumbs{ display:flex; gap:10px; margin-top:16px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; }
.shot-thumb{ flex:0 0 auto; width:112px; border:2px solid transparent; border-radius:12px; overflow:hidden; background:var(--bg-elevated); padding:0; cursor:pointer; text-align:center; scroll-snap-align:start; transition:border-color .2s, transform .2s; }
.shot-thumb:hover{ transform:translateY(-2px); }
.shot-thumb img{ width:100%; height:70px; object-fit:cover; display:block; border-radius:9px 9px 0 0; }
.shot-thumb span{ display:block; font-size:11px; font-weight:600; opacity:.8; padding:5px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shot-thumb.active{ border-color:var(--brand,#ff3150); }
.shot-thumb.active span{ opacity:1; color:var(--brand,#ff3150); }
/* z-index:10000, one above .whatsapp-float's 9999 (partials/footer.php) —
   the float is rendered later in the DOM than this page's content, so at
   equal z-index it would win the stacking order and float on top of a
   full-screen lightbox, which should always be the topmost layer. */
.shot-lightbox{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:10000; align-items:center; justify-content:center; padding:60px 70px; }
.shot-lightbox.open{ display:flex; }
.shot-lightbox-figure{ display:flex; flex-direction:column; align-items:center; gap:12px; max-width:100%; max-height:100%; min-width:0; }
.shot-lightbox-figure img{ max-width:100%; max-height:calc(100vh - 140px); object-fit:contain; border-radius:10px; display:block; }
.shot-lightbox-figure figcaption{ color:#fff; font-size:13.5px; font-weight:600; text-align:center; opacity:.9; }
.shot-lightbox-close{ position:absolute; top:18px; right:22px; z-index:2; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:50%; color:#fff; font-size:26px; cursor:pointer; line-height:1; }
.shot-lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.55); color:#fff; font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.shot-lightbox-prev{ left:16px; }
.shot-lightbox-next{ right:16px; }
@media (max-width:767px){
  .shot-viewer-panel{ padding:16px; }
  .shot-main{ min-height:200px; max-height:60vh; }
  .shot-controls{ gap:6px; }
  .shot-ctrl-btn{ padding:8px 12px; font-size:12px; }
  .shot-ctrl-btn span{ font-size:15px; }
  .shot-zoom-btn{ font-size:11.5px; padding:6px 4px; }
  .shot-thumb{ width:88px; }
  .shot-thumb img{ height:58px; }
  .shot-lightbox{ padding:16px; }
  .shot-lightbox-nav{ width:38px; height:38px; font-size:20px; }
  .shot-lightbox-close{ top:10px; right:10px; width:34px; height:34px; font-size:22px; }
  .shot-lightbox-figure img{ max-height:calc(100vh - 110px); }
}
@media (max-width:390px){
  .shot-controls{ flex-wrap:wrap; justify-content:center; }
  .shot-zoom-btn{ order:3; flex:1 0 100%; text-align:center; }
}

.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table th{ text-align:left; padding:12px 14px; color:var(--text-faint); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border); }
.data-table td{ padding:14px; border-bottom:1px solid var(--border); color:var(--text); }
.data-table tr:last-child td{ border-bottom:none; }
.table-scroll{ overflow-x:auto; }
.tag-status{ font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:20px; }
.tag-status.live{ background:rgba(56,217,122,0.1); color:var(--up); }
.tag-status.pending{ background:rgba(232,178,77,0.12); color:var(--gold); }
.tag-status.closed{ background:rgba(255,255,255,0.08); color:var(--text-faint); }

/* ---------- Auth split screen ---------- */
.auth-shell{ min-height:calc(100vh - 73px); display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .auth-shell{ grid-template-columns:1fr; } }
.auth-visual{
  position:relative; overflow:hidden;
  background:
    radial-gradient(70% 60% at 30% 20%, rgba(255,43,69,0.16), transparent 60%),
    linear-gradient(180deg, var(--bg-raised), var(--bg));
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; justify-content:center; padding:60px;
}
@media (max-width:900px){ .auth-visual{ display:none; } }
.auth-visual h2{ font-size:30px; max-width:380px; }
.auth-visual p{ margin-top:14px; max-width:340px; }
.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:60px 24px; }
.auth-form{ width:100%; max-width:400px; }
.auth-form h1{ font-size:26px; margin-bottom:8px; }
.auth-form > p{ margin-bottom:28px; font-size:14.5px; }
.auth-row{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 20px; font-size:13px; }
.checkbox-row{ display:flex; align-items:center; gap:8px; color:var(--text-dim); }
.auth-divider{ display:flex; align-items:center; gap:12px; margin:24px 0; color:var(--text-faint); font-size:12.5px; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--border); }
.auth-switch{ margin-top:24px; text-align:center; font-size:14px; color:var(--text-dim); }
.auth-switch a{ color:var(--red); font-weight:600; }
.account-type-row{ display:flex; gap:10px; }
.account-type-opt{ flex:1; text-align:center; padding:12px; border-radius:12px; border:1px solid var(--border); background:var(--surface); font-size:13.5px; font-weight:600; color:var(--text-dim); cursor:pointer; }
.account-type-opt.active{ border-color:var(--red); color:var(--red); background:var(--red-soft); }

/* ---------- Blog ---------- */
.blog-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:980px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }
.blog-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px; overflow:hidden; transition:transform .25s var(--ease), border-color .25s; }
.blog-card:hover{ transform:translateY(-5px); border-color:var(--border-strong); }
.blog-media{ aspect-ratio:16/10; background:linear-gradient(135deg,#1a1a20,#101013); position:relative; }
.blog-cat-tag{ position:absolute; top:12px; left:12px; font-size:11px; font-weight:600; color:var(--red); background:rgba(10,10,12,0.75); padding:5px 10px; border-radius:20px; border:1px solid rgba(255,255,255,0.12); }
.blog-body{ padding:20px; }
.blog-meta{ font-family:var(--f-mono); font-size:11.5px; color:var(--text-faint); margin-bottom:10px; }
.blog-body h3{ font-size:16.5px; line-height:1.35; margin-bottom:10px; }
.blog-body p{ font-size:13.5px; }

/* ---------- Contact ---------- */
.contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; } }
.contact-info-card{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--border); }
.contact-info-card:last-child{ border-bottom:none; }
.contact-info-card .ci-icon{ width:40px; height:40px; border-radius:11px; background:var(--red-soft); color:var(--red); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-card h4{ font-family:var(--f-display); font-size:14.5px; margin-bottom:4px; }
.contact-info-card p{ font-size:13.5px; }

/* ---------- Misc utility ---------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.badge-inline{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--up); }

/* ---------------------------------- Bottom mobile nav --------------------- */
/* App-style quick nav bar for phones: Home / Buy / Sell / Profile.
   Hidden on desktop/tablet; the hamburger drawer still carries the full
   menu (Services, How It Works, Resources, Login, Create Account). */
.bottom-nav{
  display:none;
}
@media (max-width:768px){
  .bottom-nav{
    display:flex;
    position:fixed;
    left:12px; right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    z-index:150;
    background:rgba(15,15,19,0.92);
    backdrop-filter:blur(16px) saturate(140%);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:0 20px 50px -18px rgba(0,0,0,0.7);
    padding:8px 6px;
    justify-content:space-between;
    gap:2px;
  }
  .bottom-nav a{
    flex:1 1 0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px;
    padding:8px 4px 7px;
    border-radius:14px;
    color:var(--text-faint);
    font-size:11px;
    font-weight:600;
    transition:color .2s, background .2s;
  }
  .bottom-nav a svg{ width:20px; height:20px; }
  .bottom-nav a.active{ color:var(--red); background:var(--red-soft); }
  /* Keep both fixed bottom elements from covering the last bit of page
     content — the bottom-nav itself (~82px) AND the floating WhatsApp
     button, which sits lifted just above it (see .whatsapp-float rule
     below): 88px lift + ~52px button + margin ≈ 150px total contested
     zone. Previously this only cleared the nav bar, so full-width CTA
     buttons at the end of a page (checkout's "Continue to Payment", the
     wizard's Submit, etc.) could end up hidden under the WhatsApp bubble. */
  body{ padding-bottom:156px; }
}

/* ---------------------------------- Overflow safety net ------------------- */
/* Grid/flex items default to a content-based minimum width, so a single
   wide child (a fixed-size canvas, a long unbreakable string, etc.) can
   silently force a whole row wider than the viewport on mobile. This
   resets that default across every multi-column layout in the site. */
.split > *, .two-col > *, .market-layout > *, .details-layout > *,
.wizard-layout > *, .dash-shell > *, .auth-shell > *, .contact-layout > *,
.blog-grid > *, .card-grid > *, .feat-grid > *, .cat-grid > *, .testi-grid > *{
  min-width:0;
}

/* ================================================================
   FINAL RESPONSIVE PASS — mobile / tablet / desktop
   ================================================================ */
html, body { max-width:100%; }
img, video, canvas, svg { max-width:100%; }
button, input, select, textarea { max-width:100%; }

@media (max-width: 900px){
  .site-header-inner{ min-width:0; }
  .nav-links{ display:none !important; }
  .hamburger{ display:inline-flex !important; }
  .hero{ padding-top:56px; padding-bottom:54px; }
  .hero h1{ font-size:clamp(34px, 8vw, 52px); line-height:1.04; }
  .section{ padding-top:48px; padding-bottom:48px; }
  .section-head{ gap:18px; }
  .market-toolbar{ flex-direction:column; align-items:stretch; }
  .market-toolbar > *{ width:100%; min-width:0; }
  .filter-drawer, .filter-panel{ max-width:100%; }
  .wizard-panel{ padding:24px; }
  .form-grid{ grid-template-columns:1fr; }
  .form-field.full{ grid-column:auto; }
  .dash-main{ padding:28px 20px 90px; }
  .dash-cards{ grid-template-columns:1fr 1fr; }
  .dash-panel{ padding:20px; }
  .auth-form-side{ padding:40px 20px 70px; }
}

@media (max-width: 640px){
  .container{ width:100%; padding-left:16px; padding-right:16px; }
  .page-hero{ padding:42px 0 28px; }
  .hero-actions, .admin-head-actions, .dash-head-actions{ width:100%; }
  .hero-actions .btn, .admin-head-actions .btn, .dash-head-actions .btn{ flex:1 1 100%; justify-content:center; }
  .btn{ min-height:44px; }
  .btn-sm{ min-height:40px; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .stats-row{ grid-template-columns:1fr; }
  /* 2 columns, not 1 — a single stacked column made the buyer/seller
     dashboard very tall on phones, pushing the last stat card under the
     fixed WhatsApp float / bottom-nav on first paint. */
  .dash-cards{ grid-template-columns:1fr 1fr; gap:12px; }
  .dash-card{ padding:16px; }
  .dash-card .value{ font-size:20px; }
  .card-grid, .feat-grid, .feat-grid-4{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:1fr 1fr; }
  .market-layout, .details-layout, .split, .two-col, .contact-layout{ grid-template-columns:1fr; }
  .filter-grid{ grid-template-columns:1fr; }
  .data-table, .admin-table{ min-width:680px; }
  .table-scroll{ width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
  .dash-panel{ padding:16px; border-radius:15px; }
  .dash-panel-head{ align-items:flex-start; flex-direction:column; }
  .wizard-panel{ padding:18px; border-radius:16px; }
  .wizard-nav{ gap:10px; flex-wrap:wrap; }
  .wizard-nav .btn{ flex:1 1 140px; }
  .account-type-row{ flex-direction:column; }
  .upload-box{ padding:24px 16px; }
  .tabs-bar, .admin-tabs{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tabs-bar::-webkit-scrollbar, .admin-tabs::-webkit-scrollbar{ display:none; }
  .chat-layout{ grid-template-columns:1fr !important; }
  .chat-list{ max-height:260px; }
  .wallet-split{ flex-direction:column; }
  .wallet-split > div{ width:100%; }
  .bottom-nav{ display:flex; }
  body{ padding-bottom:156px; }
}

@media (max-width:380px){
  .container{ padding-left:12px; padding-right:12px; }
  .hero h1{ font-size:32px; }
  .hero p{ font-size:14px; }
  .cat-grid{ gap:8px; }
  .cat-card{ padding:14px 10px; }
  .bottom-nav{ left:6px; right:6px; }
  .bottom-nav a{ font-size:10px; }
}

/* ================================================================
   RESPONSIVE HARDENING + PREMIUM FORM CONTROLS
   ================================================================ */
.form-grid > *, .form-field > *, .wizard-panel > *, .dash-panel > *, .market-toolbar > * { min-width:0; max-width:100%; }
.form-field input, .form-field textarea, .form-field select,
.auth-form input, .auth-form select, .auth-form textarea,
input, textarea, select { min-width:0; }

/* The custom select is the source of truth for dropdown presentation.
   It is fixed-positioned by JS so it cannot be clipped by cards/forms. */
.cs { width:100%; min-width:0; vertical-align:top; }
.cs-trigger { min-height:46px; overflow:hidden; }
.cs-panel {
  position:fixed;
  left:0;
  right:auto;
  top:0;
  width:min(420px, calc(100vw - 24px));
  max-height:min(300px, 42vh);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:#15151b;
  color:#f4f4f6;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,43,69,.04);
  z-index:99999;
}
html[data-theme="light"] .cs-panel { background:#fff; color:#17171b; border-color:rgba(10,10,20,.12); }
.cs-option { min-height:40px; color:#c8c8d0; }
html[data-theme="light"] .cs-option { color:#50505a; }
.cs-option:hover, .cs-option.hover { background:rgba(255,255,255,.07); color:#fff; }
html[data-theme="light"] .cs-option:hover, html[data-theme="light"] .cs-option.hover { background:#f2f2f5; color:#15151b; }
.cs-option.selected { background:rgba(255,43,69,.12); color:#ff5b70; }
.cs-trigger:focus-visible { outline:2px solid var(--red); outline-offset:2px; }

/* Native fallback remains themed if JS is unavailable. */
html[data-theme="dark"] select,
html[data-theme="dark"] option { color-scheme:dark; background-color:#15151b; color:#f4f4f6; }
html[data-theme="light"] select,
html[data-theme="light"] option { color-scheme:light; background-color:#fff; color:#17171b; }

@media (max-width:900px){
  .wizard-layout { gap:18px; padding-top:28px; }
  .wizard-steps { position:static; overflow-x:auto; flex-direction:row; padding-bottom:4px; }
  .wizard-step { flex:0 0 auto; white-space:nowrap; }
  .wizard-panel { width:100%; max-width:100%; }
  .form-grid { grid-template-columns:1fr !important; }
  .form-field.full { grid-column:auto !important; }
  .dash-main { min-width:0; width:100%; }
  .dash-head { align-items:flex-start; }
}

@media (max-width:640px){
  .wizard-panel { padding:16px; }
  .form-grid { gap:13px; }
  .form-field input, .form-field textarea, .cs-trigger { min-height:46px; font-size:14px; }
  .cs-panel { width:calc(100vw - 20px); max-height:48vh; }
  .dash-main { padding-left:12px; padding-right:12px; }
  .dash-panel { width:100%; overflow:visible; }
  .dash-panel-head { gap:10px; }
  .dash-card { min-width:0; overflow:hidden; }
}

@media (max-width:380px){
  .wizard-panel { padding:13px; }
  .form-field label { font-size:12px; }
  .cs-trigger { padding-left:11px; padding-right:11px; }
}

/* Mobile dashboard drawer */
.dashboard-menu-btn { display:none; }
.dashboard-backdrop { display:none; }
@media (max-width:900px){
  .dashboard-menu-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border:1px solid var(--border); border-radius:12px;
    background:var(--surface); color:var(--text); margin-bottom:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.16);
  }
  .dash-sidebar {
    display:flex !important; flex-direction:column; align-items:stretch; gap:2px;
    position:fixed; left:0; top:0; bottom:0; z-index:1200;
    width:min(290px,86vw); height:100dvh; max-height:100dvh; overflow-y:auto;
    background:var(--bg-raised); padding:82px 14px 24px;
    transform:translateX(-105%); transition:transform .3s var(--ease);
    box-shadow:24px 0 70px rgba(0,0,0,.45);
  }
  .dash-sidebar.open { transform:translateX(0); }
  .dashboard-backdrop {
    display:block; position:fixed; inset:0; z-index:1190; background:rgba(5,5,8,.58);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .dashboard-backdrop.open { opacity:1; pointer-events:auto; }
}

.cs-panel.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
.impersonation-bar{position:sticky;top:0;z-index:10000;display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 14px;background:linear-gradient(90deg,rgba(255,43,69,.18),rgba(255,43,69,.06));border-bottom:1px solid rgba(255,43,69,.28);color:var(--text);font-size:12px}.impersonation-bar a{color:var(--red);font-weight:800;text-decoration:none}.impersonation-bar a:hover{text-decoration:underline}@media(max-width:600px){.impersonation-bar{justify-content:space-between;gap:8px;font-size:11px;flex-wrap:wrap}}