/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#0866FF;
  --primary-light:#4F9FFF;
  --primary-dim:rgba(8,102,255,.14);
  --primary-glow:rgba(8,102,255,.28);

  --cyan:#B37FEB;
  --cyan-light:#D4ADFF;
  --cyan-dim:rgba(179,127,235,.12);

  --green:#10B981;
  --green-light:#34D399;
  --red:#EF4444;
  --amber:#F59E0B;
  --blue:#3B82F6;

  --bg:#050912;
  --bg2:#070C1A;
  --bg3:#0B1228;
  --surface:#0D1830;
  --surface2:#122040;
  --surface3:#172850;

  --border:rgba(8,102,255,.08);
  --border2:rgba(8,102,255,.13);
  --border3:rgba(8,102,255,.22);

  --text:#EEF2FF;
  --text2:#8896B4;
  --text3:#4E5F7A;

  --radius:10px;
  --radius-lg:14px;
  --radius-xl:18px;

  --shadow-sm:0 1px 4px rgba(0,0,0,.6);
  --shadow:0 4px 20px rgba(0,0,0,.5);
  --shadow-lg:0 12px 48px rgba(0,0,0,.6);
  --shadow-violet:0 4px 28px rgba(8,102,255,.35);

  --transition-fast:0.15s ease;
  --transition:0.2s ease;

  --messenger:linear-gradient(135deg,#0866FF,#B37FEB);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:14px;line-height:1.5;transition:background var(--transition),color var(--transition)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px}

/* ─── UTILS ─── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skip-link{position:fixed;top:-42px;left:12px;z-index:1000000;background:#0b1220;color:#fff;border:1px solid rgba(79,159,255,.45);border-radius:8px;padding:8px 12px;font-size:12px;font-weight:700;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:10px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ═══════════════════════════════════════
   LANDING PAGE
═══════════════════════════════════════ */
#landingPage{display:flex;flex-direction:column;min-height:100vh}

/* NAV */
.nav{
  position:sticky;top:0;z-index:100;height:66px;
  display:flex;align-items:center;gap:16px;padding:0 44px;
  background:rgba(6,9,15,.82);backdrop-filter:blur(32px);
  border-bottom:1px solid var(--border);
  transition:background .3s,box-shadow .3s;
}
.nav.scrolled{background:rgba(6,9,15,.96);border-bottom-color:rgba(255,255,255,.08);box-shadow:0 4px 40px rgba(0,0,0,.5)}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.nav-brand-mark{width:36px;height:36px;border-radius:10px;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 4px 12px rgba(8,102,255,.2)}
.nav-brand-name{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.4px}
.nav-brand-name em{font-style:normal;background:linear-gradient(135deg,var(--primary-light),var(--cyan-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;gap:2px;flex:1;margin-left:12px}
.nav-links a{color:var(--text2);font-size:13px;font-weight:500;text-decoration:none;padding:6px 14px;border-radius:var(--radius);transition:color .15s,background .15s}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--primary),#0044CC);color:#fff;
  font-size:13px;font-weight:700;padding:10px 22px;
  border-radius:var(--radius);cursor:pointer;border:none;
  font-family:inherit;transition:all .2s;white-space:nowrap;letter-spacing:-.1px;
  box-shadow:0 2px 16px var(--primary-glow);
}
.nav-cta:hover{background:linear-gradient(135deg,#0078FF,#0055DD);transform:translateY(-1px);box-shadow:0 4px 24px rgba(8,102,255,.5)}
.nav-cta:active{transform:translateY(0)}

/* HERO */
.hero{
  position:relative;padding:110px 44px 90px;overflow:hidden;
  background:radial-gradient(ellipse 90% 70% at 50% -10%,rgba(8,102,255,.22) 0%,transparent 60%),
             radial-gradient(ellipse 60% 40% at 85% 60%,rgba(179,127,235,.10) 0%,transparent 50%),
             radial-gradient(ellipse 50% 30% at 10% 80%,rgba(8,102,255,.06) 0%,transparent 50%),
             var(--bg);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero-noise{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;opacity:.5}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 60% 50% at 50% 0%,black 0%,transparent 80%)}
.hero-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(8,102,255,.18) 0%,transparent 70%);pointer-events:none}
.hero-glow-2{position:absolute;bottom:-100px;right:10%;width:450px;height:450px;background:radial-gradient(circle,rgba(179,127,235,.10) 0%,transparent 70%);pointer-events:none}
.hero-aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-aurora-1{position:absolute;top:20%;left:15%;width:300px;height:300px;background:radial-gradient(circle,rgba(8,102,255,.14),transparent 70%);animation:aurora-float 8s ease-in-out infinite}
.hero-aurora-2{position:absolute;top:30%;right:20%;width:250px;height:250px;background:radial-gradient(circle,rgba(179,127,235,.10),transparent 70%);animation:aurora-float 10s ease-in-out infinite reverse}
@keyframes aurora-float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-30px) scale(1.1)}}

.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(8,102,255,.08);border:1px solid rgba(8,102,255,.2);
  border-radius:100px;padding:7px 16px;font-size:12px;font-weight:600;
  color:var(--primary-light);margin-bottom:28px;position:relative;z-index:1;
}
.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--primary-light);animation:pulse-dot 1.5s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}

