/* ============================================================
   ShortsCraft — PREMIUM THEME LAYER  (loads AFTER styles.css)
   "Midnight Studio" — refined, expensive, cohesive.
   Overrides the legacy design tokens + polishes every component.
   ============================================================ */

/* ── Premium tokens (win the cascade) ─────────────────────── */
:root{
  --bg:#07070c;
  --bg-2:#05050a;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.08);
  --surface-3:rgba(255,255,255,.11);
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);
  --text:#f6f7fb;
  --text-dim:#a7a9bd;
  --muted:#6f7189;

  /* premium electric-violet accent system */
  --accent:#8b7bff;
  --accent-ink:#ffffff;
  --accent-2:#5ed0ff;
  --accent-3:#b591ff;
  --accent-4:#8b7bff;
  --iris:#7c6cff;
  --violet:#b18cff;
  --cyan:#5ed0ff;

  --grad-brand:linear-gradient(135deg,#7c6cff 0%,#b18cff 52%,#5ed0ff 120%);
  --grad-cool:linear-gradient(135deg,#8b7bff 0%,#5ed0ff 100%);
  --grad-aurora:linear-gradient(120deg,#7c6cff,#b18cff 45%,#5ed0ff);
  --grad-text:linear-gradient(120deg,#c9c2ff 0%,#8b7bff 45%,#5ed0ff 100%);

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-2xl:32px; --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 14px 38px rgba(3,3,10,.55);
  --shadow-lg:0 44px 100px rgba(2,2,8,.7);
  --glow-accent:0 0 60px rgba(124,108,255,.4);
  --glow-cool:0 0 50px rgba(94,208,255,.3);

  --font-display:"Fraunces","Space Grotesk","Inter",system-ui,serif;
  --font-body:"Inter","Helvetica Neue",system-ui,sans-serif;
  --font-ui:"Space Grotesk","Inter",system-ui,sans-serif;
  --maxw:1180px;
}

/* ── Base ─────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:#07070c;
  background-image:
    radial-gradient(900px 520px at 15% -4%,rgba(124,108,255,.20),transparent 60%),
    radial-gradient(760px 460px at 92% 8%,rgba(94,208,255,.14),transparent 60%),
    radial-gradient(700px 700px at 70% 100%,rgba(177,140,255,.10),transparent 60%),
    linear-gradient(180deg,#07070c 0%,#06060b 100%);
  background-attachment:fixed;
  font-size:16px; line-height:1.62;
  letter-spacing:.002em;
}
::selection{background:rgba(139,123,255,.35);color:#fff}
p{color:var(--text-dim)}

/* Premium type polish */
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-0.03em;line-height:1.1}
h1,.display{font-weight:600}
.display{font-size:clamp(2.6rem,6vw,4.9rem);letter-spacing:-0.04em;line-height:1.02}
h2{font-size:clamp(1.9rem,3.8vw,3rem);font-weight:600}
.lead{font-size:clamp(1.05rem,1.4vw,1.22rem);color:var(--text-dim);line-height:1.6}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* thin premium scrollbar */
*{scrollbar-width:thin;scrollbar-color:rgba(139,123,255,.4) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(139,123,255,.35);border-radius:999px;border:2px solid transparent;background-clip:content-box}
.scroll-bar{background:var(--grad-brand);height:3px;box-shadow:0 0 12px rgba(124,108,255,.6)}

/* ── Aurora — subtle premium glow blobs (re-enabled) ──────── */
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora-blob{display:block;position:absolute;border-radius:50%;filter:blur(120px);opacity:.4;will-change:transform}
.aurora-1{width:620px;height:620px;background:#7c6cff;top:-220px;left:-160px;animation:pFloatA 24s ease-in-out infinite}
.aurora-2{width:540px;height:540px;background:#5ed0ff;top:26%;right:-200px;opacity:.3;animation:pFloatB 28s ease-in-out infinite}
.aurora-3{width:500px;height:500px;background:#b18cff;bottom:-180px;left:32%;opacity:.26;animation:pFloatC 32s ease-in-out infinite}
.aurora-grid{display:block;position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at 50% 20%,#000 25%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 25%,transparent 72%)}
@keyframes pFloatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,50px) scale(1.12)}}
@keyframes pFloatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,70px) scale(1.1)}}
@keyframes pFloatC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-60px) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.aurora-blob{animation:none}}

