:root {
    --theme-gray-100: #212529;
    --theme-gray-90: #343a40;
    --theme-gray-80: #495057;
    --theme-gray-70: #6c757d;
    --theme-gray-60: #868e96;
    --theme-gray-50: #adb5bd;
    --theme-gray-20: #dee2e6;
    --theme-gray-10: #f4f6f9;
    --theme-blue-60: #3f6791;
    --theme-blue-70: #315273;
    --theme-blue-80: #25415e;
    --theme-blue-40: #6ea8d8;
    --theme-green-60: #28a745;
    --theme-red-60: #dc3545;
    --theme-yellow-30: #ffc107;
    --theme-cyan-60: #17a2b8;

    --canvas: #f4f6f9;
    --panel: #ffffff;
    --panel-muted: #f8f9fa;
    --field-bg: #ffffff;
    --table-head-bg: #f8f9fa;
    --table-row-bg: #ffffff;
    --table-row-alt: #fbfcfd;
    --table-filter-bg: #f4f6f9;
    --hover-bg: #eef5fb;
    --ink: var(--theme-gray-100);
    --muted: #6c757d;
    --border: var(--theme-gray-20);
    --border-strong: #ced4da;
    --accent: var(--theme-blue-60);
    --accent-hover: #315273;
    --accent-active: var(--theme-blue-80);
    --accent-soft: #eaf3fb;
    --button-primary: var(--theme-blue-60);
    --button-primary-hover: #315273;
    --button-primary-active: var(--theme-blue-80);
    --button-secondary-bg: var(--panel-muted);
    --button-secondary-hover: var(--hover-bg);
    --button-secondary-border: var(--border-strong);
    --button-secondary-text: var(--ink);
    --link: var(--theme-blue-60);
    --link-hover: var(--theme-blue-70);
    --success: var(--theme-green-60);
    --danger: var(--theme-red-60);
    --danger-hover: #b81922;
    --warn: #8a3800;
    --info: var(--theme-cyan-60);
    --focus-ring: rgba(63, 103, 145, .28);
    --chart-text: var(--ink);
    --chart-muted-text: var(--muted);
    --radius-card: 8px;
    --radius-control: 4px;
    --shadow-panel: 0 10px 24px rgba(33, 37, 41, .08);
    --font-sans: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body.dark-mode {
    --canvas: #181b1f;
    --panel: #2f353c;
    --panel-muted: #343a40;
    --field-bg: #2a3036;
    --table-head-bg: #343a40;
    --table-row-bg: #2f353c;
    --table-row-alt: #353b42;
    --table-filter-bg: #30363d;
    --hover-bg: #3b4652;
    --ink: #f4f6f9;
    --muted: #c2c7d0;
    --border: #454d55;
    --border-strong: #5a6268;
    --accent: #5f94c4;
    --accent-hover: #82b0d8;
    --accent-active: #3f6791;
    --accent-soft: rgba(95, 148, 196, .14);
    --button-primary: #3f6791;
    --button-primary-hover: #4d7da8;
    --button-primary-active: #355c83;
    --button-secondary-bg: rgba(173, 181, 189, .16);
    --button-secondary-hover: rgba(173, 181, 189, .23);
    --button-secondary-border: rgba(173, 181, 189, .28);
    --button-secondary-text: #e1e6eb;
    --link: #74a9d4;
    --link-hover: #94c1e2;
    --success: #30a957;
    --danger: #d44c43;
    --danger-hover: #bd4037;
    --warn: #ffc107;
    --chart-text: var(--ink);
    --chart-muted-text: var(--muted);
    --focus-ring: rgba(110, 168, 216, .32);
    --shadow-panel: 0 10px 28px rgba(0, 0, 0, .24);
    background: var(--canvas);
}

html {
    color-scheme: light;
}

body.dark-mode {
    color-scheme: dark;
}

body {
    font-family: var(--font-sans);
    background: var(--canvas);
    color: var(--ink);
    letter-spacing: 0;
    overflow-x: hidden;
}

a {
    color: var(--link);
}

a:hover,
a:focus {
    color: var(--link-hover);
}

.text-primary,
.text-info {
    color: var(--link) !important;
}

a.text-primary:hover,
a.text-primary:focus,
a.text-info:hover,
a.text-info:focus {
    color: var(--link-hover) !important;
}

.text-secondary,
.text-muted {
    color: var(--muted) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-warning {
    color: var(--warn) !important;
}

.entity-link {
    color: var(--link) !important;
    font-weight: 600;
    text-decoration: none;
}

.entity-link:hover,
.entity-link:focus {
    color: var(--link-hover) !important;
    text-decoration: none;
}

.aux-link {
    color: var(--link) !important;
    cursor: pointer;
    text-decoration: none;
}

.aux-link:hover,
.aux-link:focus {
    color: var(--link-hover) !important;
    text-decoration: none;
}

.status-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-weight: 600;
    text-decoration: none;
}

.status-link:hover,
.status-link:focus {
    text-decoration: none;
}

.status-link-success {
    color: var(--success) !important;
}

.status-link-muted {
    color: var(--muted) !important;
}

::selection {
    background: var(--accent);
    color: #ffffff;
}

.content-wrapper > .content {
    padding-bottom: 1.5rem;
}

.content-wrapper {
    background: var(--canvas);
    color: var(--ink);
}

.small-box, .card {
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-panel);
}

.card {
    background: var(--panel);
    color: var(--ink);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}

.card-header > .card-title,
.card-header > h1,
.card-header > h2,
.card-header > h3,
.card-header > h4,
.card-header > h5,
.card-header > h6 {
    margin-bottom: 0;
}

.card-header > .card-tools,
.card-header > .btn,
.card-header > a.btn,
.card-header > .btn-group,
.card-header > .dropdown {
    margin-left: auto;
}

