/* ShuiLink site themes — 2026-08-13
 *
 * A SKIN LAYER, not the real thing. Every rule here overrides a colour that is
 * hardcoded in style.css. The proper fix is the token refactor described in
 * docs/PLATFORM_OPTIMIZATION_PLAN_2026-08.md section 11.2 (delete 34 dead
 * classes, then lift ~50 hardcoded backgrounds into CSS custom properties).
 * Until that lands, adding a 5th theme means hand-listing selectors again —
 * which is exactly why the refactor is worth doing.
 *
 * The selectors below are the full set of light-coloured surfaces in
 * style.css. .hero is the one that bites: it carries its own
 * linear-gradient AND has no .section class, so a dark theme that only
 * targets .section leaves a white band behind the headline.
 */

/* ── 1. LIGHT (default) — no overrides; style.css is already this. ───────── */

/* ── 2. NAVY — deep navy + champagne gold. Law firms, accounting, fine dining */
html[data-theme="navy"] body,
html[data-theme="navy"] .hero,
html[data-theme="navy"] .section,
html[data-theme="navy"] .alt-section,
html[data-theme="navy"] .featured-section,
html[data-theme="navy"] .contact-section,
html[data-theme="navy"] .project-section,
html[data-theme="navy"] .footer { background: #0B1220 !important; }
html[data-theme="navy"] .hero { background: linear-gradient(180deg, #0B1220 0%, #111A2E 100%) !important; }
html[data-theme="navy"] .navbar { background: rgba(11,18,32,.9) !important; border-bottom: 1px solid rgba(201,162,39,.22) !important; }
html[data-theme="navy"] body, html[data-theme="navy"] p, html[data-theme="navy"] li,
html[data-theme="navy"] .hero-text, html[data-theme="navy"] .section-subtitle { color: #A7B0C0 !important; }
html[data-theme="navy"] h1, html[data-theme="navy"] h2, html[data-theme="navy"] h3,
html[data-theme="navy"] h4, html[data-theme="navy"] .navbar a, html[data-theme="navy"] .navbar span { color: #F5F1E8 !important; }
html[data-theme="navy"] .eyebrow, html[data-theme="navy"] .trust-num,
html[data-theme="navy"] .hero-slogan, html[data-theme="navy"] .contact-link { color: #C9A227 !important; background: none !important; -webkit-text-fill-color: #C9A227 !important; }
html[data-theme="navy"] .card, html[data-theme="navy"] .hero-card, html[data-theme="navy"] .why-box,
html[data-theme="navy"] .contact-box, html[data-theme="navy"] .project-card, html[data-theme="navy"] .hero-demo-note,
html[data-theme="navy"] .email-chip, html[data-theme="navy"] .industry-badge, html[data-theme="navy"] .trust-strip {
  background: rgba(255,255,255,.045) !important; border: 1px solid rgba(201,162,39,.22) !important; color: #A7B0C0 !important; }
html[data-theme="navy"] .btn-dark, html[data-theme="navy"] .call-btn { background: #C9A227 !important; color: #0B1220 !important; border: none !important; }
html[data-theme="navy"] .btn-light, html[data-theme="navy"] .text-btn-live,
html[data-theme="navy"] .project-link, html[data-theme="navy"] .lang-toggle {
  background: transparent !important; color: #F5F1E8 !important; border: 1px solid rgba(201,162,39,.35) !important; }
html[data-theme="navy"] .float-call { background: #C9A227 !important; color: #0B1220 !important; }
html[data-theme="navy"] .float-text { background: #111A2E !important; color: #F5F1E8 !important; }
html[data-theme="navy"] .footer a, html[data-theme="navy"] .footer-h { color: #A7B0C0 !important; }

/* ── 3. SAKURA — cream + blossom pink. Nails, lashes, massage, spa ───────── */
html[data-theme="sakura"] body,
html[data-theme="sakura"] .section,
html[data-theme="sakura"] .featured-section,
html[data-theme="sakura"] .contact-section,
html[data-theme="sakura"] .footer { background: #FFFBFA !important; }
html[data-theme="sakura"] .hero { background: linear-gradient(180deg, #FFFBFA 0%, #FDF0F3 100%) !important; }
html[data-theme="sakura"] .alt-section, html[data-theme="sakura"] .project-section { background: #FDF4F6 !important; }
html[data-theme="sakura"] .navbar { background: rgba(255,251,250,.92) !important; border-bottom: 1px solid #F3DDE3 !important; }
html[data-theme="sakura"] h1, html[data-theme="sakura"] h2, html[data-theme="sakura"] h3 { color: #3B2B30 !important; }
html[data-theme="sakura"] .eyebrow, html[data-theme="sakura"] .trust-num,
html[data-theme="sakura"] .hero-slogan, html[data-theme="sakura"] .contact-link { color: #E8869B !important; background: none !important; -webkit-text-fill-color: #E8869B !important; }
html[data-theme="sakura"] .card, html[data-theme="sakura"] .hero-card, html[data-theme="sakura"] .why-box,
html[data-theme="sakura"] .contact-box, html[data-theme="sakura"] .hero-demo-note, html[data-theme="sakura"] .trust-strip {
  background: #FFFFFF !important; border: 1px solid #F3DDE3 !important; border-radius: 20px !important; }
html[data-theme="sakura"] .btn-dark, html[data-theme="sakura"] .call-btn,
html[data-theme="sakura"] .float-call { background: #E8869B !important; color: #FFFFFF !important; border: none !important; }
html[data-theme="sakura"] .btn, html[data-theme="sakura"] .lang-toggle { border-radius: 999px !important; }
html[data-theme="sakura"] .project-section, html[data-theme="sakura"] .project-card,
html[data-theme="sakura"] .project-content h3, html[data-theme="sakura"] .project-content p { color: #3B2B30 !important; }
html[data-theme="sakura"] .project-card { background: #FFFFFF !important; border: 1px solid #F3DDE3 !important; }

/* ── 4. GLASS — near-black + indigo/cyan glow. AI / tech positioning ────── */
html[data-theme="glass"] body,
html[data-theme="glass"] .section,
html[data-theme="glass"] .alt-section,
html[data-theme="glass"] .featured-section,
html[data-theme="glass"] .contact-section,
html[data-theme="glass"] .project-section,
html[data-theme="glass"] .footer { background: #08090D !important; }
html[data-theme="glass"] .hero {
  background: radial-gradient(900px 520px at 80% -10%, rgba(99,102,241,.30), transparent 60%),
              radial-gradient(760px 420px at 5% 10%, rgba(34,211,238,.16), transparent 60%),
              #08090D !important; }
html[data-theme="glass"] .navbar { background: rgba(8,9,13,.72) !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; }
html[data-theme="glass"] body, html[data-theme="glass"] p, html[data-theme="glass"] li,
html[data-theme="glass"] .hero-text, html[data-theme="glass"] .section-subtitle { color: #9AA3B2 !important; }
html[data-theme="glass"] h1, html[data-theme="glass"] h2, html[data-theme="glass"] h3,
html[data-theme="glass"] h4, html[data-theme="glass"] .navbar a, html[data-theme="glass"] .navbar span { color: #F4F6FB !important; }
html[data-theme="glass"] .eyebrow, html[data-theme="glass"] .trust-num, html[data-theme="glass"] .hero-slogan,
html[data-theme="glass"] .contact-link { color: #22D3EE !important; background: none !important; -webkit-text-fill-color: #22D3EE !important; }
html[data-theme="glass"] .card, html[data-theme="glass"] .hero-card, html[data-theme="glass"] .why-box,
html[data-theme="glass"] .contact-box, html[data-theme="glass"] .project-card, html[data-theme="glass"] .hero-demo-note,
html[data-theme="glass"] .email-chip, html[data-theme="glass"] .industry-badge, html[data-theme="glass"] .trust-strip {
  background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 18px !important; color: #9AA3B2 !important; }
html[data-theme="glass"] .btn-dark, html[data-theme="glass"] .call-btn, html[data-theme="glass"] .float-call {
  background: linear-gradient(135deg, #6366F1, #22D3EE) !important; color: #08090D !important; border: none !important; }
html[data-theme="glass"] .btn-light, html[data-theme="glass"] .text-btn-live,
html[data-theme="glass"] .project-link, html[data-theme="glass"] .lang-toggle, html[data-theme="glass"] .float-text {
  background: rgba(255,255,255,.07) !important; color: #F4F6FB !important; border: 1px solid rgba(255,255,255,.1) !important; }
html[data-theme="glass"] .footer a, html[data-theme="glass"] .footer-h { color: #9AA3B2 !important; }

/* Dark themes get a real knockout logo (transparent plate, white "Shui",
   the swirl and "Link" keep their blue). Generated 2026-08-13 from
   logo-main.png — the previous mix-blend-mode/brightness hack could not
   remove the white plate baked into the source PNG, only wash it out.
   Swapped via content so no markup change is needed. */
html[data-theme="navy"] .logo-img,
html[data-theme="glass"] .logo-img {
  /* src is swapped in script.js applyTheme() — `content` on an <img> is
     not reliable across browsers for replaced elements. */
  background: transparent !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* ── Floating contact buttons: the first pass set background but not color,
   so on the dark themes the label was dark-on-dark. Text colour has to be
   stated explicitly — style.css sets it near-black on these two. ───────── */
html[data-theme="navy"] .float-text,
html[data-theme="navy"] .float-text * { color: #F5F1E8 !important; }
html[data-theme="navy"] .float-call,
html[data-theme="navy"] .float-call * { color: #0B1220 !important; }
html[data-theme="navy"] .float-text { border: 1px solid rgba(201,162,39,.35) !important; }

html[data-theme="glass"] .float-text,
html[data-theme="glass"] .float-text * { color: #F4F6FB !important; }
html[data-theme="glass"] .float-call,
html[data-theme="glass"] .float-call * { color: #08090D !important; }

html[data-theme="sakura"] .float-text { background: #FFFFFF !important; border: 1px solid #F3DDE3 !important; }
html[data-theme="sakura"] .float-text,
html[data-theme="sakura"] .float-text * { color: #3B2B30 !important; }
html[data-theme="sakura"] .float-call,
html[data-theme="sakura"] .float-call * { color: #FFFFFF !important; }

/* Same omission on the in-page contact buttons. */
html[data-theme="navy"] .text-btn-live, html[data-theme="navy"] .text-btn-live * { color: #F5F1E8 !important; }
html[data-theme="glass"] .text-btn-live, html[data-theme="glass"] .text-btn-live * { color: #F4F6FB !important; }
html[data-theme="navy"] .call-btn *, html[data-theme="navy"] .project-link * { color: inherit !important; }


/* ── 5. NOIR — charcoal + gold, the 2026-08-13 default. Modeled on the
   reference competitor the owner sent (dark hero over real merchant video,
   gold accents, cream alternating sections). ─────────────────────────── */
html[data-theme="noir"] body { background: #121212 !important; color: #A9A296 !important; }
html[data-theme="noir"] .navbar { background: rgba(18,18,18,.92) !important; border-bottom: 1px solid rgba(217,169,61,.18) !important; }
html[data-theme="noir"] .navbar a, html[data-theme="noir"] .navbar span { color: #F5F1E8 !important; }
html[data-theme="noir"] .nav-signin { border-color: rgba(217,169,61,.45) !important; color: #D9A93D !important; }
html[data-theme="noir"] .hamburger { border-color: rgba(255,255,255,.18) !important; background: transparent !important; }
html[data-theme="noir"] .hamburger span { background: #F5F1E8 !important; }
@media (max-width: 980px) {
  html[data-theme="noir"] .navbar-menu { background: #161616 !important; }
}

/* Hero: video (noir only) + dark overlay; text cream, eyebrow gold pill */
html[data-theme="noir"] .hero {
  position: relative;
  background: #121212 !important;
  isolation: isolate;
}
/* Video/overlay base rules live in style.css since v4 (all themes show the
   loop). Themes only re-tint the overlay below. */
html[data-theme="noir"] .hero-overlay {
  background: linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.78) 45%, rgba(10,10,10,.55) 100%);
}

html[data-theme="noir"] h1, html[data-theme="noir"] h2, html[data-theme="noir"] h3,
html[data-theme="noir"] h4 { color: #F5F1E8 !important; }
html[data-theme="noir"] .hero h1 { font-size: clamp(44px, 5.4vw, 72px); letter-spacing: -0.02em; }
html[data-theme="noir"] p, html[data-theme="noir"] li,
html[data-theme="noir"] .hero-text, html[data-theme="noir"] .section-subtitle { color: #A9A296 !important; }
html[data-theme="noir"] .eyebrow, html[data-theme="noir"] .hero-slogan,
html[data-theme="noir"] .contact-link { color: #D9A93D !important; background: none; -webkit-text-fill-color: #D9A93D !important; }
html[data-theme="noir"] .hero .eyebrow {
  background: rgba(217,169,61,.1) !important;
  border: 1px solid rgba(217,169,61,.35) !important;
}
html[data-theme="noir"] .trust-num {
  background: linear-gradient(120deg, #D9A93D, #F2CE7B) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
html[data-theme="noir"] .trust-label { color: #8A8478 !important; }
html[data-theme="noir"] .trust-strip,
html[data-theme="noir"] .hero-card, html[data-theme="noir"] .hero-demo-note {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(217,169,61,.22) !important;
  color: #A9A296 !important;
  backdrop-filter: blur(6px);
}
html[data-theme="noir"] .hero-card li { border-bottom-color: rgba(255,255,255,.07) !important; color: #C9C2B4 !important; }
html[data-theme="noir"] .hero-demo-note { color: #E8E2D4 !important; }

/* Buttons: gold primary, outlined secondary */
html[data-theme="noir"] .btn-dark, html[data-theme="noir"] .call-btn, html[data-theme="noir"] .float-call {
  background: linear-gradient(135deg, #D9A93D, #C6952F) !important;
  color: #141414 !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(217,169,61,.25) !important;
}
html[data-theme="noir"] .btn-light, html[data-theme="noir"] .text-btn-live,
html[data-theme="noir"] .lang-toggle {
  background: rgba(255,255,255,.06) !important;
  color: #F5F1E8 !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  box-shadow: none !important;
}
html[data-theme="noir"] .call-btn *, html[data-theme="noir"] .float-call * { color: #141414 !important; }
html[data-theme="noir"] .text-btn-live *, html[data-theme="noir"] .btn-light * { color: #F5F1E8 !important; }
html[data-theme="noir"] .float-text { background: #1C1C1C !important; color: #F5F1E8 !important; border: 1px solid rgba(217,169,61,.35) !important; }
html[data-theme="noir"] .float-text * { color: #F5F1E8 !important; }

/* Proof strip on dark */
html[data-theme="noir"] .proof-strip { background: #0E0E0E !important; border-color: rgba(255,255,255,.08) !important; }
html[data-theme="noir"] .proof-item { background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.1) !important; }
html[data-theme="noir"] .proof-name { color: #F5F1E8 !important; }
html[data-theme="noir"] .proof-desc { color: #8A8478 !important; }

/* Alternating sections: cream light bands between charcoal bands */
html[data-theme="noir"] .featured-section, html[data-theme="noir"] #why.section,
html[data-theme="noir"] .faq-section {
  background: #F6F3EC !important;
  border-color: #E9E2D3 !important;
}
html[data-theme="noir"] .featured-section h2, html[data-theme="noir"] .featured-section h3,
html[data-theme="noir"] #why h2, html[data-theme="noir"] #why h3,
html[data-theme="noir"] .faq-section h2 { color: #171512 !important; }
html[data-theme="noir"] .featured-section p, html[data-theme="noir"] #why p,
html[data-theme="noir"] .faq-section .section-subtitle { color: #5C564A !important; }
html[data-theme="noir"] .featured-section .card, html[data-theme="noir"] .why-box {
  background: #FFFFFF !important; border: 1px solid #E9E2D3 !important; box-shadow: 0 10px 30px rgba(23,21,18,.06) !important;
}
html[data-theme="noir"] .why-num { color: #D8CFBB !important; }
html[data-theme="noir"] .why-ic { background: rgba(217,169,61,.12) !important; border-color: rgba(217,169,61,.3) !important; }

/* Dark bands: services + industries */
html[data-theme="noir"] #services.section { background: #121212 !important; }
html[data-theme="noir"] .alt-section { background: #0E0E0E !important; }
html[data-theme="noir"] #services .card, html[data-theme="noir"] .alt-section .card,
html[data-theme="noir"] .contact-box, html[data-theme="noir"] .email-chip {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #A9A296 !important;
  box-shadow: none !important;
}
html[data-theme="noir"] #services .card:hover, html[data-theme="noir"] .alt-section .card:hover {
  border-color: rgba(217,169,61,.4) !important;
}
html[data-theme="noir"] .industry-badge { background: rgba(217,169,61,.14) !important; color: #D9A93D !important; border-color: rgba(217,169,61,.3) !important; }
html[data-theme="noir"] .email-chip .chip-addr { color: #D9A93D !important; }

/* Cases band */
html[data-theme="noir"] .project-section { background: #171512 !important; }
html[data-theme="noir"] .case-card { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(217,169,61,.2) !important; }
html[data-theme="noir"] .case-chip { background: rgba(255,255,255,.08) !important; color: #E8E2D4 !important; }
html[data-theme="noir"] .case-chip.case-chip-hot { background: rgba(217,169,61,.16) !important; color: #D9A93D !important; }
html[data-theme="noir"] .case-visit { color: #D9A93D !important; border-bottom-color: rgba(217,169,61,.4) !important; }
html[data-theme="noir"] .case-vertical { color: #8A8478 !important; }

/* FAQ on cream */
html[data-theme="noir"] .faq-item { background: #FFFFFF !important; border-color: #E9E2D3 !important; }
html[data-theme="noir"] .faq-q { color: #171512 !important; }
html[data-theme="noir"] .faq-a p { color: #5C564A !important; }
html[data-theme="noir"] .faq-tag { background: rgba(217,169,61,.12) !important; color: #A87F1F !important; border-color: rgba(217,169,61,.3) !important; }

/* Contact + footer dark */
html[data-theme="noir"] .contact-section { background: #0E0E0E !important; }
html[data-theme="noir"] .contact-box p { color: #C9C2B4 !important; }
html[data-theme="noir"] .wechat-card { background: rgba(255,255,255,.05) !important; border-color: rgba(217,169,61,.35) !important; }
html[data-theme="noir"] .wechat-card .wc-id { color: #F5F1E8 !important; }
html[data-theme="noir"] .wechat-card .wc-label, html[data-theme="noir"] .wechat-card .wc-note { color: #8A8478 !important; }
html[data-theme="noir"] .footer { background: #0A0A0A !important; border-top: 1px solid rgba(255,255,255,.07) !important; }
html[data-theme="noir"] .footer a, html[data-theme="noir"] .footer-h, html[data-theme="noir"] .footer p { color: #8A8478 !important; }
html[data-theme="noir"] .footer a:hover { color: #D9A93D !important; }

/* Reduced motion / mobile: hide the video, keep the gradient */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="noir"] .hero-video { display: none !important; }
}
/* (v4) mobile keeps the video too — owner's call. The 1.2MB loop only
   loads once and prefers-reduced-motion still disables it. */

/* ── New-component fallbacks for the three older skins, so the new sections
   do not render light-on-light / dark-on-dark there. ─────────────────── */
html[data-theme="navy"] .proof-strip { background: #0B1220 !important; border-color: rgba(201,162,39,.18) !important; }
html[data-theme="navy"] .proof-item { background: rgba(255,255,255,.045) !important; border-color: rgba(201,162,39,.22) !important; }
html[data-theme="navy"] .proof-name, html[data-theme="navy"] .faq-q { color: #F5F1E8 !important; }
html[data-theme="navy"] .faq-section { background: #0B1220 !important; }
html[data-theme="navy"] .faq-item { background: rgba(255,255,255,.045) !important; border-color: rgba(201,162,39,.22) !important; }
html[data-theme="navy"] .wechat-card { background: rgba(255,255,255,.045) !important; border-color: rgba(201,162,39,.35) !important; }
html[data-theme="navy"] .wechat-card .wc-id { color: #F5F1E8 !important; }

html[data-theme="glass"] .proof-strip { background: #08090D !important; border-color: rgba(255,255,255,.1) !important; }
html[data-theme="glass"] .proof-item { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; }
html[data-theme="glass"] .proof-name, html[data-theme="glass"] .faq-q { color: #F4F6FB !important; }
html[data-theme="glass"] .faq-section { background: #08090D !important; }
html[data-theme="glass"] .faq-item { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; }
html[data-theme="glass"] .wechat-card { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.2) !important; }
html[data-theme="glass"] .wechat-card .wc-id { color: #F4F6FB !important; }

html[data-theme="sakura"] .faq-section { background: #FDF4F6 !important; }
html[data-theme="sakura"] .faq-item, html[data-theme="sakura"] .proof-item,
html[data-theme="sakura"] .wechat-card { background: #FFFFFF !important; border-color: #F3DDE3 !important; }
html[data-theme="sakura"] .proof-strip { background: #FDF4F6 !important; border-color: #F3DDE3 !important; }


/* Pricing section per theme (added with the v3 pricing block) */
html[data-theme="noir"] .pricing-section { background: #121212 !important; }
html[data-theme="noir"] .bundle-card, html[data-theme="noir"] .module-row {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.12) !important;
}
html[data-theme="noir"] .bundle-card.bundle-flagship { border: 2px solid #D9A93D !important; }
html[data-theme="noir"] .bundle-flag { background: #D9A93D !important; color: #141414 !important; }
html[data-theme="noir"] .bundle-name, html[data-theme="noir"] .bundle-price,
html[data-theme="noir"] .module-name, html[data-theme="noir"] .modules-h,
html[data-theme="noir"] .soon-h { color: #F5F1E8 !important; }
html[data-theme="noir"] .bundle-price .bp-mo, html[data-theme="noir"] .bundle-annual,
html[data-theme="noir"] .bundle-includes, html[data-theme="noir"] .pricing-note,
html[data-theme="noir"] .pricing-loading, html[data-theme="noir"] .pricing-fallback { color: #8A8478 !important; }
html[data-theme="noir"] .module-price { color: #C9C2B4 !important; }
html[data-theme="noir"] .module-price .free { color: #7FB98A !important; }
html[data-theme="noir"] .bundle-cta { background: linear-gradient(135deg, #D9A93D, #C6952F) !important; color: #141414 !important; }
html[data-theme="noir"] .soon-chip { border-color: rgba(255,255,255,.2) !important; color: #8A8478 !important; }
html[data-theme="noir"] .pricing-note a, html[data-theme="noir"] .pricing-fallback a { color: #D9A93D !important; }

html[data-theme="navy"] .pricing-section { background: #0B1220 !important; }
html[data-theme="navy"] .bundle-card, html[data-theme="navy"] .module-row {
  background: rgba(255,255,255,.045) !important; border-color: rgba(201,162,39,.22) !important; }
html[data-theme="navy"] .bundle-name, html[data-theme="navy"] .bundle-price,
html[data-theme="navy"] .module-name, html[data-theme="navy"] .modules-h, html[data-theme="navy"] .soon-h { color: #F5F1E8 !important; }
html[data-theme="navy"] .bundle-cta { background: #C9A227 !important; color: #0B1220 !important; }
html[data-theme="navy"] .module-price { color: #A7B0C0 !important; }

html[data-theme="glass"] .pricing-section { background: #08090D !important; }
html[data-theme="glass"] .bundle-card, html[data-theme="glass"] .module-row {
  background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; }
html[data-theme="glass"] .bundle-name, html[data-theme="glass"] .bundle-price,
html[data-theme="glass"] .module-name, html[data-theme="glass"] .modules-h, html[data-theme="glass"] .soon-h { color: #F4F6FB !important; }
html[data-theme="glass"] .bundle-cta { background: linear-gradient(135deg, #6366F1, #22D3EE) !important; color: #08090D !important; }
html[data-theme="glass"] .module-price { color: #9AA3B2 !important; }

html[data-theme="sakura"] .pricing-section { background: #FFFBFA !important; }
html[data-theme="sakura"] .bundle-card, html[data-theme="sakura"] .module-row {
  background: #FFFFFF !important; border-color: #F3DDE3 !important; }
html[data-theme="sakura"] .bundle-card.bundle-flagship { border: 2px solid #E8869B !important; }
html[data-theme="sakura"] .bundle-flag, html[data-theme="sakura"] .bundle-cta { background: #E8869B !important; color: #fff !important; }


/* Per-theme hero overlay tints (video base in style.css) */
html[data-theme="navy"] .hero-overlay {
  background: linear-gradient(90deg, rgba(11,18,32,.93) 0%, rgba(11,18,32,.8) 45%, rgba(11,18,32,.58) 100%) !important;
}
html[data-theme="glass"] .hero-overlay {
  background: radial-gradient(900px 520px at 80% -10%, rgba(99,102,241,.32), transparent 60%),
              linear-gradient(90deg, rgba(8,9,13,.92) 0%, rgba(8,9,13,.78) 45%, rgba(8,9,13,.55) 100%) !important;
}
html[data-theme="sakura"] .hero-overlay {
  background: linear-gradient(90deg, rgba(255,251,250,.95) 0%, rgba(253,240,243,.87) 45%, rgba(253,240,243,.64) 100%) !important;
}


/* About / credentials per theme */
html[data-theme="noir"] .about-section { background: #0E0E0E !important; }
html[data-theme="noir"] .cred-card { background: rgba(255,255,255,.045) !important; border-color: rgba(217,169,61,.22) !important; }
html[data-theme="noir"] .cred-t { color: #F5F1E8 !important; }
html[data-theme="noir"] .cred-s { color: #8A8478 !important; }
html[data-theme="navy"] .about-section { background: #0B1220 !important; }
html[data-theme="navy"] .cred-card { background: rgba(255,255,255,.045) !important; border-color: rgba(201,162,39,.22) !important; }
html[data-theme="navy"] .cred-t { color: #F5F1E8 !important; }
html[data-theme="glass"] .about-section { background: #08090D !important; }
html[data-theme="glass"] .cred-card { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; }
html[data-theme="glass"] .cred-t { color: #F4F6FB !important; }
html[data-theme="sakura"] .about-section { background: #FDF4F6 !important; }
html[data-theme="sakura"] .cred-card { background: #FFFFFF !important; border-color: #F3DDE3 !important; }

html[data-theme="noir"] .trust-stars { color: #D9A93D !important; }
html[data-theme="navy"] .trust-stars { color: #C9A227 !important; }
html[data-theme="sakura"] .trust-stars { color: #E8869B !important; }
html[data-theme="glass"] .trust-stars { color: #22D3EE !important; }


/* Mobile drawer backgrounds per theme (2026-08-13 night). The base drawer
   is white (style.css); noir had its dark override but glass/navy did not —
   so when glass became the default, the drawer went white-on-white. The
   selects moved into the drawer inherit each theme's .lang-toggle colors,
   which are designed for dark surfaces on the dark themes. */
@media (max-width: 980px) {
  html[data-theme="glass"] .navbar-menu { background: #0B0C12 !important; box-shadow: -16px 0 40px rgba(0,0,0,.5) !important; }
  html[data-theme="navy"] .navbar-menu { background: #0E1526 !important; box-shadow: -16px 0 40px rgba(0,0,0,.5) !important; }
  html[data-theme="sakura"] .navbar-menu { background: #FFFBFA !important; }
  html[data-theme="glass"] .navbar-menu a { border-bottom-color: rgba(255,255,255,.08) !important; }
  html[data-theme="navy"] .navbar-menu a { border-bottom-color: rgba(201,162,39,.18) !important; }
  html[data-theme="noir"] .navbar-menu a { border-bottom-color: rgba(255,255,255,.08) !important; }
  html[data-theme="glass"] .drawer-controls, html[data-theme="navy"] .drawer-controls,
  html[data-theme="noir"] .drawer-controls { border-top-color: rgba(255,255,255,.12) !important; }
}