/* ── Logo ─────────────────────────────────────────────────── */
.logo{font-family:var(--font-ui);letter-spacing:-0.02em;font-weight:700}
.logo-mark{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--grad-brand) !important;
  box-shadow:0 8px 24px rgba(124,108,255,.5),inset 0 1px 0 rgba(255,255,255,.45);
  position:relative;overflow:visible;
}
.logo-mark::after{content:"";position:absolute;inset:-3px;border-radius:14px;background:var(--grad-brand);filter:blur(13px);opacity:.55;z-index:-1}
.logo-bolt{display:block;font-size:1.05rem;line-height:1;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.logo-text span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary,.btn-ghost{font-family:var(--font-ui);font-weight:600;letter-spacing:.005em;border-radius:var(--r-pill);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s,border-color .2s}
.btn-primary{
  background:var(--grad-brand);color:#fff;
  box-shadow:0 10px 30px rgba(124,108,255,.4),inset 0 1px 0 rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.14);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(124,108,255,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-primary::before{background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 55%);opacity:.7}
.btn-ghost{background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--text);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(139,123,255,.5);transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.4)}

/* ── Nav ──────────────────────────────────────────────────── */
.nav{background:rgba(8,8,14,.62);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-bottom:1px solid var(--line)}
.nav-links a{color:var(--text-dim);font-family:var(--font-ui);font-weight:500;border-radius:var(--r-pill)}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.06)}

/* ── Pills / kicker / badges ──────────────────────────────── */
.pill{background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--text-dim);border-radius:var(--r-pill);backdrop-filter:blur(6px)}
.pill b{color:var(--text)}
.pill-glow{box-shadow:0 0 0 1px rgba(139,123,255,.28),0 8px 30px rgba(124,108,255,.22)}
.pill-dot{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.kicker{display:inline-block;font-family:var(--font-ui);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.74rem;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head p{color:var(--text-dim)}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{padding:96px 24px 72px}
.hero-grid{gap:64px}
.hero-trust{color:var(--muted)}
.hero-stats{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-md);backdrop-filter:blur(8px)}
.hero-stats b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--font-display)}

/* Hero mock window */
.mock-glow{background:radial-gradient(circle at 50% 40%,rgba(124,108,255,.34),transparent 62%)}
.mock-window{
  background:linear-gradient(150deg,rgba(24,22,44,.94),rgba(12,11,24,.9));
  border:1px solid var(--line-2);border-radius:var(--r-2xl);
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.08);
}
.mock-tabs .active{color:var(--accent)}
.mock-card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-lg)}
.mock-input button,.mock-card .mock-meter span{background:var(--grad-brand)}
.mock-chip{background:rgba(20,18,38,.85);border:1px solid var(--line-2);backdrop-filter:blur(8px);box-shadow:var(--shadow-md)}

/* ── Section rhythm ───────────────────────────────────────── */
.bento,.workflow,.pricing,.faq,.strip,.final-cta{max-width:var(--maxw);margin:0 auto;padding:84px 24px}
.sec-head{margin-bottom:44px}

/* Proof strip */
.strip-inner{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-md);backdrop-filter:blur(8px)}
.strip-inner>div b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--font-display)}