.card-header > .card-tools {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.card-header > .row {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.card-footer {
    background: var(--panel-muted);
    border-top: 1px solid var(--border);
    color: var(--muted);
}

.main-header.navbar {
    background: #1f2d3d;
    color: var(--theme-gray-10);
}

.main-header.navbar .nav-link,
.main-header.navbar .navbar-text {
    color: var(--theme-gray-10);
}

.main-header.navbar .nav-link:hover,
.main-header.navbar .nav-link:focus,
.main-header.navbar .navbar-text:hover,
.main-header.navbar .navbar-text:focus {
    color: #ffffff;
}

.brand-link,
.main-sidebar {
    background: #1f2d3d;
}

.main-sidebar.sidebar-ctx-admin,
.sidebar-ctx-admin > .brand-link {
    background: #1f2d3d;
}

.main-sidebar.sidebar-ctx-site,
.sidebar-ctx-site > .brand-link {
    background: #1f2d3d;
}

.control-sidebar.control-sidebar-dark.sidebar-ctx-tools {
    background: #1f2d3d;
}
.control-sidebar.sidebar-ctx-tools .nav-sidebar {
    padding: 0 8px;
}
.control-sidebar.sidebar-ctx-tools .nav-sidebar .nav-link {
    color: #c6c6c6;
}
.control-sidebar.sidebar-ctx-tools .nav-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
}
.control-sidebar.sidebar-ctx-tools .nav-sidebar .nav-link .nav-icon {
    color: #c6c6c6;
}
.control-sidebar.sidebar-ctx-tools .nav-sidebar .nav-link:hover .nav-icon {
    color: #fff;
}
.control-sidebar.sidebar-ctx-tools .nav-sidebar .nav-link.active,
body.dark-mode .control-sidebar.sidebar-ctx-tools .nav-sidebar .nav-link.active {
    background-color: #3f6791;
    color: #fff;
}
.control-sidebar.sidebar-ctx-tools .nav-sidebar .nav-link.active .nav-icon {
    color: #fff;
}

aside.main-sidebar.sidebar-dark-primary > .brand-link {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: .65rem .85rem;
    overflow: hidden;
    color: var(--theme-gray-10) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

aside.main-sidebar.sidebar-dark-primary > .brand-link .brand-image {
    float: none;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin: 0 .65rem 0 0;
    object-fit: contain;
    box-shadow: none !important;
}

aside.main-sidebar.sidebar-dark-primary > .brand-link:hover,
aside.main-sidebar.sidebar-dark-primary > .brand-link:focus {
    color: #ffffff !important;
    text-decoration: none;
}

aside.main-sidebar.sidebar-dark-primary > .brand-link .brand-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--theme-gray-10) !important;
}

aside.main-sidebar.sidebar-dark-primary > .brand-link:hover .brand-text,
aside.main-sidebar.sidebar-dark-primary > .brand-link:focus .brand-text {
    color: #ffffff !important;
}

.brand-logo-image {
    display: block;
    height: 32px;
    width: auto;
    max-width: none;
    flex-shrink: 0;
}

body.sidebar-collapse .brand-link {
    justify-content: flex-start;
}

body.sidebar-collapse .brand-logo-image {
    width: 46px;
    height: 32px;
    object-fit: cover;
    object-position: left center;
}

.nav-sidebar .nav-link.active {
    background: #3f6791;
    color: #ffffff;
    box-shadow: inset 4px 0 0 rgba(255, 255, 255, .22);
}

.nav-sidebar .nav-link {
    border-radius: var(--radius-control);
    color: #c6c6c6;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.nav-sidebar .nav-link:hover,
.nav-sidebar .nav-link:focus {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.nav-sidebar .nav-link .nav-icon {
    color: inherit;
}

.nav-header {
    color: var(--theme-gray-50);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cdn-toast-container {
    position: fixed;
    top: 76px;
    right: 24px;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: min(420px, calc(100vw - 48px));
    pointer-events: none;
}

.cdn-toast {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    width: 100%;
    padding: .875rem .95rem;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius-card);
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 16px 32px rgba(22, 22, 22, .16);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: auto;
}

.cdn-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cdn-toast.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
}

.cdn-toast-success {
    border-left-color: var(--success);
}

.cdn-toast-danger {
    border-left-color: var(--danger);
}

.cdn-toast-warning {
    border-left-color: var(--warn);
}

.cdn-toast-info {
    border-left-color: var(--info);
}

.cdn-toast-icon {
    flex: 0 0 auto;
    margin-top: .1rem;
    font-size: 1rem;
}

.cdn-toast-success .cdn-toast-icon {
    color: var(--success);
}

.cdn-toast-danger .cdn-toast-icon {
    color: var(--danger);
}

.cdn-toast-warning .cdn-toast-icon {
    color: var(--warn);
}

.cdn-toast-info .cdn-toast-icon {
    color: var(--info);
}

.cdn-toast-body {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .95rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.cdn-toast-close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    opacity: .55;
    padding: 0;
}

.cdn-toast-close:hover,
.cdn-toast-close:focus {
    opacity: .9;
}

.network-quality-tabs {
    border-bottom: 0;
    gap: .25rem;
}

.network-quality-tabs .nav-link {
    border-radius: var(--radius-control);
    color: var(--chart-muted-text);
}

.network-quality-tabs .nav-link:hover,
.network-quality-tabs .nav-link:focus {
    border-color: var(--border);
    color: var(--ink);
}

.network-quality-tabs .nav-link.active {
    background: var(--panel);
    border-color: var(--border);
    border-bottom-color: var(--accent);
    color: var(--ink);
}

.nq-filter-row .btn {
    min-width: 108px;
}

.nq-cell-content {
    min-width: 180px;
}

.nq-cell-button {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.nq-cell-button:hover,
.nq-cell-button:focus {
    color: inherit;
    text-decoration: none;
}

.nq-start-actions {
    gap: .5rem;
}

.nq-quality-chart {
    position: relative;
    width: 100%;
    min-width: 150px;
    height: 28px;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 2px;
    background: var(--theme-gray-100);
}

.nq-quality-chart-lg {
    height: 42px;
}

.nq-bar {
    position: absolute;
    bottom: 0;
    left: calc(var(--nq-bar-left, 0) * 100%);
    width: calc(var(--nq-bar-width, 0.0056) * 100%);
    min-width: 1px;
    height: calc(var(--nq-bar-h, 0) * 100%);
}

.nq-bar-ok {
    background: var(--success);
    z-index: 1;
}

.nq-bar-loss {
    background: var(--danger);
    z-index: 2;
}

.nq-cell-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: space-between;
    min-width: 0;
}

.nq-cell-metric {
    color: var(--accent);
    white-space: nowrap;
}

.table td,
.table th {
    vertical-align: middle;
}

.table {
    color: var(--ink);
    font-size: .95rem;
    background: var(--table-row-bg);
    line-height: 1.28;
}

.table thead th {
    background: var(--table-head-bg);
    border-bottom: 1px solid var(--border-strong);
    color: var(--ink);
    font-weight: 600;
    padding: .7rem .95rem;
    letter-spacing: 0;
    white-space: nowrap;
}

.table td,
.table th {
    border-color: var(--border);
}

.table td {
    background: var(--table-row-bg);
    padding: .68rem .95rem;
}

.table tbody tr {
    background-color: var(--table-row-bg);
}

.table-hover tbody tr:hover {
    background-color: var(--hover-bg);
    color: var(--ink);
}

.table-hover tbody tr:hover td {
    background-color: var(--hover-bg);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-row-alt);
}

