/* Shared theme roles. Light values preserve the original palette. */
:root {
    --SurfaceHoverSoft: #f8faff;
    --SurfaceSuccessSoft: #f0fdf4;
    --SurfaceDangerSoft: #fef2f2;
    --SurfaceMissing: #fffafa;
    --SurfacePurpleSoft: #faf5ff;
    color-scheme: light;
    --SurfaceIndigo: #e0e7ff;
    --TextIndigo: #3730a3;
    --SurfaceIndigoHover: #c7d2fe;
    --SurfaceSlate50: var(--Slate50);
    --SurfaceWhite: var(--White);
    --SurfaceInfo: #ebf5ff;
    --SurfaceDanger: #fff1f1;
    --TextRed700: var(--Red700);
    --SurfaceOrange50: var(--Orange50);
    --TextWarningStrong: #c2850c;
    --SurfaceGreen100: var(--Green100);
    --TextGreen800: var(--Green800);
    --SurfaceRed100: var(--Red100);
    --TextRed800: var(--Red800);
    --TextSlate600: var(--Slate600);
    --SurfaceWarning: #fef3c7;
    --TextWarning: #92400e;
    --SurfaceSlate100: var(--Slate100);
    --SurfaceIndigo50: var(--Indigo50);
    --LineSlate300: var(--Slate300);
    --SurfaceYellow200: var(--Yellow200);
    --TextYellow800: var(--Yellow800);
    --SurfaceGreen200: var(--Green200);
    --SurfaceBlue200: var(--Blue200);
    --TextBlue800: var(--Blue800);
    --SurfacePink200: var(--Pink200);
    --TextPink800: var(--Pink800);
    --SurfaceGray200: var(--Gray200);
    --TextBodyStrong: #1f2937;
    --TextSlate900: var(--Slate900);
    --SurfaceYellowHover: #fde047;
    --SurfaceGreen300: var(--Green300);
    --SurfaceBlue300: var(--Blue300);
    --SurfacePinkHover: #f9a8d4;
    --SurfaceGray100: var(--Gray100);
    --SurfaceEmerald50: var(--Emerald50);
    --SurfaceFocus: #F0F8FF;
    --TextBody: #333333;
    --SurfaceSlate200: var(--Slate200);
    --LineGray300: var(--Gray300);
    --TextGray400: var(--Gray400);
    --SurfaceInspection: #fff5f5;
    --LineGray200: var(--Gray200);
    --TextBlue600: var(--Blue600);
    --SurfaceWarningSoft: #fef9c3;
    --SurfaceConsoleAction: #dbdbdb;
    --SurfaceConsoleActionHover: #c1c1c1;
}

:root[data-theme="dark"] {
    --SurfaceHoverSoft: #29384f;
    --SurfaceSuccessSoft: #14372e;
    --SurfaceDangerSoft: #49242c;
    --SurfaceMissing: #302432;
    --SurfacePurpleSoft: #352745;
    color-scheme: dark;
    --BackgroundColor: #101722;
    --CardBackground: #1c2738;
    --SecondaryBackground: #253247;
    --PrimaryColor: #edf2f9;
    --MutedText: #a5b4c8;
    --BorderColor: #3b4b61;
    --InputBackground: #141f30;
    --ShadowSoft: 0 10px 30px rgba(0, 0, 0, 0.22);
    --SurfaceIndigo: #30385a;
    --TextIndigo: #c7d2fe;
    --SurfaceIndigoHover: #3d4870;
    --SurfaceSlate50: #172233;
    --SurfaceWhite: #1c2738;
    --SurfaceInfo: #20324c;
    --SurfaceDanger: #49242c;
    --TextRed700: #fca5a5;
    --SurfaceOrange50: #392b22;
    --TextWarningStrong: #fcd34d;
    --SurfaceGreen100: #153c2b;
    --TextGreen800: #86efac;
    --SurfaceRed100: #49242c;
    --TextRed800: #fecaca;
    --TextSlate600: #c4cfde;
    --SurfaceWarning: #51441e;
    --TextWarning: #fde68a;
    --SurfaceSlate100: #253247;
    --SurfaceIndigo50: #232d4b;
    --LineSlate300: #475569;
    --SurfaceYellow200: #51441e;
    --TextYellow800: #fde68a;
    --SurfaceGreen200: #205139;
    --SurfaceBlue200: #203e65;
    --TextBlue800: #bfdbfe;
    --SurfacePink200: #512940;
    --TextPink800: #f9a8d4;
    --SurfaceGray200: #334155;
    --TextBodyStrong: #e2e8f0;
    --TextSlate900: #edf2f9;
    --SurfaceYellowHover: #655522;
    --SurfaceGreen300: #286444;
    --SurfaceBlue300: #2b4c76;
    --SurfacePinkHover: #69334f;
    --SurfaceGray100: #253247;
    --SurfaceEmerald50: #14372e;
    --SurfaceFocus: #192c42;
    --TextBody: #e2e8f0;
    --SurfaceSlate200: #334155;
    --LineGray300: #475569;
    --TextGray400: #b0bfd2;
    --SurfaceInspection: #35232e;
    --LineGray200: #334155;
    --TextBlue600: #93c5fd;
    --SurfaceWarningSoft: #443c21;
    --SurfaceConsoleAction: #354155;
    --SurfaceConsoleActionHover: #475569;
}

.ThemeToggle {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    z-index: 900;
    padding: 9px 14px;
    border: 1px solid var(--BorderColor);
    border-radius: var(--RadiusPill);
    background: var(--CardBackground);
    color: var(--PrimaryColor);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    box-shadow: var(--ShadowSoft);
}
.ThemeToggle:focus-visible { outline: 2px solid var(--AccentColor); outline-offset: 3px; }
body > .CenteredPage { padding-top: 64px; }
:root[data-theme="dark"] .Input { color: var(--PrimaryColor); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--MutedText); opacity: 1; }
:root[data-theme="dark"] .Logo img { filter: brightness(0) invert(1); }
:root[data-theme="dark"] a:not([class]) { color: #93c5fd; }