/* Shared light/dark theme layer. Loaded after page CSS so every shell uses one palette. */
:root,
html[data-theme="light"] {
    --theme-bg: #f4f7fa;
    --theme-bg-rgb: 244, 247, 250;
    --theme-surface: #ffffff;
    --theme-surface-rgb: 255, 255, 255;
    --theme-surface-muted: #f8fafc;
    --theme-surface-hover: #eef3f7;
    --theme-border: #dce4ec;
    --theme-border-strong: #c9d3dd;
    --theme-text: #263b50;
    --theme-text-soft: #42566a;
    --theme-muted: #5f7185;
    --theme-link: #176f9f;
    --theme-accent: #0f766e;
    --theme-primary: #2563eb;
    --theme-action: #2776cc;
    --theme-action-hover: #1f65b2;
    --theme-action-rgb: 39, 118, 204;
    --theme-nav-indicator: #b9dcff;
    --theme-success: #15803d;
    --theme-warning: #9a5b0a;
    --theme-danger: #b91c1c;
    --theme-purple: #6d4aff;
    --theme-code-bg: #edf2f7;
    --theme-input-bg: #f8fafc;
    --theme-backdrop: rgba(15, 23, 42, .72);
    --theme-shadow: 0 8px 28px rgba(31, 45, 61, .09);
    --theme-shadow-soft: 0 3px 12px rgba(31, 45, 61, .07);
    --theme-success-soft: #e4f6ea;
    --theme-warning-soft: #fdf0dd;
    --theme-danger-soft: #fce8e8;
    --theme-info-soft: #e7f0ff;
    --theme-accent-soft: #edf8f6;
    --theme-purple-soft: #f1efff;
    --theme-success-border: #bfe5cd;
    --theme-warning-border: #ead18d;
    --theme-danger-border: #efc2c7;
    --theme-info-border: #c9ddf5;
    --theme-accent-border: #c6e3de;
    --theme-purple-border: #d7d0f7;

    /* Existing page token families use the same semantic light palette. */
    --panel-bg: var(--theme-bg);
    --panel-surface: var(--theme-surface);
    --panel-surface-muted: var(--theme-surface-muted);
    --panel-border: var(--theme-border);
    --panel-text: var(--theme-text);
    --panel-muted: var(--theme-muted);
    --panel-shadow: var(--theme-shadow-soft);
    --public-bg: var(--theme-bg);
    --public-surface: var(--theme-surface);
    --public-soft: var(--theme-surface-muted);
    --public-line: var(--theme-border);
    --public-border: var(--theme-border);
    --public-ink: var(--theme-text);
    --public-muted: var(--theme-muted);
    --public-accent: var(--theme-accent);
    --ink: var(--theme-text);
    --ink-soft: var(--theme-text-soft);
    --slate: var(--theme-text-soft);
    --muted: var(--theme-muted);
    --accent-2: #0f8f86;
    --accent-3: var(--theme-accent);
    --surface: var(--theme-surface-muted);
    --surface-2: var(--theme-surface);
    --page: var(--theme-bg);
    --line: var(--theme-border);
    --shadow: var(--theme-shadow);
    --shadow-soft: var(--theme-shadow-soft);
    --analytics-panel: var(--theme-surface);
}

html[data-theme="dark"] {
    --theme-bg: #0f1724;
    --theme-bg-rgb: 15, 23, 36;
    --theme-surface: #182334;
    --theme-surface-rgb: 24, 35, 52;
    --theme-surface-muted: #202d40;
    --theme-surface-hover: #29384d;
    --theme-border: #34445a;
    --theme-border-strong: #465a72;
    --theme-text: #e6edf5;
    --theme-text-soft: #d0dae5;
    --theme-muted: #afbdcb;
    --theme-link: #82cff0;
    --theme-accent: #72e3d5;
    --theme-primary: #8bc6ff;
    --theme-action: #2d70ad;
    --theme-action-hover: #245d91;
    --theme-action-rgb: 45, 112, 173;
    --theme-nav-indicator: #8bc6ff;
    --theme-success: #69d59a;
    --theme-warning: #f2c96d;
    --theme-danger: #ff8d98;
    --theme-purple: #b6a5ff;
    --theme-code-bg: #111b2a;
    --theme-input-bg: #121d2c;
    --theme-backdrop: rgba(2, 6, 13, .82);
    --theme-shadow: 0 12px 32px rgba(0, 0, 0, .3);
    --theme-shadow-soft: 0 5px 16px rgba(0, 0, 0, .24);
    --theme-success-soft: #173c2b;
    --theme-warning-soft: #443019;
    --theme-danger-soft: #462328;
    --theme-info-soft: #172f4c;
    --theme-accent-soft: #183c3a;
    --theme-purple-soft: #31274d;
    --theme-success-border: #2f684a;
    --theme-warning-border: #70552b;
    --theme-danger-border: #794049;
    --theme-info-border: #2d557c;
    --theme-accent-border: #2b625d;
    --theme-purple-border: #574a7b;

    /* Existing page token families. */
    --panel-bg: var(--theme-bg);
    --panel-surface: var(--theme-surface);
    --panel-surface-muted: var(--theme-surface-muted);
    --panel-border: var(--theme-border);
    --panel-text: var(--theme-text);
    --panel-muted: var(--theme-muted);
    --panel-shadow: var(--theme-shadow-soft);
    --public-bg: var(--theme-bg);
    --public-surface: var(--theme-surface);
    --public-soft: var(--theme-surface-muted);
    --public-line: var(--theme-border);
    --public-border: var(--theme-border);
    --public-ink: var(--theme-text);
    --public-muted: var(--theme-muted);
    --public-accent: var(--theme-accent);
    --ink: var(--theme-text);
    --ink-soft: var(--theme-text-soft);
    --slate: var(--theme-text-soft);
    --muted: var(--theme-muted);
    --accent-2: #4fdbcd;
    --accent-3: #78eadc;
    --surface: var(--theme-surface-muted);
    --surface-2: var(--theme-surface);
    --page: var(--theme-bg);
    --line: var(--theme-border);
    --shadow: var(--theme-shadow);
    --shadow-soft: var(--theme-shadow-soft);
    --analytics-panel: var(--theme-surface);
}

