:root {
    --theme-control-bg: rgba(255,255,255,.045);
    --theme-control-border: rgba(255,255,255,.085);
    --theme-control-text: #aebdca;
    --theme-control-hover: rgba(29,228,189,.08);
    --theme-control-shadow: 0 .6rem 1.8rem rgba(0,0,0,.14);
}

html[data-theme="light"] {
    --bg: #f3f7fa;
    --bg2: #edf3f7;
    --surface: #ffffff;
    --surface2: #f8fafc;
    --surface3: #e9f1f5;
    --line: rgba(15,39,64,.09);
    --line2: rgba(13,148,125,.18);
    --line-strong: rgba(13,148,125,.22);
    --text: #142238;
    --muted: #617286;
    --cyan: #0f9b83;
    --cyan2: #0b876f;
    --green: #24a56f;
    --blue: #168dcc;
    --gold: #b67a18;
    --rose: #d94d68;
    --theme-control-bg: rgba(255,255,255,.82);
    --theme-control-border: rgba(15,39,64,.1);
    --theme-control-text: #52677b;
    --theme-control-hover: rgba(15,155,131,.08);
    --theme-control-shadow: 0 .55rem 1.6rem rgba(33,52,72,.09);
}

.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-width: 2.65rem;
    height: 2.65rem;
    padding: 0 .75rem;
    border: 1px solid var(--theme-control-border);
    border-radius: .85rem;
    color: var(--theme-control-text);
    background: var(--theme-control-bg);
    box-shadow: var(--theme-control-shadow), inset 0 1px rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease;
}
.theme-toggle:hover { transform: translateY(-1px); color: var(--cyan); border-color: rgba(15,155,131,.24); background: var(--theme-control-hover); }
.theme-toggle:focus-visible { outline: 3px solid rgba(15,155,131,.16); outline-offset: 2px; }
.theme-toggle svg { width: 1.08rem; height: 1.08rem; pointer-events: none; }
.theme-toggle .theme-icon-sun, html[data-theme="light"] .theme-toggle .theme-icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .theme-icon-sun { display: block; }
.theme-toggle-label { font-size: .74rem; font-weight: 700; white-space: nowrap; }

html[data-theme="light"] body { color-scheme: light; }
html[data-theme="dark"] body { color-scheme: dark; }

/* Tailwind utility classes embedded in legacy templates need semantic remapping in light mode. */
html[data-theme="light"] .text-white { color: #142238 !important; }
html[data-theme="light"] .text-slate-300 { color: #42566b !important; }
html[data-theme="light"] .text-slate-400 { color: #617286 !important; }
html[data-theme="light"] .text-slate-500 { color: #74869a !important; }
html[data-theme="light"] .border-white\/5,
html[data-theme="light"] .border-white\/\[0\.055\] { border-color: rgba(15,39,64,.08) !important; }
html[data-theme="light"] .bg-white\/\[0\.025\],
html[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(15,39,64,.035) !important; }

/* Global breadcrumb compatibility.
   ENGINE::Breadcrumb() still emits Bootstrap-compatible .breadcrumb/.breadcrumb-item markup,
   so the theme owns its visual treatment instead of depending on Bootstrap CSS. */
nav[aria-label="breadcrumb"] {
    width: 100%;
    margin: 0 0 1.5rem;
}

nav[aria-label="breadcrumb"] .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .65rem .85rem;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: inset 0 1px rgba(255,255,255,.025);
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.8;
}

nav[aria-label="breadcrumb"] .breadcrumb-item {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: .45rem;
    color: var(--muted);
}

nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: .05rem .1rem;
    color: color-mix(in srgb, var(--muted) 58%, transparent);
    font-size: 1rem;
    line-height: 1;
}

nav[aria-label="breadcrumb"] .breadcrumb-item > a {
    display: inline-block;
    max-width: 22rem;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease;
}

nav[aria-label="breadcrumb"] .breadcrumb-item > a:hover {
    color: var(--cyan);
}

nav[aria-label="breadcrumb"] .breadcrumb-item:last-child,
nav[aria-label="breadcrumb"] .breadcrumb-item:last-child > a {
    color: var(--text);
    font-weight: 700;
}

html[data-theme="light"] nav[aria-label="breadcrumb"] .breadcrumb {
    background: rgba(255,255,255,.78);
    box-shadow: 0 .45rem 1.4rem rgba(33,52,72,.045), inset 0 1px rgba(255,255,255,.8);
}

html[data-theme="light"] nav[aria-label="breadcrumb"] .breadcrumb-item:last-child > a {
    color: #24364b;
}

@media (max-width: 640px) {
    nav[aria-label="breadcrumb"] { margin-bottom: 1.1rem; }
    nav[aria-label="breadcrumb"] .breadcrumb {
        gap: .35rem;
        padding: .55rem .65rem;
        border-radius: .8rem;
        font-size: .78rem;
    }
    nav[aria-label="breadcrumb"] .breadcrumb-item > a { max-width: 12rem; }
    nav[aria-label="breadcrumb"] .breadcrumb-item:last-child > a { max-width: 15rem; }
}

@media (max-width: 640px) {
    .theme-toggle { width: 2.55rem; min-width: 2.55rem; padding: 0; }
    .theme-toggle-label { display: none; }
}

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

/* Auth switch is anchored to the auth card column in both themes. */
.sd-auth-wrap { position: relative; }
.sd-auth-theme-toggle { position: absolute; top: 0; left: 0; z-index: 6; }

@media (max-width: 480px) {
    .sd-auth-theme-toggle { top: .15rem; left: .15rem; }
}