:root {
    color-scheme: light;
    --theme-sidebar-width: 270px;
    --theme-font-size-root: 16px;
    --theme-control-height: 2.7rem;
    --theme-icon-control-size: 2.75rem;
    --theme-app-bg: #f3f6f4;
    --theme-shell-bg: #ffffff;
    --theme-panel-bg: #ffffff;
    --theme-surface-alt: #edf5f0;
    --theme-border: #d6e3da;
    --theme-text: #1f2d25;
    --theme-muted: #63776a;
    --theme-brand: #2d6a4f;
    --theme-brand-strong: #24553f;
    --theme-brand-text: #ffffff;
    --theme-button-secondary-bg: #edf5f0;
    --theme-button-secondary-border: #cfddd2;
    --theme-button-secondary-hover-bg: #e1eee5;
    --theme-button-secondary-hover-border: #bfd2c5;
    --theme-button-secondary-text: #274035;
    --theme-danger: #bc4a3d;
    --theme-danger-strong: #a53d31;
    --theme-danger-text: #ffffff;
    --theme-input-bg: #ffffff;
    --theme-input-text: #1f2d25;
    --theme-input-border: #c6d8cb;
    --theme-focus-ring: rgba(45, 106, 79, 0.18);
    --theme-shadow: 0 18px 40px rgba(22, 44, 32, 0.08);
    --theme-list-hover-bg: #f5faf7;
    --theme-success-bg: #e5f5ea;
    --theme-success-text: #206245;
    --theme-success-border: #c2dece;
    --theme-warning-bg: #fff2db;
    --theme-warning-text: #986d11;
    --theme-warning-border: #ead4aa;
    --theme-info-bg: #e4f1eb;
    --theme-info-text: #2d6a4f;
    --theme-info-border: #bfd8cb;
    --theme-hero-surface-start: color-mix(in srgb, var(--theme-brand-strong) 74%, #0d1520 26%);
    --theme-hero-surface-end: color-mix(in srgb, var(--theme-brand) 82%, #16253a 18%);
    --theme-hero-overlay: color-mix(in srgb, #08101a 42%, transparent);
    --theme-hero-text: #ffffff;
    --theme-hero-text-muted: color-mix(in srgb, #ffffff 88%, transparent);
    --theme-hero-badge-bg: color-mix(in srgb, #ffffff 92%, var(--theme-brand) 8%);
    --theme-hero-badge-text: var(--theme-brand-strong);
    --theme-hero-image-opacity: 0.42;
    --theme-close-filter: none;
    --bg: var(--theme-app-bg);
    --paper: var(--theme-shell-bg);
    --paper-strong: var(--theme-panel-bg);
    --ink: var(--theme-text);
    --muted: var(--theme-muted);
    --line: var(--theme-border);
    --brand: var(--theme-brand);
    --brand-soft: var(--theme-surface-alt);
    --shadow: var(--theme-shadow);
    --radius: 24px;
}

:root[data-font-scale="small"] {
    --theme-font-size-root: 14px;
}

:root[data-font-scale="medium"] {
    --theme-font-size-root: 16px;
}

:root[data-font-scale="large"] {
    --theme-font-size-root: 18px;
}

:root[data-theme-mode="dark"] {
    --theme-hero-surface-start: color-mix(in srgb, var(--theme-brand-strong) 18%, #04080f 82%);
    --theme-hero-surface-end: color-mix(in srgb, var(--theme-brand) 24%, #09111c 76%);
    --theme-hero-overlay: color-mix(in srgb, #02050a 58%, transparent);
    --theme-hero-text: #f7fbff;
    --theme-hero-text-muted: color-mix(in srgb, #f7fbff 84%, transparent);
    --theme-hero-badge-bg: color-mix(in srgb, var(--theme-panel-bg) 84%, #ffffff 16%);
    --theme-hero-badge-text: color-mix(in srgb, var(--theme-brand) 68%, #ffffff 32%);
    --theme-hero-image-opacity: 0.34;
}

:root[data-theme-family="default"][data-theme-mode="light"] {
    color-scheme: light;
    --theme-app-bg: #f3f5f8;
    --theme-shell-bg: #ffffff;
    --theme-panel-bg: #ffffff;
    --theme-surface-alt: #eef3f8;
    --theme-border: #d8e0ea;
    --theme-text: #1d2a38;
    --theme-muted: #607082;
    --theme-brand: #2457d6;
    --theme-brand-strong: #1e49b3;
    --theme-button-secondary-bg: #eef3f8;
    --theme-button-secondary-border: #d0d8e3;
    --theme-button-secondary-hover-bg: #e1e8f1;
    --theme-button-secondary-hover-border: #c2ccd9;
    --theme-button-secondary-text: #243447;
    --theme-danger: #c73f3f;
    --theme-danger-strong: #aa3131;
    --theme-input-text: #1d2a38;
    --theme-input-border: #ccd6e2;
    --theme-focus-ring: rgba(36, 87, 214, 0.18);
    --theme-shadow: 0 18px 40px rgba(21, 36, 58, 0.08);
    --theme-list-hover-bg: #f7faff;
    --theme-success-bg: #e7f6eb;
    --theme-success-text: #1f7a3d;
    --theme-success-border: #bfe1ca;
    --theme-warning-bg: #fff1d8;
    --theme-warning-text: #a96a00;
    --theme-warning-border: #efd2a0;
    --theme-info-bg: #e5eefc;
    --theme-info-text: #2457a6;
    --theme-info-border: #bfd0f0;
}

:root[data-theme-family="default"][data-theme-mode="dark"] {
    color-scheme: dark;
    --theme-app-bg: #10161e;
    --theme-shell-bg: #171f29;
    --theme-panel-bg: #1b2430;
    --theme-surface-alt: #243040;
    --theme-border: #2e3c4f;
    --theme-text: #e8eef7;
    --theme-muted: #9fb0c4;
    --theme-brand: #6f96ff;
    --theme-brand-strong: #5a84f3;
    --theme-brand-text: #0f1620;
    --theme-button-secondary-bg: #243040;
    --theme-button-secondary-border: #324155;
    --theme-button-secondary-hover-bg: #2a3748;
    --theme-button-secondary-hover-border: #3b4d63;
    --theme-button-secondary-text: #e8eef7;
    --theme-danger: #e15b5b;
    --theme-danger-strong: #c64d4d;
    --theme-danger-text: #0f1620;
    --theme-input-bg: #1d2733;
    --theme-input-text: #e8eef7;
    --theme-input-border: #34455a;
    --theme-focus-ring: rgba(111, 150, 255, 0.22);
    --theme-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    --theme-list-hover-bg: #212d3a;
    --theme-success-bg: #173a26;
    --theme-success-text: #8fe0ae;
    --theme-success-border: #2a6040;
    --theme-warning-bg: #3a3019;
    --theme-warning-text: #f2c76c;
    --theme-warning-border: #5a4923;
    --theme-info-bg: #1f3048;
    --theme-info-text: #9fc0ff;
    --theme-info-border: #30486d;
    --theme-close-filter: invert(1) grayscale(100%) brightness(200%);
}

:root[data-theme-family="marcon-blue"][data-theme-mode="light"] {
    color-scheme: light;
    --theme-app-bg: #f4f6fa;
    --theme-shell-bg: #ffffff;
    --theme-panel-bg: #ffffff;
    --theme-surface-alt: #eef2f8;
    --theme-border: #d7deea;
    --theme-text: #1b2738;
    --theme-muted: #627389;
    --theme-brand: #1a3e77;
    --theme-brand-strong: #14315d;
    --theme-button-secondary-bg: #eef2f8;
    --theme-button-secondary-border: #d1d9e7;
    --theme-button-secondary-hover-bg: #e2e8f2;
    --theme-button-secondary-hover-border: #c3cfdf;
    --theme-button-secondary-text: #23344b;
    --theme-danger: #c73f3f;
    --theme-danger-strong: #a93232;
    --theme-input-text: #1b2738;
    --theme-input-border: #c8d3e3;
    --theme-focus-ring: rgba(26, 62, 119, 0.18);
    --theme-shadow: 0 18px 40px rgba(16, 30, 54, 0.08);
    --theme-list-hover-bg: #f6f9fe;
    --theme-success-bg: #e7f5ee;
    --theme-success-text: #226b46;
    --theme-success-border: #c3dfd0;
    --theme-warning-bg: #fff0d8;
    --theme-warning-text: #a56b09;
    --theme-warning-border: #ecd1a2;
    --theme-info-bg: #e8eef9;
    --theme-info-text: #1a3e77;
    --theme-info-border: #c8d4e8;
}

:root[data-theme-family="marcon-blue"][data-theme-mode="dark"] {
    color-scheme: dark;
    --theme-app-bg: #071428;
    --theme-shell-bg: #0f2130;
    --theme-panel-bg: #102334;
    --theme-surface-alt: #173244;
    --theme-border: #22455c;
    --theme-text: #e6eef8;
    --theme-muted: #9aa8b8;
    --theme-brand: #3f8ad6;
    --theme-brand-strong: #5aa0e5;
    --theme-brand-text: #071428;
    --theme-button-secondary-bg: #173244;
    --theme-button-secondary-border: #28516b;
    --theme-button-secondary-hover-bg: #1d3d52;
    --theme-button-secondary-hover-border: #325e7b;
    --theme-button-secondary-text: #e6eef8;
    --theme-danger: #e46a63;
    --theme-danger-strong: #d45a54;
    --theme-danger-text: #1b0d0d;
    --theme-input-bg: #12283b;
    --theme-input-text: #e6eef8;
    --theme-input-border: #2b536d;
    --theme-focus-ring: rgba(63, 138, 214, 0.24);
    --theme-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
    --theme-list-hover-bg: #153247;
    --theme-success-bg: #17392b;
    --theme-success-text: #8fdbb2;
    --theme-success-border: #285841;
    --theme-warning-bg: #3a301c;
    --theme-warning-text: #f0ca79;
    --theme-warning-border: #5a4926;
    --theme-info-bg: #19324a;
    --theme-info-text: #9dc8ff;
    --theme-info-border: #2a4d72;
    --theme-close-filter: invert(1) grayscale(100%) brightness(200%);
}

:root[data-theme-family="forest-green"][data-theme-mode="light"] {
    color-scheme: light;
}

:root[data-theme-family="forest-green"][data-theme-mode="dark"] {
    color-scheme: dark;
    --theme-app-bg: #101813;
    --theme-shell-bg: #17211b;
    --theme-panel-bg: #1b2720;
    --theme-surface-alt: #24362d;
    --theme-border: #31483b;
    --theme-text: #e7f0ea;
    --theme-muted: #9eb1a5;
    --theme-brand: #62c393;
    --theme-brand-strong: #79d9a7;
    --theme-brand-text: #0d1711;
    --theme-button-secondary-bg: #24362d;
    --theme-button-secondary-border: #375244;
    --theme-button-secondary-hover-bg: #2b4035;
    --theme-button-secondary-hover-border: #476752;
    --theme-button-secondary-text: #e7f0ea;
    --theme-danger: #ea7b6e;
    --theme-danger-strong: #df695c;
    --theme-danger-text: #180c0a;
    --theme-input-bg: #1d2c24;
    --theme-input-text: #e7f0ea;
    --theme-input-border: #395446;
    --theme-focus-ring: rgba(98, 195, 147, 0.22);
    --theme-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
    --theme-list-hover-bg: #22362c;
    --theme-success-bg: #173728;
    --theme-success-text: #9ce2ba;
    --theme-success-border: #275640;
    --theme-warning-bg: #3a301c;
    --theme-warning-text: #f0cc7c;
    --theme-warning-border: #5d4a27;
    --theme-info-bg: #1f342a;
    --theme-info-text: #a5e3c0;
    --theme-info-border: #325442;
    --theme-close-filter: invert(1) grayscale(100%) brightness(200%);
}

:root[data-theme-family="office-red"][data-theme-mode="light"] {
    color-scheme: light;
    --theme-app-bg: #f7f3f3;
    --theme-shell-bg: #ffffff;
    --theme-panel-bg: #ffffff;
    --theme-surface-alt: #f8eceb;
    --theme-border: #ead3d0;
    --theme-text: #321d1c;
    --theme-muted: #7a6360;
    --theme-brand: #b42318;
    --theme-brand-strong: #951d14;
    --theme-button-secondary-bg: #f8eceb;
    --theme-button-secondary-border: #e7cdc8;
    --theme-button-secondary-hover-bg: #f0dfdc;
    --theme-button-secondary-hover-border: #ddb9b2;
    --theme-button-secondary-text: #4a2b28;
    --theme-danger: #cf3a2f;
    --theme-danger-strong: #b82f25;
    --theme-input-text: #321d1c;
    --theme-input-border: #dec1bc;
    --theme-focus-ring: rgba(180, 35, 24, 0.18);
    --theme-shadow: 0 18px 40px rgba(53, 21, 21, 0.08);
    --theme-list-hover-bg: #fff6f5;
    --theme-success-bg: #e9f4ea;
    --theme-success-text: #287148;
    --theme-success-border: #c6ddc8;
    --theme-warning-bg: #fff0d8;
    --theme-warning-text: #a96900;
    --theme-warning-border: #edd0a0;
    --theme-info-bg: #faeceb;
    --theme-info-text: #9e241b;
    --theme-info-border: #ebc7c2;
}

:root[data-theme-family="office-red"][data-theme-mode="dark"] {
    color-scheme: dark;
    --theme-app-bg: #181111;
    --theme-shell-bg: #231818;
    --theme-panel-bg: #2a1d1d;
    --theme-surface-alt: #3a2828;
    --theme-border: #4c3333;
    --theme-text: #f4eaea;
    --theme-muted: #c7aeae;
    --theme-brand: #ff7b72;
    --theme-brand-strong: #ff978f;
    --theme-brand-text: #200f10;
    --theme-button-secondary-bg: #3a2828;
    --theme-button-secondary-border: #5b3c3c;
    --theme-button-secondary-hover-bg: #473131;
    --theme-button-secondary-hover-border: #6b4848;
    --theme-button-secondary-text: #f4eaea;
    --theme-danger: #ff8e86;
    --theme-danger-strong: #ff7b72;
    --theme-danger-text: #240f10;
    --theme-input-bg: #312121;
    --theme-input-text: #f4eaea;
    --theme-input-border: #5b3f3f;
    --theme-focus-ring: rgba(255, 123, 114, 0.22);
    --theme-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
    --theme-list-hover-bg: #352525;
    --theme-success-bg: #203628;
    --theme-success-text: #98ddb0;
    --theme-success-border: #355441;
    --theme-warning-bg: #3d3020;
    --theme-warning-text: #f2c874;
    --theme-warning-border: #604c29;
    --theme-info-bg: #402726;
    --theme-info-text: #ffb1ab;
    --theme-info-border: #68403f;
    --theme-close-filter: invert(1) grayscale(100%) brightness(200%);
}

html {
    font-size: var(--theme-font-size-root);
}

.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--theme-control-height);
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    box-shadow: none;
}

.theme-btn-primary {
    background: var(--theme-brand);
    border-color: var(--theme-brand);
    color: var(--theme-brand-text);
}

.theme-btn-primary:hover,
.theme-btn-primary:focus-visible {
    background: var(--theme-brand-strong);
    border-color: var(--theme-brand-strong);
    color: var(--theme-brand-text);
}

.theme-btn-secondary {
    background: var(--theme-button-secondary-bg);
    border-color: var(--theme-button-secondary-border);
    color: var(--theme-button-secondary-text);
}

.theme-btn-secondary:hover,
.theme-btn-secondary:focus-visible {
    background: var(--theme-button-secondary-hover-bg);
    border-color: var(--theme-button-secondary-hover-border);
    color: var(--theme-button-secondary-text);
}

.theme-btn-danger {
    background: var(--theme-danger);
    border-color: var(--theme-danger);
    color: var(--theme-danger-text);
}

.theme-btn-danger:hover,
.theme-btn-danger:focus-visible {
    background: var(--theme-danger-strong);
    border-color: var(--theme-danger-strong);
    color: var(--theme-danger-text);
}

.template-site-icon-btn {
    width: var(--theme-icon-control-size);
    min-width: var(--theme-icon-control-size);
    padding: 0;
}

.template-site-icon-btn.dropdown-toggle::after {
    display: none;
}

.template-site-option-menu {
    min-width: 15rem;
    padding: 0.75rem;
    border-radius: 18px;
    border-color: var(--line);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.template-site-option-menu-label {
    margin-bottom: 0.5rem;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.template-site-option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 12px;
    color: var(--ink);
}

.template-site-option-item.active,
.template-site-option-item:active {
    background: var(--brand-soft);
    color: var(--ink);
}