:root {
    --pp-app-bg: #f5f6fa;
    --pp-surface: #ffffff;
    --pp-surface-raised: #ffffff;
    --pp-surface-soft: #f8fafc;
    --pp-surface-muted: #f1f5f9;
    --pp-border: #dbe3ee;
    --pp-border-strong: #c7d2e0;
    --pp-text: #172033;
    --pp-text-muted: #64748b;
    --pp-input-bg: #ffffff;
    --pp-navbar-bg: #1f2328;
    --pp-shadow-color: rgba(15, 23, 42, .12);
    --pp-accent: #2563eb;
    --pp-accent-soft: #eaf2ff;
    --pp-accent-contrast: #ffffff;
}

html[data-pp-theme="dark"] {
    --pp-app-bg: #0b1120;
    --pp-surface: #111827;
    --pp-surface-raised: #172033;
    --pp-surface-soft: #141d2e;
    --pp-surface-muted: #1e293b;
    --pp-border: #2b3a52;
    --pp-border-strong: #3b4b65;
    --pp-text: #e7edf7;
    --pp-text-muted: #9cabc1;
    --pp-input-bg: #101827;
    --pp-navbar-bg: #080d17;
    --pp-shadow-color: rgba(0, 0, 0, .42);
    --pp-accent: #60a5fa;
    --pp-accent-soft: #172b4d;
    --pp-accent-contrast: #08111f;
    --bs-body-bg: var(--pp-app-bg);
    --bs-body-color: var(--pp-text);
    --bs-border-color: var(--pp-border);
    --bs-secondary-color: var(--pp-text-muted);
    --bs-tertiary-bg: var(--pp-surface-soft);
}

/* Dark palette variants keep the public light/dark contract stable while the
   separate choice attribute selects a distinct builder appearance. */
html[data-pp-theme-choice="dracula"] {
    --pp-app-bg: #282a36;
    --pp-surface: #30323f;
    --pp-surface-raised: #3a3d4d;
    --pp-surface-soft: #343746;
    --pp-surface-muted: #44475a;
    --pp-border: #4d5062;
    --pp-border-strong: #6272a4;
    --pp-text: #f8f8f2;
    --pp-text-muted: #c4c6d0;
    --pp-input-bg: #21222c;
    --pp-navbar-bg: #191a21;
    --pp-shadow-color: rgba(15, 15, 24, .48);
    --pp-accent: #bd93f9;
    --pp-accent-soft: #44345f;
    --pp-accent-contrast: #191a21;
}

html[data-pp-theme-choice="gruvbox"] {
    --pp-app-bg: #1d2021;
    --pp-surface: #282828;
    --pp-surface-raised: #32302f;
    --pp-surface-soft: #3c3836;
    --pp-surface-muted: #504945;
    --pp-border: #504945;
    --pp-border-strong: #665c54;
    --pp-text: #ebdbb2;
    --pp-text-muted: #bdae93;
    --pp-input-bg: #1d2021;
    --pp-navbar-bg: #141617;
    --pp-shadow-color: rgba(10, 9, 8, .5);
    --pp-accent: #fe8019;
    --pp-accent-soft: #4a3022;
    --pp-accent-contrast: #1d2021;
}

/* Rosé Pine — the muted, soothing "soho vibes" palette adored by developers:
   a warm mauve-charcoal canvas with a soft iris accent. Low-contrast and
   exceptionally easy on the eyes for long editing sessions. */
html[data-pp-theme-choice="rosepine"] {
    --pp-app-bg: #191724;
    --pp-surface: #1f1d2e;
    --pp-surface-raised: #26233a;
    --pp-surface-soft: #232132;
    --pp-surface-muted: #2a2740;
    --pp-border: #302c47;
    --pp-border-strong: #44415a;
    --pp-text: #e0def4;
    --pp-text-muted: #a6a1c6;
    --pp-input-bg: #16141f;
    --pp-navbar-bg: #14121d;
    --pp-shadow-color: rgba(11, 9, 18, .52);
    --pp-accent: #c4a7e7;
    --pp-accent-soft: #393152;
    --pp-accent-contrast: #191724;
}

html[data-pp-theme="dark"] body.ppd-body {
    --ppd-border: var(--pp-border);
    --ppd-border-soft: #243248;
    --ppd-soft: var(--pp-surface-muted);
    --ppd-bg: var(--pp-app-bg);
    --ppd-surface: var(--pp-surface);
    --ppd-text: var(--pp-text);
    --ppd-muted: var(--pp-text-muted);
    --ppd-primary-soft: #172b4d;
    --ppd-primary-border: #315b92;
    --ppd-shadow: 0 18px 40px rgba(0, 0, 0, .34);
    --ppd-shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
}