html[data-theme="light"] .blog-page {
    --blog-ink: var(--theme-text);
    --blog-ink-soft: var(--theme-text-soft);
    --blog-muted: var(--theme-muted);
    --blog-line: var(--theme-border);
    --blog-surface: var(--theme-surface);
    --blog-soft: var(--theme-surface-muted);
    --blog-teal: var(--theme-accent);
    --blog-teal-light: #0f8f86;
    --blog-shadow: var(--theme-shadow);
}

html[data-theme="light"] .api-page {
    --ink: var(--theme-text);
    --ink-soft: var(--theme-text-soft);
    --muted: var(--theme-muted);
    --line: var(--theme-border);
    --surface: var(--theme-surface-muted);
    --surface-2: var(--theme-surface);
    --accent: var(--theme-accent);
    --accent-soft: var(--theme-accent-soft);
}

html[data-theme="light"] .business-api-docs {
    --business-ink: var(--theme-text);
    --business-muted: var(--theme-muted);
    --business-line: var(--theme-border);
    --business-accent: var(--theme-accent);
    --business-accent-soft: var(--theme-accent-soft);
}

html[data-theme="light"] .api-choice-guide {
    --api-choice-ink: var(--theme-text);
    --api-choice-muted: var(--theme-muted);
    --api-choice-line: var(--theme-border);
    --api-choice-accent: var(--theme-accent);
    --api-choice-soft: var(--theme-accent-soft);
}

html[data-theme="light"] .api-tunnel-examples {
    --tunnel-example-accent: var(--theme-accent);
    --tunnel-example-ink: var(--theme-text);
    --tunnel-example-muted: var(--theme-muted);
    --tunnel-example-line: var(--theme-border);
}

html[data-theme="light"] .public-configs-page {
    --config-bg: var(--theme-bg);
    --config-card: var(--theme-surface);
    --config-soft: var(--theme-surface-muted);
    --config-soft-strong: var(--theme-surface-hover);
    --config-ink: var(--theme-text);
    --config-muted: var(--theme-muted);
    --config-line: var(--theme-border);
    --config-shadow: var(--theme-shadow-soft);
    color-scheme: light;
}

html[data-theme="light"] .server-catalog-page,
html[data-theme="light"] .server-catalog {
    --catalog-bg: var(--theme-bg);
    --catalog-card: var(--theme-surface);
    --catalog-soft: var(--theme-surface-muted);
    --catalog-ink: var(--theme-text);
    --catalog-muted: var(--theme-muted);
    --catalog-line: var(--theme-border);
    --catalog-shadow: var(--theme-shadow-soft);
    color-scheme: light;
}