.table-striped tbody tr:nth-of-type(odd) td {
    background-color: var(--table-row-alt);
}

.table-sm td,
.table-sm th {
    padding: .56rem .85rem;
}

.grid-view .filters td {
    background: var(--table-filter-bg);
    padding: .55rem .6rem;
}

.grid-view .filters .form-control,
.grid-view .filters select {
    width: 100%;
    min-height: 2.05rem;
    padding: .3rem .45rem;
    font-size: .86rem;
    line-height: 1.25;
}

.grid-view .filters select.form-control,
.grid-view .filters select.custom-select {
    padding-right: 1.7rem;
}

.form-control,
.custom-select {
    min-height: calc(1.5em + .75rem + 2px);
    border-color: var(--border);
    border-radius: var(--radius-control);
    background-color: var(--field-bg);
    color: var(--ink);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

select.form-control:not([multiple]):not([size]),
select.custom-select {
    appearance: none;
    padding-right: 2.25rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:
        calc(100% - 16px) calc(50% - 2px),
        calc(100% - 10px) calc(50% - 2px);
    background-repeat: no-repeat;
    background-size: 6px 6px;
}

select.form-control:not([multiple]):not([size]):hover,
select.custom-select:hover {
    border-color: var(--border-strong);
    background-color: var(--panel-muted);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--accent);
    background-color: var(--panel);
    color: var(--ink);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.form-control::placeholder {
    color: var(--muted);
}

.select2-container--bootstrap4 .select2-selection {
    min-height: calc(1.5em + .75rem + 2px);
    border-color: var(--border);
    border-radius: var(--radius-control);
    background: var(--field-bg);
    color: var(--ink);
}

.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: var(--ink);
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border-color: var(--muted) transparent transparent transparent;
}

.select2-container--bootstrap4.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--muted) transparent;
}

.select2-container--bootstrap4 .select2-dropdown,
.select2-container--bootstrap4 .select2-results__option[aria-selected=true] {
    background: var(--panel);
    color: var(--ink);
}

.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background: var(--theme-blue-60);
    color: #ffffff;
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    border-color: var(--border);
    border-radius: var(--radius-control);
    background: var(--field-bg);
    color: var(--ink);
}

.btn {
    border-radius: var(--radius-control);
    font-weight: 500;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.btn-primary,
.btn-info {
    background-color: var(--button-primary);
    border-color: var(--button-primary);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
    background-color: var(--button-primary-hover);
    border-color: var(--button-primary-hover);
    color: #ffffff;
}

.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-info:active,
.btn-info:not(:disabled):not(.disabled):active {
    background-color: var(--button-primary-active);
    border-color: var(--button-primary-active);
    color: #ffffff;
}

.btn-outline-primary,
.btn-outline-info,
.btn-outline-success {
    border-color: var(--button-primary);
    color: var(--link);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: var(--button-primary);
    border-color: var(--button-primary);
    color: #ffffff;
}

.btn-outline-secondary {
    border-color: var(--border-strong);
    color: var(--muted);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--panel-muted);
    border-color: var(--accent);
    color: var(--link-hover);
}

.btn-success {
    background-color: var(--button-primary);
    border-color: var(--button-primary);
    color: #ffffff;
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--button-primary-hover);
    border-color: var(--button-primary-hover);
    color: #ffffff;
}

.btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
    color: #ffffff;
}

.btn-warning {
    background-color: var(--panel-muted);
    border-color: var(--border-strong);
    color: var(--ink);
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--hover-bg);
    border-color: var(--accent);
    color: var(--ink);
}

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

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

.btn-sm {
    padding: .38rem .68rem;
    line-height: 1.25;
}

.btn-xs {
    padding: .22rem .42rem;
    line-height: 1.15;
}

.table .btn-sm,
.table .btn-xs {
    min-width: 2rem;
}

.badge {
    border-radius: var(--radius-control);
    font-weight: 500;
}

.badge-primary,
.badge-info {
    background: var(--accent-soft);
    color: var(--link);
}

.badge-success {
    background: rgba(36, 161, 72, .16);
    color: #24a148;
}

.badge-warning {
    background: rgba(241, 194, 27, .18);
    color: #8a3800;
}

.badge-danger {
    background: rgba(218, 30, 40, .14);
    color: var(--danger);
}

.badge-secondary {
    background: var(--panel-muted);
    border: 1px solid var(--border);
    color: var(--muted);
}

.bg-primary,
.bg-info {
    background-color: var(--button-primary) !important;
    color: #ffffff !important;
}

.bg-success {
    background-color: var(--success) !important;
    color: #ffffff !important;
}

.bg-warning {
    background-color: var(--theme-yellow-30) !important;
    color: var(--theme-gray-100) !important;
}

.bg-danger {
    background-color: var(--danger) !important;
    color: #ffffff !important;
}

.bg-secondary {
    background-color: var(--panel-muted) !important;
    color: var(--muted) !important;
}

.badge.bg-primary,
.badge.bg-info {
    background: var(--accent-soft) !important;
    color: var(--link) !important;
}