html[data-pp-theme="dark"] body.security-module {
    --security-ink: var(--pp-text);
    --security-muted: var(--pp-text-muted);
    --security-line: var(--pp-border);
    --security-soft: var(--pp-surface-soft);
    --security-canvas: var(--pp-app-bg);
    --security-panel: var(--pp-surface);
    --security-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}

html[data-pp-theme="dark"] .projects-hub {
    --hub-border: var(--pp-border);
    --hub-muted: var(--pp-text-muted);
    --hub-ink: var(--pp-text);
}

body {
    background-color: var(--pp-app-bg);
    color: var(--pp-text);
    transition: background-color .2s ease, color .2s ease;
}

.navbar-top { background: var(--pp-navbar-bg) !important; }

.pp-theme-picker { position: relative; }
.pp-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 32px;
    padding: .2rem .48rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    color: #f8fafc;
    background: rgba(255, 255, 255, .07);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.pp-theme-toggle:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .55); }
.pp-theme-toggle:active { transform: scale(.97); }
.pp-theme-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--pp-accent) 48%, transparent); outline-offset: 2px; }
.pp-theme-toggle-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #f8fafc; background: rgba(255,255,255,.13); }
.pp-theme-toggle-icon i { font-size: .72rem; line-height: 1; }
.pp-theme-toggle-label { min-width: 42px; text-align: left; }
.pp-theme-toggle-chevron { font-size: .62rem; opacity: .76; transition: transform .18s ease; }
.pp-theme-toggle[aria-expanded="true"] .pp-theme-toggle-chevron { transform: rotate(180deg); }