html[data-theme="dark"] .blog-page {
    --blog-ink: var(--theme-text);
    --blog-ink-soft: var(--theme-text-soft);
    --blog-muted: var(--theme-muted);
    --blog-line: var(--theme-border);
    --blog-surface: var(--theme-surface);
    --blog-soft: var(--theme-surface-muted);
    --blog-teal: var(--theme-accent);
    --blog-teal-light: #91eee3;
    --blog-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .api-page {
    --ink: var(--theme-text);
    --ink-soft: var(--theme-text-soft);
    --muted: var(--theme-muted);
    --line: var(--theme-border);
    --surface: var(--theme-surface-muted);
    --surface-2: var(--theme-surface);
    --accent: var(--theme-accent);
    --accent-soft: #183c3a;
}

html[data-theme="dark"] .business-api-docs {
    --business-ink: var(--theme-text);
    --business-muted: var(--theme-muted);
    --business-line: var(--theme-border);
    --business-accent: var(--theme-accent);
    --business-accent-soft: #183c3a;
}

html[data-theme="dark"] .api-choice-guide {
    --api-choice-ink: var(--theme-text);
    --api-choice-muted: var(--theme-muted);
    --api-choice-line: var(--theme-border);
    --api-choice-accent: var(--theme-accent);
    --api-choice-soft: var(--theme-surface-muted);
}

html[data-theme="dark"] .api-tunnel-examples {
    --tunnel-example-accent: var(--theme-accent);
    --tunnel-example-ink: var(--theme-text);
    --tunnel-example-muted: var(--theme-muted);
    --tunnel-example-line: var(--theme-border);
}

html[data-theme="dark"] .public-configs-page {
    --config-bg: var(--theme-bg);
    --config-card: var(--theme-surface);
    --config-soft: var(--theme-surface-muted);
    --config-soft-strong: var(--theme-surface-hover);
    --config-ink: var(--theme-text);
    --config-muted: var(--theme-muted);
    --config-line: var(--theme-border);
    --config-shadow: var(--theme-shadow-soft);
    color-scheme: dark;
}

html[data-theme="dark"] .server-catalog-page,
html[data-theme="dark"] .server-catalog {
    --catalog-bg: var(--theme-bg);
    --catalog-card: var(--theme-surface);
    --catalog-soft: var(--theme-surface-muted);
    --catalog-ink: var(--theme-text);
    --catalog-muted: var(--theme-muted);
    --catalog-line: var(--theme-border);
    --catalog-shadow: var(--theme-shadow-soft);
    color-scheme: dark;
}

html,
body {
    background-color: var(--theme-bg);
}

body {
    color: var(--theme-text);
}

body,
.content-wrapper,
.main-footer,
.main-header,
.main-sidebar,
.card,
.modal-content,
.dropdown-menu,
.form-control,
.custom-select,
.input-group-text,
.table,
.list-group-item,
.page-link,
.alert {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.theme-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: .45rem;
    justify-content: center;
}

.theme-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--theme-action-rgb), .35);
    outline: 0;
}

.theme-toggle--nav {
    height: 2.5rem;
    min-width: 2.5rem;
}

.theme-toggle--public {
    border: 0;
    border-radius: 7px;
    color: var(--theme-text-soft);
    height: 2.5rem;
    margin-left: .35rem;
    min-width: 2.5rem;
    padding: 0;
    width: 2.5rem;
}

.theme-toggle--public:hover {
    background: var(--theme-surface-hover);
    color: var(--theme-text);
}

.theme-toggle--floating {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 50%;
    bottom: 1.25rem;
    box-shadow: var(--theme-shadow);
    color: var(--theme-text);
    height: 2.75rem;
    position: fixed;
    right: 1.25rem;
    width: 2.75rem;
    z-index: 1085;
}

html[dir="rtl"] .theme-toggle--floating {
    left: 1.25rem;
    right: auto;
}

/* Light mode is explicit for the same reason dark mode is: AdminLTE and
   Bootstrap ship their own component palettes, and page CSS contains older
   color families. These rules keep every shell on the shared semantic tokens. */
html[data-theme="light"] body,
html[data-theme="light"] .content-wrapper {
    background-color: var(--theme-bg);
    color: var(--theme-text);
}

html[data-theme="light"] .layout-top-nav .content-wrapper {
    background:
        radial-gradient(circle at 8% 0%, rgba(var(--theme-action-rgb), .045), transparent 30rem),
        var(--theme-bg);
    color: var(--theme-text);
}

html[data-theme="light"] .card,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .list-group-item,
html[data-theme="light"] .popover,
html[data-theme="light"] .toast {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

html[data-theme="light"] .card-header,
html[data-theme="light"] .modal-header,
html[data-theme="light"] .modal-footer,
html[data-theme="light"] .card-footer,
html[data-theme="light"] .dropdown-divider,
html[data-theme="light"] .list-group-item {
    border-color: var(--theme-border);
}

html[data-theme="light"] .card-header,
html[data-theme="light"] .modal-header {
    background-color: var(--theme-surface);
}

html[data-theme="light"] .card-footer,
html[data-theme="light"] .modal-footer {
    background-color: var(--theme-surface-muted);
}

html[data-theme="light"] .card-title,
html[data-theme="light"] .modal-title,
html[data-theme="light"] .content-header h1,
html[data-theme="light"] label,
html[data-theme="light"] legend,
html[data-theme="light"] dt {
    color: var(--theme-text);
}

html[data-theme="light"] a:not([class]),
html[data-theme="light"] .btn-link {
    color: var(--theme-link);
}

html[data-theme="light"] .text-dark,
html[data-theme="light"] .text-body {
    color: var(--theme-text) !important;
}

html[data-theme="light"] .text-muted,
html[data-theme="light"] small,
html[data-theme="light"] .help-block,
html[data-theme="light"] .form-text {
    color: var(--theme-muted) !important;
}

html[data-theme="light"] .text-secondary,
html[data-theme="light"] .text-black-50,
html[data-theme="light"] .text-gray,
html[data-theme="light"] .text-gray-dark {
    color: var(--theme-text-soft) !important;
}

html[data-theme="light"] hr,
html[data-theme="light"] .border,
html[data-theme="light"] .border-top,
html[data-theme="light"] .border-bottom,
html[data-theme="light"] .border-left,
html[data-theme="light"] .border-right {
    border-color: var(--theme-border) !important;
}

html[data-theme="light"] .bg-white,
html[data-theme="light"] .bg-light,
html[data-theme="light"] .alert-light,
html[data-theme="light"] .badge-light {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
}

html[data-theme="light"] .btn-primary {
    background-color: var(--theme-action);
    border-color: var(--theme-action);
    color: #fff;
}

html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn-primary:focus {
    background-color: var(--theme-action-hover);
    border-color: var(--theme-action-hover);
    color: #fff;
}

html[data-theme="light"] .btn-light,
html[data-theme="light"] .btn-default,
html[data-theme="light"] .btn-secondary {
    background-color: var(--theme-surface-muted);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
}

html[data-theme="light"] .btn-light:hover,
html[data-theme="light"] .btn-light:focus,
html[data-theme="light"] .btn-default:hover,
html[data-theme="light"] .btn-default:focus,
html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] .btn-secondary:focus {
    background-color: var(--theme-surface-hover);
    border-color: var(--theme-primary);
    color: var(--theme-text);
}