.badge.bg-success {
    background: rgba(36, 161, 72, .16) !important;
    color: #24a148 !important;
}

.badge.bg-warning {
    background: rgba(241, 194, 27, .18) !important;
    color: #8a3800 !important;
}

.badge.bg-danger {
    background: rgba(218, 30, 40, .14) !important;
    color: var(--danger) !important;
}

.badge.bg-secondary {
    background: var(--panel-muted) !important;
    border: 1px solid var(--border);
    color: var(--muted) !important;
}

.card[class*="card-"]:not(.card-outline) > .card-header {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    color: var(--ink);
}

.card.card-info,
.card.card-primary {
    border-top: 3px solid var(--accent);
}

.card.card-success {
    border-top: 3px solid var(--success);
}

.card.card-warning {
    border-top: 3px solid var(--theme-yellow-30);
}

.card.card-danger {
    border-top: 3px solid var(--danger);
}

code,
pre,
kbd,
.font-monospace {
    font-family: var(--font-mono);
}

code {
    color: var(--ink);
    background: var(--panel-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    padding: .08rem .28rem;
}

pre code {
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.config-value {
    display: inline-block;
    color: var(--ink);
    background: var(--panel-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    padding: .08rem .35rem;
    font-family: var(--font-mono);
}

.dropdown-menu,
.modal-content,
.popover {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    color: var(--ink);
    box-shadow: 0 18px 36px rgba(22, 22, 22, .14);
}

.modal-header,
.modal-footer {
    border-color: var(--border);
}

.dropdown-item {
    color: var(--ink);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--hover-bg);
    color: var(--ink);
}

.dropdown-divider {
    border-color: var(--border);
}

.page-link {
    border-color: var(--border);
    border-radius: var(--radius-control) !important;
    color: var(--link);
}

.page-link:hover,
.page-link:focus {
    background: var(--hover-bg);
    border-color: var(--accent);
    color: var(--link-hover);
}

.page-item.active .page-link {
    background: var(--button-primary);
    border-color: var(--button-primary);
    color: #ffffff;
}

.alert {
    border-radius: var(--radius-card);
    border-width: 1px;
}

.alert-info {
    background: #e5f6ff;
    border-color: #bae6ff;
    color: #003a6d;
}

.alert-success {
    background: #defbe6;
    border-color: #a7f0ba;
    color: #044317;
}

.alert-warning {
    background: #fcf4d6;
    border-color: #fddc69;
    color: #5e2900;
}

.alert-danger {
    background: #fff1f1;
    border-color: #ffd7d9;
    color: #750e13;
}

.badge-light {
    background: var(--panel-muted);
    border: 1px solid var(--border);
    color: var(--ink);
}
body.dark-mode .badge-light {
    background: var(--panel-muted);
    color: var(--ink);
}

.metric-note {
    color: var(--muted);
    font-size: .875rem;
}

/* Dark mode form controls (must beat AdminLTE's long selector) */
body.dark-mode .form-control,
body.dark-mode .form-control:not(.form-control-navbar):not(.form-control-sidebar),
body.dark-mode .custom-select {
    background-color: var(--field-bg) !important;
    border-color: var(--border) !important;
    color: var(--ink) !important;
}
body.dark-mode .form-control:-webkit-autofill,
body.dark-mode .form-control:-webkit-autofill:hover,
body.dark-mode .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
    -webkit-text-fill-color: var(--ink) !important;
    transition: background-color 5000s ease-in-out 0s;
}
body.dark-mode .form-control::placeholder {
    color: rgba(244, 244, 244, .48);
}
body.dark-mode .form-control:focus,
body.dark-mode .custom-select:focus {
    background-color: var(--panel) !important;
    border-color: var(--accent) !important;
    color: var(--ink) !important;
}

/* Dark mode overrides */
body.dark-mode .content-wrapper {
    background: var(--canvas);
}
body.dark-mode .main-footer,
body.dark-mode .main-header.navbar {
    border-color: var(--border);
}

.main-footer {
    background: var(--panel);
    border-top: 1px solid var(--border);
    color: var(--muted);
}

.navbar-title-group {
    gap: .75rem;
    min-width: 0;
}

.navbar-title-group .navbar-text {
    margin-bottom: 0;
}

.navbar-site-label {
    display: inline-flex;
    align-items: center;
    max-width: min(24rem, 45vw);
    padding: .28rem .65rem;
    border-radius: var(--radius-control);
    background: var(--theme-gray-90);
    color: var(--theme-gray-10);
    font-size: .92rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
    user-select: text;
}

.user-menu {
    position: relative;
}

.user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--theme-gray-70);
    background: var(--theme-gray-90);
    color: #fff;
    border-radius: var(--radius-control);
    padding: .45rem .8rem;
    font-size: .95rem;
    line-height: 1;
}

.user-menu-toggle:hover {
    background: var(--theme-gray-80);
    color: #fff;
}

.user-menu-name {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + .75rem);
    right: 0;
    width: min(24rem, calc(100vw - 1.5rem));
    padding: 1rem;
    border-radius: var(--radius-card);
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--ink);
    box-shadow: 0 20px 44px rgba(22, 22, 22, 0.18);
    z-index: 1060;
}

.user-menu-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.user-menu-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

.user-menu-subtitle {
    color: var(--muted);
    font-size: .8rem;
    margin-top: .2rem;
}

.user-menu-logout {
    flex: 0 0 auto;
    border-radius: var(--radius-control);
    padding: .35rem .65rem;
    background: rgba(220, 53, 69, .1);
    color: var(--danger);
    font-weight: 600;
    text-decoration: none;
}

.user-menu-logout:hover,
.user-menu-logout:focus {
    background: rgba(220, 53, 69, .16);
    color: var(--danger);
    text-decoration: none;
}

.user-menu-meta {
    display: grid;
    gap: .55rem;
    padding: .85rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.user-menu-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .9rem;
}

.user-menu-row strong {
    color: var(--ink);
}

.user-menu-row span {
    color: var(--muted);
}

.user-menu-theme-row {
    align-items: center;
}