.pp-theme-menu {
    position: absolute;
    z-index: 1090;
    top: calc(100% + 8px);
    right: 0;
    width: min(282px, calc(100vw - 24px));
    padding: 6px;
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    background: var(--pp-surface-raised);
    box-shadow: 0 18px 44px var(--pp-shadow-color);
    color: var(--pp-text);
}
.pp-theme-menu[hidden] { display: none !important; }
.pp-theme-option {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--pp-text);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.pp-theme-option:hover,
.pp-theme-option:focus-visible { background: var(--pp-surface-soft); border-color: var(--pp-border); outline: none; }
.pp-theme-option:active { transform: scale(.985); }
.pp-theme-option[aria-checked="true"] { background: var(--pp-accent-soft); border-color: color-mix(in srgb, var(--pp-accent) 45%, var(--pp-border)); }
.pp-theme-option > span:nth-child(2) { display: grid; min-width: 0; }
.pp-theme-option strong { color: var(--pp-text); font-size: .78rem; line-height: 1.25; }
.pp-theme-option small { color: var(--pp-text-muted); font-size: .66rem; line-height: 1.3; }
.pp-theme-swatch { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--pp-border); border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.pp-theme-swatch-system { color: #334155; background: linear-gradient(135deg, #f8fafc 50%, #172033 50%); }
.pp-theme-swatch-light { color: #d97706; background: #fff; }
.pp-theme-swatch-midnight { color: #93c5fd; background: #0b1120; }
.pp-theme-swatch-dracula { color: #bd93f9; background: linear-gradient(135deg, #282a36 52%, #44475a 52%); }
.pp-theme-swatch-gruvbox { color: #fe8019; background: linear-gradient(135deg, #282828 52%, #3c3836 52%); }
.pp-theme-swatch-rosepine { color: #c4a7e7; background: linear-gradient(135deg, #191724 52%, #26233a 52%); }
.pp-theme-option-check { color: var(--pp-accent); opacity: 0; }
.pp-theme-option[aria-checked="true"] .pp-theme-option-check { opacity: 1; }

@media (max-width: 575.98px) {
    .pp-theme-toggle { padding-inline: .35rem; }
    .pp-theme-toggle-chevron { display: none; }
}

/* Modules with their own semantic dark tokens inherit the selected palette.
   This remains editor-only and does not change generated application themes. */
html:is([data-pp-theme-choice="dracula"], [data-pp-theme-choice="gruvbox"], [data-pp-theme-choice="rosepine"]) body.query-module {
    --query-canvas: var(--pp-app-bg) !important;
    --query-surface: var(--pp-surface) !important;
    --query-surface-soft: var(--pp-surface-soft) !important;
    --query-surface-raised: var(--pp-surface-raised) !important;
    --query-border: var(--pp-border) !important;
    --query-border-strong: var(--pp-border-strong) !important;
    --query-text: var(--pp-text) !important;
    --query-muted: var(--pp-text-muted) !important;
    --query-input: var(--pp-input-bg) !important;
    --query-hover: var(--pp-surface-muted) !important;
    --query-selected: var(--pp-accent-soft) !important;
    --query-primary: var(--pp-accent) !important;
    --query-primary-soft: var(--pp-accent-soft) !important;
    --query-shadow: 0 18px 42px var(--pp-shadow-color) !important;
}

html:is([data-pp-theme-choice="dracula"], [data-pp-theme-choice="gruvbox"], [data-pp-theme-choice="rosepine"]) body.pages-module {
    --pages-ink: var(--pp-text) !important;
    --pages-muted: var(--pp-text-muted) !important;
    --pages-line: var(--pp-border) !important;
    --pages-line-strong: var(--pp-border-strong) !important;
    --pages-surface: var(--pp-surface) !important;
    --pages-surface-soft: var(--pp-surface-soft) !important;
    --pages-surface-raised: var(--pp-surface-raised) !important;
    --pages-canvas: var(--pp-app-bg) !important;
    --pages-input: var(--pp-input-bg) !important;
    --pages-hover: var(--pp-surface-muted) !important;
    --pages-blue: var(--pp-accent) !important;
    --pages-blue-soft: var(--pp-accent-soft) !important;
    --pages-shadow: 0 18px 42px var(--pp-shadow-color) !important;
}

html:is([data-pp-theme-choice="dracula"], [data-pp-theme-choice="gruvbox"], [data-pp-theme-choice="rosepine"]) body.fields-module {
    --fields-ink: var(--pp-text) !important;
    --fields-muted: var(--pp-text-muted) !important;
    --fields-line: var(--pp-border) !important;
    --fields-line-strong: var(--pp-border-strong) !important;
    --fields-surface: var(--pp-surface) !important;
    --fields-surface-soft: var(--pp-surface-soft) !important;
    --fields-surface-raised: var(--pp-surface-raised) !important;
    --fields-canvas: var(--pp-app-bg) !important;
    --fields-input: var(--pp-input-bg) !important;
    --fields-hover: var(--pp-surface-muted) !important;
    --fields-primary: var(--pp-accent) !important;
    --fields-primary-soft: var(--pp-accent-soft) !important;
    --fields-shadow: 0 18px 42px var(--pp-shadow-color) !important;
}

html:is([data-pp-theme-choice="dracula"], [data-pp-theme-choice="gruvbox"], [data-pp-theme-choice="rosepine"]) body.misc-module {
    --misc-ink: var(--pp-text) !important;
    --misc-muted: var(--pp-text-muted) !important;
    --misc-line: var(--pp-border) !important;
    --misc-line-strong: var(--pp-border-strong) !important;
    --misc-surface: var(--pp-surface) !important;
    --misc-surface-soft: var(--pp-surface-soft) !important;
    --misc-surface-raised: var(--pp-surface-raised) !important;
    --misc-canvas: var(--pp-app-bg) !important;
    --misc-input: var(--pp-input-bg) !important;
    --misc-hover: var(--pp-surface-muted) !important;
    --misc-primary: var(--pp-accent) !important;
    --misc-primary-soft: var(--pp-accent-soft) !important;
    --misc-shadow: 0 18px 42px var(--pp-shadow-color) !important;
}

html:is([data-pp-theme-choice="dracula"], [data-pp-theme-choice="gruvbox"], [data-pp-theme-choice="rosepine"]) body.security-module {
    --security-ink: var(--pp-text) !important;
    --security-muted: var(--pp-text-muted) !important;
    --security-line: var(--pp-border) !important;
    --security-soft: var(--pp-surface-soft) !important;
    --security-canvas: var(--pp-app-bg) !important;
    --security-panel: var(--pp-surface) !important;
    --security-surface: var(--pp-surface) !important;
    --security-surface-raised: var(--pp-surface-raised) !important;
    --security-surface-soft: var(--pp-surface-soft) !important;
    --security-input: var(--pp-input-bg) !important;
    --security-hover: var(--pp-surface-muted) !important;
    --security-subtle-line: var(--pp-border) !important;
    --security-shadow: 0 18px 42px var(--pp-shadow-color) !important;
}

html:is([data-pp-theme-choice="dracula"], [data-pp-theme-choice="gruvbox"], [data-pp-theme-choice="rosepine"]) body.ppd-body {
    --ppd-border: var(--pp-border) !important;
    --ppd-border-soft: var(--pp-border) !important;
    --ppd-soft: var(--pp-surface-muted) !important;
    --ppd-bg: var(--pp-app-bg) !important;
    --ppd-surface: var(--pp-surface) !important;
    --ppd-chrome: var(--pp-surface) !important;
    --ppd-chrome-soft: var(--pp-surface-soft) !important;
    --ppd-chrome-raised: var(--pp-surface-raised) !important;
    --ppd-chrome-input: var(--pp-input-bg) !important;
    --ppd-chrome-hover: var(--pp-surface-muted) !important;
    --ppd-text: var(--pp-text) !important;
    --ppd-muted: var(--pp-text-muted) !important;
    --ppd-primary: var(--pp-accent) !important;
    --ppd-primary-soft: var(--pp-accent-soft) !important;
    --ppd-primary-border: var(--pp-border-strong) !important;
    --ppd-shadow: 0 18px 42px var(--pp-shadow-color) !important;
}

/* Shared application surfaces. Specific selectors keep the compatibility layer
   from recolouring primary/success/warning/danger components. */
html[data-pp-theme="dark"] body,
html[data-pp-theme="dark"] .main-area,
html[data-pp-theme="dark"] .main-content,
html[data-pp-theme="dark"] .right-workspace,
html[data-pp-theme="dark"] .workspace-content,
html[data-pp-theme="dark"] .ppd-workspace { background-color: var(--pp-app-bg) !important; color: var(--pp-text); }

html[data-pp-theme="dark"] :where(
    .left-panel, .panel-header, .toolbar, .card, .section-card, .action-card,
    .project-card, .form-section, .accordion-item, .accordion-button,
    .accordion-body, .modal-content, .modal-body, .modal-footer,
    .offcanvas:not(.bg-dark), .dropdown-menu:not(.dropdown-menu-dark),
    .list-group-item, .table-responsive, .security-content,
    .security-sidebar, .security-header, .security-page,
    .ob-card, .relation-section, .pane, .pane-head,
    .project-metric, .projects-toolbar, .project-hub-card,
    .project-card-footer, .projects-empty, .project-settings-nav,
    .project-settings-layout, .project-settings-panels, .guide-content,
    .guide-nav, .guide-card-grid article, .guide-steps article,
    .plugin-card, .upload-card, .help-content
) { background-color: var(--pp-surface) !important; color: var(--pp-text) !important; border-color: var(--pp-border) !important; }

html[data-pp-theme="dark"] :where(
    .panel-header, .toolbar, .card-header, .card-footer, .modal-header:not([class*="bg-"]),
    .form-section-header, .section-title, .security-nav-tools, .security-sidebar-header,
    .table-light, thead, .ppd-toolbar, .ppd-panel-head,
    .projects-tabs, .project-settings-footer, .guide-searchbar
) { background-color: var(--pp-surface-soft) !important; color: var(--pp-text) !important; border-color: var(--pp-border) !important; }

html[data-pp-theme="dark"] :where(.form-control, .form-select, .input-group-text, textarea, input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="url"]) {
    background-color: var(--pp-input-bg) !important;
    color: var(--pp-text) !important;
    border-color: var(--pp-border-strong) !important;
}
html[data-pp-theme="dark"] :where(.form-control, input, textarea)::placeholder { color: var(--pp-text-muted) !important; opacity: 1; }
html[data-pp-theme="dark"] :where(.form-control, .form-select):focus { border-color: var(--pp-accent) !important; box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--pp-accent) 20%, transparent) !important; }
html[data-pp-theme="dark"] :where(.form-control, .form-select):disabled,
html[data-pp-theme="dark"] :where(.form-control, .form-select)[readonly] { background-color: var(--pp-surface-muted) !important; color: var(--pp-text-muted) !important; }

html[data-pp-theme="dark"] :where(.table, .evh-table) { --bs-table-bg: var(--pp-surface); --bs-table-color: var(--pp-text); --bs-table-border-color: var(--pp-border); color: var(--pp-text) !important; border-color: var(--pp-border) !important; }
html[data-pp-theme="dark"] :where(.table > :not(caption) > * > *, .evh-table th, .evh-table td) { background-color: var(--pp-surface) !important; color: var(--pp-text) !important; border-color: var(--pp-border) !important; }
html[data-pp-theme="dark"] :where(.table-striped > tbody > tr:nth-of-type(odd) > *) { background-color: var(--pp-surface-soft) !important; }

html[data-pp-theme="dark"] :where(.text-dark, h1, h2, h3, h4, h5, h6, label, .form-label) { color: var(--pp-text) !important; }
html[data-pp-theme="dark"] :where(.text-muted, .text-secondary, .form-text) { color: var(--pp-text-muted) !important; }
html[data-pp-theme="dark"] :where(.border, .border-top, .border-end, .border-bottom, .border-start, hr) { border-color: var(--pp-border) !important; }
html[data-pp-theme="dark"] :where(.bg-white, .bg-light) { background-color: var(--pp-surface) !important; color: var(--pp-text) !important; }
html[data-pp-theme="dark"] :where(.shadow, .shadow-sm, .card, .modal-content, .project-card) { box-shadow: 0 12px 30px var(--pp-shadow-color) !important; }

html[data-pp-theme="dark"] .btn-close:not(.btn-close-white) { filter: invert(1) grayscale(100%) brightness(180%); }
html[data-pp-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(100%) brightness(180%); }
html[data-pp-theme="dark"] .swal2-popup { background: var(--pp-surface-raised) !important; color: var(--pp-text) !important; }
html[data-pp-theme="dark"] .swal2-title,
html[data-pp-theme="dark"] .swal2-html-container { color: var(--pp-text) !important; }

/* Module workspaces use these recurring custom shells. */
html[data-pp-theme="dark"] :where(
    .tables-sidebar, .table-list-group, .table-group, .table-item,
    .pages-shell, .pages-sidebar, .pages-main, .page-config-card,
    .fields-shell, .fields-sidebar, .fields-main,
    .query-shell, .query-sidebar, .query-workspace,
    .misc-shell, .misc-sidebar, .misc-content,
    .events-shell, .events-sidebar, .events-workspace,
    .output-shell, .finished-shell, .deploy-shell,
    .ppd-left, .ppd-right, .ppd-inspector, .ppd-canvas-wrap,
    .ppd-panel, .ppd-workbar, .ppd-ribbon, .ppd-tabs,
    .ppd-device-switch, .ppd-statusbar
) { background-color: var(--pp-surface) !important; color: var(--pp-text) !important; border-color: var(--pp-border) !important; }

/* The Designer canvas intentionally keeps the selected project theme; only the
   surrounding editor chrome changes colour mode. */
/* `button:not(.active)` — the selected tab / page-type / device is deliberately
   exempt so the module can paint it as a filled pill. Without the `:not(.active)`
   guard, this !important background made every ACTIVE control the same colour as
   its idle siblings, which is why the selected page tab AND the selected device
   were invisible in dark mode. The guard must be on EVERY button group here
   (ribbon + device switch too), not just `.ppd-tabs`. */
html[data-pp-theme="dark"] :where(.ppd-icon-btn, .ppd-tabs button:not(.active), .ppd-ribbon button:not(.active), .ppd-device-switch button:not(.active), .ppd-preview-btn, .ppd-properties-btn) {
    background-color: var(--pp-surface-raised) !important;
    color: var(--pp-text) !important;
    border-color: var(--pp-border) !important;
}
html[data-pp-theme="dark"] :where(.ppd-panel .ppd-section-title, .ppd-panel .ppd-list-item, .ppd-insp-group > summary, .ppd-back, .ppd-icon-pick) {
    background-color: var(--pp-surface) !important;
    color: var(--pp-text) !important;
    border-color: var(--pp-border) !important;
}
html[data-pp-theme="dark"] :where(.ppd-panel .ppd-section-title:hover, .ppd-panel .ppd-list-item:hover, .ppd-insp-group > summary:hover) {
    background-color: var(--pp-surface-muted) !important;
}

html[data-pp-theme="dark"] :where(
    .security-sidebar .accordion-button, .security-nav-tools,
    .social-policy-grid > label, .social-provider-card,
    .social-provider-card footer, .social-auth-footer,
    .security-guide-grid article, .security-guide-nav,
    .security-guide-hero, .security-guide-section
) { background-color: var(--pp-surface) !important; color: var(--pp-text) !important; border-color: var(--pp-border) !important; }

html[data-pp-theme="dark"] :where(.project-chip, .projects-tabs button span, .project-progress, .projects-view-switch) {
    background-color: var(--pp-surface-muted) !important;
    color: var(--pp-text-muted) !important;
    border-color: var(--pp-border) !important;
}
html[data-pp-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--pp-accent); }
html[data-pp-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: color-mix(in srgb, var(--pp-accent) 72%, white); }

/*
 * Module theme contract
 * ---------------------
 * Module views consume these aliases instead of owning a second light/dark
 * palette.  The aliases intentionally point at the active semantic --pp-*
 * tokens for every theme choice, so adding a future theme only requires a
 * token set in this file; module CSS and modal CSS need no follow-up pass.
 */
body.misc-module {
    --misc-ink: var(--pp-text) !important;
    --misc-muted: var(--pp-text-muted) !important;
    --misc-line: var(--pp-border) !important;
    --misc-line-strong: var(--pp-border-strong) !important;
    --misc-surface: var(--pp-surface) !important;
    --misc-surface-soft: var(--pp-surface-soft) !important;
    --misc-surface-raised: var(--pp-surface-raised) !important;
    --misc-canvas: var(--pp-app-bg) !important;
    --misc-input: var(--pp-input-bg) !important;
    --misc-hover: var(--pp-surface-muted) !important;
    --misc-primary: var(--pp-accent) !important;
    --misc-primary-soft: var(--pp-accent-soft) !important;
    --misc-shadow: 0 16px 38px var(--pp-shadow-color) !important;
}

body.security-module {
    --security-ink: var(--pp-text) !important;
    --security-muted: var(--pp-text-muted) !important;
    --security-line: var(--pp-border) !important;
    --security-subtle-line: var(--pp-border) !important;
    --security-soft: var(--pp-surface-soft) !important;
    --security-canvas: var(--pp-app-bg) !important;
    --security-panel: var(--pp-surface) !important;
    --security-surface: var(--pp-surface) !important;
    --security-surface-raised: var(--pp-surface-raised) !important;
    --security-surface-soft: var(--pp-surface-soft) !important;
    --security-input: var(--pp-input-bg) !important;
    --security-hover: var(--pp-surface-muted) !important;
    --security-primary: var(--pp-accent) !important;
    --security-primary-soft: var(--pp-accent-soft) !important;
    --security-accent-contrast: var(--pp-accent-contrast) !important;
    --security-shadow: 0 18px 42px var(--pp-shadow-color) !important;
}

body.ppd-body {
    --ppd-border: var(--pp-border) !important;
    --ppd-border-soft: var(--pp-border) !important;
    --ppd-soft: var(--pp-surface-muted) !important;
    --ppd-bg: var(--pp-app-bg) !important;
    --ppd-surface: var(--pp-surface) !important;
    --ppd-chrome: var(--pp-surface) !important;
    --ppd-chrome-soft: var(--pp-surface-soft) !important;
    --ppd-chrome-raised: var(--pp-surface-raised) !important;
    --ppd-chrome-input: var(--pp-input-bg) !important;
    --ppd-chrome-hover: var(--pp-surface-muted) !important;
    --ppd-text: var(--pp-text) !important;
    --ppd-muted: var(--pp-text-muted) !important;
    --ppd-primary: var(--pp-accent) !important;
    --ppd-primary-soft: var(--pp-accent-soft) !important;
    --ppd-primary-border: var(--pp-border-strong) !important;
    --ppd-shadow: 0 18px 42px var(--pp-shadow-color) !important;
}

body.sp-body {
    --sp-border: var(--pp-border) !important;
    --sp-muted: var(--pp-text-muted) !important;
    --sp-bg: var(--pp-app-bg) !important;
    --sp-surface: var(--pp-surface) !important;
    --sp-text: var(--pp-text) !important;
    --sp-input: var(--pp-input-bg) !important;
    --sp-raised: var(--pp-surface-raised) !important;
    --sp-hover: var(--pp-surface-muted) !important;
    --sp-primary: var(--pp-accent) !important;
    --sp-primary-soft: var(--pp-accent-soft) !important;
    --sp-shadow: var(--pp-shadow-color) !important;
}

body.ev-body {
    --ev-primary: var(--pp-accent) !important;
    --ev-border: var(--pp-border) !important;
    --ev-muted: var(--pp-text-muted) !important;
    --ev-bg: var(--pp-app-bg) !important;
    --ev-surface: var(--pp-surface) !important;
    --ev-text: var(--pp-text) !important;
    --ev-input: var(--pp-input-bg) !important;
    --ev-raised: var(--pp-surface-raised) !important;
    --ev-hover: var(--pp-surface-muted) !important;
    --ev-row-border: var(--pp-border) !important;
    --ev-psoft: var(--pp-accent-soft) !important;
    --ev-code-bg: var(--pp-input-bg) !important;
    --ev-code-raised: var(--pp-surface-raised) !important;
    --ev-code-soft: var(--pp-surface-muted) !important;
    --ev-code-border: var(--pp-border) !important;
    --ev-code-text: var(--pp-text) !important;
    --ev-code-muted: var(--pp-text-muted) !important;
    --ev-code-subtle: color-mix(in srgb, var(--pp-text-muted) 72%, transparent) !important;
    --ev-code-accent: var(--pp-accent) !important;
    --ev-code-selection: color-mix(in srgb, var(--pp-accent) 26%, var(--pp-input-bg)) !important;
    --ev-code-scroll: var(--pp-border-strong) !important;
    --ev-code-shadow: var(--pp-shadow-color) !important;
}

body.cf-body {
    --cf-primary: var(--pp-accent) !important;
    --cf-border: var(--pp-border) !important;
    --cf-muted: var(--pp-text-muted) !important;
    --cf-bg: var(--pp-app-bg) !important;
    --cf-surface: var(--pp-surface) !important;
    --cf-text: var(--pp-text) !important;
    --cf-input: var(--pp-input-bg) !important;
    --cf-raised: var(--pp-surface-raised) !important;
    --cf-hover: var(--pp-surface-muted) !important;
    --cf-row-border: var(--pp-border) !important;
    --cf-primary-soft: var(--pp-accent-soft) !important;
    --cf-psoft: var(--pp-accent-soft) !important;
    --cf-code-bg: var(--pp-input-bg) !important;
    --cf-code-raised: var(--pp-surface-raised) !important;
    --cf-code-soft: var(--pp-surface-muted) !important;
    --cf-code-border: var(--pp-border) !important;
    --cf-code-text: var(--pp-text) !important;
    --cf-code-muted: var(--pp-text-muted) !important;
    --cf-code-subtle: color-mix(in srgb, var(--pp-text-muted) 72%, transparent) !important;
    --cf-code-accent: var(--pp-accent) !important;
    --cf-code-selection: color-mix(in srgb, var(--pp-accent) 26%, var(--pp-input-bg)) !important;
    --cf-shadow: var(--pp-shadow-color) !important;
}

body.output-body {
    --ob-bg: var(--pp-app-bg) !important;
    --ob-surface: var(--pp-surface) !important;
    --ob-surface-2: var(--pp-surface-soft) !important;
    --ob-border: var(--pp-border) !important;
    --ob-border-2: var(--pp-border) !important;
    --ob-ink: var(--pp-text) !important;
    --ob-ink-2: color-mix(in srgb, var(--pp-text) 76%, var(--pp-text-muted)) !important;
    --ob-muted: var(--pp-text-muted) !important;
    --ob-primary: var(--pp-accent) !important;
    --ob-primary-2: color-mix(in srgb, var(--pp-accent) 82%, var(--pp-text)) !important;
    --ob-shadow: 0 1px 3px var(--pp-shadow-color) !important;
    --ob-shadow-lg: 0 14px 34px var(--pp-shadow-color) !important;
}

body.finished-body {
    --fin-bg: var(--pp-app-bg) !important;
    --fin-surface: var(--pp-surface) !important;
    --fin-raised: var(--pp-surface-raised) !important;
    --fin-soft: var(--pp-surface-soft) !important;
    --fin-muted-surface: var(--pp-surface-muted) !important;
    --fin-border: var(--pp-border) !important;
    --fin-border-strong: var(--pp-border-strong) !important;
    --fin-text: var(--pp-text) !important;
    --fin-muted: var(--pp-text-muted) !important;
    --fin-primary: var(--pp-accent) !important;
    --fin-primary-soft: var(--pp-accent-soft) !important;
    --fin-shadow: 0 8px 24px var(--pp-shadow-color) !important;
}

body.deploy-body {
    --ftp-bg: var(--pp-app-bg) !important;
    --ftp-pane: var(--pp-surface) !important;
    --ftp-raised: var(--pp-surface-raised) !important;
    --ftp-head: var(--pp-surface-soft) !important;
    --ftp-subtle: var(--pp-surface-muted) !important;
    --ftp-input: var(--pp-input-bg) !important;
    --ftp-border: var(--pp-border) !important;
    --ftp-border-strong: var(--pp-border-strong) !important;
    --ftp-text: var(--pp-text) !important;
    --ftp-muted: var(--pp-text-muted) !important;
    --ftp-accent: var(--pp-accent) !important;
    --ftp-row-hover: color-mix(in srgb, var(--pp-accent) 8%, var(--pp-surface)) !important;
    --ftp-row-sel: color-mix(in srgb, var(--pp-accent) 14%, var(--pp-surface)) !important;
}

/* Common overlays are deliberately token-only. Module-specific layout and
   behavior remain untouched; this layer owns presentation and contrast. */
body:is(.misc-module, .security-module, .ppd-body, .sp-body, .ev-body, .cf-body, .output-body, .finished-body, .deploy-body)
    :where(.modal-content, .offcanvas, .dropdown-menu, .swal2-popup, [role="dialog"], .ppd-modal-box, .ppd-icm, .sp-modal, .evh-modal, .cfh-modal, .obh-modal) {
    background-color: var(--pp-surface-raised) !important;
    color: var(--pp-text) !important;
    border-color: var(--pp-border-strong) !important;
    box-shadow: 0 18px 48px var(--pp-shadow-color) !important;
}
body:is(.misc-module, .security-module, .ppd-body, .sp-body, .ev-body, .cf-body, .output-body, .finished-body, .deploy-body)
    :where(.modal-header, .modal-body, .modal-footer, .offcanvas-header, .offcanvas-body, .dropdown-divider, .ppd-modal-head, .ppd-icm-head, .ppd-icm-body, .ppd-icm-foot, .sp-modal-head, .sp-modal-body, .sp-modal-foot, .evh-head, .evh-body, .evh-foot, .cfh-head, .cfh-body, .cfh-foot, .obh-head, .obh-body, .obh-foot) {
    background-color: var(--pp-surface-raised) !important;
    color: var(--pp-text) !important;
    border-color: var(--pp-border) !important;
}
body:is(.misc-module, .security-module, .ppd-body, .sp-body, .ev-body, .cf-body, .output-body, .finished-body, .deploy-body)
    :where(.modal-header.bg-info, .modal-header.bg-secondary, .modal-header.bg-dark) {
    background: var(--pp-surface-soft) !important;
    color: var(--pp-text) !important;
}
body:is(.misc-module, .security-module, .ppd-body, .sp-body, .ev-body, .cf-body, .output-body, .finished-body, .deploy-body)
    :where(.modal-title, .offcanvas-title, .dropdown-item) { color: var(--pp-text) !important; }
body:is(.misc-module, .security-module, .ppd-body, .sp-body, .ev-body, .cf-body, .output-body, .finished-body, .deploy-body)
    .dropdown-item:hover,
body:is(.misc-module, .security-module, .ppd-body, .sp-body, .ev-body, .cf-body, .output-body, .finished-body, .deploy-body)
    .dropdown-item:focus { background: var(--pp-surface-muted) !important; color: var(--pp-text) !important; }
body:is(.misc-module, .security-module, .ppd-body, .sp-body, .ev-body, .cf-body, .output-body, .finished-body, .deploy-body)
    :where(.modal-content, .offcanvas, [role="dialog"]) :where(.form-control, .form-select, .input-group-text, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="color"])) {
    background-color: var(--pp-input-bg) !important;
    color: var(--pp-text) !important;
    border-color: var(--pp-border-strong) !important;
}
body:is(.misc-module, .security-module, .ppd-body, .sp-body, .ev-body, .cf-body, .output-body, .finished-body, .deploy-body)
    :where(.modal-content, .offcanvas, [role="dialog"]) :where(input, textarea)::placeholder {
    color: var(--pp-text-muted) !important;
    opacity: 1;
}
body:is(.misc-module, .security-module, .ppd-body, .sp-body, .ev-body, .cf-body, .output-body, .finished-body, .deploy-body)
    :where(.tooltip-inner, [role="tooltip"]) {
    background: var(--pp-surface-raised) !important;
    color: var(--pp-text) !important;
    border: 1px solid var(--pp-border-strong) !important;
    box-shadow: 0 8px 24px var(--pp-shadow-color) !important;
}
html[data-pp-theme="dark"] body:is(.misc-module, .security-module, .ppd-body, .sp-body, .ev-body, .cf-body, .output-body, .finished-body, .deploy-body) {
    color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
    body, .pp-theme-toggle, .pp-theme-toggle-chevron, .pp-theme-option { transition: none !important; }
}