/* ANANEO dark mode — shared by every page. Controlled by html[data-theme="dark"]. */
  html[data-theme="dark"] { color-scheme: dark;
    --sky: #0a171d; --mint: #0b1f1c; --cream: #0c1a20;
    --ink: #e8f1f4; --slate: #9fb2bb; --card: #12252d; --edge: #25404b; --mist: #10222a;
    --accent: #2fe08f;
  }

  /* ===== PACKAGES PAGE ONLY =====
     Scoped with body:has(#rocker): only applies on the page that contains the
     HYBRID / GRID-TIED switch. No other page is touched. */
  html[data-theme="dark"] body:has(#rocker) {
    --surface: rgba(18, 37, 45, .78); --surface-solid: #12252d; --line: #25404b; --bg: #0c1a20;
  }
  html[data-theme="dark"] body:has(#rocker) [style*="rgba(255,255,255,0.7)"] { background: rgba(18, 37, 45, .75) !important; }
  html[data-theme="dark"] body:has(#rocker) .rocker { background: rgba(18, 37, 45, .85); box-shadow: inset 0 2px 8px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.3); }
  html[data-theme="dark"] body:has(#rocker) .ticker-track { background: var(--card); }
  html[data-theme="dark"] body:has(#rocker) .spec-card { box-shadow: 0 8px 32px rgba(0,0,0,.35); }
  html[data-theme="dark"] body:has(#rocker) .spec-cta:hover { color: #0a171d; }

  /* page background + text */
  html[data-theme="dark"] body {
    background:
      radial-gradient(ellipse 55% 40% at 12% 0%, rgba(242,184,42,.06), transparent 60%),
      radial-gradient(ellipse 50% 45% at 92% 15%, rgba(25,199,224,.07), transparent 60%),
      linear-gradient(160deg, var(--sky) 0%, var(--mint) 55%, var(--cream) 100%) !important;
    color: var(--ink);
  }
  html[data-theme="dark"] .hero-grid {
    background-image: linear-gradient(rgba(120,200,230,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(120,200,230,.08) 1px, transparent 1px);
  }

  /* cards, glass panels, buttons */
  html[data-theme="dark"] .glass-card,
  html[data-theme="dark"] .card { background: rgba(18, 37, 45, .82); border-color: var(--edge); box-shadow: 0 8px 32px rgba(0,0,0,.35); }
  html[data-theme="dark"] .card h3 { color: var(--ink); }
  html[data-theme="dark"] .card-description { color: var(--slate); }
  html[data-theme="dark"] .card a { color: var(--accent); }
  html[data-theme="dark"] .btn-ghost { background: var(--card); color: var(--ink); border-color: var(--edge); }
  html[data-theme="dark"] .btn-ghost:hover { background: var(--mist); }
  html[data-theme="dark"] .ph-media { border-color: var(--edge); }

  /* Tailwind utility colours used on the pages */
  html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-600,
  html[data-theme="dark"] .text-gray-700 { color: var(--slate) !important; }
  html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-gray-900 { color: var(--ink) !important; }
  html[data-theme="dark"] [class*="bg-white"]:not(.gallery-watermark):not(.chat-widget) { background-color: rgba(18,37,45,.7) !important; }

  /* header (injected by components.js) */
  html[data-theme="dark"] header { background: rgba(9, 20, 26, .9) !important; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
  html[data-theme="dark"] header.scrolled { background: rgba(9, 20, 26, .96) !important; }
  html[data-theme="dark"] header :where(a, span, button, li, i):not(.btn-deep) { color: var(--ink); }

  /* active page: green text in desktop nav (the :where rule above would otherwise override it) */
  html[data-theme="dark"] header nav a.text-green-600,
  html[data-theme="dark"] header nav button.text-green-600 { color: var(--accent); }
  html[data-theme="dark"] header nav a:hover,
  html[data-theme="dark"] header nav button:hover { color: var(--accent); }

  /* desktop dropdown: icon tiles, hover + active rows */
  html[data-theme="dark"] header .nav-dropdown-menu a > span:first-child { background: rgba(47, 224, 143, .14); }
  html[data-theme="dark"] header .nav-dropdown-menu a > span:first-child i { color: var(--accent); }
  html[data-theme="dark"] header .nav-dropdown-menu a:hover { background: rgba(255, 255, 255, .06); }
  html[data-theme="dark"] header .nav-dropdown-menu a.bg-green-50 { background: rgba(47, 224, 143, .12); }
  html[data-theme="dark"] header .nav-dropdown-menu a .text-green-700 { color: var(--accent); }
  html[data-theme="dark"] header .nav-dropdown-menu > div { border-color: var(--edge); }

  /* mobile menu (uses a light gradient by default) */
  html[data-theme="dark"] header #mobile-menu {
    background: linear-gradient(180deg, #0f2a27 0%, #0d1f27 55%, #0a171d 100%);
    border-color: var(--edge);
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
  }
  html[data-theme="dark"] header #mobile-menu .border-gray-300\/70,
  html[data-theme="dark"] header #mobile-menu [class*="border-gray-300"] { border-color: var(--edge) !important; }
  html[data-theme="dark"] header .mobile-accordion-toggle i,
  html[data-theme="dark"] header #mobile-menu li > a i { color: var(--accent); }
  html[data-theme="dark"] header #mobile-menu a.text-green-600,
  html[data-theme="dark"] header .mobile-accordion-toggle.text-green-600 { color: var(--accent); }
  html[data-theme="dark"] header #mobile-menu a.bg-green-600,
  html[data-theme="dark"] header #mobile-menu a.bg-green-600 i { color: #fff; }
  html[data-theme="dark"] header #menu-toggle:hover { background: rgba(255,255,255,.08); }

  /* chat widget */
  html[data-theme="dark"] .chat-widget { background: #0f1e25; border-color: var(--edge); }
  html[data-theme="dark"] .chat-messages { background: #0b171d; }
  html[data-theme="dark"] .chat-messages .msg.bot { background: #16303a; border-color: var(--edge); color: var(--ink); }
  html[data-theme="dark"] .chat-input-wrap { background: #0f1e25; border-color: var(--edge); }
  html[data-theme="dark"] .chat-input-wrap input { background: #0b171d; color: var(--ink); border-color: var(--edge); }

  /* loader */
  html[data-theme="dark"] #loader { background: #0a161c; }
  html[data-theme="dark"] .ld-logo .ld-main { filter: brightness(1.7); }
  html[data-theme="dark"] .ld-ghost { mix-blend-mode: screen; }
  html[data-theme="dark"] .ld-pct { color: #6f838c; }

  /* form fields (calculator, booking forms) */
  html[data-theme="dark"] .input,
  html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="number"],
  html[data-theme="dark"] input[type="email"], html[data-theme="dark"] select, html[data-theme="dark"] textarea {
    background: #0b171d; color: var(--ink); border-color: var(--edge);
  }
  html[data-theme="dark"] .input:focus { border-color: #3aa6dd; box-shadow: 0 0 0 3px rgba(58,166,221,.2); }
  html[data-theme="dark"] ::placeholder { color: #6f838c; opacity: 1; }
  html[data-theme="dark"] select option { background: #0f1e25; color: var(--ink); }

  /* calculator: contact tiles, mode switch, check items */
  html[data-theme="dark"] .contact-tile { background: var(--card); border-color: var(--edge); color: var(--ink); box-shadow: none; }
  html[data-theme="dark"] .contact-tile .number { color: var(--ink); }
  html[data-theme="dark"] .contact-tile .badge-primary { color: #5cc4f0; }
  html[data-theme="dark"] .mode-btn.shadow-sm[class*="bg-white"] { background-color: #1d3a46 !important; color: var(--ink) !important; }
  html[data-theme="dark"] .text-solar-600 { color: #5cc4f0 !important; }
  html[data-theme="dark"] .accent-solar { accent-color: #3aa6dd !important; }

  /* policy modal (Privacy / Terms, injected by components.js) */
  html[data-theme="dark"] .modal-content { background: var(--card); border: 1px solid var(--edge); }
  html[data-theme="dark"] .modal-content h1,
  html[data-theme="dark"] .modal-content h2 { color: var(--ink); }
  html[data-theme="dark"] .modal-content p,
  html[data-theme="dark"] .modal-content ul { color: var(--slate); }
  html[data-theme="dark"] .modal-content .modal-close { background: var(--mist); color: var(--ink); }
  html[data-theme="dark"] .modal-content .modal-close:hover { background: var(--edge); }

  /* ===== FAQ PAGE ONLY =====
     Scoped with body:has(#faq-list): only applies on the FAQ page. */
  html[data-theme="dark"] body:has(#faq-list) .faq-group,
  html[data-theme="dark"] body:has(#faq-list) .faq-toc-card {
    background: rgba(18, 37, 45, .82); border-color: var(--edge); box-shadow: 0 8px 32px rgba(0,0,0,.35);
  }
  html[data-theme="dark"] body:has(#faq-list) .faq-item + .faq-item { border-top-color: var(--edge); }
  html[data-theme="dark"] body:has(#faq-list) .faq-num { color: rgba(159, 178, 187, .7); }
  html[data-theme="dark"] body:has(#faq-list) .faq-heading .faq-num { color: #5cc4f0; }
  html[data-theme="dark"] body:has(#faq-list) .faq-toc a:hover { background: rgba(255,255,255,.06); color: var(--ink); }
  html[data-theme="dark"] body:has(#faq-list) .faq-answer th { background: rgba(255,255,255,.06); color: var(--ink); }
  html[data-theme="dark"] body:has(#faq-list) .faq-answer td,
  html[data-theme="dark"] body:has(#faq-list) .faq-answer th { border-color: var(--edge); }
  html[data-theme="dark"] body:has(#faq-list) .section-tag { color: #5cc4f0; background: rgba(58,166,221,.14); }
  html[data-theme="dark"] body:has(#faq-list) .faq-item.active .faq-icon { color: #5cc4f0; }
  html[data-theme="dark"] body:has(#faq-list) .lang-btn:hover { background: rgba(58,166,221,.14); color: var(--ink); }
  @media (max-width: 1023px) {
    html[data-theme="dark"] body:has(#faq-list) .faq-toc a { background: rgba(255,255,255,.05); border-color: var(--edge); }
  }

  /* ===== ABOUT PAGE ONLY =====
     Scoped with body:has(.cert-card): only applies on the page with certificate cards. */
  html[data-theme="dark"] body:has(.cert-card) .cert-card {
    background: rgba(18, 37, 45, .82); border-color: var(--edge); box-shadow: 0 8px 32px rgba(0,0,0,.35);
  }
  html[data-theme="dark"] body:has(.cert-card) .cert-card:hover { box-shadow: 0 24px 48px rgba(0,0,0,.5); }

  /* ===== PRODUCT DETAIL PAGES ONLY =====
     Scoped with body:has(.back-btn): only pages that have the "Back to catalog" button. */
  html[data-theme="dark"] body:has(.back-btn) .back-btn {
    background: rgba(18, 37, 45, .88); border-color: var(--edge); color: var(--ink);
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
  }
  html[data-theme="dark"] body:has(.back-btn) .back-btn:hover {
    background: var(--mist); color: #5cc4f0; box-shadow: 0 10px 22px rgba(0,0,0,.5);
  }
  html[data-theme="dark"] body:has(.back-btn) .gallery-frame,
  html[data-theme="dark"] body:has(.back-btn) .spec-media {
    background: linear-gradient(150deg, #16303a, #10222a); border-color: var(--edge);
  }
  html[data-theme="dark"] body:has(.back-btn) .gallery-frame { box-shadow: 0 14px 34px rgba(0,0,0,.4); }
  html[data-theme="dark"] body:has(.back-btn) .spec-card { box-shadow: 0 10px 28px rgba(0,0,0,.35); }
  html[data-theme="dark"] body:has(.back-btn) .spec-card:hover { box-shadow: 0 22px 44px rgba(0,0,0,.55); }
  html[data-theme="dark"] body:has(.back-btn) .read-link:hover { box-shadow: 0 10px 22px rgba(0,0,0,.45); }
  html[data-theme="dark"] body:has(.back-btn) .spec-media img,
  html[data-theme="dark"] body:has(.back-btn) .gallery-frame img { filter: drop-shadow(0 10px 16px rgba(0,0,0,.45)); }

  /* ----- more product-page surfaces (same scope: body:has(.back-btn)) ----- */
  html[data-theme="dark"] body:has(.back-btn) .comp-card {
    background: rgba(18, 37, 45, .78); border-color: var(--edge);
  }
  html[data-theme="dark"] body:has(.back-btn) .comp-card:hover {
    border-color: #3aa6dd; box-shadow: 0 8px 20px rgba(0,0,0,.4);
  }
  html[data-theme="dark"] body:has(.back-btn) .drawing-frame {
    background: rgba(18, 37, 45, .55); border-color: rgba(92, 196, 240, .35); box-shadow: 0 14px 34px rgba(0,0,0,.4);
  }
  html[data-theme="dark"] body:has(.back-btn) [class*="bg-[#f2f8fc]"] { background: rgba(18, 37, 45, .78); }
  html[data-theme="dark"] body:has(.back-btn) [class*="border-[#dde8ec]"],
  html[data-theme="dark"] body:has(.back-btn) [class*="border-[#c9dbe2]"] { border-color: var(--edge); }
  html[data-theme="dark"] body:has(.back-btn) .section-chip { color: #5cc4f0; background: rgba(58,166,221,.14); border-color: rgba(58,166,221,.3); }
  html[data-theme="dark"] body:has(.back-btn) .thumb { border-color: var(--edge); }
  html[data-theme="dark"] body:has(.back-btn) .know-row:hover,
  html[data-theme="dark"] body:has(.back-btn) .product-card:hover { box-shadow: 0 14px 30px rgba(0,0,0,.5); }

  html[data-theme="dark"] body:has(.back-btn) .protection-card {
    background: rgba(18, 37, 45, .78); border-color: var(--edge);
  }
  html[data-theme="dark"] body:has(.back-btn) .protection-card:hover {
    border-color: #3aa6dd; box-shadow: 0 8px 20px rgba(0,0,0,.4);
  }

  /* ----- article pages (same scope: body:has(.back-btn)) ----- */
  html[data-theme="dark"] body:has(.back-btn) .verdict-card {
    background: linear-gradient(150deg, #16303a, #10222a); border-color: var(--edge);
  }
  html[data-theme="dark"] body:has(.back-btn) .vs-divider { background: #1d3a46; color: var(--ink); }
  html[data-theme="dark"] body:has(.back-btn) .vs-strip,
  html[data-theme="dark"] body:has(.back-btn) .config-card { box-shadow: 0 10px 28px rgba(0,0,0,.35); }
  html[data-theme="dark"] body:has(.back-btn) .config-card:hover { box-shadow: 0 18px 38px rgba(0,0,0,.55); }
  html[data-theme="dark"] body:has(.back-btn) .hero-frame { box-shadow: 0 14px 34px rgba(0,0,0,.45); }

  /* ===== HOME PAGE ONLY =====
     Scoped with body:has(#gallery-dots): only the home page has the gallery slider. */
  /* CTA band: its inline gradient starts from var(--ink), which is light in dark mode */
  html[data-theme="dark"] body:has(#gallery-dots) [style*="linear-gradient(135deg, var(--ink)"] {
    background: linear-gradient(135deg, #12252d, #0c1a20) !important;
    border: 1px solid var(--edge);
  }
  /* small overlapping hero photo: white frame -> dark frame */
  html[data-theme="dark"] body:has(#gallery-dots) .hero-media-sub { border-color: var(--card); }
  /* "Calculator" link inside the dark energy-flow card */
  html[data-theme="dark"] body:has(#gallery-dots) a[href="/calculator"][style*="095ebf"] { color: #5cc4f0 !important; }

  /* ===== HERO PARTNER BAR (home page) =====
     Scoped with body:has(.partner-strip). Swaps the Solea logo and darkens the bar. */
  html[data-theme="dark"] body:has(.partner-strip) .partner-logo .logo-light { display: none; }
  html[data-theme="dark"] body:has(.partner-strip) .partner-logo .logo-dark { display: block; }
  html[data-theme="dark"] body:has(.partner-strip) .partner-bar {
    background: rgba(18, 37, 45, .88); border-color: var(--edge); box-shadow: 0 12px 32px rgba(0,0,0,.4);
  }
  html[data-theme="dark"] body:has(.partner-strip) .partner-bar::after {
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent);
  }

  /* the hover spotlight from the UI-enhance block would turn cards white: keep it dark */
  html[data-theme="dark"] .glass-card:not([style*="linear-gradient"]):hover {
    background:
      radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(242,184,42,.14), rgba(25,199,224,.07) 40%, transparent 65%),
      rgba(22, 44, 53, .9);
  }

  /* smooth colour change when the button is clicked */
  html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
  }

  /* toggle button */
  #theme-toggle {
    position: fixed; left: 20px; bottom: 20px; z-index: 9990; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(34,52,61,.15);
    background: rgba(255,255,255,.9); backdrop-filter: blur(10px); color: #22343d;
    box-shadow: 0 8px 24px rgba(0,0,0,.15); transition: transform .2s ease;
  }
  #theme-toggle:hover { transform: scale(1.08) rotate(-8deg); }
  #theme-toggle svg { width: 22px; height: 22px; }
  #theme-toggle .i-sun { display: none; }
  html[data-theme="dark"] #theme-toggle { background: rgba(18,37,45,.92); border-color: var(--edge); color: #f2b82a; }
  html[data-theme="dark"] #theme-toggle .i-sun { display: block; }
  html[data-theme="dark"] #theme-toggle .i-moon { display: none; }
  @media (max-width: 480px) { #theme-toggle { left: 14px; bottom: 14px; width: 42px; height: 42px; } }