.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.theme-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.theme-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 2.75rem;
    height: 1.35rem;
    border: 1px solid var(--border-strong);
    background: var(--panel-muted);
    transition: background-color .16s ease, border-color .16s ease;
}

.theme-switch-thumb {
    position: absolute;
    left: .15rem;
    width: .95rem;
    height: .95rem;
    background: var(--muted);
    transition: transform .16s ease, background-color .16s ease;
}

.theme-switch input:checked + .theme-switch-track {
    border-color: var(--button-primary);
    background: var(--button-primary);
}

.theme-switch input:checked + .theme-switch-track .theme-switch-thumb {
    transform: translateX(1.38rem);
    background: #ffffff;
}

.theme-switch input:focus-visible + .theme-switch-track {
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.theme-switch-text {
    min-width: 2.2rem;
    color: var(--ink);
    font-weight: 600;
    text-align: left;
}

.user-menu-token-row code {
    display: block;
    max-width: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
}

.user-menu-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: .85rem;
}

.user-menu-actions a,
.user-menu-actions button {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    padding: .6rem .5rem;
    background: var(--panel-muted);
    color: var(--ink);
    font-size: .86rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.user-menu-actions a {
    background: var(--panel-muted);
}

.user-menu-actions button {
    background: var(--panel-muted);
}

.user-menu-actions button:last-child {
    background: var(--button-primary);
    border-color: var(--button-primary);
    color: #ffffff;
}

.user-menu-actions a:hover,
.user-menu-actions a:focus,
.user-menu-actions button:hover,
.user-menu-actions button:focus {
    border-color: var(--accent);
    color: var(--ink);
}

.user-menu-actions button:last-child:hover,
.user-menu-actions button:last-child:focus {
    background: var(--button-primary-hover);
    border-color: var(--button-primary-hover);
    color: #ffffff;
}

body.dark-mode .user-menu-panel {
    background: var(--panel);
    border-color: var(--border);
}

body.dark-mode .user-menu-title,
body.dark-mode .user-menu-row strong {
    color: var(--ink);
}

body.dark-mode .user-menu-logout {
    background: rgba(218, 30, 40, .18);
    color: #ffd7d9 !important;
}

body.dark-mode .user-menu-actions a,
body.dark-mode .user-menu-actions button {
    color: var(--ink) !important;
}

body.dark-mode .user-menu-actions button:last-child {
    color: #ffffff !important;
}

body.dark-mode .dropdown-menu,
body.dark-mode .modal-content,
body.dark-mode .popover {
    background: var(--panel);
    border-color: var(--border);
    color: var(--ink);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .34);
}

body.dark-mode .dropdown-item {
    color: var(--ink);
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background: var(--panel-muted);
    color: var(--ink);
}

body.dark-mode .page-link {
    background: var(--panel);
    border-color: var(--border);
    color: var(--link);
}

body.dark-mode .page-link:hover,
body.dark-mode .page-link:focus {
    background: var(--panel-muted);
    border-color: var(--accent);
    color: var(--link-hover);
}

body.dark-mode .page-item.active .page-link {
    background: var(--button-primary);
    border-color: var(--button-primary);
    color: #ffffff;
}

body.dark-mode .alert-info {
    background: rgba(17, 146, 232, .16);
    border-color: rgba(17, 146, 232, .42);
    color: #bae6ff;
}

body.dark-mode .alert-success {
    background: rgba(48, 169, 87, .15);
    border-color: rgba(48, 169, 87, .34);
    color: #9adbad;
}

body.dark-mode .alert-warning {
    background: rgba(241, 194, 27, .14);
    border-color: rgba(241, 194, 27, .42);
    color: #fddc69;
}

body.dark-mode .alert-danger {
    background: rgba(218, 30, 40, .16);
    border-color: rgba(218, 30, 40, .42);
    color: #ffd7d9;
}

body.dark-mode .badge-primary,
body.dark-mode .badge-info {
    background: var(--accent-soft);
    color: var(--link);
}

body.dark-mode .badge.bg-primary,
body.dark-mode .badge.bg-info {
    background: var(--accent-soft) !important;
    color: var(--link) !important;
}

body.dark-mode .badge-success {
    background: rgba(48, 169, 87, .18);
    color: #40bb68;
}

body.dark-mode .badge.bg-success {
    background: rgba(48, 169, 87, .18) !important;
    color: #40bb68 !important;
}

body.dark-mode .badge-warning {
    background: rgba(241, 194, 27, .16);
    color: #fddc69;
}

body.dark-mode .badge.bg-warning {
    background: rgba(241, 194, 27, .16) !important;
    color: #fddc69 !important;
}

body.dark-mode .badge-danger {
    background: rgba(212, 76, 67, .18);
    color: #e6756d;
}

body.dark-mode .badge.bg-danger {
    background: rgba(212, 76, 67, .18) !important;
    color: #e6756d !important;
}

body.dark-mode .badge-secondary {
    background: var(--panel-muted);
    border-color: var(--border);
    color: var(--muted);
}

body.dark-mode .badge.bg-secondary {
    background: var(--panel-muted) !important;
    border-color: var(--border);
    color: var(--muted) !important;
}