html[data-theme="light"] .btn-outline-light,
html[data-theme="light"] .btn-outline-secondary {
    border-color: var(--theme-border-strong);
    color: var(--theme-text-soft);
}

html[data-theme="light"] .btn-outline-light:hover,
html[data-theme="light"] .btn-outline-light:focus,
html[data-theme="light"] .btn-outline-secondary:hover,
html[data-theme="light"] .btn-outline-secondary:focus {
    background-color: var(--theme-action);
    border-color: var(--theme-action);
    color: #fff;
}

html[data-theme="light"] .btn-outline-primary {
    border-color: var(--theme-action);
    color: var(--theme-action-hover);
}

html[data-theme="light"] .btn-outline-primary:hover,
html[data-theme="light"] .btn-outline-primary:focus {
    background-color: var(--theme-action);
    border-color: var(--theme-action);
    color: #fff;
}

html[data-theme="light"] .form-control,
html[data-theme="light"] .custom-select,
html[data-theme="light"] .custom-file-label,
html[data-theme="light"] .input-group-text,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]) {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-border-strong) !important;
    color: var(--theme-text) !important;
}

html[data-theme="light"] .input-group-text {
    background-color: var(--theme-surface-hover) !important;
    color: var(--theme-text-soft) !important;
}

html[data-theme="light"] .input-group-text .fa,
html[data-theme="light"] .input-group-text .fas,
html[data-theme="light"] .input-group-text .far,
html[data-theme="light"] .input-group-text .fab {
    color: var(--theme-text-soft);
}

html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .custom-select:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] input:focus {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-action) !important;
    color: var(--theme-text) !important;
}

html[data-theme="light"] .form-control:disabled,
html[data-theme="light"] .form-control[readonly],
html[data-theme="light"] .custom-select:disabled,
html[data-theme="light"] select:disabled,
html[data-theme="light"] textarea:disabled,
html[data-theme="light"] input:disabled,
html[data-theme="light"] input[readonly] {
    background-color: var(--theme-surface-hover) !important;
    color: var(--theme-muted) !important;
    opacity: 1;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: var(--theme-muted);
    opacity: 1;
}

html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] input:-webkit-autofill:hover,
html[data-theme="light"] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-input-bg) inset;
    -webkit-text-fill-color: var(--theme-text);
}

html[data-theme="light"] .login-card-body,
html[data-theme="light"] .register-card-body {
    background-color: var(--theme-surface);
    color: var(--theme-text);
}

html[data-theme="light"] .login-box .card,
html[data-theme="light"] .register-box .card {
    border-color: var(--theme-border);
}

html[data-theme="light"] .login-box-msg,
html[data-theme="light"] .register-box-msg {
    color: var(--theme-text-soft);
}

html[data-theme="light"] .table {
    color: var(--theme-text-soft);
}

html[data-theme="light"] .table th,
html[data-theme="light"] .table td,
html[data-theme="light"] .table thead th {
    border-color: var(--theme-border);
}

html[data-theme="light"] .table thead th,
html[data-theme="light"] .table-active,
html[data-theme="light"] .table-active > th,
html[data-theme="light"] .table-active > td {
    background-color: var(--theme-surface-muted);
    color: var(--theme-text);
}

html[data-theme="light"] .table-hover tbody tr:hover,
html[data-theme="light"] .table-hover tbody tr:hover > td,
html[data-theme="light"] .table-hover tbody tr:hover > th {
    background-color: var(--theme-surface-hover);
    color: var(--theme-text);
}

html[data-theme="light"] .nav-tabs,
html[data-theme="light"] .nav-tabs .nav-link,
html[data-theme="light"] .page-link {
    border-color: var(--theme-border);
}

html[data-theme="light"] .nav-tabs .nav-link {
    color: var(--theme-muted);
}

html[data-theme="light"] .nav-tabs .nav-link.active,
html[data-theme="light"] .nav-tabs .nav-item.show .nav-link,
html[data-theme="light"] .page-link {
    background-color: var(--theme-surface);
    color: var(--theme-link);
}