.hero-h1{
  font-size:clamp(48px,7vw,88px);font-weight:900;line-height:1.05;
  letter-spacing:-2.5px;max-width:900px;position:relative;z-index:1;
  background:linear-gradient(160deg,#fff 0%,rgba(238,242,255,.85) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:24px;
}
.hero-h1 .grad{
  background:linear-gradient(135deg,#4F9FFF 0%,#B37FEB 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{font-size:18px;color:var(--text2);max-width:540px;line-height:1.8;margin-bottom:40px;position:relative;z-index:1;font-weight:400}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1;margin-bottom:28px}

.btn-hero{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#0866FF,#0044CC);color:#fff;
  font-size:15px;font-weight:700;padding:15px 32px;
  border-radius:var(--radius-lg);cursor:pointer;border:none;font-family:inherit;
  transition:all .25s;box-shadow:0 4px 28px rgba(8,102,255,.45),0 0 0 1px rgba(79,159,255,.2) inset;
  letter-spacing:-.2px;
}
.btn-hero:hover{background:linear-gradient(135deg,#1877F2,#0044CC);transform:translateY(-2px);box-shadow:0 8px 40px rgba(8,102,255,.55)}
.btn-hero-secondary{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.05);color:var(--text2);
  font-size:14px;font-weight:600;padding:14px 26px;
  border-radius:var(--radius-lg);cursor:pointer;border:1px solid var(--border2);
  font-family:inherit;transition:all .2s;letter-spacing:-.1px;
}
.btn-hero-secondary:hover{background:rgba(255,255,255,.08);color:var(--text);border-color:var(--border3);transform:translateY(-1px)}

.hero-social-proof{display:flex;align-items:center;gap:12px;margin-top:4px;position:relative;z-index:1}
.hero-avatars{display:flex}
.hero-avatar{width:30px;height:30px;border-radius:50%;border:2px solid var(--bg);margin-left:-8px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff}
.hero-avatar:first-child{margin-left:0}
.hero-sp-text{font-size:12px;color:var(--text2);font-weight:500}
.hero-sp-text strong{color:var(--text);font-weight:700}

/* HERO METRICS */
.hero-metrics{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid var(--border);margin-top:64px;width:100%;max-width:820px;
  position:relative;z-index:1;
}
.metric{
  background:var(--bg2);padding:24px 20px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;
  transition:background var(--transition-fast);
}
.metric:hover{background:var(--surface)}
.metric-val{font-size:28px;font-weight:900;background:linear-gradient(135deg,#fff,var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px;line-height:1}
.metric-lbl{font-size:11px;color:var(--text3);font-weight:600;letter-spacing:.3px}

/* HERO PRODUCT PREVIEW */
.hero-preview{max-width:1000px;width:100%;margin:64px auto 0;position:relative;z-index:1}
.hero-preview-img{width:100%;height:auto;border-radius:18px;display:block;box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);}
.hero-preview-frame{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.05);
}
.hero-preview-topbar{
  background:var(--bg2);border-bottom:1px solid var(--border);
  padding:10px 16px;display:flex;align-items:center;gap:10px;
}
.hp-dots{display:flex;gap:6px}
.hp-dot{width:10px;height:10px;border-radius:50%}
.hp-dot:nth-child(1){background:#FF5F57}
.hp-dot:nth-child(2){background:#FFBD2E}
.hp-dot:nth-child(3){background:#28CA41}
.hp-url{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:5px 12px;font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;max-width:280px;margin:0 auto}
.hero-preview-body{display:flex;height:280px}
.hp-sidebar{width:140px;background:var(--bg3);border-right:1px solid var(--border);padding:12px 8px;display:flex;flex-direction:column;gap:6px}
.hp-page{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--primary-dim);border:1px solid rgba(8,102,255,.2)}
.hp-page-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}
.hp-page-name{font-size:10px;color:var(--primary-light);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-page-sub{font-size:9px;color:var(--text3)}
.hp-compose{flex:1;padding:14px;display:flex;flex-direction:column;gap:10px}
.hp-compose-area{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:11px;color:var(--text3)}
.hp-send{display:flex;gap:8px}
.hp-send-btn{padding:7px 14px;border-radius:7px;font-size:11px;font-weight:700;background:linear-gradient(135deg,var(--green),#059669);color:#fff;border:none;cursor:pointer}
.hp-pause-btn{padding:7px 14px;border-radius:7px;font-size:11px;font-weight:700;background:var(--surface2);color:var(--text2);border:1px solid var(--border2)}
.hp-stats{width:160px;background:var(--bg2);border-left:1px solid var(--border);padding:14px;display:flex;flex-direction:column;gap:8px}
.hp-stat{display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--surface);border-radius:8px;border:1px solid var(--border)}
.hp-stat-num{font-size:20px;font-weight:800;font-family:'JetBrains Mono',monospace;color:#fff;line-height:1}
.hp-stat-num.green{color:var(--green-light)}
.hp-stat-lbl{font-size:9px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.5px}

/* STATS STRIP */
.stats-strip{
  display:flex;justify-content:center;gap:0;padding:0 44px;
  background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.stat-strip-item{
  display:flex;align-items:center;gap:12px;padding:24px 40px;
  border-right:1px solid var(--border);
}
.stat-strip-item:last-child{border-right:none}
.stat-strip-icon{width:40px;height:40px;border-radius:10px;background:var(--primary-dim);border:1px solid rgba(8,102,255,.15);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--primary-light);flex-shrink:0}
.stat-strip-num{font-size:22px;font-weight:900;color:#fff;letter-spacing:-1px;line-height:1}
.stat-strip-lbl{font-size:11px;color:var(--text3);font-weight:500;margin-top:2px}

/* FEATURES */
.features-wrap{padding:100px 44px;max-width:1160px;margin:0 auto;width:100%}
.section-label{display:inline-flex;align-items:center;gap:8px;background:var(--primary-dim);border:1px solid rgba(8,102,255,.2);border-radius:100px;padding:6px 16px;font-size:11px;font-weight:700;color:var(--primary-light);text-transform:uppercase;letter-spacing:.8px;margin-bottom:20px}
.section-h2{font-size:clamp(28px,4vw,44px);font-weight:900;line-height:1.1;letter-spacing:-1.5px;margin-bottom:14px;color:var(--text)}
.section-h2 em{font-style:normal;background:linear-gradient(135deg,var(--primary-light),var(--cyan-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-sub{font-size:16px;color:var(--text2);line-height:1.7;max-width:560px;margin-bottom:56px}
.section-center{text-align:center;margin-left:auto;margin-right:auto}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden}
.feat{
  background:var(--bg2);padding:32px 28px;display:flex;flex-direction:column;gap:14px;
  transition:background .2s;position:relative;overflow:hidden;
}
.feat::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 0 0,var(--primary-dim),transparent 60%);opacity:0;transition:opacity .3s}
.feat:hover{background:var(--surface)}
.feat:hover::before{opacity:1}
.feat-icon{width:44px;height:44px;border-radius:12px;background:var(--primary-dim);border:1px solid rgba(8,102,255,.18);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--primary-light);flex-shrink:0}
.feat h3{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.3px;line-height:1.3}
.feat p{font-size:13px;color:var(--text2);line-height:1.75}

/* HOW IT WORKS */
#how-it-works{padding:100px 44px;max-width:1160px;margin:0 auto;width:100%}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.step{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:32px 28px;
  display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.step::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--primary),var(--cyan));opacity:0;transition:opacity .3s}
.step:hover{border-color:rgba(8,102,255,.25);transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.4)}
.step:hover::after{opacity:1}
.step-num{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:#fff;flex-shrink:0}
.step h3{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.3px}
.step p{font-size:13px;color:var(--text2);line-height:1.75}

/* PRICING */
#pricing{padding:100px 44px;max-width:1160px;margin:0 auto;width:100%}
.pricing-wrap{display:flex;flex-direction:column;align-items:center}
.billing-toggle{
  display:flex;align-items:center;gap:0;background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius);overflow:hidden;margin-bottom:48px;
}
.billing-toggle button{
  padding:9px 22px;font-size:13px;font-weight:600;border:none;background:transparent;
  color:var(--text2);cursor:pointer;font-family:inherit;transition:all .2s;
}
.billing-toggle button.active{background:var(--primary);color:#fff;box-shadow:0 2px 10px var(--primary-glow)}
.billing-badge{background:linear-gradient(135deg,var(--green),#059669);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;margin-left:6px}
/* ── Old 4-col grid (kept for compatibility) ── */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:100%;max-width:1200px}
.price-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 20px;display:flex;flex-direction:column;gap:0;transition:border-color .25s,transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.price-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:0;transition:opacity .3s}
.price-card:hover{border-color:rgba(8,102,255,.25);transform:translateY(-4px);box-shadow:0 20px 56px rgba(0,0,0,.5)}
.price-card:hover::before{opacity:1}
.price-badge-wrap{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.price-featured-tag{font-size:10px;font-weight:800;padding:4px 12px;border-radius:100px;background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff;letter-spacing:.3px}
.price-period{font-size:11px;color:var(--text3);margin-bottom:14px}
.price-desc{font-size:12px;color:var(--text2);line-height:1.6;margin-bottom:14px}
.price-feats li::before{content:'✓';color:var(--primary-light);font-weight:700;flex-shrink:0;margin-top:1px}
.price-amount-monthly,.price-amount-yearly{transition:opacity .2s}

/* ═══════════════════════════════════════════════════════
   PREMIUM 6-TIER PRICING GRID
═══════════════════════════════════════════════════════ */
.pricing-grid--6{
  grid-template-columns:repeat(3,1fr);
  max-width:1140px;
  gap:28px;
}

/* Base card */
.pricing-grid--6 .price-card{
  background:linear-gradient(160deg,#0d1117,#111827);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:22px 20px 18px;
  display:flex;flex-direction:column;gap:0;
  position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;
}

/* Coloured top accent bar per tier */
.pricing-grid--6 .price-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:20px 20px 0 0;opacity:1;
  background:linear-gradient(90deg,#3b82f6,#60a5fa);
}
.pricing-grid--6 .price-card:nth-child(2)::before{background:linear-gradient(90deg,#c2410c,#fb923c)}
.pricing-grid--6 .price-card:nth-child(3)::before{background:linear-gradient(90deg,#4f46e5,#818cf8)}
.pricing-grid--6 .price-card:nth-child(4)::before{background:linear-gradient(90deg,#92400e,#fbbf24)}
.pricing-grid--6 .price-card:nth-child(5)::before{background:linear-gradient(90deg,#0369a1,#38bdf8)}
.pricing-grid--6 .price-card:nth-child(6)::before{background:linear-gradient(90deg,#6d28d9,#c084fc)}

/* Subtle inner glow per tier on hover */
.pricing-grid--6 .price-card:hover{
  transform:translateY(-8px);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 32px 72px rgba(0,0,0,.55);
}
.pricing-grid--6 .price-card:nth-child(1):hover{box-shadow:0 28px 64px rgba(59,130,246,.2)}
.pricing-grid--6 .price-card:nth-child(2):hover{box-shadow:0 28px 64px rgba(251,146,60,.15)}
.pricing-grid--6 .price-card:nth-child(3):hover{box-shadow:0 28px 64px rgba(129,140,248,.2)}
.pricing-grid--6 .price-card:nth-child(5):hover{box-shadow:0 28px 64px rgba(56,189,248,.18)}
.pricing-grid--6 .price-card:nth-child(6):hover{box-shadow:0 28px 64px rgba(192,132,252,.2)}

/* GOLD — featured & elevated */
.pricing-grid--6 .price-card--gold{
  background:linear-gradient(160deg,#1c1400,#1a1100);
  border-color:rgba(251,191,36,.25);
  box-shadow:0 12px 48px rgba(251,191,36,.18);
  transform:scale(1.04);
  z-index:2;
}
.pricing-grid--6 .price-card--gold:hover{
  transform:scale(1.04) translateY(-8px);
  box-shadow:0 28px 72px rgba(251,191,36,.32);
  border-color:rgba(251,191,36,.4);
}

/* ── Promo banner above grid ── */
.promo-banner{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(90deg,rgba(239,68,68,.12),rgba(251,146,60,.12),rgba(239,68,68,.12));
  border:1px solid rgba(239,68,68,.25);
  border-radius:12px;
  padding:10px 20px;
  margin-bottom:28px;
  max-width:1080px;
  animation:promo-pulse 3s ease-in-out infinite;
}
.promo-fire{font-size:16px}
.promo-banner-text{font-size:13px;color:rgba(255,255,255,.9);letter-spacing:.1px}
.promo-banner-text strong{color:#fb923c}
.promo-countdown{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  color:#ef4444;background:rgba(239,68,68,.15);
  border:1px solid rgba(239,68,68,.3);
  border-radius:100px;padding:3px 10px;
}
@keyframes promo-pulse{0%,100%{border-color:rgba(239,68,68,.25)}50%{border-color:rgba(239,68,68,.55)}}

/* 50% OFF badge on cards */
.pricing-grid--6 .price-discount-badge{
  display:inline-block;
  font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,#dc2626,#ef4444);
  border-radius:100px;padding:3px 9px;
  margin-bottom:4px;
  width:fit-content;
  box-shadow:0 3px 10px rgba(239,68,68,.35);
}
.pricing-grid--6 .price-discount-badge--gold{
  background:linear-gradient(135deg,#92400e,#d97706);
  box-shadow:0 3px 10px rgba(217,119,6,.4);
}

/* Crossed original price */
.pricing-grid--6 .price-original{
  font-size:12px;font-weight:500;
  color:rgba(255,255,255,.3);
  margin-bottom:2px;
  text-decoration:none;
}
.pricing-grid--6 .price-original s{
  color:rgba(255,255,255,.3);
}
.pricing-grid--6 .price-original--gold s{
  color:rgba(251,191,36,.35);
}

/* Popular badge */
.pricing-grid--6 .price-popular{
  display:inline-flex;align-items:center;gap:5px;
  font-size:9.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:#0a0600;
  background:linear-gradient(135deg,#d97706,#fbbf24);
  border:none;border-radius:100px;
  padding:4px 13px;
  margin-bottom:18px;
  width:fit-content;
  box-shadow:0 4px 16px rgba(251,191,36,.35);
}

/* Plan name */
.pricing-grid--6 .price-name{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;
  color:rgba(255,255,255,.38);
  margin-bottom:10px;
}
.pricing-grid--6 .price-card--gold .price-name{color:rgba(251,191,36,.6)}

/* Price amount */
.pricing-grid--6 .price-amount{
  font-size:36px;font-weight:900;letter-spacing:-2px;
  color:#fff;line-height:1;
  margin-bottom:4px;
}
.pricing-grid--6 .price-amount sub{
  font-size:12px;font-weight:600;letter-spacing:0;
  color:rgba(255,255,255,.35);
  vertical-align:top;margin-top:8px;
}
.pricing-grid--6 .price-card--gold .price-amount{
  background:linear-gradient(135deg,#fbbf24,#fde68a);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Description */
.pricing-grid--6 .price-billing{
  font-size:11px;color:rgba(255,255,255,.35);
  margin-bottom:12px;line-height:1.5;
}

/* Divider */
.pricing-grid--6 .price-sep{
  height:1px;background:rgba(255,255,255,.06);
  margin:0 0 12px;
}

/* Feature list */
.pricing-grid--6 .price-feats{
  list-style:none;flex:1;
  display:flex;flex-direction:column;gap:0;
  margin-bottom:14px;
  padding:0;
}
.pricing-grid--6 .price-feats li{
  font-size:11.5px;color:rgba(255,255,255,.65);
  display:flex;align-items:center;gap:7px;
  padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  line-height:1.4;
}
.pricing-grid--6 .price-feats li:last-child{border-bottom:none}
.pricing-grid--6 .price-feats li::before{display:none}
.pricing-grid--6 .price-feats li i.fa-check{
  font-size:9px;color:#22c55e;
  background:rgba(34,197,94,.15);
  border-radius:50%;
  width:18px;height:18px;min-width:18px;
  display:flex;align-items:center;justify-content:center;
}

/* CTA buttons */
.pricing-grid--6 .price-btn{
  width:100%;padding:11px;
  border-radius:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.1px;
  cursor:pointer;border:none;font-family:inherit;
  transition:all .22s cubic-bezier(.16,1,.3,1);
}
.pricing-grid--6 .price-btn--basic{
  background:linear-gradient(135deg,#1d4ed8,#3b82f6);
  color:#fff;
  box-shadow:0 4px 20px rgba(59,130,246,.3);
}
.pricing-grid--6 .price-btn--basic:hover{
  box-shadow:0 8px 32px rgba(59,130,246,.5);
  transform:translateY(-2px);
}
.pricing-grid--6 .price-btn--pro{
  background:linear-gradient(135deg,#0369a1,#0ea5e9);
  color:#fff;
  box-shadow:0 4px 20px rgba(14,165,233,.25);
}
.pricing-grid--6 .price-btn--pro:hover{
  box-shadow:0 8px 32px rgba(14,165,233,.42);
  transform:translateY(-2px);
}
.pricing-grid--6 .price-btn--gold{
  background:linear-gradient(135deg,#b45309,#fbbf24);
  color:#0a0600;font-weight:800;
  box-shadow:0 4px 24px rgba(251,191,36,.35);
}
.pricing-grid--6 .price-btn--gold:hover{
  box-shadow:0 10px 36px rgba(251,191,36,.55);
  transform:translateY(-2px);
}

/* Shimmer animation on Gold card */
.pricing-grid--6 .price-card--gold::after{
  content:'';position:absolute;
  top:-60%;left:-75%;width:50%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,220,100,.04),transparent);
  transform:rotate(20deg);
  animation:gold-shimmer 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes gold-shimmer{0%,100%{left:-75%}50%{left:125%}}

/* Name color per tier */
.pricing-grid--6 .price-card:nth-child(1) .price-name{color:rgba(96,165,250,.6)}
.pricing-grid--6 .price-card:nth-child(2) .price-name{color:rgba(251,146,60,.6)}
.pricing-grid--6 .price-card:nth-child(3) .price-name{color:rgba(129,140,248,.6)}
.pricing-grid--6 .price-card:nth-child(5) .price-name{color:rgba(56,189,248,.6)}
.pricing-grid--6 .price-card:nth-child(6) .price-name{color:rgba(192,132,252,.6)}

/* Responsive */
@media(max-width:900px){.pricing-grid--6{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:560px){.pricing-grid--6{grid-template-columns:1fr;gap:16px}
  .pricing-grid--6 .price-card{padding:20px 18px 16px}
  .pricing-grid--6 .price-card--gold{transform:none}
  .pricing-grid--6 .price-card--gold:hover{transform:translateY(-8px)}}

/* Old shared stubs needed by non-6 grids */
.price-name{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text3)}
.price-amount{font-size:38px;font-weight:900;color:var(--text);letter-spacing:-2px;line-height:1;margin-bottom:4px}
.price-amount sub{font-size:14px;font-weight:600;color:var(--text2);vertical-align:top;margin-top:8px}
.price-sep{height:1px;background:var(--border);margin:14px 0}
.price-feats{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:18px;flex:1}
.price-feats li{font-size:12px;color:var(--text2);display:flex;align-items:flex-start;gap:8px;line-height:1.4}
.price-btn{width:100%;padding:11px;border-radius:var(--radius);font-size:12px;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:all .2s;letter-spacing:-.1px}
.price-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.25)}
.price-btn--free{background:var(--surface2);color:var(--text);border:1px solid var(--border2)}
.price-btn--basic{background:linear-gradient(135deg,var(--primary),#0044CC);color:#fff;box-shadow:0 4px 20px var(--primary-glow)}
.price-btn--pro{background:linear-gradient(135deg,var(--cyan),#0284C7);color:#fff;box-shadow:0 4px 20px rgba(6,182,212,.25)}
.price-btn--gold{background:linear-gradient(135deg,#d97706,#eab308);color:#fff;border:none;font-weight:700}
.price-card--featured{background:linear-gradient(160deg,rgba(8,102,255,.12),rgba(179,127,235,.06));border-color:rgba(8,102,255,.35);box-shadow:0 8px 40px rgba(8,102,255,.25)}
.price-popular{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--cyan-light);background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.2);border-radius:999px;padding:3px 10px;display:inline-block;margin-bottom:8px}

/* FOOTER */
.footer{background:var(--bg2);border-top:1px solid var(--border);padding:64px 44px 32px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;max-width:1160px;margin:0 auto 48px}
.footer-brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-bottom:16px}
.footer-brand-tagline{font-size:13px;color:var(--text3);line-height:1.7;max-width:260px}
.footer-col-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);margin-bottom:16px}
.footer-col-links{display:flex;flex-direction:column;gap:10px}
.footer-col-links a{font-size:13px;color:var(--text2);text-decoration:none;transition:color .15s;font-weight:500}
.footer-col-links a:hover{color:var(--text)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1px solid var(--border);max-width:1160px;margin:0 auto;flex-wrap:wrap;gap:12px}
.footer-bottom-copy{font-size:12px;color:var(--text3);font-weight:500}
.trust-strip{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.trust-item{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:6px;font-weight:500}
.trust-item i{font-size:13px;color:var(--text2)}
.footer-brand-col{display:flex;flex-direction:column}

/* ═══════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════ */
.testimonials-wrap{padding:100px 44px;max-width:1160px;margin:0 auto;width:100%}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.testimonial{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:28px;
  display:flex;flex-direction:column;gap:16px;transition:border-color .25s,transform .25s,box-shadow .25s;
  position:relative;overflow:hidden;
}
.testimonial::before{content:'\201C';position:absolute;top:14px;right:22px;font-size:80px;font-family:Georgia,serif;color:rgba(8,102,255,.08);line-height:1;pointer-events:none}
.testimonial:hover{border-color:rgba(8,102,255,.25);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.testimonial-stars{display:flex;gap:4px;color:#F59E0B;font-size:13px}
.testimonial-text{font-size:14px;color:#A8B4CC;line-height:1.85;flex:1}
.testimonial-author{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.testimonial-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff}
.testimonial-name{font-size:13px;font-weight:700;color:var(--text)}
.testimonial-role{font-size:11px;color:var(--text3)}

/* ═══════════════════════════════════════
   FAQ
═══════════════════════════════════════ */
#faq{padding:100px 44px;max-width:860px;margin:0 auto;width:100%}
.faq-list{margin-top:48px;display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s}
.faq-item:hover{border-color:var(--border2)}
.faq-item.open{border-color:rgba(8,102,255,.2)}
.faq-q{
  width:100%;background:none;border:none;text-align:left;padding:20px 24px;
  font-size:14px;font-weight:600;color:var(--text);cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:color .2s;
}
.faq-q:hover{color:var(--primary-light)}
.faq-q i{color:var(--text3);transition:transform .25s,color .2s;flex-shrink:0;font-size:12px}
.faq-item.open .faq-q i{transform:rotate(180deg);color:var(--primary-light)}
.faq-a{padding:0 24px 20px;font-size:13px;color:var(--text2);line-height:1.8}

/* ═══════════════════════════════════════
   BRAND MARQUEE STRIP
═══════════════════════════════════════ */
.marquee-strip{padding:16px 0;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;position:relative}
.marquee-strip::before,.marquee-strip::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2}
.marquee-strip::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.marquee-strip::after{right:0;background:linear-gradient(-90deg,var(--bg2),transparent)}
.marquee-track{display:flex;gap:0;animation:marquee-scroll 35s linear infinite;width:max-content}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:8px;color:var(--text3);font-size:12px;font-weight:600;white-space:nowrap;padding:4px 32px;border-right:1px solid var(--border);letter-spacing:.1px}
.marquee-item i{color:var(--primary-light);font-size:13px;opacity:.7}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══════════════════════════════════════
   BIG FEATURE SECTION
═══════════════════════════════════════ */
.bigfeat-section{padding:100px 44px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.bigfeat-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.bigfeat-text{display:flex;flex-direction:column;gap:0}
.bigfeat-h2{font-size:clamp(28px,3.5vw,46px);font-weight:900;letter-spacing:-1.5px;line-height:1.08;color:var(--text);margin-bottom:16px;margin-top:14px}
.bigfeat-h2 em{font-style:normal;background:linear-gradient(135deg,#4F9FFF,#B37FEB);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.bigfeat-sub{font-size:16px;color:var(--text2);line-height:1.75;margin-bottom:36px}
.bigfeat-list{display:flex;flex-direction:column;gap:20px;margin-bottom:36px}
.bigfeat-item{display:flex;gap:16px;align-items:flex-start}
.bigfeat-check{width:22px;height:22px;border-radius:6px;background:rgba(8,102,255,.15);border:1px solid rgba(8,102,255,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.bigfeat-check i{color:var(--primary-light);font-size:10px}
.bigfeat-item strong{display:block;font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.bigfeat-item p{font-size:13px;color:var(--text2);line-height:1.65;margin:0}
.btn-bigfeat{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,#0866FF,#0044CC);color:#fff;font-size:14px;font-weight:700;padding:14px 28px;border-radius:var(--radius-lg);border:none;cursor:pointer;font-family:inherit;transition:all .25s;box-shadow:0 4px 24px rgba(8,102,255,.4);letter-spacing:-.1px;width:fit-content}
.btn-bigfeat:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(8,102,255,.55)}
.bigfeat-visual{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bfsc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s}
.bfsc:hover{border-color:var(--border2);transform:translateY(-2px)}
.bfsc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.bfsc--blue::before{background:linear-gradient(90deg,#0866FF,#4F9FFF)}
.bfsc--green::before{background:linear-gradient(90deg,var(--green),var(--green-light))}
.bfsc--purple::before{background:linear-gradient(90deg,var(--cyan),#D4ADFF)}
.bfsc-wide{grid-column:1/-1}
.bfsc-icon{font-size:20px;color:var(--primary-light);margin-bottom:4px;opacity:.8}
.bfsc--green .bfsc-icon{color:var(--green-light)}
.bfsc--purple .bfsc-icon{color:var(--cyan-light)}
.bfsc-val{font-size:30px;font-weight:900;color:var(--text);letter-spacing:-1px;line-height:1;font-family:'JetBrains Mono',monospace}
.bfsc-label{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.bfsc-cmp{font-size:11px;color:var(--text3);margin-top:2px}
.bfsc-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.bfsc-live-pill{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;color:var(--green-light);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);border-radius:100px;padding:3px 8px;letter-spacing:.5px}
.bfsc-live-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse-dot 1.5s infinite}
.bfsc-progress-wrap{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;margin-bottom:8px}
.bfsc-progress-bar{height:100%;background:linear-gradient(90deg,#0866FF,#B37FEB);border-radius:3px;animation:shimmer-move 2s ease-in-out infinite alternate}
@keyframes shimmer-move{from{opacity:.8}to{opacity:1}}
.bfsc-progress-nums{display:flex;justify-content:space-between;font-size:11px;font-weight:600}
.bfsc-sent{color:var(--green-light)}
.bfsc-pct{color:var(--text3)}

/* ═══════════════════════════════════════
   STEPS CONNECTOR
═══════════════════════════════════════ */
.steps-grid{position:relative}
.steps-grid::after{content:'';position:absolute;top:51px;left:calc(33.33% - 11px);right:calc(33.33% - 11px);height:1px;background:repeating-linear-gradient(90deg,var(--border2) 0,var(--border2) 6px,transparent 6px,transparent 14px);z-index:0;pointer-events:none}
.step{z-index:1}
.step-num{z-index:2;position:relative}

/* ═══════════════════════════════════════
   TESTIMONIAL META RATING
═══════════════════════════════════════ */
.testimonial-meta{display:flex;align-items:center;gap:28px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:20px 28px;margin:0 auto 48px;max-width:720px;flex-wrap:wrap;justify-content:center}
.tm-score-group{display:flex;flex-direction:column;align-items:center;gap:4px}
.tm-stars{display:flex;gap:3px;color:#F59E0B;font-size:16px}
.tm-score{font-size:24px;font-weight:900;color:var(--text);letter-spacing:-1px;line-height:1}
.tm-score-lbl{font-size:10px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.tm-divider{width:1px;height:40px;background:var(--border);flex-shrink:0}
.tm-stat{text-align:center}
.tm-stat strong{display:block;font-size:20px;font-weight:900;color:var(--text);letter-spacing:-0.5px;line-height:1}
.tm-stat span{font-size:11px;color:var(--text3);font-weight:500;display:block;margin-top:3px}
.testimonial-verified{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--primary-light);font-weight:600;margin-top:3px}
.testimonial-verified i{color:var(--primary-light);font-size:10px}

/* ═══════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════ */
.cta-section{
  padding:120px 44px;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 90% 70% at 50% 50%,rgba(8,102,255,.14) 0%,transparent 70%);
}
.cta-section::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:900px;background:radial-gradient(circle,rgba(8,102,255,.12) 0%,transparent 60%);pointer-events:none}
.cta-section::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 80% 80%,rgba(179,127,235,.08) 0%,transparent 60%);pointer-events:none}
.cta-box{position:relative;z-index:1;max-width:780px;margin:0 auto;padding:60px;border:1px solid rgba(8,102,255,.2);border-radius:28px;background:rgba(8,102,255,.04);backdrop-filter:blur(8px)}
.cta-box::before{content:'';position:absolute;inset:-1px;border-radius:29px;background:linear-gradient(135deg,rgba(8,102,255,.3),transparent 40%,transparent 60%,rgba(179,127,235,.2));-webkit-mask:linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;padding:1px}
.cta-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--primary-light);text-transform:uppercase;letter-spacing:.8px;margin-bottom:20px;background:var(--primary-dim);border:1px solid rgba(8,102,255,.2);padding:6px 16px;border-radius:100px}
.cta-h2{font-size:clamp(32px,5vw,56px);font-weight:900;letter-spacing:-2px;line-height:1.08;margin-bottom:16px;background:linear-gradient(160deg,#fff 0%,rgba(238,242,255,.8) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta-h2 span{background:linear-gradient(135deg,#4F9FFF,#B37FEB);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta-sub{font-size:16px;color:var(--text2);max-width:520px;margin:0 auto 36px;line-height:1.7}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.btn-cta-primary{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#0866FF,#0044CC);color:#fff;font-size:15px;font-weight:700;padding:16px 36px;border-radius:var(--radius-lg);border:none;cursor:pointer;font-family:inherit;transition:all .25s;box-shadow:0 4px 28px rgba(8,102,255,.45);letter-spacing:-.2px}
.btn-cta-primary:hover{transform:translateY(-2px);box-shadow:0 10px 44px rgba(8,102,255,.6)}
.cta-note{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.cta-note-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text3);font-weight:500}
.cta-note-item i{color:var(--green);font-size:11px}
.cta-urgency{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--amber);margin-bottom:24px}
.cta-urgency i{font-size:11px}

/* TRUST STRIP */
.trust-strip{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;background:var(--bg2);border-top:1px solid var(--border);padding:0}
.trust-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text3);font-weight:600;padding:18px 28px;border-right:1px solid var(--border)}
.trust-item:last-child{border-right:none}
.trust-item i{font-size:14px;color:var(--primary-light)}

/* ═══════════════════════════════════════
   APP DASHBOARD
═══════════════════════════════════════ */
#appPage{width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}

/* TOPBAR */
.topbar{
  height:62px;flex-shrink:0;position:relative;
  display:flex;align-items:center;padding:0 18px;gap:12px;
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg2) 100%);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 24px rgba(0,0,0,.35);
}
.topbar::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(8,102,255,.6) 30%,rgba(179,127,235,.4) 70%,transparent 100%);
}
.topbar-brand{display:flex;align-items:center;gap:10px;margin-right:6px;flex-shrink:0}
.topbar-mark{
  width:34px;height:34px;border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 20px rgba(8,102,255,.4);
}
.topbar-title{flex:1;min-width:0}
.topbar-title h1{color:#fff;font-size:14px;font-weight:800;line-height:1;letter-spacing:-.4px}
.topbar-title p{color:var(--text3);font-size:10px;margin-top:2px;letter-spacing:.1px}
.topbar-spacer{flex:1}

/* QUOTA WIDGET */
.quota-widget{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,var(--surface),var(--surface2));
  border:1px solid rgba(8,102,255,.15);
  border-radius:var(--radius);padding:8px 16px;flex-shrink:0;
  transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.quota-widget:hover{border-color:rgba(8,102,255,.3);box-shadow:0 4px 16px rgba(8,102,255,.12)}
.quota-plan-group{display:flex;flex-direction:column;gap:1px}
.quota-micro-label{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px}
.quota-remaining{display:flex;align-items:baseline;gap:3px}
.quota-num{font-size:16px;font-weight:800;color:var(--green-light);font-family:'JetBrains Mono',monospace;letter-spacing:-.5px;line-height:1}
.quota-num.warn{color:var(--amber)}
.quota-num.danger{color:var(--red);animation:num-blink .8s infinite}
@keyframes num-blink{0%,100%{opacity:1}50%{opacity:.4}}
.quota-sep{color:var(--text3);font-size:11px}
.quota-total-num{font-size:11px;color:var(--text3);font-weight:600;font-family:'JetBrains Mono',monospace}
.quota-divider{width:1px;height:26px;background:var(--border)}

#planBadge{
  font-size:9px;font-weight:800;padding:3px 9px;border-radius:6px;
  text-transform:uppercase;letter-spacing:.6px;
  background:var(--primary-dim);color:var(--primary-light);
  border:1px solid rgba(8,102,255,.2);transition:all .2s;
}
.btn-upgrade{
  background:linear-gradient(135deg,var(--primary),#0044CC);
  color:#fff;border:none;padding:6px 13px;border-radius:8px;
  font-size:11px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:5px;
  box-shadow:0 2px 10px var(--primary-glow);
  transition:all .2s;white-space:nowrap;font-family:inherit;
}
.btn-upgrade:hover{transform:translateY(-1px);box-shadow:0 4px 18px var(--primary-glow)}

/* QUOTA EXHAUSTED */
.quota-empty-overlay{
  position:absolute;inset:0;background:rgba(6,9,15,.92);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;gap:10px;
  border-radius:inherit;padding:8px 14px;
}
.quota-empty-overlay i{color:var(--red);font-size:14px}
.quota-empty-overlay span{font-size:12px;font-weight:700;color:#FCA5A5}
.quota-empty-overlay button{background:linear-gradient(135deg,var(--primary),#0044CC);color:#fff;border:none;padding:5px 12px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}

/* LOGIN STATUS */
#loginStatus{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;padding:5px 12px;border-radius:8px;flex-shrink:0;background:var(--surface);color:var(--text3);border:1px solid var(--border);transition:all .3s}
.ls-dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0;transition:all .3s}
#loginStatus.online .ls-dot{background:var(--green);box-shadow:0 0 10px rgba(16,185,129,.8);animation:pulse-dot 2s infinite}
#loginStatus.online{color:var(--green-light);border-color:rgba(16,185,129,.25);background:rgba(16,185,129,.08);box-shadow:0 0 0 1px rgba(16,185,129,.1) inset}

/* TOPBAR USER SECTION */
.topbar-status{display:flex;align-items:center;gap:8px;flex-shrink:0}
.topbar-user-btn{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:24px;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:all .2s;flex-shrink:0}
.topbar-user-btn:hover{border-color:rgba(8,102,255,.25);background:var(--surface2)}
.topbar-avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),#0044CC);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;
  border:2px solid rgba(8,102,255,.3);
  overflow:hidden;
}
.topbar-avatar img{width:100%;height:100%;object-fit:cover}
.topbar-user-name{font-size:12px;font-weight:600;color:var(--text2);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-main{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* THEME TOGGLE */
.theme-toggle{cursor:pointer;display:flex;align-items:center;flex-shrink:0}
.theme-toggle input{display:none}
.tt-track{width:44px;height:22px;background:var(--surface2);border:1px solid var(--border2);border-radius:11px;position:relative;display:flex;align-items:center;padding:0 3px;justify-content:space-between;transition:background .3s}
.tt-icon{font-size:9px;z-index:1;line-height:1}
.tt-icon--dark{color:var(--primary-light)}
.tt-icon--light{color:#FBBF24}
.tt-thumb{position:absolute;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:left .2s cubic-bezier(.4,0,.2,1)}
#themeToggle:checked~.tt-track .tt-thumb{left:24px}
#themeToggle:not(:checked)~.tt-track{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.1)}
#themeToggle:not(:checked)~.tt-track .tt-thumb{background:var(--primary);left:2px}

/* STATUS BAR */
#statusBar{display:none;padding:10px 18px;font-size:13px;font-weight:600;flex-shrink:0;border-bottom:1px solid transparent;align-items:center;gap:10px}
#statusBar i{flex-shrink:0;font-size:14px}
#statusBar .sb-count{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;padding:3px 10px;border-radius:6px;background:rgba(255,255,255,.12)}
#statusBar.sb-success{display:flex;background:rgba(16,185,129,.1);color:var(--green-light);border-color:rgba(16,185,129,.2)}
#statusBar.sb-error{display:flex;background:rgba(239,68,68,.1);color:#F87171;border-color:rgba(239,68,68,.2)}
#statusBar.sb-warning{display:flex;background:rgba(245,158,11,.1);color:#FCD34D;border-color:rgba(245,158,11,.2)}
#statusBar.sb-info{display:flex;background:rgba(8,102,255,.1);color:var(--primary-light);border-color:rgba(8,102,255,.2)}

#networkBanner{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:12px;font-weight:700;border-bottom:1px solid transparent}
#networkBanner::before{content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0}
#networkBanner.banner-offline{background:rgba(239,68,68,.12);color:#FDA4AF;border-color:rgba(239,68,68,.22)}
#networkBanner.banner-offline::before{background:#EF4444;box-shadow:0 0 8px rgba(239,68,68,.6)}
#networkBanner.banner-recovering{background:rgba(245,158,11,.12);color:#FCD34D;border-color:rgba(245,158,11,.22)}
#networkBanner.banner-recovering::before{background:#F59E0B;box-shadow:0 0 8px rgba(245,158,11,.6)}
#networkBanner.banner-online{background:rgba(16,185,129,.12);color:#6EE7B7;border-color:rgba(16,185,129,.22)}
#networkBanner.banner-online::before{background:#10B981;box-shadow:0 0 8px rgba(16,185,129,.6)}

/* ANNOUNCEMENT BAR */
.topbar-announcement{flex:1;display:flex;align-items:center;gap:10px;overflow:hidden;min-width:0}
.announcement-pill{display:inline-flex;align-items:center;gap:6px;background:var(--primary-dim);border:1px solid rgba(8,102,255,.2);color:var(--primary-light);font-size:10px;font-weight:800;padding:4px 10px;border-radius:100px;white-space:nowrap;flex-shrink:0;text-transform:uppercase;letter-spacing:.5px}
.announcement-body{flex:1;display:flex;align-items:center;gap:12px;overflow:hidden;min-width:0}
.announcement-media-wrap{flex-shrink:0}
.announcement-media-wrap img,.announcement-media-wrap video{max-height:32px;border-radius:6px;border:1px solid var(--border)}
.announcement-text-wrap{flex:1;overflow:hidden;min-width:0}
.announcement-text-track{font-size:12px;color:var(--text2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.announcement-cta{background:var(--primary-dim);border:1px solid rgba(8,102,255,.2);color:var(--primary-light);font-size:11px;font-weight:700;padding:5px 12px;border-radius:7px;text-decoration:none;white-space:nowrap;flex-shrink:0;transition:all .2s}
.announcement-cta:hover{background:rgba(8,102,255,.2);color:#fff}

/* LAYOUT */
.app-body{flex:1;display:flex;gap:12px;padding:12px;overflow:hidden;min-height:0;align-items:stretch;background:var(--bg);flex-shrink:0}

/* ── NAV SIDEBAR ── */
.nav-sidebar{
  width:72px;min-width:72px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.2);flex-shrink:0;
  transition:width .25s ease;
}
.nav-sidebar:hover{width:200px}
.nav-sidebar-hdr{
  display:flex;align-items:center;gap:10px;padding:16px 14px;
  border-bottom:1px solid var(--border);flex-shrink:0;
  overflow:hidden;white-space:nowrap;
}
.nav-sidebar-hdr span{font-size:12px;font-weight:800;color:var(--text2);opacity:0;transition:opacity .2s}
.nav-sidebar:hover .nav-sidebar-hdr span{opacity:1}
.nav-sidebar-items{
  flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:4px;overflow:hidden;
}
.nav-side-item{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--radius);
  color:var(--text3);font-size:12px;font-weight:600;text-decoration:none;
  white-space:nowrap;overflow:hidden;transition:all .18s;border:1px solid transparent;
}
.nav-side-item i{font-size:16px;flex-shrink:0;width:20px;text-align:center}
.nav-side-item span{opacity:0;transition:opacity .2s}
.nav-sidebar:hover .nav-side-item span{opacity:1}
.nav-side-item:hover{background:var(--surface2);color:var(--text);border-color:var(--border)}
.nav-side-item.active{
  background:linear-gradient(135deg,rgba(8,102,255,.15),rgba(8,102,255,.08));
  color:var(--primary-light);border-color:rgba(8,102,255,.25);
}
.nav-side-item.active i{color:var(--primary-light)}
.nav-sidebar-footer{
  padding:10px 8px;border-top:1px solid var(--border);flex-shrink:0;
}
.nav-user-info{
  display:flex;align-items:center;gap:8px;padding:8px;
  overflow:hidden;white-space:nowrap;
}
.nav-user-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),#0044CC);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;
}
.nav-user-details{opacity:0;transition:opacity .2s;flex:1;min-width:0}
.nav-sidebar:hover .nav-user-details{opacity:1}
.nav-user-name{font-size:11px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.nav-user-plan{font-size:9px;color:var(--text3);font-weight:600}

/* ── BROADCAST VIEW ── */
.broadcast-view{flex:1;display:flex;gap:12px;min-width:0;min-height:0;align-items:stretch}

/* ── ANALYTICS PANEL ── */
.analytics-panel{
  flex:1;min-width:300px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;overflow-y:auto;gap:0;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.analytics-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.analytics-header h3{font-size:13px;font-weight:800;color:var(--text2);display:flex;align-items:center;gap:8px}
.analytics-header h3 i{color:var(--primary-light)}
.analytics-period{display:flex;gap:4px;background:var(--surface2);padding:3px;border-radius:8px}
.period-btn{border:none;background:transparent;color:var(--text3);font-size:11px;font-weight:600;padding:5px 10px;border-radius:6px;cursor:pointer;font-family:inherit;transition:all .18s}
.period-btn.active,.period-btn:hover{background:var(--primary-dim);color:var(--primary-light)}
.analytics-kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.analytics-kpi{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;display:flex;flex-direction:column;gap:6px;
  border-left:3px solid transparent;
}
.analytics-kpi:hover{background:var(--bg3)}
.akpi-blue{border-left-color:rgba(8,102,255,.5)}
.akpi-green{border-left-color:rgba(16,185,129,.5)}
.akpi-red{border-left-color:rgba(239,68,68,.5)}
.akpi-purple{border-left-color:rgba(179,127,235,.5)}
.akpi-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px}
.akpi-blue .akpi-icon{background:rgba(8,102,255,.12);color:var(--primary-light)}
.akpi-green .akpi-icon{background:rgba(16,185,129,.12);color:var(--green-light)}
.akpi-red .akpi-icon{background:rgba(239,68,68,.12);color:#F87171}
.akpi-purple .akpi-icon{background:rgba(179,127,235,.12);color:#B37FEB}
.akpi-val{font-size:22px;font-weight:800;color:var(--text);font-family:'JetBrains Mono',monospace;letter-spacing:-1px}
.akpi-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3)}
.analytics-chart-wrap{padding:14px 16px;border-bottom:1px solid var(--border)}
.analytics-chart-hdr{font-size:11px;font-weight:700;color:var(--text2);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.analytics-chart-hdr i{color:var(--primary-light)}
.analytics-chart-box{height:180px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center}
.analytics-empty{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text3);font-size:12px}
.analytics-empty i{font-size:24px;opacity:.3}
.analytics-history{padding:14px 16px;flex:1}
.analytics-history-hdr{font-size:11px;font-weight:700;color:var(--text2);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.analytics-history-hdr i{color:var(--text3)}

/* ── TEMPLATES PANEL ── */
.templates-panel{
  flex:1;min-width:300px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;overflow-y:auto;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.templates-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.templates-header h3{font-size:13px;font-weight:800;color:var(--text2);display:flex;align-items:center;gap:8px}
.templates-header h3 i{color:var(--primary-light)}
.btn-primary-sm{
  display:flex;align-items:center;gap:6px;
  background:var(--primary);color:#fff;border:none;padding:7px 12px;border-radius:8px;
  font-size:11px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .18s;
}
.btn-primary-sm:hover{background:#2563eb}
.templates-grid{padding:14px;display:flex;flex-direction:column;gap:8px}
.template-card{
  display:flex;align-items:center;gap:12px;padding:14px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  cursor:pointer;transition:all .18s;
}
.template-card:hover{background:var(--bg3);border-color:var(--border2);transform:translateX(2px)}
.tpl-icon{
  width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
}
.tpl-icon--order{background:rgba(8,102,255,.12);color:var(--primary-light)}
.tpl-icon--sale{background:rgba(245,158,11,.12);color:#FBBF24}
.tpl-icon--reminder{background:rgba(16,185,129,.12);color:var(--green-light)}
.tpl-icon--greet{background:rgba(179,127,235,.12);color:#B37FEB}
.tpl-body{flex:1;min-width:0}
.tpl-name{font-size:12px;font-weight:700;color:var(--text)}
.tpl-preview{font-size:11px;color:var(--text3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpl-arrow{color:var(--text3);font-size:11px}

/* ── SETTINGS PANEL ── */
.settings-panel{
  flex:1;min-width:300px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;overflow-y:auto;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.settings-header{
  padding:16px 18px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.settings-header h3{font-size:13px;font-weight:800;color:var(--text2);display:flex;align-items:center;gap:8px}
.settings-header h3 i{color:var(--primary-light)}
.settings-section{padding:14px;display:flex;flex-direction:column;gap:12px}
.settings-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;
}
.settings-card h4{font-size:12px;font-weight:700;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:7px}
.settings-card h4 i{color:var(--primary-light)}
.settings-card p{font-size:11px;color:var(--text3);margin-bottom:12px;line-height:1.6}
.settings-delay-opts{display:flex;gap:6px}
.delay-opt{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text3);font-size:10px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .18s;
}
.delay-opt:hover,.delay-opt.active{background:var(--primary-dim);color:var(--primary-light);border-color:rgba(8,102,255,.25)}
.delay-opt i{font-size:14px}
.settings-toggle{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--border);cursor:pointer;font-size:12px;color:var(--text2);
}
.settings-toggle:last-of-type{border-bottom:none}
.settings-toggle input{accent-color:var(--primary)}
.settings-btn{
  width:100%;display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text2);font-size:12px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .18s;margin-top:8px;
}
.settings-btn:hover{background:var(--primary-dim);color:var(--primary-light);border-color:rgba(8,102,255,.2)}
.settings-btn--danger:hover{background:rgba(239,68,68,.1);color:#F87171;border-color:rgba(239,68,68,.2)}
.settings-btn i{font-size:12px}

/* ── HELP PANEL ── */
.help-panel{
  flex:1;min-width:300px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;overflow-y:auto;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.help-header{
  padding:16px 18px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.help-header h3{font-size:13px;font-weight:800;color:var(--text2);display:flex;align-items:center;gap:8px}
.help-header h3 i{color:var(--primary-light)}
.help-section{padding:14px}
.help-faq{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.faq-item{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;
}
.faq-q{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--text);margin-bottom:8px}
.faq-q i{color:var(--amber);font-size:12px}
.faq-a{font-size:11px;color:var(--text3);line-height:1.7;padding-left:20px}
.help-contact{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;
}
.help-contact h4{font-size:12px;font-weight:700;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.help-contact h4 i{color:var(--primary-light)}
.help-contact p{font-size:11px;color:var(--text3);line-height:1.7}
.help-contact a{color:var(--primary-light)}

/* ── HOME VIEW ── */
.home-view{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;overflow-y:auto;padding-right:2px;
}

/* Home Hero Banner */
.home-hero-banner{
  background:linear-gradient(135deg,rgba(8,102,255,.2),rgba(179,127,235,.15));
  border:1px solid rgba(8,102,255,.3);border-radius:var(--radius-xl);
  padding:28px 32px;position:relative;overflow:hidden;
  flex-shrink:0;
  box-shadow:0 8px 32px rgba(8,102,255,.15);
}
.hhб-glow,.hhb-glow{
  position:absolute;top:-60px;right:-60px;width:300px;height:300px;
  background:radial-gradient(circle,rgba(8,102,255,.35) 0%,transparent 70%);
  pointer-events:none;
  animation:pulse-glow 4s ease-in-out infinite;
}
@keyframes pulse-glow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
.hhб-content,.hhb-content{position:relative;z-index:1}
.hhб-badge,.hhb-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(8,102,255,.2);border:1px solid rgba(8,102,255,.35);
  color:#4F9FFF;padding:6px 14px;border-radius:20px;
  font-size:11px;font-weight:700;margin-bottom:14px;
  backdrop-filter:blur(10px);
}
.hhб-badge i,.hhb-badge i{font-size:11px}
.hhб-title,.hhb-title{font-size:28px;font-weight:800;color:var(--text);letter-spacing:-.8px;margin-bottom:8px}
.hhб-title span{background:linear-gradient(135deg,#4F9FFF,#B37FEB);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hhб-sub,.hhb-sub{font-size:14px;color:var(--text2);max-width:520px;line-height:1.7;margin-bottom:20px}
.hhб-actions,.hhb-actions{display:flex;gap:12px;flex-wrap:wrap}
.hhб-btn-primary,.hhb-btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--primary),#0044CC);color:#fff;
  border:none;padding:12px 22px;border-radius:var(--radius-lg);font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .25s;
  box-shadow:0 4px 20px rgba(8,102,255,.4);
}
.hhб-btn-primary:hover,.hhb-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(8,102,255,.5)}
.hhб-btn-secondary,.hhb-btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);color:var(--text);
  border:1px solid rgba(255,255,255,.15);padding:12px 22px;border-radius:var(--radius-lg);
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;
}
.hhб-btn-secondary:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}

/* Hero Stats Row - Enhanced */
.hhб-stats-row,.hhb-stats-row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:24px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
}
.hhб-stat,.hhb-stat{
  background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);padding:16px 12px;text-align:center;
  transition:all .2s;
}
.hhб-stat:hover,.hhb-stat:hover{background:rgba(0,0,0,.3);transform:translateY(-2px)}
.hhб-stat-val,.hhb-stat-val{font-size:26px;font-weight:800;color:#4F9FFF;font-family:'JetBrains Mono',monospace;letter-spacing:-1px}
.hhб-stat-val.sent-val{color:#34D399}
.hhб-stat-val.failed-val{color:#F87171}
.hhб-stat-val.pending-val{color:#FBBF24}
.hhб-stat-val.plan-val{color:#B37FEB}
.hhб-stat-lbl,.hhb-stat-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-top:6px}

/* Home Plan Banner */
.home-plan-banner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:linear-gradient(135deg,rgba(179,127,235,.12),rgba(8,102,255,.08));
  border:1px solid rgba(179,127,235,.2);border-radius:var(--radius-lg);
  padding:16px 20px;flex-shrink:0;
}
.home-plan-left{display:flex;align-items:center;gap:16px}
.hpb-plan-badge{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,rgba(179,127,235,.25),rgba(8,102,255,.2));
  border:1px solid rgba(179,127,235,.3);border-radius:20px;
  padding:8px 14px;font-size:12px;font-weight:700;color:#B37FEB;
}
.hpb-plan-info{display:flex;flex-direction:column;gap:4px}
.hpb-msg-used{display:flex;align-items:baseline;gap:4px;font-size:13px}
.hpb-used-num{font-size:18px;font-weight:800;color:var(--text);font-family:'JetBrains Mono',monospace;letter-spacing:-.5px}
.hpb-sep{color:var(--text3);font-size:13px}
.hpb-total-num{color:var(--text2);font-family:'JetBrains Mono',monospace}
.hpb-lbl{color:var(--text3);font-size:11px;margin-left:4px}
.home-plan-right{display:flex;align-items:center;gap:14px}
.hpb-progress-bar{
  width:140px;height:8px;background:rgba(255,255,255,.08);
  border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.1);
}
.hpb-progress-fill{
  height:100%;background:linear-gradient(90deg,var(--primary),#B37FEB);
  border-radius:10px;transition:width .4s ease;min-width:2px;
}
.hpb-progress-pct{font-size:12px;font-weight:700;color:var(--text2);min-width:36px}
.hpb-upgrade-btn{
  display:flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,#B37FEB,#8B5CF6);color:#fff;
  border:none;padding:9px 16px;border-radius:var(--radius);font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .2s;
  box-shadow:0 4px 16px rgba(179,127,235,.35);
}
.hpb-upgrade-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(179,127,235,.5)}

/* Pages Overview Section */
.home-pages-overview{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;flex-shrink:0;
}
.hpo-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(8,102,255,.05),transparent);
}
.hpo-hdr span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--text2);display:flex;align-items:center;gap:8px}
.hpo-hdr span i{color:var(--primary-light)}
.hpo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;
  padding:14px 16px;
}
.hpo-page-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px;display:flex;flex-direction:column;gap:12px;transition:all .2s;
}
.hpo-page-card:hover{background:var(--bg3);border-color:var(--border2);transform:translateY(-2px)}
.hpo-page-top{display:flex;align-items:center;gap:10px}
.hpo-page-avatar{width:42px;height:42px;border-radius:11px;object-fit:cover;border:1px solid var(--border)}
.hpo-page-avatar-placeholder{
  width:42px;height:42px;border-radius:11px;background:var(--primary-dim);
  display:flex;align-items:center;justify-content:center;color:var(--primary-light);font-size:16px;font-weight:700;
}
.hpo-page-info{flex:1;min-width:0}
.hpo-page-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpo-page-cat{font-size:10px;color:var(--text3);margin-top:2px}
.hpo-page-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hpo-page-stat{
  background:var(--surface);border-radius:var(--radius);
  padding:8px 10px;text-align:center;
}
.hpo-page-stat-val{font-size:15px;font-weight:800;color:var(--text);font-family:'JetBrains Mono',monospace}
.hpo-page-stat-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-top:2px}
.hpo-page-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(16,185,129,.12);color:var(--green-light);
  padding:4px 10px;border-radius:10px;font-size:10px;font-weight:700;
}

/* ── MESSENGER VIEW ── */
.messenger-view{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:0;
  overflow:hidden;height:100%;
}
.messenger-layout{
  flex:1;display:flex;gap:0;overflow:hidden;height:100%;
}
/* Conversations List */
.messenger-convs{
  width:320px;min-width:280px;flex-shrink:0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;overflow:hidden;
}
.mc-header{
  padding:14px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(8,102,255,.05),transparent);
}
.mc-header h3{font-size:13px;font-weight:800;color:var(--text2);display:flex;align-items:center;gap:8px}
.mc-header h3 i{color:var(--primary-light)}
.mc-search{
  padding:12px;border-bottom:1px solid var(--border);
}
.mc-search input{
  width:100%;padding:9px 12px;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);font-size:12px;font-family:inherit;
  outline:none;transition:border-color .18s;
}
.mc-search input:focus{border-color:var(--primary)}
.mc-search input::placeholder{color:var(--text3)}
.mc-list{flex:1;overflow-y:auto;padding:8px}
.mc-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:var(--radius);cursor:pointer;transition:all .18s;
  margin-bottom:4px;
}
.mc-item:hover{background:var(--surface2)}
.mc-item.active{background:var(--primary-dim);border:1px solid rgba(8,102,255,.2)}
.mc-item.unread{background:rgba(8,102,255,.06)}
.mc-avatar{
  width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid var(--border);
}
.mc-avatar-placeholder{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:var(--primary-dim);display:flex;align-items:center;justify-content:center;
  color:var(--primary-light);font-size:15px;font-weight:700;border:2px solid rgba(8,102,255,.2);
}
.mc-info{flex:1;min-width:0}
.mc-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-name.unread-name{color:#4F9FFF}
.mc-last-msg{font-size:11px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-meta{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.mc-time{font-size:10px;color:var(--text3)}
.mc-unread-badge{
  min-width:18px;height:18px;border-radius:9px;background:var(--primary);
  color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
  padding:0 5px;
}
.mc-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:32px 16px;text-align:center;color:var(--text3);
}
.mc-empty i{font-size:32px;opacity:.3}
.mc-empty p{font-size:12px;line-height:1.6}
/* Chat Area */
.messenger-chat{
  flex:1;min-width:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;overflow:hidden;margin-left:14px;
}
.chat-header{
  padding:12px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,rgba(8,102,255,.03),transparent);
}
.chat-header-avatar{
  width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--border);
}
.chat-header-info{flex:1;min-width:0}
.chat-header-name{font-size:14px;font-weight:700;color:var(--text)}
.chat-header-status{font-size:11px;color:var(--green-light);margin-top:2px}
.chat-header-actions{display:flex;gap:8px}
.chat-header-btn{
  width:34px;height:34px;border-radius:50%;background:transparent;border:1px solid var(--border);
  color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;
}
.chat-header-btn:hover{background:var(--surface);color:var(--text);border-color:var(--border2)}
.chat-messages{
  flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
}
.chat-msg{display:flex;gap:8px;max-width:75%}
.chat-msg.from-me{flex-direction:row-reverse;align-self:flex-end}
.chat-msg.from-user{align-self:flex-start}
.chat-msg-avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;object-fit:cover;align-self:flex-end;
}
.chat-msg-bubble{
  padding:10px 14px;border-radius:16px;word-break:break-word;line-height:1.5;
}
.chat-msg.from-user .chat-msg-bubble{
  background:var(--surface);border:1px solid var(--border);
  color:var(--text);border-bottom-left-radius:4px;
}
.chat-msg.from-me .chat-msg-bubble{
  background:linear-gradient(135deg,var(--primary),#0044CC);
  color:#fff;border-bottom-right-radius:4px;
}
.chat-msg-time{font-size:9px;color:var(--text3);margin-top:4px;padding:0 4px}
.chat-msg.from-me .chat-msg-time{text-align:right}
.chat-typing{
  padding:8px 16px;font-size:11px;color:var(--text3);font-style:italic;display:none;
}
.chat-typing.active{display:block}
.chat-input-bar{
  padding:12px 16px;border-top:1px solid var(--border);
  display:flex;gap:10px;align-items:flex-end;
}
.chat-input-bar textarea{
  flex:1;min-height:40px;max-height:120px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  color:var(--text);font-size:13px;font-family:inherit;resize:none;outline:none;
  transition:border-color .18s;
}
.chat-input-bar textarea:focus{border-color:var(--primary)}
.chat-input-bar textarea::placeholder{color:var(--text3)}
.chat-send-btn{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),#0044CC);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;
  box-shadow:0 4px 12px rgba(8,102,255,.35);
}
.chat-send-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(8,102,255,.5)}
.chat-attach-btn{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--surface);color:var(--text3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;
}
.chat-attach-btn:hover{background:var(--surface2);color:var(--text)}
.chat-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--text3);text-align:center;padding:32px;
}
.chat-empty i{font-size:48px;opacity:.2}
.chat-empty h4{font-size:16px;font-weight:700;color:var(--text2)}
.chat-empty p{font-size:12px;line-height:1.6}

/* Quick Actions Grid */
.home-quick-actions{padding:0 2px;flex-shrink:0}
.home-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.home-qa-card{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px 18px;cursor:pointer;transition:all .18s;
}
.home-qa-card:hover{background:var(--surface2);border-color:var(--border2);transform:translateY(-2px)}
.qa-card-icon{
  width:42px;height:42px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.qa-icon-blue{background:rgba(8,102,255,.12);color:var(--primary-light)}
.qa-icon-purple{background:rgba(179,127,235,.12);color:#B37FEB}
.qa-icon-green{background:rgba(16,185,129,.12);color:var(--green-light)}
.qa-icon-amber{background:rgba(245,158,11,.12);color:#FBBF24}
.qa-card-body{flex:1;min-width:0}
.qa-card-title{font-size:13px;font-weight:700;color:var(--text)}
.qa-card-desc{font-size:11px;color:var(--text3);margin-top:3px}
.qa-card-arrow{color:var(--text3);font-size:12px}

/* Bottom Grid */
.home-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex-shrink:0}
.home-card-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;
}
.hcp-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(8,102,255,.04),transparent);
}
.hcp-hdr>span:first-child{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--text2);display:flex;align-items:center;gap:7px}
.hcp-hdr>span:first-child i{color:var(--primary-light);font-size:12px}
.hcp-count{font-size:11px;font-weight:700;padding:2px 9px;border-radius:10px;background:var(--primary-dim);color:var(--primary-light)}
.hcp-pages-list,.hcp-activity-list{padding:12px}
.hcp-page-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:8px;transition:all .2s;
}
.hcp-page-item:last-child{margin-bottom:0}
.hcp-page-item:hover{background:var(--bg3);border-color:var(--border2);transform:translateX(3px)}
.hcp-page-img{width:38px;height:38px;border-radius:10px;object-fit:cover;border:1px solid var(--border)}
.hcp-page-info{flex:1;min-width:0}
.hcp-page-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcp-page-cat{font-size:10px;color:var(--text3);margin-top:2px}
.hcp-page-status{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}
.hcp-empty{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:24px 16px;text-align:center;
}
.hcp-empty i{font-size:28px;color:rgba(8,102,255,.2)}
.hcp-empty p{font-size:12px;color:var(--text3);line-height:1.7}
.hcp-connect-btn{
  display:flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,var(--primary),#0044CC);color:#fff;
  border:none;padding:9px 16px;border-radius:var(--radius);font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .2s;margin-top:4px;
}
.hcp-connect-btn:hover{background:#2563eb}

/* Results Section */
.home-results-section{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px;flex-shrink:0;
}
.hrs-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.hrs-hdr>span{font-size:12px;font-weight:700;color:var(--text2);display:flex;align-items:center;gap:7px}
.hrs-hdr>span i{color:var(--primary-light)}
.hrs-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:10px;background:rgba(16,185,129,.12);color:var(--green-light)}
.hrs-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hrs-result-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;display:flex;flex-direction:column;gap:8px;
}
.hrs-result-page{font-size:11px;font-weight:700;color:var(--text)}
.hrs-result-stats{display:flex;gap:12px}
.hrs-stat{text-align:center}
.hrs-stat-val{font-size:16px;font-weight:800;color:var(--green-light);font-family:'JetBrains Mono',monospace}
.hrs-stat-val.failed{color:#F87171}
.hrs-stat-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3)}
.hrs-result-time{font-size:10px;color:var(--text3)}

/* Home Pages List Items */
.hcp-page-item{
  display:flex;align-items:center;gap:10px;padding:10px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:6px;cursor:pointer;transition:all .18s;
}
.hcp-page-item:hover{background:var(--bg3);border-color:var(--border2)}
.hcp-page-img{width:32px;height:32px;border-radius:7px;object-fit:cover;border:1px solid var(--border2)}
.hcp-page-info{flex:1;min-width:0}
.hcp-page-name{font-size:12px;font-weight:600;color:var(--text)}
.hcp-page-cat{font-size:10px;color:var(--text3);margin-top:2px}

/* ── COL 1: SIDEBAR ── */
.sidebar{
  width:280px;min-width:280px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
  flex-shrink:0;
}
.sidebar-hdr{
  padding:14px 14px 12px;border-bottom:1px solid var(--border);flex-shrink:0;
  background:linear-gradient(180deg,rgba(8,102,255,.06),transparent);
}
.sidebar-hdr-label{display:flex;align-items:center;justify-content:space-between}
.sidebar-hdr-label-left{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text2)}
.sidebar-hdr-label-left i{font-size:12px;color:var(--primary-light)}
.sidebar-page-count{font-size:10px;font-weight:700;padding:2px 7px;border-radius:100px;background:var(--primary-dim);color:var(--primary-light);border:1px solid rgba(8,102,255,.2)}
.sidebar-pages{flex:1;overflow-y:auto;padding:8px;scrollbar-width:thin;scrollbar-color:var(--surface3) transparent}
.sidebar-pages::-webkit-scrollbar{width:3px}
.sidebar-pages::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px}
.pages-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px 20px;text-align:center}
.pages-empty i{font-size:32px;color:rgba(8,102,255,.25)}
.pages-empty p{font-size:12px;color:var(--text3);line-height:1.65}
.page-card{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius);
  cursor:pointer;transition:all .18s;border:1px solid transparent;margin-bottom:5px;
  position:relative;
}
.page-card:hover{background:var(--surface2);border-color:var(--border);transform:translateX(2px)}
.page-card.active,.page-card.selected{
  background:linear-gradient(135deg,rgba(8,102,255,.12),rgba(8,102,255,.06));
  border-color:rgba(8,102,255,.28);
  box-shadow:inset 3px 0 0 var(--primary),0 2px 12px rgba(8,102,255,.15);
  transform:translateX(3px);
}
.page-card.active .page-card-name,.page-card.selected .page-name,.page-card.active .page-name{color:var(--primary-light);font-weight:700}
/* page avatar — real FB picture */
.page-card-img,.page-avatar{width:36px;height:36px;border-radius:9px;flex-shrink:0;object-fit:cover;border:1px solid var(--border2)}
/* initial-based fallback avatar */
.page-avatar-fallback{
  width:36px;height:36px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),#0044CC);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;letter-spacing:-.3px;
  text-transform:uppercase;border:1px solid rgba(8,102,255,.3);
  box-shadow:0 4px 12px rgba(8,102,255,.2);
}
.page-card-info,.page-info{flex:1;min-width:0}
.page-card-name,.page-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}
.page-card-cat,.page-category{font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.page-dot,.page-indicator{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--surface3)}
.page-dot.online,.page-indicator.online{background:var(--green);box-shadow:0 0 6px rgba(16,185,129,.6);animation:pulse-dot 2.5s infinite}
.sidebar-foot,.sidebar-footer{padding:10px 8px;border-top:1px solid var(--border);flex-shrink:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.1))}
.btn-logout{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;
  background:transparent;border:1px solid rgba(239,68,68,.12);
  border-radius:var(--radius);color:rgba(220,38,38,.6);font-size:11px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .2s;letter-spacing:.1px;
}
.btn-logout:hover{background:rgba(239,68,68,.09);border-color:rgba(239,68,68,.25);color:#EF4444;transform:translateY(-1px)}

/* ── SIDEBAR QUICK TIPS ── */
.sidebar-tips{
  padding:12px 14px;border-top:1px solid var(--border);flex-shrink:0;
  background:linear-gradient(180deg,rgba(8,102,255,.04),transparent);
}
.sidebar-tips-hdr{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:8px}
.sidebar-tips-hdr i{color:var(--amber);font-size:10px}
.sidebar-tips-list{display:flex;flex-direction:column;gap:5px}
.stip-item{display:flex;align-items:flex-start;gap:7px;font-size:10px;color:var(--text3);line-height:1.5}
.stip-item i{font-size:10px;margin-top:2px;flex-shrink:0}
.stip-green{color:var(--green-light)}
.stip-item strong{color:var(--text2)}

/* ── COL 2: MESSAGE COMPOSE ── */
.compose-col,.compose{
  flex:0 0 420px;min-width:0;min-height:0;display:flex;flex-direction:column;gap:0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--surface3) transparent;
  box-shadow:0 4px 20px rgba(0,0,0,.18);
}
.compose-col::-webkit-scrollbar,.compose::-webkit-scrollbar{width:3px}
.compose-col::-webkit-scrollbar-track,.compose::-webkit-scrollbar-track{background:transparent}
.compose-col::-webkit-scrollbar-thumb,.compose::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px}

/* ── COL 3: BROADCAST + SETTINGS ── */
.broadcast-col{
  flex:0 0 400px;min-width:0;min-height:0;display:flex;flex-direction:column;gap:0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--surface3) transparent;
  box-shadow:0 4px 20px rgba(0,0,0,.18);
}
.broadcast-col::-webkit-scrollbar{width:3px}
.broadcast-col::-webkit-scrollbar-track{background:transparent}
.broadcast-col::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px}

/* Sections inside card-columns */
.compose-section{
  padding:16px 18px;flex-shrink:0;
  background:transparent;border:none;border-radius:0;
  border-bottom:1px solid var(--border);
  border-left:3px solid rgba(8,102,255,.15);
  transition:border-left-color .25s,background .2s;
}
.compose-section:last-child{border-bottom:none;flex:1;display:flex;flex-direction:column}
.compose-section:focus-within{
  border-left-color:var(--primary);
  background:rgba(8,102,255,.025);
}
/* Compose section stretches, textarea fixed, image panel fills rest */
.compose > .compose-section:last-child{flex:1;display:flex;flex-direction:column}
.compose > .compose-section:last-child #messageText{height:260px;min-height:260px;max-height:260px;resize:none;flex-shrink:0}
.compose > .compose-section:last-child .img-attach-panel{flex:1;display:flex;flex-direction:column;min-height:0}
.compose > .compose-section:last-child .img-upload-area{flex:1;display:flex;flex-direction:column;min-height:0}
.compose > .compose-section:last-child .img-drop-zone{flex:1;min-height:80px}
.compose-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.compose-section-title i{font-size:12px;color:var(--primary-light)}
/* Section header row */
.compose-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin:-16px -18px 14px;padding:11px 18px;
  background:linear-gradient(180deg,rgba(8,102,255,.05),transparent);
  border-bottom:1px solid var(--border);
}
.compose-hdr h3{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text2);margin:0}
.compose-hdr-icon{font-size:14px;color:var(--primary-light);flex-shrink:0}
.compose-hdr-img{width:16px;height:16px;object-fit:contain;border-radius:3px;flex-shrink:0;color:var(--primary-light)}
/* Recipients toggle button */
.recipients-toggle-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;background:var(--surface2);border:1px solid var(--border);color:var(--text3);border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.recipients-toggle-btn:hover{background:var(--primary-dim);border-color:rgba(8,102,255,.25);color:var(--primary-light)}
/* Main message textarea */
#messageText{
  width:100%;background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--radius);padding:13px 14px;color:var(--text);
  font-size:13px;font-family:inherit;resize:none;
  min-height:260px;max-height:260px;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;line-height:1.75;
}
#messageText:focus{border-color:rgba(8,102,255,.5);background:var(--surface2);box-shadow:0 0 0 3px rgba(8,102,255,.1),0 0 0 1px rgba(8,102,255,.2)}
#messageText::placeholder{color:var(--text3)}
/* Character count bar */
.char-count-bar{height:2px;background:var(--border);border-radius:1px;margin-top:6px;overflow:hidden}
.char-count-fill{height:100%;width:0%;border-radius:1px;background:linear-gradient(90deg,var(--primary),var(--cyan));transition:width .15s,background .15s}
.char-count-fill.warn{background:linear-gradient(90deg,var(--amber),#F59E0B)}
.char-count-fill.danger{background:linear-gradient(90deg,var(--red),#EF4444)}
/* IMAGE ATTACH UI */
.img-attach-wrap{margin-top:7px;flex-shrink:0}
.img-attach-toggle{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.img-attach-toggle:hover,.img-attach-toggle[aria-expanded="true"]{background:var(--primary-dim);border-color:rgba(8,102,255,.25);color:var(--primary-light)}
.img-attach-badge{background:var(--primary);color:#fff;border-radius:999px;padding:1px 5px;font-size:9px;font-weight:800}
.img-attach-panel{margin-top:10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;gap:10px}
.img-tab-row{display:flex;gap:6px}
.img-tab-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.img-tab-btn.active,.img-tab-btn:hover{background:var(--primary-dim);border-color:rgba(8,102,255,.22);color:var(--primary-light)}
.img-url-area{display:flex;gap:7px;align-items:center}
.img-url-input{flex:1;background:var(--surface);border:1px solid var(--border2);border-radius:8px;padding:9px 12px;color:var(--text);font-size:12px;font-family:inherit;outline:none;transition:border-color .15s}
.img-url-input:focus{border-color:rgba(8,102,255,.35)}
.img-url-input::placeholder{color:var(--text3)}
.img-url-load-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--primary-dim);border:1px solid rgba(8,102,255,.22);border-radius:8px;color:var(--primary-light);cursor:pointer;transition:all .2s;flex-shrink:0}
.img-url-load-btn:hover{background:var(--primary);color:#fff}
.img-drop-zone{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px;background:var(--surface);border:1.5px dashed var(--border2);border-radius:var(--radius);color:var(--text3);font-size:12px;cursor:pointer;transition:all .2s;text-align:center}
.img-drop-zone:hover,.img-drop-zone.drag-over{border-color:rgba(8,102,255,.35);background:var(--primary-dim);color:var(--text2)}
.img-drop-zone i{font-size:22px;color:var(--primary-light)}
.img-drop-zone small{font-size:10px;color:var(--text3)}
.img-upload-progress{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text2)}
.img-preview-wrap{margin-top:4px}
.img-preview-box{display:flex;align-items:center;gap:12px;padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.img-preview-box img{width:56px;height:56px;object-fit:cover;border-radius:6px;flex-shrink:0;border:1px solid var(--border)}
.img-preview-info{display:flex;align-items:center;justify-content:space-between;flex:1;gap:10px}
.img-preview-label{font-size:11px;color:var(--text2);font-weight:600}
.img-clear-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:6px;color:var(--red);cursor:pointer;transition:all .2s;flex-shrink:0}
.img-clear-btn:hover{background:var(--red);color:#fff}

/* TEXTAREA */
.compose-textarea{
  width:100%;background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--radius);padding:13px 14px;
  color:var(--text);font-size:14px;font-family:inherit;
  resize:none;min-height:110px;outline:none;transition:border-color .15s,background .15s;
  line-height:1.65;
}
.compose-textarea:focus{border-color:rgba(8,102,255,.4);background:var(--surface2)}
.compose-textarea::placeholder{color:var(--text3)}

.compose-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
#charCount{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;flex-shrink:0;margin-top:4px}
#charCount.warn{color:var(--amber)}
#charCount.danger{color:var(--red)}

/* IMAGE ATTACH */
.attach-section{display:flex;gap:8px;margin-bottom:2px}
.btn-attach-tab{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  background:var(--surface2);border:1px solid var(--border);color:var(--text2);
  border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;
}
.btn-attach-tab.active,.btn-attach-tab:hover{background:var(--primary-dim);border-color:rgba(8,102,255,.2);color:var(--primary-light)}
.attach-panel{display:flex;gap:8px;align-items:center;margin-top:8px}
#attachInput{flex:1;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:9px 12px;color:var(--text);font-size:12px;font-family:inherit;outline:none;transition:border-color .15s}
#attachInput:focus{border-color:rgba(8,102,255,.35)}
#attachInput::placeholder{color:var(--text3)}

.compose-notice{display:flex;gap:8px;margin-top:8px;padding:8px 11px;background:rgba(245,158,11,.05);border:1px solid rgba(245,158,11,.12);border-radius:var(--radius);font-size:11px;color:var(--text2);line-height:1.55;flex-shrink:0}
.compose-notice i{color:var(--amber);font-size:12px;flex-shrink:0;margin-top:1px}
.compose-notice strong{color:#D97706}
.compose-notice--tip{background:rgba(8,102,255,.07);border-color:rgba(8,102,255,.18)}
.compose-notice--tip i{color:var(--primary-light)}
.compose-notice--tip strong{color:var(--primary-light)}

.field-label{font-size:11px;color:var(--text2);font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.field-label i{color:var(--primary-light);font-size:11px}
.delay-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.delay-preset{border:1px solid var(--border2);background:var(--surface2);border-radius:var(--radius);padding:10px 8px;color:var(--text2);font-family:inherit;cursor:pointer;transition:all .18s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative}
.delay-preset:hover{border-color:rgba(8,102,255,.35);transform:translateY(-2px);color:var(--text);background:var(--surface3)}
.delay-preset.active{background:linear-gradient(135deg,rgba(8,102,255,.15),rgba(8,102,255,.07));border-color:rgba(8,102,255,.4);color:var(--primary-light);box-shadow:0 0 0 1px rgba(8,102,255,.15) inset,0 4px 16px rgba(8,102,255,.12)}
.delay-preset.active::after{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);border-radius:2px 2px 0 0}
.delay-preset i{font-size:13px;margin-bottom:1px}
.delay-preset:nth-child(1) i{color:var(--green)}
.delay-preset:nth-child(2) i{color:var(--primary-light)}
.delay-preset:nth-child(3) i{color:var(--amber)}
.delay-name{font-size:12px;font-weight:800;line-height:1;letter-spacing:-.2px}
.delay-value{font-size:10px;opacity:.75;font-family:'JetBrains Mono',monospace}
.delay-wrap{display:flex;align-items:center;border:1px solid var(--border2);border-radius:var(--radius);overflow:hidden;transition:border-color .15s}
.delay-wrap:focus-within{border-color:rgba(8,102,255,.4)}
#delayMs{flex:1;background:var(--surface);border:none;color:var(--text);font-size:13px;padding:9px 12px;outline:none;font-family:inherit}
.delay-unit{background:var(--surface2);border-left:1px solid var(--border);color:var(--text3);font-size:11px;font-weight:700;padding:9px 11px;white-space:nowrap}
.field-hint{font-size:10px;color:var(--text3);margin-top:6px}

/* MODE PILLS */
.mode-pills{display:flex;gap:0;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:3px;overflow:hidden}
.mode-pill{padding:6px 14px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;border:none;background:transparent;color:var(--text3);font-family:inherit;transition:all .2s;letter-spacing:.1px}
.mode-pill.active{background:linear-gradient(135deg,var(--primary),#0044CC);color:#fff;box-shadow:0 2px 10px rgba(8,102,255,.35)}

/* ACTION BUTTONS */
#btnLoadConvos{
  width:100%;padding:12px;border-radius:var(--radius);
  background:var(--surface2);border:1px solid var(--border2);
  color:var(--text2);font-size:13px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  gap:9px;transition:all .2s;font-family:inherit;margin-bottom:12px;
}
#btnLoadConvos:hover{background:var(--surface3);border-color:rgba(8,102,255,.3);color:var(--primary-light);transform:translateY(-1px)}
#btnLoadConvos:active{transform:translateY(0)}
#btnLoadConvos.loading{opacity:.5;pointer-events:none}

#sendHint{font-size:12px;color:var(--text2);text-align:center;margin-bottom:10px;padding:10px 14px;background:linear-gradient(135deg,rgba(8,102,255,.08),rgba(8,102,255,.03));border-radius:var(--radius);border:1px solid rgba(8,102,255,.18);font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.5}
#sendHint::before{content:'\f05a';font-family:'Font Awesome 6 Free';font-weight:900;color:var(--primary-light);font-size:13px;flex-shrink:0}

.action-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.act-btn{
  width:100%;padding:11px 8px;border-radius:var(--radius);border:none;
  font-size:12px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;transition:all .22s;letter-spacing:.1px;
}
#btnStart,#btnAutoStart{grid-column:1/-1;font-size:14px;padding:13px;letter-spacing:-.1px}
.act-btn i{font-size:12px}
.act-btn:hover:not(:disabled){transform:translateY(-2px)}
.act-btn:active:not(:disabled){transform:translateY(0)}
.act-btn:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(.3)}
.act-btn.loading{opacity:.5;pointer-events:none}
/* Start */
#btnStart{background:linear-gradient(135deg,#059669,#10B981);color:#fff;box-shadow:0 4px 20px rgba(16,185,129,.3)}
#btnStart:hover:not(:disabled){box-shadow:0 8px 32px rgba(16,185,129,.5)}
/* Pause */
#btnPause{background:linear-gradient(135deg,#B45309,#F59E0B);color:#fff;box-shadow:0 4px 14px rgba(245,158,11,.25)}
#btnPause:hover:not(:disabled){box-shadow:0 6px 22px rgba(245,158,11,.4)}
/* Resume */
#btnResume{background:var(--surface2);color:var(--text2);border:1px solid var(--border2)}
#btnResume:hover:not(:disabled){background:var(--surface3);border-color:rgba(8,102,255,.25);color:var(--primary-light)}
/* Stop */
#btnStop{background:linear-gradient(135deg,#B91C1C,#EF4444);color:#fff;box-shadow:0 4px 14px rgba(239,68,68,.25)}
#btnStop:hover:not(:disabled){box-shadow:0 6px 22px rgba(239,68,68,.4)}
/* Auto mode buttons */
#btnAutoStart{background:linear-gradient(135deg,#059669,#10B981);color:#fff;box-shadow:0 4px 20px rgba(16,185,129,.3)}
#btnAutoStart:hover:not(:disabled){box-shadow:0 8px 32px rgba(16,185,129,.5)}
#btnAutoPause{background:linear-gradient(135deg,#B45309,#F59E0B);color:#fff;box-shadow:0 4px 14px rgba(245,158,11,.25)}
#btnAutoPause:hover:not(:disabled){box-shadow:0 6px 22px rgba(245,158,11,.4)}
#btnAutoResume{background:var(--surface2);color:var(--text2);border:1px solid var(--border2)}
#btnAutoResume:hover:not(:disabled){background:var(--surface3);border-color:rgba(8,102,255,.25);color:var(--primary-light)}
#btnAutoStop{background:linear-gradient(135deg,#B91C1C,#EF4444);color:#fff;box-shadow:0 4px 14px rgba(239,68,68,.25)}
#btnAutoStop:hover:not(:disabled){box-shadow:0 6px 22px rgba(239,68,68,.4)}


/* AUTO MODE */
.auto-info{display:flex;align-items:flex-start;gap:9px;padding:9px 12px;margin-bottom:8px;background:rgba(8,102,255,.06);border:1px solid rgba(8,102,255,.15);border-radius:var(--radius);font-size:11px;color:var(--text2);line-height:1.6}
.auto-info i{flex-shrink:0;margin-top:2px;color:var(--primary-light);font-size:14px}
.auto-info.error{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.18)}
.auto-info.success{background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.18)}
.auto-info.warn{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.18)}

/* BEST PRACTICES TIPS */
.tips-list{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.tip-item{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);font-size:12px;color:var(--text2);line-height:1.6;transition:all .18s}
.tip-item:hover{background:var(--bg3);border-color:var(--border2);transform:translateX(2px)}
.tip-item i{font-size:12px;color:var(--green-light);flex-shrink:0;margin-top:2px}

.page-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:8px;font-size:11px;font-weight:700;background:var(--primary-dim);color:var(--primary-light);border:1px solid rgba(8,102,255,.18);margin-bottom:12px}

/* BROADCAST MINI SESSION STATS */
.bcast-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.bcast-mini-stat{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;text-align:center}
.bcast-mini-stat-val{font-size:18px;font-weight:900;line-height:1;font-family:'JetBrains Mono',monospace;letter-spacing:-1px}
.bcast-mini-stat-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-top:3px}
.bms-total .bcast-mini-stat-val{color:var(--text)}
.bms-sent .bcast-mini-stat-val{color:var(--green-light)}
.bms-failed .bcast-mini-stat-val{color:#F87171}

/* EXTRA ACTION BUTTONS (retry/export) */
.extra-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.btn-extra{width:100%;padding:9px 8px;border-radius:var(--radius);border:1px solid var(--border2);background:var(--surface2);color:var(--text2);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s;letter-spacing:.1px}
.btn-extra:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(8,102,255,.3);color:var(--primary-light);background:var(--surface3)}
.btn-extra:disabled{opacity:.3;cursor:not-allowed}
.btn-extra.btn-retry{border-color:rgba(239,68,68,.2);color:#F87171}
.btn-extra.btn-retry:hover:not(:disabled){border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.06);color:#F87171}
.btn-extra i{font-size:11px}

/* QUICK TEMPLATES */
.quick-tpls{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.tpl-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  cursor:pointer;transition:all .18s;position:relative;overflow:hidden;
}
.tpl-item:hover{background:var(--bg3);border-color:rgba(8,102,255,.25);transform:translateX(3px)}
.tpl-item:hover .tpl-arrow{opacity:1;transform:translateX(0)}
.tpl-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.tpl-icon--order{background:rgba(8,102,255,.12);color:var(--primary-light)}
.tpl-icon--sale{background:rgba(16,185,129,.12);color:var(--green-light)}
.tpl-icon--reminder{background:rgba(245,158,11,.12);color:var(--amber)}
.tpl-icon--greet{background:rgba(179,127,235,.12);color:var(--cyan-light)}
.tpl-body{flex:1;min-width:0}
.tpl-name{font-size:12px;font-weight:700;color:var(--text);margin-bottom:2px}
.tpl-preview{font-size:10px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}
.tpl-arrow{font-size:10px;color:var(--primary-light);opacity:0;transform:translateX(-4px);transition:all .18s;flex-shrink:0}

/* ══════════════════════════════════════
   COL 4: STATS + INTELLIGENCE PANEL
══════════════════════════════════════ */
.stats-panel{
  flex:1;min-width:300px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--surface3) transparent;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.stats-panel::-webkit-scrollbar{width:3px}
.stats-panel::-webkit-scrollbar-track{background:transparent}
.stats-panel::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px}