body.dark-mode .card,
body.dark-mode .small-box,
body.dark-mode .info-box {
    box-shadow: var(--shadow-panel);
}
body.dark-mode .table thead th,
body.dark-mode .table td,
body.dark-mode .table th {
    border-color: var(--border);
}
body.dark-mode pre,
body.dark-mode code {
    color: #e0e0e0;
    font-family: var(--font-mono);
}
body.dark-mode .bg-light {
    background: var(--panel-muted) !important;
    color: var(--ink) !important;
}
body.dark-mode .text-dark {
    color: var(--ink) !important;
}
body.dark-mode .btn-default,
body.dark-mode .btn-secondary {
    background-color: var(--button-secondary-bg);
    border-color: var(--button-secondary-border);
    color: var(--button-secondary-text);
}
body.dark-mode .nav-sidebar .nav-link.active {
    background-color: #3f6791;
    color: #fff;
}
body.dark-mode .nav-sidebar .nav-link.active .nav-icon {
    color: #fff;
}
body.dark-mode .cdn-toast {
    background: var(--panel);
    border-color: var(--border);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .32);
}
body.dark-mode .network-quality-tabs .nav-link {
    color: var(--muted);
}
body.dark-mode .network-quality-tabs .nav-link:hover,
body.dark-mode .network-quality-tabs .nav-link:focus {
    border-color: var(--border);
    color: var(--ink);
}
body.dark-mode .network-quality-tabs .nav-link.active {
    background: var(--panel);
    border-color: var(--border);
    border-bottom-color: var(--accent);
    color: var(--ink);
}
body.dark-mode .grid-view {
    color: var(--ink);
}
body.dark-mode .grid-view .summary {
    color: var(--muted);
}
body.dark-mode a:not(.btn):not(.nav-link):not(.brand-link):not(.text-secondary):not(.text-muted):not(.text-success):not(.text-danger):not(.text-warning):not(.status-link) {
    color: var(--link) !important;
}
body.dark-mode a:not(.btn):not(.nav-link):not(.brand-link):not(.text-secondary):not(.text-muted):not(.text-success):not(.text-danger):not(.text-warning):not(.status-link):hover {
    color: var(--link-hover) !important;
}
body.dark-mode .filters input,
body.dark-mode .filters select,
body.dark-mode .filters .form-control {
    background-color: var(--field-bg);
    border-color: var(--border);
    color: var(--ink);
}
body.dark-mode .filters input::placeholder {
    color: rgba(244, 244, 244, .55);
}

/* Compact sidebar */
.nav-sidebar .nav-link {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 15px;
}
.nav-sidebar .nav-link .nav-icon {
    font-size: 15px;
    margin-right: 6px;
    width: 16px;
    text-align: center;
}
.nav-sidebar > .nav-item {
    margin-bottom: 0;
}
.nav-header {
    padding: 6px 12px 3px;
    font-size: 10px;
}

/* IPv6 node name highlight (shared: node/index, geo-dns-node/index) */
.node-name-ipv6 {
    color: var(--success);
    font-weight: 600;
}

/* Rule condition form (shared: _rule/form) */
.condition-group {
    margin-bottom: 10px;
}
.condition-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--panel-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    margin-bottom: 8px;
}
body.dark-mode .condition-row {
    background: var(--panel-muted);
    border-color: var(--border);
}
.condition-row select,
.condition-row input[type=text] { height: 34px; font-size: 13px; }
.condition-row .field-select { width: 210px; flex-shrink: 0; }
.condition-row .op-select    { width: 130px; flex-shrink: 0; }
.condition-row .value-input  { flex: 1; min-width: 120px; }
.condition-row .btn-remove   { flex-shrink: 0; }
.group-or-sep {
    margin: 2px 0 10px;
}
.group-or-sep .badge {
    font-size: 12px;
    padding: 5px 10px;
}
#no-conditions-hint {
    color: var(--muted);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-card);
    text-align: center;
    padding: 18px 12px;
    display: none;
}
body.dark-mode #no-conditions-hint {
    border-color: var(--border-strong);
}
#expression-preview {
    background: var(--panel-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: pre-wrap;
    min-height: 48px;
}
body.dark-mode #expression-preview {
    background: var(--panel-muted);
    border-color: var(--border);
}
#expression-editor {
    font-family: var(--font-mono);
    min-height: 180px;
}
.fields-help dt { font-weight: 600; color: var(--ink); margin-top: 6px; }
.fields-help dd { color: var(--muted); font-size: 13px; margin-bottom: 2px; }
body.dark-mode .fields-help dt { color: var(--ink); }
body.dark-mode .fields-help dd { color: var(--muted); }

/* Node Specification Tags */
.spec-group {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
    line-height: normal;
}
.spec-item {
    padding: 2px 7px;
    font-size: 12px;
    border-right: 1px solid var(--border);
    color: var(--link);
    text-decoration: none !important;
    background: var(--accent-soft);
}
.spec-item:last-child {
    border-right: none;
}
.spec-item:hover {
    background: var(--hover-bg);
    color: var(--link-hover);
}

/* Login page */
.login-page-body {
    margin: 0;
    min-height: 100dvh;
    padding: max(28px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    background-color: #0d1211 !important;
    background-image:
        linear-gradient(115deg, rgba(255, 159, 10, .14) 0%, rgba(255, 159, 10, 0) 34%),
        linear-gradient(245deg, rgba(56, 145, 132, .16) 0%, rgba(56, 145, 132, 0) 32%),
        linear-gradient(180deg, #111716 0%, #0d1211 52%, #151815 100%);
    color: #f7f2e7;
    color-scheme: dark;
    overflow-x: hidden;
    overflow-y: auto;
}

.login-page-body::before,
.login-page-body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.login-page-body::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .92), rgba(0, 0, 0, .42));
}

.login-page-body::after {
    background:
        repeating-linear-gradient(110deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 9px),
        linear-gradient(90deg, rgba(13, 18, 17, 0) 0%, rgba(13, 18, 17, .68) 100%);
    opacity: .52;
}

.login-experience {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    min-height: calc(100dvh - 56px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .78fr);
    align-items: center;
    gap: clamp(36px, 6vw, 86px);
}

.login-hero {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.login-brand-row {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
}

.login-logo-frame {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 18px 42px rgba(0, 0, 0, .24);
}

.login-brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.login-app-name,
.login-product-name {
    display: block;
}

.login-app-name {
    color: #fff8e6;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.login-product-name {
    margin-top: 7px;
    color: rgba(247, 242, 231, .58);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-hero-copy {
    max-width: 680px;
}

.login-kicker {
    margin: 0 0 14px;
    color: #f4b650;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.login-hero-copy h1 {
    margin: 0;
    color: #fffaf0;
    font-size: clamp(36px, 4.65vw, 58px);
    font-weight: 750;
    line-height: .98;
    letter-spacing: 0;
    text-wrap: balance;
}

.login-hero-copy h1 span {
    display: block;
}

.login-hero-copy p {
    max-width: 620px;
    margin: 20px 0 0;
    color: rgba(247, 242, 231, .72);
    font-size: 17px;
    line-height: 1.85;
    text-wrap: pretty;
}

.login-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.login-proof-grid > div {
    min-height: 92px;
    padding: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .11);
}

.login-proof-grid strong {
    display: block;
    color: #fff8e6;
    font-size: 22px;
    font-weight: 720;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.login-proof-grid span {
    display: block;
    margin-top: 12px;
    color: rgba(247, 242, 231, .62);
    font-size: 12px;
    line-height: 1.55;
}

.login-ops-panel {
    max-width: 680px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(14, 20, 18, .78), rgba(9, 13, 12, .7));
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 22px 60px rgba(0, 0, 0, .24);
    overflow: hidden;
}

.login-ops-header {
    min-height: 46px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: rgba(247, 242, 231, .84);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px;
    font-weight: 650;
}

.login-ops-header i {
    color: #f4b650;
    margin-right: 6px;
}

.login-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(214, 244, 228, .86);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.login-status-pill span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #72d89b;
    box-shadow: 0 0 16px rgba(114, 216, 155, .72);
}