html[data-theme="light"] .nav-tabs .nav-link:hover,
html[data-theme="light"] .nav-tabs .nav-link:focus,
html[data-theme="light"] .page-link:hover,
html[data-theme="light"] .page-link:focus {
    background-color: var(--theme-surface-hover);
    color: var(--theme-action-hover);
}

html[data-theme="light"] .page-item.disabled .page-link {
    background-color: var(--theme-surface-muted);
    border-color: var(--theme-border);
    color: var(--theme-muted);
}

html[data-theme="light"] pre,
html[data-theme="light"] code,
html[data-theme="light"] .code-block,
html[data-theme="light"] .hljs {
    background-color: var(--theme-code-bg);
    color: var(--theme-text-soft);
}

html[data-theme="light"] .main-header,
html[data-theme="light"] .public-navbar,
html[data-theme="light"] body > .navbar {
    background-color: rgba(var(--theme-surface-rgb), .96);
    border-color: var(--theme-border);
}

html[data-theme="light"] .main-header.bg-secondary {
    background-color: var(--theme-surface) !important;
}

html[data-theme="light"] .main-footer {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-muted);
}

html[data-theme="light"] body > .navbar .navbar-brand,
html[data-theme="light"] body > .navbar .navbar-brand:hover,
html[data-theme="light"] body > .navbar .navbar-brand:focus,
html[data-theme="light"] .public-navbar .navbar-brand,
html[data-theme="light"] .public-navbar .navbar-brand:hover,
html[data-theme="light"] .public-navbar .navbar-brand:focus {
    color: var(--theme-text) !important;
}

html[data-theme="light"] body > .navbar .navbar-nav .nav-link,
html[data-theme="light"] .public-navbar .navbar-nav .nav-link,
html[data-theme="light"] .main-header .navbar-nav .nav-link {
    color: var(--theme-text-soft) !important;
}

html[data-theme="light"] .main-header .text-light,
html[data-theme="light"] .main-header .text-white {
    color: var(--theme-text-soft) !important;
}

html[data-theme="light"] body > .navbar .navbar-nav .nav-link:hover,
html[data-theme="light"] body > .navbar .navbar-nav .nav-link:focus,
html[data-theme="light"] body > .navbar .navbar-nav .nav-link:active,
html[data-theme="light"] body > .navbar .navbar-nav .nav-link.active,
html[data-theme="light"] body > .navbar .navbar-nav .nav-link.show,
html[data-theme="light"] body > .navbar .navbar-nav .show > .nav-link,
html[data-theme="light"] .public-navbar .navbar-nav .nav-link:hover,
html[data-theme="light"] .public-navbar .navbar-nav .nav-link:focus,
html[data-theme="light"] .public-navbar .navbar-nav .nav-link:active,
html[data-theme="light"] .public-navbar .navbar-nav .nav-link.active,
html[data-theme="light"] .public-navbar .navbar-nav .nav-link.show,
html[data-theme="light"] .public-navbar .navbar-nav .show > .nav-link,
html[data-theme="light"] .main-header .navbar-nav .nav-link:hover,
html[data-theme="light"] .main-header .navbar-nav .nav-link:focus,
html[data-theme="light"] .main-header .navbar-nav .nav-link:active {
    background-color: var(--theme-surface-hover);
    color: var(--theme-action-hover) !important;
}

html[data-theme="light"] .dropdown-menu .dropdown-item,
html[data-theme="light"] .dropdown-menu .dropdown-item:visited {
    color: var(--theme-text-soft) !important;
}

html[data-theme="light"] .dropdown-menu .dropdown-item:hover,
html[data-theme="light"] .dropdown-menu .dropdown-item:focus,
html[data-theme="light"] .dropdown-menu .dropdown-item:active,
html[data-theme="light"] .dropdown-menu .dropdown-item.active {
    background-color: var(--theme-surface-hover);
    color: var(--theme-action-hover) !important;
}

html[data-theme="light"] .sidebar-dark-secondary,
html[data-theme="light"] .main-sidebar {
    background-color: var(--theme-surface) !important;
    border-right: 1px solid var(--theme-border);
}

html[data-theme="light"] .main-sidebar .brand-link,
html[data-theme="light"] .main-sidebar .brand-link:hover,
html[data-theme="light"] .main-sidebar .brand-text {
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="light"] .main-sidebar .nav-header {
    color: var(--theme-muted) !important;
}

html[data-theme="light"] .main-sidebar .nav-sidebar .nav-link,
html[data-theme="light"] .main-sidebar .nav-sidebar .nav-link .nav-icon {
    color: var(--theme-text-soft) !important;
}

html[data-theme="light"] .main-sidebar .nav-sidebar .nav-link:hover,
html[data-theme="light"] .main-sidebar .nav-sidebar .nav-link:focus,
html[data-theme="light"] .main-sidebar .nav-sidebar .menu-open > .nav-link:not(.active) {
    background-color: var(--theme-surface-hover) !important;
    color: var(--theme-text) !important;
}

html[data-theme="light"] .main-sidebar .nav-sidebar .nav-link:active,
html[data-theme="light"] .main-sidebar .nav-sidebar .nav-link.active {
    background-color: var(--theme-action) !important;
    box-shadow: inset 3px 0 0 var(--theme-nav-indicator);
    color: #fff !important;
}