/* ── STAT STRIP ── */
.stat-strip{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.stat-box{
  flex:1;padding:20px 10px 18px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border-right:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg3),var(--bg2));
  position:relative;overflow:hidden;transition:background .2s;cursor:default;
}
.stat-box:last-child{border-right:none}
.stat-box:hover{background:var(--surface2)}
.stat-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.stat-box.s-total::before{background:linear-gradient(90deg,var(--primary),var(--cyan));box-shadow:0 2px 16px rgba(8,102,255,.6)}
.stat-box.s-sent::before{background:linear-gradient(90deg,#059669,var(--green-light));box-shadow:0 2px 16px rgba(16,185,129,.6)}
.stat-box.s-failed::before{background:linear-gradient(90deg,#B91C1C,var(--red));box-shadow:0 2px 16px rgba(239,68,68,.5)}
.stat-row{display:flex;align-items:center;gap:5px}
.stat-icon{font-size:10px}
.stat-box.s-total .stat-icon{color:var(--primary-light)}
.stat-box.s-sent .stat-icon{color:var(--green-light)}
.stat-box.s-failed .stat-icon{color:#F87171}
.stat-lbl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text3)}
.stat-val{
  font-size:36px;font-weight:900;color:#fff;line-height:1;
  font-family:'JetBrains Mono',monospace;letter-spacing:-2px;
  transition:all .4s cubic-bezier(.4,0,.2,1);
}
.stat-box.s-sent .stat-val{color:var(--green-light);text-shadow:0 0 30px rgba(16,185,129,.35)}
.stat-box.s-failed .stat-val{color:#F87171;text-shadow:0 0 24px rgba(239,68,68,.3)}
.stat-box.s-total .stat-val{color:var(--primary-light);text-shadow:0 0 24px rgba(8,102,255,.3)}

/* ── PROGRESS BAR AREA ── */
.progress-bar-area{
  padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;
  background:linear-gradient(180deg,var(--bg2),var(--bg));
}
.progress-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.progress-left{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3)}
.progress-left i{color:var(--primary-light);font-size:10px}
.progress-meta{display:flex;align-items:center;gap:8px}
.eta-text{font-size:10px;color:var(--text3);font-family:'JetBrains Mono',monospace}
.progress-pct{font-size:14px;font-weight:800;color:var(--text);font-family:'JetBrains Mono',monospace;letter-spacing:-.5px}
.progress-track{height:6px;background:var(--surface3);border-radius:100px;overflow:hidden;position:relative}
.progress-fill{
  height:100%;width:0%;border-radius:100px;
  background:linear-gradient(90deg,var(--primary),var(--cyan));
  transition:width .5s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 8px rgba(8,102,255,.4);
  position:relative;
}
.progress-fill::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:40px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2));
  animation:shimmerProg 1.5s ease infinite;
}
@keyframes shimmerProg{0%,100%{opacity:0}50%{opacity:1}}