.login-ops-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, .46fr);
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.login-control-table {
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
}

.login-control-row {
    min-height: 34px;
    display: grid;
    grid-template-columns: minmax(86px, .9fr) minmax(58px, .54fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: rgba(247, 242, 231, .66);
    font-size: 11px;
    line-height: 1.35;
}

.login-control-row:first-child {
    border-top: 0;
}

.login-control-head {
    min-height: 30px;
    background: rgba(255, 255, 255, .055);
    color: rgba(247, 242, 231, .46);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
}

.login-control-row strong {
    width: fit-content;
    min-width: 42px;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(114, 216, 155, .12);
    color: #95e8b7;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.login-control-row em {
    min-width: 0;
    color: rgba(247, 242, 231, .5);
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login-ops-stack {
    display: grid;
    gap: 7px;
}

.login-ops-metric {
    min-height: 42px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 12px;
    align-items: baseline;
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .075);
}

.login-ops-metric span {
    min-width: 0;
    color: rgba(247, 242, 231, .68);
    font-size: 11px;
    line-height: 1.2;
}

.login-ops-metric strong {
    color: #fff8e6;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.login-ops-metric em {
    grid-column: 1 / -1;
    color: rgba(247, 242, 231, .48);
    font-size: 10px;
    font-style: normal;
    line-height: 1.2;
}

.login-ops-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .08);
}

.login-ops-list span {
    min-height: 50px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(10, 15, 14, .58);
    color: rgba(247, 242, 231, .72);
    font-size: 11px;
    line-height: 1.45;
}

.login-ops-list i {
    color: #72d89b;
    flex: 0 0 auto;
}

.login-auth {
    width: 100%;
}

.login-card {
    position: relative;
    padding: 34px;
    border-radius: 8px;
    background: rgba(247, 242, 231, .96);
    border: 1px solid rgba(255, 255, 255, .68);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .38);
    color: #19201e;
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(90deg, #f4b650, #71b9aa);
}

.login-card-eyebrow {
    color: #8b6a27;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.login-card-title {
    margin: 10px 0 0;
    color: #111715;
    font-size: 30px;
    font-weight: 760;
    line-height: 1.15;
}

.login-card-copy {
    margin: 10px 0 30px;
    color: #5d665f;
    font-size: 14px;
    line-height: 1.7;
}

.login-field {
    margin-bottom: 20px;
}

.login-label {
    display: block;
    color: #1f2825;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.login-card .login-input,
body.dark-mode .login-card .login-input,
body.dark-mode .login-card .form-control:not(.form-control-navbar):not(.form-control-sidebar) {
    min-height: 54px;
    padding: 13px 15px;
    border: 1px solid #cfd8d2 !important;
    border-radius: 8px;
    background: #fffdf7 !important;
    color: #17201c !important;
    font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(17, 23, 21, .04);
}

.login-card .login-input:hover {
    border-color: #aebdb5 !important;
}

.login-card .login-input:focus,
body.dark-mode .login-card .login-input:focus {
    border-color: #ba862b !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(244, 182, 80, .24);
}

.login-card .login-input::placeholder,
body.dark-mode .login-card .login-input::placeholder {
    color: #89938d;
}

.login-card .login-input:-webkit-autofill,
.login-card .login-input:-webkit-autofill:hover,
.login-card .login-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fffdf7 inset !important;
    -webkit-text-fill-color: #17201c !important;
}

.login-error {
    color: #b0382e;
    font-size: 12px;
    margin-top: 6px;
}

.login-remember-wrap {
    margin: 6px 0 0;
}

.login-remember-wrap .form-group {
    margin-bottom: 0;
}

.login-check-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.login-check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #b97812;
    cursor: pointer;
}

.login-remember-label {
    color: #526059;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    cursor: pointer;
}

.login-submit-wrap {
    margin-top: 28px;
}

