:root,
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #2f4798;
    --bg-gradient:
        radial-gradient(circle at 76% 15%, rgba(126, 155, 245, .28), transparent 28rem),
        linear-gradient(145deg, #2f4798 0%, #26397c 55%, #32499d 100%);
    --workspace-bg: radial-gradient(circle at center, #3a55b0 0, #2b4189 48%, #22346f 100%);
    --glow-line: rgba(174, 195, 255, .18);
    --panel: rgba(31, 48, 104, .9);
    --surface: #35509f;
    --border: rgba(255, 255, 255, .18);
    --text: #f7f5ed;
    --muted: #bcc7ea;
    --accent: #dfdd08;
    --accent-strong: #c4c207;
    --accent-ink: #e9e74f;
    --on-accent: #16203c;
    --accent-secondary: #f2ca4d;
    --accent-muted: rgba(223, 221, 8, .16);
    --danger: #ff8c86;
    --danger-muted: rgba(255, 140, 134, .14);
    --success: #43e09a;
    --warning: #f0c64b;
    --info: #3c92f5;
    --focus-ring: #dfdd08;
    --card-shadow: 0 28px 80px rgba(9, 18, 46, .34);
    --card-shadow-hover: 0 34px 92px rgba(9, 18, 46, .42);
    --border-soft: rgba(255, 255, 255, .1);
    --surface-soft: rgba(53, 80, 159, .55);
    --input-bg: rgba(22, 32, 60, .45);
    --success-muted: rgba(67, 224, 154, .16);
    --warning-muted: rgba(240, 198, 75, .16);
    --info-muted: rgba(60, 146, 245, .16);
    --backdrop: #22346f;
    --theme-control-bg: rgba(255, 255, 255, .1);
    --theme-control-hover: rgba(255, 255, 255, .18);

    --brand-logo-height: clamp(40px, 3.4vw, 54px);
    --public-header-min-height: 72px;
    --public-header-pad-y: 9px;
    --public-header-gutter: clamp(16px, 2.4vw, 32px);
    --header-actions-gap: 10px;
    --public-width: min(1320px, calc(100% - 48px));
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;
    --bg-gradient: #ffffff;
    --workspace-bg: #f2f4fa;
    --glow-line: rgba(47, 71, 152, .1);
    --panel: rgba(255, 255, 255, .92);
    --surface: #f5f7fc;
    --border: rgba(23, 33, 71, .16);
    --text: #16203c;
    --muted: #5c6483;
    --accent: #dfdd08;
    --accent-strong: #c4c207;
    --accent-ink: #6d6c04;
    --on-accent: #16203c;
    --accent-secondary: #e9bd36;
    --accent-muted: rgba(223, 221, 8, .22);
    --danger: #bc3c3c;
    --danger-muted: rgba(188, 60, 60, .12);
    --success: #08794e;
    --warning: #e0ad1b;
    --info: #247ce5;
    --focus-ring: #a09e05;
    --card-shadow: 0 28px 80px rgba(23, 33, 71, .14);
    --card-shadow-hover: 0 34px 92px rgba(23, 33, 71, .18);
    --border-soft: rgba(23, 33, 71, .08);
    --surface-soft: #eef1f9;
    --input-bg: #ffffff;
    --success-muted: rgba(8, 121, 78, .12);
    --warning-muted: rgba(224, 173, 27, .14);
    --info-muted: rgba(36, 124, 229, .12);
    --backdrop: #16203c;
    --theme-control-bg: rgba(23, 33, 71, .06);
    --theme-control-hover: rgba(23, 33, 71, .12);
}
html { font-size: 16px; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.theme-toggle {
    display: inline-grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    color: var(--text, currentColor);
    border: 1px solid var(--border, currentColor);
    border-radius: 50%;
    background: var(--theme-control-bg, rgba(255, 255, 255, .06));
    box-shadow: none;
    font: inherit;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.theme-toggle:hover { transform: translateY(-1px); background: var(--theme-control-hover, rgba(255, 255, 255, .12)); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.admin-link {
    display: inline-grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    color: var(--text, currentColor);
    border: 1px solid var(--border, currentColor);
    border-radius: 50%;
    background: var(--theme-control-bg, rgba(255, 255, 255, .06));
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.admin-link:hover { transform: translateY(-1px); background: var(--theme-control-hover, rgba(255, 255, 255, .12)); }
.admin-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.admin-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-stack {
    position: relative;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
}

.theme-toggle__icon {
    position: absolute;
    width: 18px;
    height: 18px;
    transition: opacity .16s ease, transform .16s ease;
}

.theme-toggle__icon--sun { opacity: 1; transform: scale(1); }
.theme-toggle__icon--moon { opacity: 0; transform: scale(.7); }
html[data-theme="dark"] .theme-toggle__icon--sun { opacity: 0; transform: scale(.7); }
html[data-theme="dark"] .theme-toggle__icon--moon { opacity: 1; transform: scale(1); }

.public-header {
    position: relative;
    z-index: 20;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    backdrop-filter: blur(18px);
}

.public-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-height: var(--public-header-min-height);
    margin: 0;
    padding: var(--public-header-pad-y) var(--public-header-gutter);
}

.public-header__actions { display: flex; align-items: center; gap: var(--header-actions-gap); }

.brand { display: inline-flex; align-items: center; min-height: var(--brand-logo-height); color: var(--text); text-decoration: none; letter-spacing: -.04em; }

.public-back {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 6px 12px;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--theme-control-bg);
    font-size: .74rem;
    font-weight: 750;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease;
}

.public-back:hover { transform: translateY(-1px); background: var(--theme-control-hover); }
.public-back:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 820px) {
    :root { --public-width: min(100% - 32px, 680px); }
    .public-header__inner { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle { transition: none; }
}