/* ── PANEL SECTIONS (intelligence + ops) ── */
.panel-section{
  padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.panel-section:last-child{border-bottom:none;flex:1}
.panel-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.panel-hdr>span:first-child{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--text2);
}
.panel-hdr i{color:var(--primary-light);font-size:11px}
.live-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);
  color:var(--green-light);border-radius:100px;padding:3px 9px;
  font-size:10px;font-weight:700;letter-spacing:.3px;
}
.live-badge i{font-size:7px;animation:pulse-dot 1.5s ease infinite}
@keyframes pulse-dot{0%,100%{opacity:.4}50%{opacity:1}}

/* ── INTEL CARDS ── */
.intel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px}
.intel-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 12px;display:flex;flex-direction:column;gap:5px;
  border-left:3px solid transparent;transition:border-color .2s,background .2s;
  position:relative;overflow:hidden;
}
.intel-card:hover{background:var(--bg3)}
.ic-violet{border-left-color:rgba(8,102,255,.6)!important}
.ic-cyan{border-left-color:rgba(6,182,212,.6)!important}
.ic-green{border-left-color:rgba(16,185,129,.6)!important}
.ic-amber{border-left-color:rgba(245,158,11,.6)!important}
.intel-label{display:flex;align-items:center;gap:5px;font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);font-weight:700}
.intel-label i{font-size:9px}
.intel-val{font-size:13px;color:var(--text);font-weight:700;letter-spacing:-.2px}
.intel-neutral{color:#93C5FD}
.intel-good{color:var(--green-light)}

/* ── QUICK STATS GRID ── */
.quick-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.quick-stat-card{
  display:flex;align-items:center;gap:10px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 12px;transition:all .2s;
  border-left:3px solid transparent;
}
.quick-stat-card:hover{background:var(--bg3);transform:translateY(-1px)}
.quick-stat-card i{font-size:16px;flex-shrink:0;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.qs-success i{background:rgba(16,185,129,.12);color:var(--green-light);border-left-color:rgba(16,185,129,.5)}
.qs-speed i{background:rgba(8,102,255,.12);color:var(--primary-light);border-left-color:rgba(8,102,255,.5)}
.qs-pending i{background:rgba(245,158,11,.12);color:#FBBF24;border-left-color:rgba(245,158,11,.5)}
.qs-audience i{background:rgba(179,127,235,.12);color:#B37FEB;border-left-color:rgba(179,127,235,.5)}
.qs-success{border-left-color:rgba(16,185,129,.4)}
.qs-speed{border-left-color:rgba(8,102,255,.4)}
.qs-pending{border-left-color:rgba(245,158,11,.4)}
.qs-audience{border-left-color:rgba(179,127,235,.4)}
.qs-info{flex:1;min-width:0}
.qs-val{font-size:15px;font-weight:800;color:var(--text);font-family:'JetBrains Mono',monospace;letter-spacing:-.5px}
.qs-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-top:2px}

/* ── QUICK ACTIONS GRID ── */
.quick-actions-grid{display:flex;gap:8px;flex-wrap:wrap}
.qa-btn{
  flex:1;min-width:80px;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 12px;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text2);font-size:11px;font-weight:700;
  font-family:inherit;cursor:pointer;transition:all .2s;
}
.qa-btn:hover:not(:disabled){background:var(--primary-dim);color:var(--primary-light);border-color:rgba(8,102,255,.25)}
.qa-btn:disabled{opacity:.4;cursor:not-allowed}
.qa-btn i{font-size:11px}
.qa-btn--danger:hover:not(:disabled){background:rgba(239,68,68,.1);color:#F87171;border-color:rgba(239,68,68,.25)}
.intel-warn{color:#FBBF24}
.intel-bad{color:#F87171}
.intel-advice{
  display:flex;align-items:flex-start;gap:8px;
  font-size:11px;color:var(--text2);
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--radius);padding:9px 11px;line-height:1.6;
}
.intel-advice i{color:var(--amber);font-size:11px;flex-shrink:0;margin-top:1px}

/* ── DELIVERY OPS ── */
.ops-grid{display:flex;flex-direction:column;gap:7px}
.ops-row{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);transition:background .15s}
.ops-row:hover{background:var(--bg3)}
.ops-row-left{display:flex;align-items:center;gap:8px}
.ops-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;animation:pulse-dot 2s ease infinite}
.ops-dot-green{background:var(--green);box-shadow:0 0 6px rgba(16,185,129,.6)}
.ops-dot-violet{background:var(--primary-light);box-shadow:0 0 6px rgba(8,102,255,.6)}
.ops-dot-cyan{background:var(--cyan);box-shadow:0 0 6px rgba(6,182,212,.6)}
.ops-dot-amber{background:var(--amber);box-shadow:0 0 6px rgba(245,158,11,.5)}
.ops-row-label{font-size:11px;color:var(--text2);font-weight:600}
.ops-badge{padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.3px;border:1px solid transparent}
.ops-badge-green{background:rgba(16,185,129,.12);color:var(--green-light);border-color:rgba(16,185,129,.22)}
.ops-badge-violet{background:var(--primary-dim);color:var(--primary-light);border-color:rgba(8,102,255,.22)}
.ops-badge-cyan{background:rgba(6,182,212,.1);color:var(--cyan-light);border-color:rgba(6,182,212,.22)}
.ops-badge-amber{background:rgba(245,158,11,.1);color:#FCD34D;border-color:rgba(245,158,11,.2)}

/* RECIPIENTS PANEL */
.recipients-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg2)}
.recipients-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);display:flex;align-items:center;gap:7px}
.recipients-title i{color:var(--primary-light);font-size:11px}
.recipients-filter{display:flex;gap:4px}
.recipients-filter select,.recipient-count-badge{font-size:10px;padding:4px 9px;border-radius:7px;border:1px solid var(--border2);background:var(--surface2);color:var(--text2);cursor:pointer;font-family:inherit;outline:none}
.recipient-count-badge{font-weight:700;padding:4px 10px;background:var(--primary-dim);color:var(--primary-light);border-color:rgba(8,102,255,.2)}
.recipients-list{flex:1;overflow-y:auto;padding:6px}
.recipients-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 20px;text-align:center}
.recipients-empty i{font-size:24px;color:var(--text3)}
.recipients-empty p{font-size:12px;color:var(--text3);line-height:1.6}
.recipient-row{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--radius);font-size:12px;
  transition:background .15s;border-bottom:1px solid var(--border);
}
.recipient-row:last-child{border-bottom:none}
.recipient-row:hover{background:var(--surface2)}
.recipient-psid{font-family:'JetBrains Mono',monospace;color:var(--text2);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.3px;border:1px solid transparent}
.badge-pending{background:rgba(8,102,255,.1);color:var(--primary-light);border-color:rgba(8,102,255,.15)}
.badge-sent{background:rgba(16,185,129,.1);color:var(--green-light);border-color:rgba(16,185,129,.15)}
.badge-failed{background:rgba(239,68,68,.1);color:#F87171;border-color:rgba(239,68,68,.15)}
.badge-label{background:rgba(6,182,212,.1);color:var(--cyan-light);border-color:rgba(6,182,212,.15)}
.recipient-error{font-size:10px;color:#F87171;text-align:right;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* MODALS */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.overlay.open{display:flex}
.modal{
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-xl);
  padding:32px;max-width:560px;width:90%;box-shadow:0 24px 80px rgba(0,0,0,.7);
  position:relative;max-height:90vh;overflow-y:auto;
}
.modal--upgrade{max-width:1200px;padding:0;overflow:hidden;}
.modal-title{font-size:18px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px;color:var(--text)}
.modal-sub{font-size:13px;color:var(--text2);margin-bottom:24px;line-height:1.6}
.modal-close{position:absolute;top:16px;right:16px;background:var(--surface);border:1px solid var(--border2);color:var(--text2);cursor:pointer;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s}
.modal-close:hover{background:var(--surface2);color:var(--text)}
.modal-plans{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:0;padding:0 20px 20px}
/* Modal promo strip */
.modal-promo-strip{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(90deg,rgba(239,68,68,.12),rgba(251,146,60,.12));
  border:1px solid rgba(239,68,68,.3);
  border-radius:8px;padding:6px 14px;
  font-size:12px;color:rgba(255,255,255,.85);
  margin-top:8px;
  animation:promo-pulse 3s ease-in-out infinite;
}
.modal-promo-strip strong{color:#fb923c}

/* Modal 50% OFF badge */
.modal-off-badge{
  display:inline-block;
  font-size:8.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,#dc2626,#ef4444);
  border-radius:100px;padding:2px 8px;
  margin-bottom:3px;width:fit-content;
  box-shadow:0 2px 8px rgba(239,68,68,.3);
}
.modal-off-badge--gold{background:linear-gradient(135deg,#92400e,#d97706)}

/* Modal crossed original price */
.modal-original-price{
  font-size:11px;color:rgba(255,255,255,.3);
  margin-bottom:1px;
}
.modal-original-price s{color:rgba(255,255,255,.3)}
.modal-original-price--gold s{color:rgba(251,191,36,.3)}

.modal-plan{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;
  padding:24px 18px;cursor:default;transition:all .2s;
  display:flex;flex-direction:column;position:relative;min-height:360px;
}
.modal-plan:hover{background:rgba(255,255,255,.025)}
/* Tier accent tops */
.modal-plan--starter{border-top:3px solid #3b82f6}
.modal-plan--bronze{border-top:3px solid #fb923c}
.modal-plan--silver{border-top:3px solid #818cf8}
.modal-plan--gold{border-top:3px solid #fbbf24}
.modal-plan--sapphire{border-top:3px solid #38bdf8}
.modal-plan--platinum{border-top:3px solid #c084fc}
/* Gold featured */
.modal-plan--featured{background:linear-gradient(180deg,rgba(251,191,36,.10),rgba(251,191,36,.03));border-right:1px solid rgba(251,191,36,.2)}
.modal-plan-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-bottom:6px}
.modal-plan-price{font-size:26px;font-weight:900;color:var(--text);letter-spacing:-1px;line-height:1}
.modal-plan-price sub{font-size:12px;font-weight:500;color:var(--text2)}
.modal-plan-desc{font-size:12px;color:var(--text2);margin-top:8px;line-height:1.55}
.modal-security{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--text3);line-height:1.65}
.modal-security i{color:var(--green-light);flex-shrink:0;font-size:14px;margin-top:1px}
.card-tag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;padding:3px 9px;border-radius:6px;background:var(--surface2);border:1px solid var(--border2);color:var(--text2)}

/* TOPBAR USER */
.topbar-main{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
.topbar-status{display:flex;align-items:center;gap:8px}
.topbar-user-btn{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:var(--radius);cursor:pointer;background:var(--surface);border:1px solid var(--border);transition:all .2s}
.topbar-user-btn:hover{background:var(--surface2);border-color:var(--border2)}
.topbar-avatar{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.topbar-user-name{font-size:12px;font-weight:600;color:var(--text2);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* FETCH PROGRESS */
.fetch-progress{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:10px;background:var(--primary-dim);border:1px solid rgba(8,102,255,.15);border-radius:var(--radius);animation:fetch-pulse 1.5s ease-in-out infinite}
.fetch-progress i{color:var(--primary-light);font-size:14px}
.fetch-progress-text{flex:1;font-size:12px;color:var(--text2)}
.fetch-progress-count{font-size:14px;font-weight:700;color:var(--primary-light);font-family:'JetBrains Mono',monospace}
@keyframes fetch-pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(8,102,255,.2);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(8,102,255,.35)}

/* LIGHT MODE */
body.light{
  --bg:#EFF4FF;--bg2:#E5EDFF;--bg3:#D8E6FF;
  --surface:#FFFFFF;--surface2:#F3F7FF;--surface3:#EAF1FF;
  --border:rgba(8,102,255,.1);--border2:rgba(8,102,255,.15);--border3:rgba(8,102,255,.22);
  --text:#061640;--text2:#3A5080;--text3:#7090B8;
  --shadow-sm:0 1px 4px rgba(8,102,255,.08);--shadow:0 4px 20px rgba(8,102,255,.12);
}
body.light ::-webkit-scrollbar-thumb{background:rgba(8,102,255,.15)}
body.light ::-webkit-scrollbar-thumb:hover{background:rgba(8,102,255,.25)}
body.light .hero{background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(8,102,255,.10) 0%,transparent 60%),#EFF4FF}
body.light .hero-h1{background:linear-gradient(160deg,#061640 0%,#0044CC 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
body.light .nav{background:rgba(240,244,255,.88)}
body.light .nav.scrolled{background:rgba(240,244,255,.96)}

/* YOUTUBE PLAYER */
.yt-player-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.yt-player-overlay.open{display:flex}
.yt-player-wrap{position:relative;width:min(860px,90vw);aspect-ratio:16/9;border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 32px 100px rgba(0,0,0,.9);border:1px solid var(--border2)}
.yt-close-btn{position:absolute;top:-44px;right:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;padding:8px 16px;border-radius:var(--radius);font-size:13px;font-weight:600;transition:all .2s;font-family:inherit}
.yt-close-btn:hover{background:rgba(255,255,255,.18)}
#ytIframe{width:100%;height:100%;border:none;display:block}

/* RESPONSIVE */
@media(max-width:1380px){.compose-col,.compose{flex:0 0 320px}.broadcast-col{flex:0 0 270px}.sidebar{width:190px;min-width:190px}}
@media(max-width:1180px){.broadcast-col{flex:0 0 240px}}
@media(max-width:1080px){.broadcast-col{display:none}}
@media(max-width:960px){.compose-col,.compose{flex:1}.stats-panel{display:none}}
@media(max-width:1024px){.pricing-grid{grid-template-columns:1fr 1fr 1fr}.hero-metrics{grid-template-columns:repeat(2,1fr)}.bigfeat-inner{grid-template-columns:1fr;gap:48px}.bigfeat-visual{max-width:480px;margin:0 auto;width:100%}}
@media(max-width:900px){.features-grid,.steps-grid{grid-template-columns:repeat(2,1fr)}.testimonials-grid{grid-template-columns:1fr 1fr}}
@media(max-width:1100px){.modal-plans{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:768px){.pricing-grid,.features-grid,.steps-grid,.testimonials-grid{grid-template-columns:1fr}.modal-plans{grid-template-columns:repeat(2,1fr)!important}.footer-grid{grid-template-columns:1fr 1fr}.stats-strip{flex-wrap:wrap}.stat-strip-item{border-right:none;border-bottom:1px solid var(--border);width:50%}.bigfeat-section{padding:64px 20px}.testimonial-meta{gap:16px;padding:16px 20px}.tm-divider{display:none}.cta-box{padding:36px 24px}.trust-strip{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding:0 20px}.trust-item{flex-shrink:0}.steps-grid::after{display:none}}
@media(max-width:640px){.nav{padding:0 20px}.nav-links{display:none}.hero{padding:70px 20px 56px}.hero-h1{font-size:38px;letter-spacing:-1.5px}.features-wrap,#how-it-works,#pricing,.testimonials-wrap,#faq,.cta-section,#testimonials{padding-left:20px;padding-right:20px}.hero-metrics{grid-template-columns:repeat(2,1fr)}.bigfeat-visual{grid-template-columns:1fr 1fr}.cta-h2{font-size:28px;letter-spacing:-1px}}
@media(max-width:420px){.intel-grid{grid-template-columns:1fr}.hero-metrics{grid-template-columns:1fr 1fr}}

/* MOBILE MENU */
.nav-hamburger{display:none;background:none;border:1px solid var(--border2);color:var(--text2);cursor:pointer;padding:7px 10px;border-radius:8px;font-size:15px;transition:all .2s}
.nav-hamburger:hover{background:var(--surface);color:var(--text)}
@media(max-width:640px){.nav-hamburger{display:flex;align-items:center}.nav-cta{display:none}}
.mobile-menu{display:none;position:fixed;inset:0;z-index:9999;background:rgba(6,9,15,.97);backdrop-filter:blur(28px);flex-direction:column;align-items:center;justify-content:center;gap:10px}
.mobile-menu.open{display:flex}
.mobile-menu-close{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.06);border:1px solid var(--border2);color:var(--text2);font-size:18px;cursor:pointer;padding:8px 12px;border-radius:8px;transition:all .2s}
.mobile-menu-close:hover{color:var(--text);background:rgba(255,255,255,.1)}
.mobile-menu-link{color:var(--text2);font-size:20px;font-weight:600;text-decoration:none;padding:14px 48px;border-radius:var(--radius-lg);width:100%;max-width:320px;text-align:center;transition:all .2s;border:1px solid transparent}
.mobile-menu-link:hover{color:var(--text);background:var(--surface);border-color:var(--border)}
.mobile-menu-cta{background:linear-gradient(135deg,var(--primary),#0044CC);color:#fff;border:none;padding:16px 48px;border-radius:var(--radius-lg);font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;width:100%;max-width:320px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;box-shadow:0 4px 20px var(--primary-glow)}
.mobile-menu-cta:hover{background:linear-gradient(135deg,#0078FF,var(--primary));transform:translateY(-1px)}

/* AVATAR COLORS */
.avatar-1{background:linear-gradient(135deg,var(--primary),var(--cyan))}
.avatar-2{background:linear-gradient(135deg,var(--green),#14B8A6)}
.avatar-3{background:linear-gradient(135deg,var(--amber),#EF4444)}
.avatar-4{background:linear-gradient(135deg,var(--cyan),var(--primary))}

/* ─── AURORA ORBS ─── */
.hero-aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.aurora-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.18;animation:aurora-float 8s ease-in-out infinite}
.aurora-orb-1{width:600px;height:600px;background:#0866FF;top:-120px;left:-100px;animation-delay:0s}
.aurora-orb-2{width:450px;height:450px;background:#B37FEB;top:40px;right:-120px;animation-delay:-3s}
.aurora-orb-3{width:350px;height:350px;background:#0044CC;bottom:-80px;left:30%;animation-delay:-5s}
@keyframes aurora-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.08)}}

/* ─── ACTIVITY TICKER ─── */
.activity-ticker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.18);border-radius:999px;font-size:12px;color:var(--cyan-light);font-weight:600;margin-bottom:22px;animation:ticker-in .6s ease .2s both}
@keyframes ticker-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.ticker-pulse{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex-shrink:0;animation:ticker-pulse 1.5s ease infinite}
@keyframes ticker-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}

/* ─── HERO AVATARS ─── */
.avatars{display:flex}
.avatars .avatar{width:28px;height:28px;border-radius:50%;border:2px solid var(--bg);margin-left:-8px;object-fit:cover;flex-shrink:0}
.avatars .avatar:first-child{margin-left:0}
.hero-social-proof{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text2);font-weight:500}

/* ─── COUNTER ─── */
.counter-num{font-variant-numeric:tabular-nums}

/* ─── STATS PROOF SECTION ─── */
.stats-proof-section{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats-proof-inner{max-width:1160px;margin:0 auto;padding:48px 44px}
.stats-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.stats-proof-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 20px;border-right:1px solid var(--border)}
.stats-proof-item:last-child{border-right:none}
.proof-icon{width:44px;height:44px;border-radius:12px;background:var(--primary-dim);border:1px solid rgba(8,102,255,.2);display:flex;align-items:center;justify-content:center;color:var(--primary-light);margin-bottom:12px}
.proof-num{font-size:36px;font-weight:900;letter-spacing:-1px;background:linear-gradient(135deg,var(--primary-light),var(--cyan-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.proof-label{font-size:13px;font-weight:700;color:var(--text);margin-top:6px}
.proof-sub{font-size:11px;color:var(--text3);margin-top:3px}
@media(max-width:768px){.stats-proof-grid{grid-template-columns:1fr 1fr}.stats-proof-item{border-right:none;border-bottom:1px solid var(--border)}.stats-proof-inner{padding:32px 20px}}

/* ─── HERO PREVIEW MISSING CLASSES ─── */
.preview-dots{display:flex;gap:5px;align-items:center}
.preview-dot{width:9px;height:9px;border-radius:50%}
.preview-dot-red{background:#ef4444}
.preview-dot-yellow{background:#f59e0b}
.preview-dot-green{background:#10b981}
.preview-url{flex:1;text-align:center;font-size:9px;color:var(--text3);background:var(--bg3);border-radius:4px;padding:2px 8px;margin:0 8px;font-family:'JetBrains Mono',monospace}
.preview-sidebar{width:90px;background:var(--bg2);border-right:1px solid var(--border);padding:8px 6px;display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.preview-page-item{display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:6px;cursor:default}
.preview-page-item.active{background:var(--primary-dim)}
.preview-page-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-blue{background:var(--blue)}
.dot-green{background:var(--green)}
.dot-purple{background:var(--primary)}
.preview-page-label{font-size:8px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-compose{flex:1;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.preview-compose-hdr{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.preview-textarea{background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:7px 8px;display:flex;flex-direction:column;gap:5px}
.preview-textarea-line{height:5px;background:var(--surface3);border-radius:3px}
.preview-textarea-line:last-child{width:60%}
.preview-btn-row{display:flex;gap:6px}
.preview-btn-start{height:20px;flex:1;background:linear-gradient(135deg,#059669,#10b981);border-radius:5px}
.preview-btn-stop{height:20px;width:40px;background:rgba(239,68,68,.25);border-radius:5px}
.preview-stats{width:80px;padding:8px;background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.preview-stats-hdr{font-size:8px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}
.preview-stat-row{display:flex;justify-content:space-between;align-items:center}
.preview-stat-label{font-size:8px;color:var(--text3)}
.preview-stat-val{font-size:9px;font-weight:800;color:var(--text);font-family:'JetBrains Mono',monospace}
.preview-stat-val.red,.preview-stat-val.red,.red{color:var(--red)}
.preview-progress{height:3px;background:var(--surface3);border-radius:2px}
.preview-progress-bar{height:100%;width:75%;background:linear-gradient(90deg,var(--primary),var(--cyan));border-radius:2px;animation:preview-bar 2s ease-in-out infinite alternate}
@keyframes preview-bar{from{width:60%}to{width:90%}}
.preview-badge-row{display:flex;gap:4px;flex-wrap:wrap}
.preview-badge{font-size:7px;font-weight:700;padding:2px 5px;border-radius:4px}
.preview-badge.sent{background:rgba(16,185,129,.15);color:var(--green)}
.preview-badge.pending{background:var(--primary-dim);color:var(--primary-light)}

/* ─── PRICING TOGGLE ─── */
.pricing-toggle-wrap{display:flex;align-items:center;justify-content:center;gap:12px;margin:24px 0 36px}
.toggle-label{font-size:13px;font-weight:600;color:var(--text3);transition:color .2s;cursor:pointer}
.toggle-label.active{color:var(--text)}
.pricing-toggle-btn{position:relative;width:44px;height:24px;cursor:pointer;background:none;border:none;padding:0;flex-shrink:0}
.pricing-toggle-track{position:absolute;inset:0;background:var(--surface2);border:1px solid var(--border2);border-radius:12px;transition:all .3s}
.pricing-toggle-btn.active .pricing-toggle-track{background:var(--primary-dim);border-color:rgba(8,102,255,.3)}
.pricing-toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--text3);border-radius:50%;transition:transform .3s,background .3s;z-index:1}
.pricing-toggle-btn.active .pricing-toggle-thumb{transform:translateX(20px);background:var(--primary-light)}
.annual-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);border-radius:999px;font-size:11px;font-weight:700;color:var(--green-light)}
.price-amount-annual{display:none}
.price-billing-annual{display:none}
.price-billing-monthly,.price-amount-monthly{display:block}
body.annual .price-amount-monthly{display:none}
body.annual .price-amount-annual{display:block}
body.annual .price-billing-monthly{display:none}
body.annual .price-billing-annual{display:block}
.price-popular{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--cyan-light);background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.2);border-radius:999px;padding:3px 10px;display:inline-block;margin-bottom:8px}
.price-billing{font-size:12px;color:var(--text3);margin-top:2px}
.dim{color:var(--text3)!important;text-decoration:none}
.dim i{color:rgba(239,68,68,.4)!important}

/* ─── CTA SECTION ─── */
.cta-inner{max-width:640px;margin:0 auto;text-align:center}
.cta-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:var(--primary-dim);border:1px solid rgba(8,102,255,.2);border-radius:999px;font-size:12px;font-weight:700;color:var(--primary-light);margin-bottom:20px;letter-spacing:.2px}
.btn-cta-primary{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#1877f2,#0d5cbf);color:#fff;font-size:15px;font-weight:700;padding:16px 36px;border-radius:var(--radius-lg);cursor:pointer;border:none;font-family:inherit;transition:all .2s;letter-spacing:-.1px;box-shadow:0 4px 24px rgba(24,119,242,.4)}
.btn-cta-primary:hover{background:linear-gradient(135deg,#2085f4,#1877f2);transform:translateY(-2px);box-shadow:0 8px 32px rgba(24,119,242,.5)}
.cta-note{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:20px;font-size:12px;color:var(--text3)}
.cta-note-item{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.cta-note-item i{color:var(--green);font-size:10px}

/* ─── FOOTER ENHANCED ─── */
.footer-enhanced{background:var(--bg2);border-top:1px solid var(--border);padding:56px 44px 32px}
.footer-bottom-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text3);font-weight:600}
.footer-status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(16,185,129,.6);animation:status-pulse 2s ease infinite}
@keyframes status-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.footer-bottom-links{display:flex;gap:16px}
.footer-bottom-links a{font-size:12px;color:var(--text3);text-decoration:none;font-weight:500;transition:color .15s}
.footer-bottom-links a:hover{color:var(--text2)}

/* ─── DVW (Video Widget) ─── */
.dvw{position:fixed;bottom:24px;left:24px;width:460px;border-radius:12px;overflow:visible;box-shadow:0 8px 40px rgba(0,0,0,.7);z-index:9000;animation:dvw-in .4s cubic-bezier(.16,1,.3,1) .8s both}
@keyframes dvw-in{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.dvw-iframe-wrap{position:relative;width:100%;padding-top:56.25%;background:#000 center/cover no-repeat;border-radius:12px;overflow:hidden}
.dvw-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,0,0,.85);border:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;cursor:pointer;pointer-events:none;z-index:5;transition:opacity .3s}
.dvw-loaded .dvw-play-btn{opacity:0}
.dvw-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;display:block}
.dvw-close-btn{position:absolute;top:-10px;right:-10px;z-index:10;width:26px;height:26px;border-radius:50%;background:#111;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.8);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.dvw-close-btn:hover{background:#ef4444;border-color:#ef4444;color:#fff}
@media(max-width:400px){.dvw{width:calc(100vw - 32px);left:16px;bottom:16px}}

/* ─── RECIPIENTS TOGGLE BUTTON (dashboard compose header) ─── */
.recipients-toggle-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;background:var(--surface2);border:1px solid var(--border2);color:var(--text2);border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s}
.recipients-toggle-btn:hover{background:var(--primary-dim);border-color:rgba(8,102,255,.25);color:var(--primary-light)}

/* ─── PROGRESS BAR (dashboard stats) ─── */
/* → styles live in the upgraded .progress-bar-area block above */

/* ─── RECIPIENTS PANEL ─── */
.recipients-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299;display:none;backdrop-filter:blur(4px)}
.recipients-backdrop.active{display:block}
.recipients-panel{position:fixed;top:0;right:-340px;width:340px;height:100vh;background:var(--surface);border-left:1px solid var(--border);z-index:300;transition:right .3s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;overflow:hidden}
.recipients-panel.panel-open{right:0}
.recipients-wrap{display:flex;flex-direction:column;height:100%;overflow:hidden}
.rec-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--border);flex-shrink:0;gap:8px}
.rec-hdr-l{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.5px}
.rec-hdr-l i{color:var(--primary-light)}
.rec-hdr-r{display:flex;align-items:center;gap:8px;margin-left:auto}
.rec-hdr-r select{background:var(--surface2);border:1px solid var(--border);color:var(--text2);font-size:11px;padding:4px 8px;border-radius:6px;font-family:inherit;outline:none;cursor:pointer}
.rec-hdr-r #recipientCount{font-size:11px;font-weight:700;color:var(--text3);font-family:'JetBrains Mono',monospace;min-width:20px;text-align:center}
.rec-table{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.rec-thead{display:grid;grid-template-columns:1fr 70px 80px;padding:8px 16px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0}
.table-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px 16px;text-align:center;color:var(--text3);font-size:12px;line-height:1.65}
.table-empty-icon{font-size:32px;opacity:.5}

/* ─── NETWORK BANNER ─── */
.network-banner{padding:10px 20px;background:rgba(245,158,11,.08);border-bottom:1px solid rgba(245,158,11,.2);font-size:12px;color:var(--amber);font-weight:600;text-align:center;display:block}
.network-banner[hidden]{display:none}

/* (ops-card replaced by panel-section + ops-grid system above) */

/* ─── QUOTA PLAN GROUP ─── */
.quota-plan-group--plan{display:flex;flex-direction:column;align-items:center;gap:2px}
.quota-plan-group--value{display:flex;flex-direction:column;align-items:center;gap:2px}

/* ─── UPGRADE MODAL ─── */
.modal-head{text-align:center;padding:28px 28px 20px;border-bottom:1px solid var(--border)}
.modal-head-icon{font-size:32px;margin-bottom:8px}
.modal-head h2{font-size:20px;font-weight:800;color:var(--text);margin-bottom:6px}
.modal-head p{font-size:13px;color:var(--text2);line-height:1.5;margin:0}
.modal-security{padding:10px 28px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text3);background:var(--bg);border-bottom:1px solid var(--border)}
.modal-security i{font-size:11px}
.card-tag{display:inline-flex;align-items:center;font-size:9px;font-weight:700;padding:2px 7px;border-radius:4px;background:var(--surface2);border:1px solid var(--border2);color:var(--text2);letter-spacing:.3px}
.modal-cta{width:100%;padding:10px;border-radius:var(--radius);border:none;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:auto}
.modal-cta--starter{background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;box-shadow:0 4px 14px rgba(59,130,246,.3)}
.modal-cta--starter:hover{box-shadow:0 6px 22px rgba(59,130,246,.5);transform:translateY(-1px)}
.modal-cta--bronze{background:linear-gradient(135deg,#c2410c,#fb923c);color:#fff;box-shadow:0 4px 14px rgba(251,146,60,.3)}
.modal-cta--bronze:hover{box-shadow:0 6px 22px rgba(251,146,60,.5);transform:translateY(-1px)}
.modal-cta--silver{background:linear-gradient(135deg,#4338ca,#818cf8);color:#fff;box-shadow:0 4px 14px rgba(129,140,248,.3)}
.modal-cta--silver:hover{box-shadow:0 6px 22px rgba(129,140,248,.5);transform:translateY(-1px)}
.modal-cta--gold{background:linear-gradient(135deg,#b45309,#fbbf24);color:#0a0600;font-weight:800;box-shadow:0 4px 14px rgba(251,191,36,.35)}
.modal-cta--gold:hover{box-shadow:0 6px 22px rgba(251,191,36,.55);transform:translateY(-1px)}
.modal-cta--sapphire{background:linear-gradient(135deg,#0369a1,#38bdf8);color:#fff;box-shadow:0 4px 14px rgba(56,189,248,.3)}
.modal-cta--sapphire:hover{box-shadow:0 6px 22px rgba(56,189,248,.5);transform:translateY(-1px)}
.modal-cta--platinum{background:linear-gradient(135deg,#6d28d9,#c084fc);color:#fff;box-shadow:0 4px 14px rgba(192,132,252,.3)}
.modal-cta--platinum:hover{box-shadow:0 6px 22px rgba(192,132,252,.5);transform:translateY(-1px)}
.modal-dismiss{padding:14px 20px;text-align:center;border-top:1px solid var(--border);background:var(--bg)}
.modal-dismiss button{background:none;border:none;color:var(--text3);font-size:12px;cursor:pointer;font-family:inherit;transition:color .15s;text-decoration:underline;text-underline-offset:2px}
.modal-dismiss button:hover{color:var(--text2)}
.modal-plan-label{font-size:16px;font-weight:800;color:var(--text);margin-bottom:4px;letter-spacing:-.3px}
.modal-plan-label--starter{color:#60a5fa}
.modal-plan-label--bronze{color:#fb923c}
.modal-plan-label--silver{color:#818cf8}
.modal-plan-label--gold{color:#fbbf24}
.modal-plan-label--sapphire{color:#38bdf8}
.modal-plan-label--platinum{color:#c084fc}
.modal-plan-period{font-size:11px;color:var(--text3);margin-bottom:12px;line-height:1.4}
.modal-plan-feats{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:7px;flex:1}
.modal-plan-feats li{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text2);line-height:1.4}
.modal-plan-feats li i{color:var(--green);font-size:9px;flex-shrink:0;margin-top:3px}
.modal-plan-note{font-size:10px;color:var(--text3);text-align:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.modal-plan-price{font-size:34px;font-weight:900;letter-spacing:-1.5px;line-height:1;margin-bottom:2px}
.modal-plan-price sub{font-size:12px;font-weight:500;color:var(--text2);letter-spacing:0}
.modal-plan-price--yearly{color:var(--cyan-light)}
.modal-plan-price--gold{background:linear-gradient(135deg,#fbbf24,#fde68a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.modal-plan .price-popular{color:#fff;background:linear-gradient(135deg,var(--primary),#0044CC);border:none;margin-bottom:10px}

/* ─── LEGAL MODALS ─── */
.legal-modal{max-width:560px}
.legal-close{background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:color .15s;line-height:1}
.legal-close:hover{color:var(--text);background:var(--surface2)}
.legal-body{display:flex;flex-direction:column;gap:14px}
.legal-body p{font-size:13px;color:var(--text2);line-height:1.75}
.legal-body strong{color:var(--text)}
.legal-date{font-size:11px;color:var(--text3);margin-top:4px}

/* ─── IMG UPLOAD AREA ─── */
.img-upload-area{display:flex;flex-direction:column;gap:10px}

/* ─── FAQ OUTER/INNER ─── */
.faq-outer{padding:72px 0}
.faq-inner{max-width:780px;margin:0 auto;padding:0 44px}
.faq-grid{display:flex;flex-direction:column;gap:10px;margin-top:48px}
.faq-q-icon{width:22px;height:22px;border-radius:6px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:10px;flex-shrink:0;transition:all .25s}
.faq-item.open .faq-q-icon{background:var(--primary-dim);border-color:rgba(8,102,255,.25);color:var(--primary-light)}
@media(max-width:640px){.faq-inner{padding:0 20px}}

/* ─── FOOTER SOCIAL ICONS ─── */
.footer-social-icon{width:32px;height:32px;border-radius:9px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:13px;cursor:pointer;transition:all .2s}
.footer-social-icon:hover{border-color:var(--border3);color:var(--text)}

/* ─── RECIPIENTS TABLE ROW ─── */
.table-row{display:grid;grid-template-columns:1fr 70px 80px;padding:8px 16px;border-bottom:1px solid var(--border);align-items:center;font-size:12px;color:var(--text2);transition:background .15s}
.table-row:last-child{border-bottom:none}
.table-row:hover{background:rgba(255,255,255,.02)}

/* ─── MONO UTILITY ─── */
.mono{font-family:'JetBrains Mono',monospace}

/* ─── RECIPIENT STATUS CARDS ─── */
.rec-status-card{padding:10px 14px;border-radius:var(--radius);font-size:12px;margin:8px 16px;display:flex;align-items:center;gap:8px;line-height:1.5}
.rec-status-card.rs-success{background:rgba(16,185,129,.08);color:var(--green-light);border:1px solid rgba(16,185,129,.2)}
.rec-status-card.rs-error{background:rgba(239,68,68,.08);color:#F87171;border:1px solid rgba(239,68,68,.2)}
.rec-status-card.rs-warning{background:rgba(245,158,11,.08);color:var(--amber);border:1px solid rgba(245,158,11,.2)}
.rec-status-card.rs-info{background:var(--primary-dim);color:var(--primary-light);border:1px solid rgba(8,102,255,.2)}

/* ─── ANNOUNCEMENT MARQUEE ─── */
.announcement-run{display:inline-block;white-space:nowrap;padding-right:80px}
.announcement-text-track.is-marquee{overflow:visible;text-overflow:unset;animation:announce-scroll 12s linear infinite}
@keyframes announce-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}