*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg:#000; --s1:#0A0A0F; --s2:#111118;
      --tx1:#F4F4F8; --tx2:#A0A6BC; --tx3:#6B7280;
      --blue:#F26522; --amber:#26A7A7; --green:#5FD1D1; --purple:#FF8F5E; --red:#1A1A1A;
      --orange:#F26522; --orange-light:#FF8F5E; --teal:#26A7A7; --teal-light:#5FD1D1; --black:#1A1A1A;
    }
    html { color-scheme: light; }
    html[data-theme="dark"] { color-scheme: dark; }
    body {
      font-family: "Poppins", sans-serif; font-size: 16px;
      background: var(--bg); min-height: 100vh; color: var(--tx1);
      -webkit-font-smoothing: antialiased; overflow-x: hidden;
    }
    body::before {
      content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
      background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(242,101,34,.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(255,143,94,.06) 0%, transparent 60%);
    }
    body::after {
      content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
      background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 32px 32px;
    }
    /* Break uit WP block-thema's constrained layout (has-global-padding) zodat
       de configurator altijd centraal op de viewport staat, ook op mobiel. */
    .glasconfigurator-container {
      position: relative;
      left: calc(50% - 50vw);
      width: 100vw;
      max-width: 100vw;
      margin-left: 0;
      margin-right: 0;
    }
    #root {
      position:relative; z-index:1; max-width:760px; margin:24px auto; padding:40px 28px 64px;
      min-height:calc(100vh - 48px);
    }
    html[data-theme="dark"] #root {
      max-width:720px; margin:0 auto; padding:48px 22px 72px; min-height:100vh;
    }
    @keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
    .fade{animation:fadeUp .4s cubic-bezier(.22,.68,0,1.2) both}
    .d1{animation-delay:.05s} .d2{animation-delay:.10s} .d3{animation-delay:.15s}
    .grad-border {
      background: linear-gradient(var(--s2),var(--s2)) padding-box,
                  linear-gradient(135deg,#F26522,#FF8F5E,#26A7A7) border-box;
      border: 1px solid transparent;
    }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; }
    input[type=number] { -moz-appearance:textfield; }
    ::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-thumb{background:#27272A;border-radius:99px}
    html { overflow-x: hidden; }

    /* ── Mobile responsive ── */
    @media (max-width: 560px) {
      #root { padding: 28px 14px 56px; }
      .flex-mob { flex-direction: column !important; align-items: stretch !important; }
      .diag-mob { max-width: 100% !important; width: 100% !important; flex-shrink: 1 !important; }
      .grid4-mob { grid-template-columns: 1fr 1fr !important; }
      .formula-mob { overflow-x: auto; word-break: break-word; white-space: normal !important; }
    }

    /* ── Lege invoerveld animatie ── */
    @keyframes inputGlow {
      0%,100% { box-shadow: 0 0 0 1.5px rgba(38,167,167,0),   0 0  0px rgba(38,167,167,0); }
      50%      { box-shadow: 0 0 0 2px   rgba(38,167,167,.55), 0 0 18px rgba(38,167,167,.18); }
    }
    @keyframes arrowBounce {
      0%,100% { transform: translateX(0); opacity:.7; }
      50%     { transform: translateX(4px); opacity:1; }
    }
    .input-empty-wrap { animation: inputGlow 2s ease-in-out infinite; }
    .input-empty-wrap.d0 { animation-delay: 0s; }
    .input-empty-wrap.d1 { animation-delay: .35s; }
    .input-empty-wrap.d2 { animation-delay: .70s; }
    .input-hint-arrow { display:inline-block; animation: arrowBounce 1.4s ease-in-out infinite; }
    @keyframes pinShake {
      0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)}
      40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)}
    }
    .pin-shake { animation: pinShake .5s ease both; }

    @keyframes gswFlashIn {
      0%   { opacity:0; transform: scale(.85) translateY(-3px); }
      60%  { opacity:1; transform: scale(1.06) translateY(0); }
      100% { opacity:1; transform: scale(1) translateY(0); }
    }

    /* ── Dag/Nacht thema ── */
    /* ── LIGHT THEME (default) — Buitenglas.nl stijl: wit canvas, lichte kaders ── */
    body { background: #F4F5F7; }
    body::before {
      background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(15,23,42,.03) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(15,23,42,.02) 0%, transparent 60%);
    }
    body::after {
      background-image: radial-gradient(circle, rgba(15,23,42,.035) 1px, transparent 1px);
      background-size: 32px 32px;
    }
    /* Invert-filter maakt de donkere inline-styles (cards, tekst, borders) licht — identiek aan buitenglas.nl */
    #root { filter: invert(1) hue-rotate(180deg); }
    /* Herstel afbeeldingen zodat ze niet dubbel-geïnverteerd worden */
    #root img, #root video { filter: invert(1) hue-rotate(180deg); }

    /* ── DARK THEME (opt-in) ── */
    html[data-theme="dark"] body { background: var(--bg); }
    html[data-theme="dark"] body::before {
      background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(242,101,34,.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(255,143,94,.06) 0%, transparent 60%);
    }
    html[data-theme="dark"] body::after {
      background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
    }
    html[data-theme="dark"] #root { filter: none; }
    html[data-theme="dark"] #root img, html[data-theme="dark"] #root video { filter: none; }

    /* Modals gerenderd via portal naar document.body — volg dezelfde invert-logica als #root,
       zodat position:fixed niet breekt door filter op een voorouder (filter creëert een
       containing block, waardoor het modal bij klikken onderaan de pagina buiten beeld kan verschijnen). */
    .modal-portal { filter: invert(1) hue-rotate(180deg); }
    .modal-portal img, .modal-portal video { filter: invert(1) hue-rotate(180deg); }
    html[data-theme="dark"] .modal-portal { filter: none; }
    html[data-theme="dark"] .modal-portal img, html[data-theme="dark"] .modal-portal video { filter: none; }

    .theme-toggle {
      position: fixed; top: 14px; right: 14px; z-index: 100;
      width: 42px; height: 42px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      background: #FFFFFF;
      border: 1px solid #E5E7EB;
      color: #1F2937; cursor: pointer;
      box-shadow: 0 1px 2px rgba(15,23,42,.06);
      transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .theme-toggle:hover { background: #F9FAFB; border-color: #D1D5DB; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15,23,42,.08); }
    .theme-toggle svg { width: 20px; height: 20px; }
    html[data-theme="dark"] .theme-toggle {
      background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color:#F4F4F8; box-shadow:none; backdrop-filter: blur(8px);
    }
    html[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }

    /* ── Opvulprofiel banner: via portal buiten #root, zodat de invert-filter nooit van toepassing is ── */
    #ferrari-portal { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 50; }
    #ferrari-portal > * { pointer-events: auto; }

    /* ── Backpanel (Admin) ── */
    /* Un-invert native color picker zodat de swatches en picker-popup de juiste kleur tonen in dag-modus */
    #root .admin-panel input[type="color"] { filter: invert(1) hue-rotate(180deg); }
    html[data-theme="dark"] #root .admin-panel input[type="color"] { filter: none; }
    /* Inmeet-kader illustratie: un-invert zodat witte pergola met zwarte outlines wit blijft in dag-modus */
    #root .ikd-wrap { filter: invert(1) hue-rotate(180deg); }
    html[data-theme="dark"] #root .ikd-wrap { filter: none; }
    /* Native color picker: verberg interne padding zodat de kleur het hele vlak vult */
    #root .admin-panel input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
    #root .admin-panel input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
    #root .admin-panel input[type="color"]::-moz-color-swatch { border: none; border-radius: 5px; }
    /* Alle grijze tekst in het backpanel forceren naar wit → inverteert naar puur zwart in dag-modus */
    .admin-panel [style*="#6B7280"],
    .admin-panel [style*="#A0A6BC"],
    .admin-panel [style*="#8B8FA8"] { color: #FFFFFF !important; }
    /* Oranje vakken/knoppen in het backpanel: forceer tekst naar wit → rendert als puur zwart in dag-modus */
    .admin-panel [style*="rgba(242, 101, 34"],
    .admin-panel [style*="rgb(242, 101, 34)"],
    .admin-panel [style*="#F26522"],
    .admin-panel [style*="#1A1A1A"],
    .admin-panel [style*="rgb(26, 26, 26)"] { color: #FFFFFF !important; }