/* ── Cards (bento / generic) ──────────────────────────────── */
.bento-card,.price-card,.card,.faq-list details,.flow li{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s;
  position:relative;
}
.bento-card:hover,.price-card:hover,.flow li:hover{transform:translateY(-4px);border-color:rgba(139,123,255,.4);box-shadow:0 26px 60px rgba(2,2,10,.55),var(--glow-accent)}
.bento-icon{background:var(--grad-brand);-webkit-background-clip:initial;border-radius:14px;width:52px;height:52px;display:grid;place-items:center;font-size:1.5rem;
  box-shadow:0 10px 26px rgba(124,108,255,.4),inset 0 1px 0 rgba(255,255,255,.4);color:#fff}
.bento-card h3,.price-card h3{font-family:var(--font-display)}
.feature-hero{background:linear-gradient(160deg,rgba(124,108,255,.16),rgba(94,208,255,.06) 60%,rgba(255,255,255,.02))}
.bento-demo{background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:var(--r-lg)}
.bento-demo .demo-line b{color:var(--accent)}

/* Workflow numbers */
.flow-num{font-family:var(--font-display);background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Pricing ──────────────────────────────────────────────── */
.price-card.pro{
  background:linear-gradient(165deg,rgba(124,108,255,.2),rgba(94,208,255,.07) 70%,rgba(255,255,255,.03));
  border-color:rgba(139,123,255,.5);
  box-shadow:0 30px 70px rgba(2,2,10,.55),0 0 60px rgba(124,108,255,.3);
}
.price-tag{color:var(--text-dim);font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}
.price-card h3{font-family:var(--font-display);font-size:2.4rem}
.badge-pop{background:var(--grad-brand);color:#fff;box-shadow:0 8px 22px rgba(124,108,255,.5);font-family:var(--font-ui);font-weight:600}
.price-card ul li{color:var(--text-dim)}
.price-card ul li::marker{color:var(--accent)}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-list details{padding:0}
.faq-list summary{font-family:var(--font-ui);font-weight:600;color:var(--text)}
.faq-list details[open]{border-color:rgba(139,123,255,.4)}

/* ── Final CTA ────────────────────────────────────────────── */
.final-cta .cta-card{
  background:linear-gradient(150deg,rgba(124,108,255,.22),rgba(94,208,255,.1) 60%,rgba(255,255,255,.02));
  border:1px solid rgba(139,123,255,.4);border-radius:var(--r-2xl);
  box-shadow:var(--shadow-lg),0 0 80px rgba(124,108,255,.25);
}

/* ── Footer ───────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);background:rgba(6,6,11,.6)}
.footer nav h4{font-family:var(--font-ui);color:var(--text)}
.footer nav a{color:var(--text-dim)}
.footer nav a:hover{color:var(--accent)}
.footer-status i{background:var(--success,#6ee787);box-shadow:0 0 8px var(--success,#6ee787)}

/* ── Studio pages (generator / seo-tools) ─────────────────── */
.studio-bar{background:rgba(8,8,14,.9);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border-bottom:1px solid var(--line)}
.studio-tag{background:rgba(139,123,255,.14);color:var(--accent);border:1px solid rgba(139,123,255,.3)}
.studio-search-wrap{background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:var(--r-pill)}
.studio-search-icon{color:var(--accent)}
.credits-pill{background:rgba(139,123,255,.12);border:1px solid rgba(139,123,255,.28);color:var(--accent)}
.credits-pill b{color:var(--text)}
.avatar{background:var(--grad-brand);color:#fff}
.profile-pop{background:linear-gradient(180deg,rgba(20,18,38,.98),rgba(12,11,24,.98));border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.pp-item:hover{background:rgba(139,123,255,.12)}
.pp-item.upgrade{background:var(--grad-brand);color:#fff}
.sidebar{background:rgba(8,8,14,.96);border-right:1px solid var(--line)}

/* Forms / inputs / textareas */
input,textarea,select{font-family:var(--font-body)}
.field,.input,textarea,input[type="text"],input[type="search"],input[type="email"]{
  background:rgba(255,255,255,.045);border:1px solid var(--line-2);border-radius:var(--r-md);color:var(--text)
}
textarea:focus,input:focus,.field:focus-within{border-color:rgba(139,123,255,.6);box-shadow:0 0 0 3px rgba(124,108,255,.2);outline:none}

/* Generic chips/pills used across studio */
.chip,.tag,.mock-pills i{background:rgba(139,123,255,.12);border:1px solid rgba(139,123,255,.25);color:var(--accent-3);border-radius:var(--r-pill)}


/* ============================================================
   THEME UNIFY PATCH — enforce "Midnight Studio" (purple/cyan)
   on EVERY page. Neutralizes legacy lime (#d7ff3f) + orange
   (#ff7a45 / #ff4f78) accents that leak through higher-specificity
   or !important rules in styles.css. Loads last => wins the cascade.
   ============================================================ */

/* 1. Page background — kill lime+orange glow, restore brand purple/cyan.
      styles.css sets lime/orange bg via body.page-* (0,1,1); use html body[class]
      (0,1,2) so we win on EVERY page regardless of page class. */
html body,
html body[class],
.page-landing,
.page-studio{
  background:#07070c !important;
  background-image:
    radial-gradient(900px 520px at 15% -4%, rgba(124,108,255,.20), transparent 60%),
    radial-gradient(760px 460px at 92% 8%, rgba(94,208,255,.14), transparent 60%),
    radial-gradient(700px 700px at 70% 100%, rgba(177,140,255,.10), transparent 60%),
    linear-gradient(180deg,#07070c 0%,#06060b 100%) !important;
}

/* 2. Hero display gradient (home) — was orange/pink -> brand purple->cyan.
      Overrides body.page-landing .display .grad rules inside media queries. */
body.page-landing .display .grad,
.page-landing .display .grad,
.display .grad,
.grad{
  background:var(--grad-text) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  filter:drop-shadow(0 10px 26px rgba(124,108,255,.22)) !important;
}

/* 3. Bento demo labels (HOOK/MAIN/CTA) — orange -> accent purple. */
.demo-line b,
.bento-demo .demo-line b{color:var(--accent) !important}

/* 4. Generator / SEO main card — lime+orange tint -> purple/cyan. */
.video-first-card{
  background:
    linear-gradient(135deg,rgba(124,108,255,.14),rgba(94,208,255,.06) 62%,rgba(255,255,255,.03)),
    rgba(255,255,255,.042) !important;
}
.video-first-card::before{
  background:
    radial-gradient(circle at 10% 0%, rgba(124,108,255,.16), transparent 34%),
    radial-gradient(circle at 100% 30%, rgba(94,208,255,.12), transparent 36%) !important;
}

/* 5. "Free preview · Download requires Pro" pill — lime bg -> purple. */
.video-plan-pill{
  background:rgba(139,123,255,.12) !important;
  color:var(--accent) !important;
}

/* 6. Generator "SEO Tools" ghost button — orange -> purple ghost. */
.premium-tools-btn{
  border-color:rgba(139,123,255,.3) !important;
  background:rgba(139,123,255,.10) !important;
  color:var(--accent-3) !important;
}

/* 7. Legal page badge (Privacy/Terms) — pink -> purple accent. */
.legal-badge{
  color:var(--accent-3) !important;
  background:rgba(139,123,255,.10) !important;
  border-color:rgba(139,123,255,.25) !important;
}

/* 8. Final CTA under-glow + bento hover glow — lime -> purple. */
.cta-card::before{
  background:radial-gradient(circle at 50% 100%, rgba(124,108,255,.25), transparent 60%) !important;
}
.bento-card::before{
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(124,108,255,.14), transparent 50%) !important;
}

/* 9. Section top-border accents & misc that used --grad-aurora already
      resolve to purple via premium tokens; ensure demo accent text too. */
.bento-demo .demo-line b{color:var(--accent) !important}

/* 10. Hero stats numbers — were solid orange -> brand gradient text. */
body.page-landing .hero-stats b,
.hero-stats b{
  background:var(--grad-text) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}

/* 11. Hero decorative glows (::before/::after) — warm pink/amber/lime -> purple.
       Uses body.page-landing (0,2,2) to beat per-breakpoint warm rules. */
body.page-landing .hero::before,
.hero::before{
  background:
    radial-gradient(circle at 50% 42%, rgba(124,108,255,.22), transparent 55%),
    conic-gradient(from 230deg, transparent, rgba(124,108,255,.12), transparent, rgba(94,208,255,.12), transparent) !important;
}
body.page-landing .hero::after,
.hero::after{
  background:
    radial-gradient(circle, rgba(124,108,255,.18), transparent 40%),
    conic-gradient(from 150deg, rgba(124,108,255,.10), rgba(94,208,255,.12), rgba(177,140,255,.10), rgba(124,108,255,.10)) !important;
}

/* 12. Nav primary button + logo mark glow — pink/lime -> purple. */
body.page-landing .nav .btn-primary,
body.page-landing .nav-cta .btn-primary,
.nav .btn-primary,
.nav-cta .btn-primary{
  box-shadow:0 14px 34px rgba(124,108,255,.38), inset 0 0 0 1px rgba(255,255,255,.16) !important;
}
body.page-landing .logo-mark,
.logo-mark{
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 10px 34px rgba(124,108,255,.45) !important;
}



/* ============================================================
   13. FULL SWEEP — every remaining hardcoded lime(#d7ff3f)/orange(#ff7a45)
   element found by scan.js, across desktop + mobile breakpoints.
   ============================================================ */

/* Primary buttons (all sizes, incl. mobile media overrides) -> brand purple. */
.btn-primary,
.btn-primary.lg,
.btn-primary.sm,
.btn-primary.full,
.nav-mobile .btn-primary,
.btn-primary.edit-apply{
  background:var(--grad-brand) !important;
  box-shadow:0 14px 38px rgba(124,108,255,.4), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.btn-primary.lg{
  box-shadow:0 22px 60px rgba(124,108,255,.34), inset 0 0 0 1px rgba(255,255,255,.16) !important;
}

/* Ghost/landing buttons with lime tint. */
.btn-ghost.seo-landing-btn,
.seo-landing-btn{
  background:rgba(139,123,255,.10) !important;
  border-color:rgba(139,123,255,.3) !important;
}
.premium-tools-btn,
.premium-tools-btn.seo-tools-link{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(124,108,255,.18) !important;
}
.premium-tools-btn svg,
.seo-tools-link svg{color:var(--accent-3) !important;fill:currentColor !important}

/* Kicker + workflow number borders — lime -> purple. */
.kicker{border-color:rgba(139,123,255,.25) !important}
.flow-num{border-color:rgba(139,123,255,.2) !important}

/* Hero pill glow + dot — lime -> purple. */
.pill.pill-glow,
.pill-glow{
  box-shadow:0 0 0 1px rgba(139,123,255,.28), 0 8px 30px rgba(124,108,255,.22) !important;
}
.pill-dot{
  background:var(--accent) !important;
  box-shadow:0 0 10px var(--accent) !important;
}

/* Studio sidebar / empty state / shells / mobile banner — lime radial -> purple. */
.sidebar{
  background-image:radial-gradient(circle at 25% 0%, rgba(124,108,255,.20), transparent 40%) !important;
}
.sb-empty{
  background-image:radial-gradient(circle at 50% 0%, rgba(124,108,255,.10), transparent 45%) !important;
}
.text-tools-shell,
.seo-tools-page-shell,
.text-tools-shell.seo-tools-page-shell{
  background-image:linear-gradient(135deg, rgba(124,108,255,.08), rgba(94,208,255,.05) 62%, rgba(255,255,255,.02)) !important;
}
.mobile-hero-banner{
  background-image:radial-gradient(circle at 18% 12%, rgba(124,108,255,.16), transparent 45%) !important;
}

/* SEO tab active glow — lime -> purple. */
.tab.active,
.seo-tab.active{
  box-shadow:0 4px 14px rgba(124,108,255,.32) !important;
}

/* Generator form fields — orange borders -> purple. */
.video-script-box,
.video-edit-box,
.video-first-card select,
.video-first-card textarea,
.video-first-card input{
  border-color:rgba(139,123,255,.28) !important;
}

/* Legal pages hero + number chips — lime -> purple. */
.legal-hero{
  background-image:linear-gradient(135deg, rgba(124,108,255,.12), rgba(94,208,255,.06) 60%, rgba(255,255,255,.02)) !important;
}
.legal-number{
  box-shadow:0 14px 34px rgba(124,108,255,.30) !important;
}


/* ============================================================
   14. TOKEN FORCE + high-specificity mobile overrides.
   styles.css has a 2nd :root redefining brand tokens to lime/orange,
   plus hardcoded hero-button gradients under body.page-landing (0,3,1).
   ============================================================ */
html body[class]{
  --accent:#8b7bff !important;
  --accent-2:#5ed0ff !important;
  --accent-3:#b591ff !important;
  --accent-4:#8b7bff !important;
  --grad-brand:linear-gradient(135deg,#7c6cff 0%,#b18cff 52%,#5ed0ff 120%) !important;
  --grad-cool:linear-gradient(135deg,#8b7bff 0%,#5ed0ff 100%) !important;
  --grad-aurora:linear-gradient(120deg,#7c6cff,#b18cff 45%,#5ed0ff) !important;
  --grad-text:linear-gradient(120deg,#c9c2ff 0%,#8b7bff 45%,#5ed0ff 100%) !important;
  --glow-accent:0 0 40px rgba(124,108,255,.35) !important;
  --glow-cool:0 0 50px rgba(94,208,255,.3) !important;
}

/* Hardcoded hero button gradients (mobile) + overlays -> brand purple. */
body.page-landing .hero-actions .btn-primary,
body.page-landing .hero-actions .btn-primary.lg,
body.page-landing .hero-actions .btn-primary.sm,
.page-landing .hero-actions .btn-primary.lg,
body:not(.page-studio) section.hero .hero-actions .btn-primary{
  background:linear-gradient(135deg,#7c6cff 0%,#b18cff 52%,#5ed0ff 120%) !important;
}
body.page-landing .hero-actions .btn-primary::after,
.page-landing .hero-actions .btn-primary.lg::after,
body.page-landing .hero-actions .btn-primary.lg::after{
  background:linear-gradient(180deg, rgba(255,255,255,.28), transparent 55%) !important;
}

/* Any primary button gradient (mobile .sm/.lg hardcoded) -> purple. */
body .btn-primary.sm,
body .btn-primary.lg,
body .studio-bar > .btn-primary.sm{
  background:linear-gradient(135deg,#7c6cff 0%,#b18cff 52%,#5ed0ff 120%) !important;
}

/* Pill dot + glow + mobile hero banner (hardcoded lime) -> purple. */
body.page-landing .pill-dot,
.pill .pill-dot,
.pill-dot{background:#8b7bff !important; box-shadow:0 0 10px #8b7bff !important}
body.page-landing .pill.pill-glow,
body .pill.pill-glow{
  box-shadow:0 0 0 1px rgba(139,123,255,.28), 0 8px 30px rgba(124,108,255,.22) !important;
}
body .mobile-hero-banner,
body.page-generator .mobile-hero-banner,
.mobile-hero-banner{
  background-image:radial-gradient(circle at 18% 12%, rgba(124,108,255,.16), transparent 45%) !important;
}

/* Any leftover warm <b> gradient text + warm svg icon -> purple/accent. */
body .mobile-hero-banner b,
body .video-first-head b{
  background:var(--grad-text) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;
}
.seo-tools-link svg,
.seo-tools-link svg *,
a[href="/seo-tools"] svg,
a[href="/seo-tools"] svg *{color:var(--accent-3) !important; fill:var(--accent-3) !important; stroke:var(--accent-3) !important}


/* ============================================================
   15. FINAL mobile pins — id-level / complex selectors.
   ============================================================ */

/* Hero primary button lime/amber shadow (line 7418) -> purple. */
body.page-landing .hero-actions .btn-primary,
body.page-landing .hero-actions .btn-primary.lg,
.page-landing .hero-actions .btn-primary.lg{
  box-shadow:0 22px 52px rgba(124,108,255,.30), 0 8px 26px rgba(94,208,255,.14), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* Studio login buttons (#loginBtn / #seoLoginBtn) — id specificity. */
html body #loginBtn,
html body #loginBtn.btn-primary.sm,
html body .studio-bar #loginBtn,
html body #seoLoginBtn,
html body .studio-bar #seoLoginBtn,
html body .page-seo-tools #seoLoginBtn{
  background:linear-gradient(135deg,#7c6cff 0%,#b18cff 52%,#5ed0ff 120%) !important;
  box-shadow:0 4px 14px rgba(124,108,255,.3) !important;
}

/* Mobile hero banner (JS/complex selector) — lime -> purple. */
html body[class] .mobile-hero-banner,
html body .studio .mobile-hero-banner,
html body main .mobile-hero-banner{
  background:radial-gradient(circle at 18% 12%, rgba(124,108,255,.16), transparent 45%), #0b0710 !important;
}

/* SEO tools link icon/text (generator) — orange -> purple. */
html body .seo-tools-link,
html body a.seo-tools-link,
html body .video-head-actions .seo-tools-link{
  color:var(--accent-3) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 28px rgba(124,108,255,.14) !important;
}
html body .seo-tools-link svg,
html body .seo-tools-link svg *,
html body .video-head-actions svg{
  color:var(--accent-3) !important;
  fill:var(--accent-3) !important;
}


/* Mobile scroll-hint icon (stroke-based) — orange -> purple. */
html body .mobile-hero-banner svg,
html body .mobile-scroll-hint svg,
html body .mobile-hero-banner svg *,
html body .mobile-scroll-hint svg *{
  color:var(--accent-3) !important;
  stroke:var(--accent-3) !important;
}


/* Shared on-page ShortsCraft brand icon */
html body .logo-mark.brand-logo-mark,
html body.page-studio .studio-bar .logo-mark.brand-logo-mark {
  flex: 0 0 auto !important;
  width: var(--brand-mark-size, auto);
  height: auto !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  isolation: isolate;
}
html body .logo-mark.brand-logo-mark::before,
html body .logo-mark.brand-logo-mark::after,
html body.page-studio .studio-bar .logo-mark.brand-logo-mark::before,
html body.page-studio .studio-bar .logo-mark.brand-logo-mark::after { display: none !important; }
html body .logo-mark.brand-logo-mark .brand-logo-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: inherit;
}