html[data-theme="light"] .main-sidebar .nav-sidebar .nav-link.active .nav-icon {
    color: #fff !important;
}

html[data-theme="light"] .welcome-card {
    background: linear-gradient(135deg, var(--theme-surface) 0%, var(--theme-surface-muted) 100%) !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: var(--theme-shadow-soft);
    color: var(--theme-text);
}

html[data-theme="light"] .welcome-kicker {
    color: var(--theme-accent);
}

html[data-theme="light"] .welcome-title {
    color: var(--theme-text);
}

html[data-theme="light"] .welcome-copy {
    color: var(--theme-muted);
}

html[data-theme="light"] .close {
    color: var(--theme-text);
    text-shadow: none;
}

html[data-theme="light"] .panel-announcement {
    --announcement-background: var(--theme-info-soft);
    --announcement-border: var(--theme-info-border);
    --announcement-copy: var(--theme-text-soft);
}

html[data-theme="light"] .panel-announcement-success {
    --announcement-background: var(--theme-success-soft);
    --announcement-border: var(--theme-success-border);
}

html[data-theme="light"] .panel-announcement-warning {
    --announcement-background: var(--theme-warning-soft);
    --announcement-border: var(--theme-warning-border);
}

html[data-theme="light"] .panel-announcement-danger {
    --announcement-background: var(--theme-danger-soft);
    --announcement-border: var(--theme-danger-border);
}

html[data-theme="light"] :is(.is-good, .is-success, .status-published, .bg-success-soft):not(.btn):not(.badge) {
    background-color: var(--theme-success-soft);
}

html[data-theme="light"] :is(.is-warn, .is-warning, .status-review, .bg-warning-soft):not(.btn):not(.badge) {
    background-color: var(--theme-warning-soft);
}