.login-submit,
.login-submit.btn-primary {
    width: 100%;
    min-height: 54px;
    padding: 13px 16px;
    border: 1px solid #e0a030;
    border-radius: 8px;
    background: #e2a02f;
    color: #15110a;
    box-shadow: 0 16px 34px rgba(154, 97, 12, .24);
    font-size: 16px;
    font-weight: 750;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.login-submit:hover,
.login-submit:focus,
.login-submit.btn-primary:hover,
.login-submit.btn-primary:focus {
    background: #f0b24b;
    border-color: #f0b24b;
    color: #15110a;
    box-shadow: 0 18px 42px rgba(154, 97, 12, .32);
}

.login-submit:focus-visible {
    outline: 3px solid rgba(244, 182, 80, .32);
    outline-offset: 3px;
}

.login-submit:active {
    transform: translateY(1px) scale(.995);
}

.login-support-note {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e1e7e1;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #667069;
    font-size: 13px;
}

.login-support-note i {
    color: #9b6b20;
}

.login-support-note a {
    color: #745018;
    font-weight: 700;
}

.login-support-note a:hover,
.login-support-note a:focus {
    color: #52370f;
}

.login-copyright {
    margin-top: 18px;
    color: rgba(247, 242, 231, .52);
    font-family: var(--font-mono);
    font-size: 12px;
    text-align: center;
}

@media (min-width: 1081px) and (max-height: 820px) {
    .login-page-body {
        padding-top: max(18px, env(safe-area-inset-top));
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    .login-experience {
        min-height: calc(100dvh - 36px);
        gap: clamp(30px, 5vw, 64px);
    }

    .login-hero {
        gap: 18px;
    }

    .login-logo-frame {
        width: 52px;
        height: 52px;
    }

    .login-brand-logo {
        width: 36px;
        height: 36px;
    }

    .login-app-name {
        font-size: 28px;
    }

    .login-product-name {
        margin-top: 5px;
        font-size: 11px;
    }

    .login-kicker {
        margin-bottom: 10px;
    }

    .login-hero-copy h1 {
        font-size: clamp(34px, 4vw, 48px);
        line-height: 1;
    }

    .login-hero-copy p {
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.65;
    }

    .login-proof-grid > div {
        min-height: 74px;
        padding: 12px;
    }

    .login-proof-grid strong {
        font-size: 19px;
    }

    .login-proof-grid span {
        margin-top: 8px;
        font-size: 11px;
    }

    .login-ops-header {
        min-height: 42px;
    }

    .login-ops-body {
        padding: 10px 12px;
    }

    .login-control-row {
        min-height: 30px;
        padding: 6px 10px;
    }

    .login-ops-metric {
        min-height: 38px;
        padding: 7px 9px;
    }

    .login-ops-list {
        display: none;
    }

    .login-card {
        padding: 30px;
    }

    .login-card-copy {
        margin-bottom: 24px;
    }

    .login-field {
        margin-bottom: 16px;
    }

    .login-submit-wrap {
        margin-top: 22px;
    }

    .login-support-note {
        margin-top: 18px;
        padding-top: 16px;
    }
}

@media (max-width: 1080px) {
    .login-experience {
        grid-template-columns: 1fr;
        max-width: 760px;
        min-height: auto;
        gap: 34px;
        padding: 28px 0;
    }

    .login-proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .login-auth {
        max-width: 520px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .login-page-body {
        padding: 18px;
    }

    .login-experience {
        display: flex;
        flex-direction: column;
        padding: 20px 0 12px;
        gap: 24px;
    }

    .login-hero {
        display: contents;
    }

    .login-brand-row {
        gap: 11px;
        order: 1;
    }

    .login-logo-frame {
        width: 52px;
        height: 52px;
    }

    .login-brand-logo {
        width: 36px;
        height: 36px;
    }

    .login-app-name {
        font-size: 25px;
    }

    .login-product-name {
        font-size: 10px;
    }

    .login-hero-copy h1 {
        font-size: 30px;
        line-height: 1.03;
    }

    .login-hero-copy p {
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.75;
    }

    .login-auth {
        order: 2;
        max-width: none;
        margin: 0;
    }

    .login-hero-copy {
        order: 3;
    }

    .login-proof-grid {
        order: 4;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .login-proof-grid > div {
        min-height: 92px;
        padding: 14px;
    }

    .login-ops-panel {
        display: none;
    }

    .login-card {
        padding: 28px 22px;
    }

    .login-card-title {
        font-size: 27px;
    }

    .login-card-copy {
        margin-bottom: 24px;
    }

    .login-support-note {
        align-items: flex-start;
    }
}

/* Compact action button groups (node lists, zone lists) */
.node-action-buttons {
    display: inline-flex;
    gap: 0.35rem;
    white-space: nowrap;
}
.node-action-buttons .btn {
    padding: 0.2rem 0.45rem;
}

:root {
    --cdnlah-sidebar-width: 170px;
}

/* AdminLTE sidebar width overrides */
.main-sidebar,
.main-sidebar::before {
    width: var(--cdnlah-sidebar-width);
}

.layout-fixed .brand-link,
.layout-navbar-fixed .wrapper .brand-link,
.layout-navbar-fixed .wrapper .main-sidebar:hover .brand-link,
.layout-navbar-fixed .wrapper.sidebar-collapse .main-sidebar:hover .brand-link {
    width: var(--cdnlah-sidebar-width);
}

.sidebar-collapse .main-sidebar,
.sidebar-collapse .main-sidebar::before {
    margin-left: calc(-1 * var(--cdnlah-sidebar-width));
}

.sidebar-mini .main-sidebar .nav-link,
.sidebar-mini-md .main-sidebar .nav-link,
.sidebar-mini-xs .main-sidebar .nav-link {
    width: calc(var(--cdnlah-sidebar-width) - .5rem * 2);
}

/* 与 AdminLTE PushMenu autoCollapseSize 默认 992 保持一致；
   用 768 会让 768–991px（手机横屏/小平板）出现 JS 已折叠 + CSS 仍按桌面留出 sidebar 宽度的左侧黑边。 */
@media (min-width: 992px) {
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer,
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header {
        margin-left: var(--cdnlah-sidebar-width);
    }

    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused,
    .sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover,
    .sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused,
    .sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover,
    .sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused {
        width: var(--cdnlah-sidebar-width);
    }

    .sidebar-collapse.sidebar-mini .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .nav-link,
    .sidebar-collapse.sidebar-mini .main-sidebar:hover:not(.sidebar-no-expand) .nav-link,
    .sidebar-collapse.sidebar-mini-md .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .nav-link,
    .sidebar-collapse.sidebar-mini-md .main-sidebar:hover:not(.sidebar-no-expand) .nav-link,
    .sidebar-collapse.sidebar-mini-xs .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .nav-link,
    .sidebar-collapse.sidebar-mini-xs .main-sidebar:hover:not(.sidebar-no-expand) .nav-link {
        width: calc(var(--cdnlah-sidebar-width) - .5rem * 2);
    }

    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-link,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused .brand-link,
    .sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-link,
    .sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused .brand-link,
    .sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-link,
    .sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused .brand-link,
    .sidebar-mini.sidebar-collapse.layout-fixed .main-sidebar:hover .brand-link,
    .sidebar-mini-md.sidebar-collapse.layout-fixed .main-sidebar:hover .brand-link,
    .sidebar-mini-xs.sidebar-collapse.layout-fixed .main-sidebar:hover .brand-link {
        width: var(--cdnlah-sidebar-width);
    }
}