html[data-theme="light"] :is(.is-bad, .is-danger, .status-unpublished, .bg-danger-soft):not(.btn):not(.badge) {
    background-color: var(--theme-danger-soft);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .layout-top-nav .content-wrapper {
    background-color: var(--theme-bg);
    color: var(--theme-text);
}

/* AdminLTE marks panel pages with .dark-mode and applies a legacy gray body
   background using !important. Keep exposed layout seams consistent with the
   content wrapper instead of showing a gray strip above or below the footer. */
html[data-theme="dark"] body.dark-mode {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .toast {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .dropdown-divider,
html[data-theme="dark"] .list-group-item {
    border-color: var(--theme-border);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .modal-header {
    background-color: var(--theme-surface);
}

html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-footer {
    background-color: var(--theme-surface-muted);
}

html[data-theme="dark"] .card-title,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .content-header h1,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] label,
html[data-theme="dark"] legend,
html[data-theme="dark"] dt,
html[data-theme="dark"] strong {
    color: var(--theme-text);
}

html[data-theme="dark"] a:not([class]),
html[data-theme="dark"] .btn-link {
    color: var(--theme-link);
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .help-block,
html[data-theme="dark"] .form-text {
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-black-50,
html[data-theme="dark"] .text-gray,
html[data-theme="dark"] .text-gray-dark {
    color: var(--theme-text-soft) !important;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-right {
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .badge-light {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
}

/* AdminLTE defines a second dark-mode .btn-light block that turns these
   controls white. In dark mode, "light" buttons are secondary surface
   actions rather than literal light-colored controls. */
html[data-theme="dark"] .btn-light {
    background-color: var(--theme-surface-muted) !important;
    border-color: var(--theme-border-strong) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:focus,
html[data-theme="dark"] .btn-light.focus,
html[data-theme="dark"] .btn-light:not(:disabled):not(.disabled):active,
html[data-theme="dark"] .btn-light:not(:disabled):not(.disabled).active,
html[data-theme="dark"] .show > .btn-light.dropdown-toggle {
    background-color: var(--theme-surface-hover) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .btn-outline-light {
    border-color: var(--theme-border-strong) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .btn-outline-light:hover,
html[data-theme="dark"] .btn-outline-light:focus,
html[data-theme="dark"] .btn-outline-light:not(:disabled):not(.disabled):active,
html[data-theme="dark"] .btn-outline-light:not(:disabled):not(.disabled).active {
    background-color: var(--theme-surface-hover) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .welcome-card {
    background: linear-gradient(135deg, var(--theme-surface) 0%, var(--theme-surface-muted) 100%) !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: var(--theme-shadow-soft);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .custom-file-label,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]) {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-border-strong) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] input:focus {
    background-color: var(--theme-input-bg) !important;
    border-color: #4fa3d1 !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #a7b6c6;
    opacity: 1;
}

html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .input-group-text .fa,
html[data-theme="dark"] .input-group-text .fas,
html[data-theme="dark"] .input-group-text .far,
html[data-theme="dark"] .input-group-text .fab {
    color: var(--theme-text-soft);
}

html[data-theme="dark"] .login-card-body,
html[data-theme="dark"] .register-card-body {
    background-color: var(--theme-surface);
    color: var(--theme-text);
}

html[data-theme="dark"] .login-box-msg,
html[data-theme="dark"] .register-box-msg {
    color: var(--theme-text-soft);
}

html[data-theme="dark"] .login-card-body a,
html[data-theme="dark"] .register-card-body a,
html[data-theme="dark"] .login-box .card-footer a,
html[data-theme="dark"] .register-box .card-footer a {
    color: var(--theme-link);
}

html[data-theme="dark"] .btn-outline-primary {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

html[data-theme="dark"] .btn-primary {
    background-color: var(--theme-action);
    border-color: var(--theme-action);
    color: #fff;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus {
    background-color: var(--theme-action-hover);
    border-color: var(--theme-action-hover);
    color: #fff;
}

html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #0a1624;
}

html[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--theme-text-soft);
    color: var(--theme-text-soft);
}

html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus {
    background-color: var(--theme-text-soft);
    border-color: var(--theme-text-soft);
    color: #0a1624;
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-input-bg) inset;
    -webkit-text-fill-color: var(--theme-text);
}

html[data-theme="dark"] .table {
    color: var(--theme-text-soft);
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table thead th {
    border-color: var(--theme-border);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-active,
html[data-theme="dark"] .table-active > th,
html[data-theme="dark"] .table-active > td {
    background-color: var(--theme-surface-muted);
    color: var(--theme-text);
}

html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] .table-hover tbody tr:hover > td,
html[data-theme="dark"] .table-hover tbody tr:hover > th {
    background-color: var(--theme-surface-hover);
    color: var(--theme-text);
}

html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .nav-tabs .nav-link,
html[data-theme="dark"] .page-link {
    border-color: var(--theme-border);
}

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link,
html[data-theme="dark"] .page-link {
    background-color: var(--theme-surface);
    color: var(--theme-link);
}

html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--theme-surface-muted);
    border-color: var(--theme-border);
    color: var(--theme-muted);
}

html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] kbd,
html[data-theme="dark"] .code-block,
html[data-theme="dark"] .hljs {
    background-color: var(--theme-code-bg);
    color: #d5e4f3;
}

html[data-theme="dark"] .main-header,
html[data-theme="dark"] .public-navbar,
html[data-theme="dark"] body > .navbar {
    background-color: rgba(var(--theme-surface-rgb), .94);
    border-color: var(--theme-border);
}

html[data-theme="dark"] .main-header.bg-secondary {
    background-color: var(--theme-surface) !important;
}

html[data-theme="dark"] body > .navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(230, 237, 245, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .main-footer {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-muted);
}

html[data-theme="dark"] .navbar-dark .navbar-nav .nav-link,
html[data-theme="dark"] .main-header .nav-link {
    color: #e1e8f0;
}

html[data-theme="dark"] body > .navbar .navbar-brand,
html[data-theme="dark"] body > .navbar .navbar-brand:hover,
html[data-theme="dark"] body > .navbar .navbar-brand:focus,
html[data-theme="dark"] .public-navbar .navbar-brand,
html[data-theme="dark"] .public-navbar .navbar-brand:hover,
html[data-theme="dark"] .public-navbar .navbar-brand:focus,
html[data-theme="dark"] .main-sidebar .brand-link,
html[data-theme="dark"] .main-sidebar .brand-link:hover,
html[data-theme="dark"] .main-sidebar .brand-text {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] body > .navbar .navbar-nav .nav-link,
html[data-theme="dark"] .public-navbar .navbar-nav .nav-link {
    color: var(--theme-text-soft) !important;
}

html[data-theme="dark"] body > .navbar .navbar-nav .nav-link:hover,
html[data-theme="dark"] body > .navbar .navbar-nav .nav-link:focus,
html[data-theme="dark"] body > .navbar .navbar-nav .nav-link:active,
html[data-theme="dark"] body > .navbar .navbar-nav .nav-link.active,
html[data-theme="dark"] body > .navbar .navbar-nav .nav-link.show,
html[data-theme="dark"] body > .navbar .navbar-nav .show > .nav-link,
html[data-theme="dark"] .public-navbar .navbar-nav .nav-link:hover,
html[data-theme="dark"] .public-navbar .navbar-nav .nav-link:focus,
html[data-theme="dark"] .public-navbar .navbar-nav .nav-link:active,
html[data-theme="dark"] .public-navbar .navbar-nav .nav-link.active,
html[data-theme="dark"] .public-navbar .navbar-nav .nav-link.show,
html[data-theme="dark"] .public-navbar .navbar-nav .show > .nav-link {
    color: var(--theme-accent) !important;
}

html[data-theme="dark"] .dropdown-menu .dropdown-item,
html[data-theme="dark"] .dropdown-menu .dropdown-item:visited {
    color: var(--theme-text-soft) !important;
}

html[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] .dropdown-menu .dropdown-item:focus,
html[data-theme="dark"] .dropdown-menu .dropdown-item:active,
html[data-theme="dark"] .dropdown-menu .dropdown-item.active {
    background-color: var(--theme-surface-hover);
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .main-header .navbar-nav .nav-link:hover,
html[data-theme="dark"] .main-header .navbar-nav .nav-link:focus,
html[data-theme="dark"] .main-header .navbar-nav .nav-link:active,
html[data-theme="dark"] .main-header .navbar-nav .nav-link.active,
html[data-theme="dark"] .main-header .navbar-nav .show > .nav-link {
    color: #fff !important;
}

html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link {
    color: var(--theme-text-soft);
}

html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link:hover,
html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link:focus {
    background-color: var(--theme-surface-hover) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link:active,
html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link.active {
    background-color: var(--theme-action) !important;
    box-shadow: inset 3px 0 0 var(--theme-nav-indicator);
    color: #fff !important;
}

html[data-theme="dark"] .main-sidebar .nav-sidebar .menu-open > .nav-link:not(.active) {
    background-color: var(--theme-surface-hover) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link.active .nav-icon {
    color: #fff !important;
}

html[data-theme="dark"] .sidebar-dark-secondary,
html[data-theme="dark"] .main-sidebar {
    background-color: #111b29;
}

html[data-theme="dark"] .modal-backdrop.show,
html[data-theme="dark"] .blog-image-lightbox,
html[data-theme="dark"] .shot-viewer {
    background-color: var(--theme-backdrop);
}

html[data-theme="dark"] .close {
    color: var(--theme-text);
    text-shadow: none;
}

html[data-theme="dark"] .panel-announcement {
    --announcement-accent: #62c9f5;
    --announcement-background: var(--theme-info-soft);
    --announcement-border: var(--theme-info-border);
    --announcement-copy: var(--theme-text-soft);
}

html[data-theme="dark"] .panel-announcement-info {
    --announcement-accent: #62c9f5;
    --announcement-border: var(--theme-info-border);
}

html[data-theme="dark"] .panel-announcement-success {
    --announcement-accent: var(--theme-success);
    --announcement-border: var(--theme-success-border);
}

html[data-theme="dark"] .panel-announcement-warning {
    --announcement-accent: var(--theme-warning);
    --announcement-border: var(--theme-warning-border);
}

html[data-theme="dark"] .panel-announcement-danger {
    --announcement-accent: var(--theme-danger);
    --announcement-border: var(--theme-danger-border);
}

html[data-theme="dark"] .panel-announcement-icon,
html[data-theme="dark"] .panel-announcement-required {
    background: var(--theme-surface);
    color: var(--announcement-accent);
}

html[data-theme="dark"] .panel-announcement-dismiss:hover,
html[data-theme="dark"] .panel-announcement-dismiss:focus {
    background: var(--theme-surface-hover);
}

html[data-theme="dark"] .tutorial-topics span {
    background: var(--theme-surface-hover);
    border-color: var(--theme-accent-border);
    color: var(--theme-text-soft);
}

html[data-theme="dark"] .tutorial-play-icon,
html[data-theme="dark"] .tutorial-reference-nav a {
    background: var(--theme-surface);
    border-color: var(--theme-accent-border);
    color: var(--theme-accent);
}

html[data-theme="dark"] .blog-search button {
    color: #17202b;
}

html[data-theme="dark"] .blog-page a.blog-label,
html[data-theme="dark"] .blog-page a.blog-card__link {
    color: var(--blog-teal-light);
}

html[data-theme="dark"] .blog-button--primary,
html[data-theme="dark"] .blog-category-link.is-active {
    color: #0a1624 !important;
}

html[data-theme="dark"] .api-choice-card__current {
    color: #0a1624;
}

html[data-theme="dark"] .api-method {
    color: #f0fdfa;
}

html[data-theme="dark"] .docs-method,
html[data-theme="dark"] .api-tunnel-example__endpoint > span {
    color: #0a1624;
}

html[data-theme="dark"] .community-join {
    background: color-mix(in srgb, var(--link-color, var(--community-accent, #176f68)) 68%, #07111d);
    color: #f8fbff;
}

html[data-theme="dark"] .community-join:hover,
html[data-theme="dark"] .community-join:focus {
    background: color-mix(in srgb, var(--link-color, var(--community-accent, #176f68)) 76%, #07111d);
    color: #fff;
}

html[data-theme="dark"] :is(.is-good, .is-success, .status-published, .bg-success-soft):not(.btn):not(.badge) {
    background-color: var(--theme-success-soft);
}

html[data-theme="dark"] :is(.is-warn, .is-warning, .status-review, .bg-warning-soft):not(.btn):not(.badge) {
    background-color: var(--theme-warning-soft);
}

html[data-theme="dark"] :is(.is-bad, .is-danger, .status-unpublished, .bg-danger-soft):not(.btn):not(.badge) {
    background-color: var(--theme-danger-soft);
}

html[data-theme="dark"] img:not([src$=".svg"]),
html[data-theme="dark"] video {
    filter: brightness(.94);
}

@media (max-width: 991.98px) {
    .theme-toggle--public {
        align-self: flex-start;
        margin: .35rem .25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .content-wrapper,
    .main-footer,
    .main-header,
    .main-sidebar,
    .card,
    .modal-content,
    .dropdown-menu,
    .form-control,
    .custom-select,
    .input-group-text,
    .table,
    .list-group-item,
    .page-link,
    .alert {
        transition: none;
    }
}