:root {
    --primary: #5b82ff;
    --primary-hover: #4771f5;
    --primary-soft: #eef3ff;
    --bg: #f6f8fc;
    --panel: #fff;
    --text: #1f2940;
    --muted: #8190aa;
    --border: #e7ebf2;
    --danger: #f56c6c;
    --success: #10b981;
    --sidebar-expanded: 260px;
    --sidebar-collapsed: 72px;
    --sidebar-width: var(--sidebar-expanded);
    --topbar-height: 72px;
    --ease: cubic-bezier(.22,1,.36,1)
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    min-height: 100%;
    font: 14px/1.5 Inter,"Microsoft YaHei",sans-serif;
    color: var(--text);
    background: var(--bg)
}

body {
    overflow-x: hidden
}

a {
    text-decoration: none;
    color: inherit
}

button, input, select, textarea {
    font: inherit
}

button {
    color: inherit
}

.admin-shell {
    min-height: 100vh
}

.sidebar {
    width: var(--sidebar-width);
    position: fixed;
    inset: 0 auto 0 0;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 30;
    overflow: visible;
    transition: width .42s var(--ease);
    will-change: width
}

.brand {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    white-space: nowrap;
    overflow: hidden;
    flex: none
}

.brand-mark {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    color: #fff;
    border-radius: 11px;
    /*background: linear-gradient(135deg,#36c5f0,var(--primary));*/
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 8px 20px #5b82ff2d
}

.brand-title {
    font-size: 19px;
    font-weight: 750
}

.nav-label {
    opacity: 1;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    transform: translateX(0);
    transition: opacity .2s ease,max-width .36s var(--ease),transform .36s var(--ease)
}

.side-nav {
    padding: 10px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    scrollbar-width: thin
}

.nav-link, .nav-group-trigger {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 8px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: #566176;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background-color .2s,color .2s
}

    .nav-link:hover, .nav-group-trigger:hover, .nav-children a:hover, .nav-link.active, .nav-children a.active, .nav-group.active > .nav-group-trigger {
        background: var(--primary-soft);
        color: var(--primary)
    }

.nav-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    font-size: 15px
}

.nav-arrow {
    margin-left: auto;
    font-size: 11px;
    transition: transform .3s var(--ease)
}

.nav-group.open > .nav-group-trigger .nav-arrow {
    transform: rotate(180deg)
}

.nav-children {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows .34s var(--ease),opacity .24s ease
}

.nav-group:not(.open) > .nav-children {
    grid-template-rows: 0fr;
    opacity: .2
}

.nav-children-inner {
    overflow: hidden
}

.flyout-title {
    display: none
}

.nav-children a {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 8px 1px 26px;
    border-radius: 8px;
    color: #61708a;
    white-space: nowrap;
    transition: background-color .2s,color .2s
}

    .nav-children a .nav-icon {
        width: 32px;
        flex-basis: 32px
    }

.account-panel {
    position: relative;
    padding: 10px 8px;
    border-top: 1px solid var(--border);
    flex: none
}

.account-trigger {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    padding: 7px 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s
}

    .account-trigger:hover, .account-trigger[aria-expanded="true"] {
        background: var(--primary-soft)
    }

.account-copy {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    text-align: left
}

    .account-copy strong, .account-copy small {
        overflow: hidden;
        text-overflow: ellipsis
    }

    .account-copy small {
        color: var(--muted)
    }

.account-chevron {
    margin-left: auto;
    transition: transform .25s
}

.account-trigger[aria-expanded="true"] .account-chevron {
    transform: rotate(180deg)
}

.avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg,#78a0ff,#8d69e8);
    color: #fff;
    font-weight: 700
}

.account-menu {
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    pointer-events: none;
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 72px;
    padding: 8px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 13px;
    box-shadow: 0 15px 40px #24324a26;
    transform-origin: bottom;
    transition: opacity .2s,transform .25s var(--ease),visibility .2s;
    z-index: 80
}

    .account-menu.open {
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto
    }

    .account-menu form {
        margin: 0
    }

.account-menu-item {
    display: flex;
    width: 100%;
    height: 42px;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    color: var(--text);
    text-align: left;
    transition: background .18s,color .18s
}

    .account-menu-item i {
        width: 18px;
        text-align: center
    }

    .account-menu-item:hover, .account-menu-item.active {
        background: var(--primary-soft);
        color: var(--primary)
    }

.main-area {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    transition: margin-left .42s var(--ease);
    will-change: margin-left
}

.topbar {
    height: var(--topbar-height);
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb,var(--panel) 94%,transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 16px
}

.topbar-left, .top-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.top-actions {
    margin-left: auto
}

.icon-button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    padding: 0;
    border-radius: 9px;
    color: #65738b;
    cursor: pointer;
    transition: background .2s,color .2s,transform .18s
}

    .icon-button:hover {
        background: var(--primary-soft);
        color: var(--primary)
    }

    .icon-button:active {
        transform: scale(.94)
    }

.square-button {
    flex: 0 0 38px
}

.breadcrumb {
    margin-left: 6px;
    color: #77839a
}

.content-area {
    padding: 22px;
    transition: opacity .18s,transform .22s var(--ease)
}

    .content-area.is-leaving {
        opacity: .25;
        transform: translateY(5px)
    }

.page-loading {
    position: fixed;
    left: var(--sidebar-width);
    right: 0;
    top: var(--topbar-height);
    height: 3px;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: left .42s var(--ease),opacity .18s
}

    .page-loading.active {
        opacity: 1
    }

    .page-loading span {
        display: block;
        width: 34%;
        height: 100%;
        background: linear-gradient(90deg,transparent,var(--primary),transparent);
        animation: pageLoading 1s linear infinite
    }

@keyframes pageLoading {
    from {
        transform: translateX(-110%)
    }

    to {
        transform: translateX(400%)
    }
}

.toast-stack {
    position: fixed;
    top: 86px;
    right: 22px;
    z-index: 200;
    display: grid;
    gap: 10px
}

.toast {
    min-width: 240px;
    max-width: 380px;
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: 0 12px 36px #1d2c4826;
    animation: toastIn .3s var(--ease)
}

    .toast.success {
        border-left: 4px solid var(--success)
    }

    .toast.error {
        border-left: 4px solid var(--danger)
    }

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.sidebar.collapsed {
    --sidebar-width: var(--sidebar-collapsed)
}

    .sidebar.collapsed .nav-label {
        opacity: 0;
        max-width: 0;
        transform: translateX(-8px);
        pointer-events: none
    }

    .sidebar.collapsed .brand {
        padding-left: 16px
    }

    .sidebar.collapsed .side-nav {
        overflow: visible
    }

    .sidebar.collapsed .nav-link, .sidebar.collapsed .nav-group-trigger {
        padding-left: 7px;
        padding-right: 7px;
        justify-content: flex-start
    }

    .sidebar.collapsed .nav-group {
        position: relative
    }

        .sidebar.collapsed .nav-group > .nav-children {
            display: block;
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
            position: fixed;
            left: calc(var(--sidebar-collapsed) + 8px);
            top: var(--flyout-top,82px);
            width: 238px;
            grid-template-rows: none;
            padding: 7px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 14px 38px #24324a2b;
            transform: translateX(-8px) scale(.98);
            transform-origin: left top;
            transition: opacity .18s,transform .24s var(--ease),visibility .18s;
            z-index: 100
        }

        .sidebar.collapsed .nav-group.flyout-open > .nav-children {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
            transform: none
        }

    .sidebar.collapsed .nav-children-inner {
        overflow: visible
    }

    .sidebar.collapsed .flyout-title {
        display: block;
        padding: 8px 12px 7px;
        font-weight: 700;
        color: var(--text);
        border-bottom: 1px solid var(--border);
        margin-bottom: 5px
    }

    .sidebar.collapsed .nav-children a {
        padding: 1px 8px;
        height: 42px
    }

    .sidebar.collapsed .account-menu {
        position: fixed;
        left: calc(var(--sidebar-collapsed) + 8px);
        right: auto;
        bottom: 12px;
        width: 238px
    }

    .sidebar.collapsed .account-trigger {
        padding-left: 9px
    }

    .sidebar.collapsed ~ .main-area {
        --sidebar-width: var(--sidebar-collapsed)
    }

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 18px
}

.panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 18px;
    font-size: 17px
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px
}

.metric-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 19px;
    min-height: 126px;
    display: flex;
    justify-content: space-between;
    transition: transform .22s var(--ease),border-color .22s,box-shadow .22s
}

    .metric-card:hover {
        transform: translateY(-1px);
        border-color: color-mix(in srgb,var(--primary) 24%,var(--border));
        box-shadow: 0 4px 12px rgba(35,83,190,.055)
    }

    .metric-card strong {
        display: block;
        font-size: 29px;
        margin: 7px 0
    }

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary)
}

.muted {
    color: var(--muted)
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(280px,1fr);
    gap: 18px;
    margin-top: 18px
}

.dashboard-grid > *,.traffic-panel { min-width: 0 }

.chart {
    height: 280px;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding: 30px 8px 28px;
    border-bottom: 1px solid var(--border)
}

.chart-bar {
    flex: 1;
    min-width: 24px;
    background: linear-gradient(#91adff,var(--primary));
    border-radius: 6px 6px 0 0;
    position: relative
}

    .chart-bar span {
        position: absolute;
        bottom: -24px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        color: var(--muted)
    }

.data-list {
    margin: 0;
    padding: 0;
    list-style: none
}

    .data-list li {
        padding: 13px 0;
        border-bottom: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        gap: 15px
    }

.data-list-copy {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.recent-message-list .data-list-copy {
    display: flex;
    gap: 10px
}

.recent-message-list .data-list-copy strong {
    flex: 0 0 auto
}

.recent-message-list .data-list-copy span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.data-list li > small {
    flex: 0 0 auto;
    white-space: nowrap;
    line-height:22px;
}

.traffic-heading,.traffic-legend,.traffic-ranges {
    display: flex;
    align-items: center
}

.traffic-heading {
    justify-content: space-between;
    gap: 16px
}

.traffic-heading .panel-title { margin-bottom: 0 }
.traffic-ranges { gap: 5px; padding: 4px; background: var(--body); border-radius: 9px }
.traffic-ranges button { border: 0; background: transparent; color: var(--muted); padding: 6px 10px; border-radius: 7px; cursor: pointer; font-size: 13px }
.traffic-ranges button:hover,.traffic-ranges button.active { color: var(--primary); background: var(--panel) }
.traffic-legend { justify-content: flex-end; gap: 18px; color: var(--muted); font-size: 12px; margin: 12px 0 4px }
.traffic-legend span { display: flex; align-items: center; gap: 6px }
.traffic-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--primary) }
.traffic-legend i.uv { background: #58c8c2 }
.traffic-chart { width: 100%; height: 250px; overflow: hidden; border-bottom: 1px solid var(--border) }
.traffic-svg { display: block; width: 100%; height: 100%; overflow: visible }
.traffic-grid-line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke }
.traffic-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke }
.traffic-line-pv { stroke: var(--primary) }
.traffic-line-uv { stroke: #43b9b2 }
.traffic-dot { fill: var(--panel); stroke-width: 2; vector-effect: non-scaling-stroke; transition: r .18s,filter .18s }
.traffic-dot:focus,.traffic-dot:hover { r: 5; filter: drop-shadow(0 0 4px currentColor); outline: none }
.traffic-axis-label,.traffic-axis-value { fill: var(--muted); font-size: 10px; font-family: inherit }

.role-permission-hint { display: flex; gap: 9px; align-items: center; margin: -3px 0 15px; padding: 10px 12px; color: var(--primary); background: var(--primary-soft); border-radius: 9px; font-size: 13px }

.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px
}

    .toolbar .spacer {
        flex: 1
    }

.field, .select, .textarea {
    width: 100%;
    border: 1px solid #dbe1ea;
    border-radius: 7px;
    padding: 6px 11px;
    background: var(--panel);
    color: var(--text);
    outline: none;
    transition: border-color .2s,box-shadow .2s,background-color .2s
}

    .field:focus, .select:focus, .textarea:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px #5b82ff18;
        background: var(--panel)
    }

    .field.input-validation-error, .select.input-validation-error, .textarea.input-validation-error {
        border-color: var(--danger);
        box-shadow: 0 0 0 2px #f56c6c16
    }

    .field[readonly] {
        background: var(--bg);
        cursor: pointer
    }

.field-with-action {
    display: flex;
    gap: 8px
}

    .field-with-action .field {
        flex: 1
    }

.field-validation-error {
    display: block;
    color: var(--danger);
    font-size: 12px;
    margin-top: 5px
}

.toolbar .field, .toolbar .select {
    width: 220px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--primary);
    border-radius: 7px;
    padding: 6px 14px;
    background: var(--panel);
    color: var(--primary);
    cursor: pointer;
    transition: background .18s,color .18s,transform .18s
}

    .btn:hover {
        background: var(--primary-soft)
    }

    .btn:active {
        transform: scale(.97)
    }

    .btn.primary {
        background: var(--primary);
        color: #fff
    }

        .btn.primary:hover {
            background: var(--primary-hover)
        }

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

    .btn.small {
        padding: 5px 9px
    }

.table-wrap {
    overflow: auto
}

.data-table {
    width: 100%;
    border-collapse: collapse
}

    .data-table th, .data-table td {
        text-align: left;
        padding: 12px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap
    }

    .data-table th {
        color: #7b879c;
        font-weight: 600
    }

.tag {
    display: inline-block;
    border-radius: 5px;
    padding: 3px 8px;
    background: #edf2ff;
    color: var(--primary)
}

    .tag.success {
        background: #e8fbf5;
        color: var(--success)
    }

    .tag.warning {
        background: #fff7e6;
        color: #e99b21
    }

    .tag.danger {
        background: #fff0f0;
        color: var(--danger)
    }

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-top: 18px
}

    .pagination a {
        padding: 6px 10px;
        border: 1px solid var(--border);
        border-radius: 6px
    }

        .pagination a.active {
            background: var(--primary);
            color: #fff
        }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px
}

.form-row label {
    display: flex;
    margin-bottom: 7px;
    color: #566176
}

.required-label:after {
    content: " *";
    color: var(--danger)
}

.form-row.full {
    grid-column: 1/-1
}

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

.alert {
    padding: 11px 14px;
    border-radius: 8px;
    margin-bottom: 14px
}

    .alert.success {
        background: #e9fbf4;
        color: #087c58
    }

    .alert.error {
        background: #fff0f0;
        color: #bd4141
    }

.validation-summary-errors {
    color: var(--danger);
    background: #fff2f2;
    border: 1px solid #ffd2d2;
    border-radius: 8px;
    padding: 10px 12px
}

    .validation-summary-errors ul {
        margin: 0;
        padding-left: 20px
    }

.error-page {
    min-height: 60vh;
    display: grid;
    place-items: center;
    text-align: center
}

.dark {
    --bg: #0c0d0f;
    --panel: #171719;
    --text: #f2f4f8;
    --muted: #9298a5;
    --border: #2a2c31;
    --primary-soft: #1e2944
}

.ck-editor__editable {
    min-height: 360px;
    color: #202938
}

.permission-grid th:not(:first-child), .permission-grid td:not(:first-child) {
    text-align: center
}

.permission-capabilities { margin: 4px 0 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px }
.permission-capabilities legend { padding: 0 7px; font-weight: 650; color: var(--text) }
.permission-capabilities p { margin: 0 0 13px }
.permission-capability-grid { display: grid; grid-template-columns: repeat(6,minmax(70px,1fr)); gap: 12px }
.permission-grid .ui-checkbox.compact { display: inline-flex !important; width: 19px; gap: 0 !important }
.permission-row-all { white-space: nowrap }
.permission-disabled { color: #b6bfcd }
.admin-create-grid { display: grid; grid-template-columns: repeat(3,minmax(150px,1fr)); gap: 12px; align-items: center }
.admin-create-grid .ui-btn { justify-self: start }
.password-modal-card { width: min(460px,calc(100vw - 32px)); max-height: none; overflow: hidden; border-radius: 18px; box-shadow: 0 18px 50px rgba(15,23,42,.18) }
.password-modal-card .modal-header { padding: 20px 22px 17px; background: linear-gradient(135deg,var(--primary-soft),transparent 58%) }
.password-modal-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; margin-right: 12px; border-radius: 12px; background: var(--primary); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb,var(--primary) 22%,transparent) }
.password-modal-card .modal-header > div { flex: 1 }
.password-modal-card .modal-header h3 { margin-bottom: 4px; font-size: 17px }
.password-modal-card .form-grid { gap: 15px; padding: 20px 22px 22px }
.password-modal-card .form-row { gap: 7px }
.password-modal-card .field { height: 42px }
.password-modal-card .icon-button { align-self: flex-start; width: 34px; height: 34px; border-radius: 10px }
.password-modal-actions { justify-content: flex-end; margin: 2px 0 0; padding-top: 16px; border-top: 1px solid var(--border) }
.password-modal-actions .ui-btn { min-width: 96px }
.password-field-wrap { position: relative }
.password-field-wrap > i { position: absolute; z-index: 1; left: 13px; top: 50%; color: var(--muted); transform: translateY(-50%) }
.password-field-wrap .field { width: 100%; padding-left: 38px }
.password-modal-tip { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--body); color: var(--muted); font-size: 12px; line-height: 1.6 }
.password-modal-tip i { margin-top: 3px; color: var(--primary) }
.log-cleanup { display: flex; align-items: center; gap: 8px; margin: 0 }
.log-cleanup .ui-select { width: 180px }
.ui-btn-danger { border-color: #ff6b72; background: #fff5f5; color: #e34d59 }
.ui-btn-danger:hover { border-color: #f04d58; background: #ffeded; color: #d93643 }

.kl-loading-layer { position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: 18px; background: rgba(15,23,42,.24); opacity: 0; visibility: hidden; backdrop-filter: blur(1.5px); transition: opacity .16s ease,visibility .16s ease }
.kl-loading-layer.is-visible { opacity: 1; visibility: visible }
.kl-loading-layer.is-closing { pointer-events: none }
.kl-loading-card { min-width: 230px; max-width: min(380px,calc(100vw - 36px)); display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid color-mix(in srgb,var(--primary) 14%,var(--border)); border-radius: 15px; background: var(--panel); color: var(--text); box-shadow: 0 16px 42px rgba(15,23,42,.16); transform: translateY(5px) scale(.985); transition: transform .18s var(--ease) }
.kl-loading-layer.is-visible .kl-loading-card { transform: none }
.kl-loading-spinner { width: 34px; height: 34px; flex: 0 0 34px; box-sizing: border-box; border: 3px solid color-mix(in srgb,var(--primary) 16%,transparent); border-top-color: var(--primary); border-right-color: color-mix(in srgb,var(--primary) 56%,transparent); border-radius: 50%; animation: kl-loading-spin .75s linear infinite }
.kl-loading-copy { min-width: 0; display: grid; gap: 3px }
.kl-loading-copy strong { color: var(--text); font-size: 14px; font-weight: 650 }
.kl-loading-message { overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap }
@keyframes kl-loading-spin { to { transform: rotate(360deg) } }

.modal-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: #11182780;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s,visibility .2s
}

    .modal-backdrop.open {
        opacity: 1;
        visibility: visible
    }

.modal-card {
    width: min(760px,94vw);
    max-height: min(680px,86vh);
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: 0 30px 80px #0f172a40;
    transform: translateY(10px) scale(.98);
    transition: transform .25s var(--ease)
}

.modal-backdrop.open .modal-card {
    transform: none
}

.modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border)
}

    .modal-head h3 {
        margin: 0;
        flex: 1
    }

.modal-body {
    padding: 16px;
    overflow: auto
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 9px;
    margin-top: 14px
}

.icon-choice {
    height: 72px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--panel);
    display: grid;
    place-items: center;
    gap: 3px;
    cursor: pointer;
    color: var(--text);
    transition: .18s
}

    .icon-choice i {
        font-size: 21px;
        color: #5d6b84
    }

    .icon-choice small {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--muted)
    }

    .icon-choice:hover, .icon-choice.selected {
        border-color: var(--primary);
        background: var(--primary-soft);
        color: var(--primary)
    }

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0,64%) minmax(420px,36%);
    background: #eff4ff;
    overflow: hidden;
    position: relative
}

.login-brand {
    position: absolute;
    top: 26px;
    left: 30px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700
}

.login-tools {
    position: absolute;
    right: 28px;
    top: 25px;
    z-index: 3
}

.login-art {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 7vw 42px;
    background: linear-gradient(135deg,#eff4ff,#eaf1ff)
}

    .login-art:before, .login-art:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border: 2px solid #d9e5ff
    }

    .login-art:before {
        width: 520px;
        height: 520px;
        right: -170px;
        top: -280px;
        background: #e2eaff
    }

    .login-art:after {
        width: 38px;
        height: 38px;
        left: 16%;
        top: 11%
    }

.login-decoration {
    position: absolute;
    background: #b9cbff55;
    transform: rotate(45deg)
}

    .login-decoration.one {
        width: 58px;
        height: 58px;
        left: 7%;
        bottom: 9%;
        border-radius: 8px
    }

    .login-decoration.two {
        width: 36px;
        height: 36px;
        right: 12%;
        bottom: 15%
    }

.login-illustration {
    width: min(580px,75%);
    filter: drop-shadow(0 22px 28px #5076c91c);
    z-index: 1
}

.login-copy {
    z-index: 1;
    text-align: center;
    margin-top: 34px
}

    .login-copy h2 {
        font-size: 25px;
        font-weight: 500;
        margin: 0 0 8px
    }

    .login-copy p {
        margin: 0;
        color: #8696b4
    }

.login-box-wrap {
    display: grid;
    place-items: center;
    background: var(--panel);
    position: relative;
    z-index: 2
}

.login-box {
    width: min(440px,78%)
}

    .login-box h1 {
        font-size: 36px;
        margin: 0 0 4px;
        letter-spacing: -1px
    }

    .login-box > .muted {
        margin: 0 0 28px
    }

    .login-box .form-row {
        margin: 18px 0
    }

    .login-box .field {
        height: 44px
    }

    .login-box .btn {
        width: 100%;
        height: 44px
    }

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 24px
}

.login-checkbox {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #65738b
}

.login-input-wrap {
    position: relative
}

    .login-input-wrap i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #9aa7bc
    }

    .login-input-wrap .field {
        padding-left: 42px
    }

.login-page input:-webkit-autofill, .login-page input:-webkit-autofill:hover, .login-page input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--panel) inset !important;
    transition: background-color 9999s ease-out 0s
}

.login-page .field:focus {
    background: var(--panel) !important
}

.login-error {
    margin-bottom: 14px
}

@media(max-width: 1100px) {
    .metric-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .dashboard-grid {
        grid-template-columns: 1fr
    }

    .login-page {
        grid-template-columns: 55% 45%
    }

    .icon-grid {
        grid-template-columns: repeat(4,1fr)
    }
}

@media(max-width: 760px) {
    :root {
        --sidebar-expanded: 250px
    }

    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-expanded);
        transition: transform .36s var(--ease)
    }

        .sidebar.mobile-open {
            transform: none
        }

        .main-area, .sidebar.collapsed ~ .main-area {
            margin-left: 0
        }

    .page-loading {
        left: 0
    }

    .content-area {
        padding: 12px
    }

    .metric-grid, .form-grid {
        grid-template-columns: 1fr
    }

    .login-page {
        grid-template-columns: 1fr
    }

    .login-art {
        display: none
    }

    .login-box {
        width: min(430px,86%)
    }

    .login-brand {
        left: 20px;
        top: 20px
    }

    .breadcrumb {
        display: none
    }

    .icon-grid {
        grid-template-columns: repeat(3,1fr)
    }
}

/* Dynamic-page and form refinements */
.content-area.leaving {
    opacity: .25;
    transform: translateY(5px)
}

.form-row label.required:after {
    content: " *";
    color: var(--danger)
}

.validation-summary:empty {
    display: none
}

.validation-summary.full {
    grid-column: 1/-1
}

.icon-preview-wrap {
    width: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary)
}

.icon-preview {
    font-size: 17px
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 19px;
    border-bottom: 1px solid var(--border)
}

    .modal-header h3, .modal-header p {
        margin: 0
    }

    .modal-header p {
        font-size: 12px
    }

.icon-search {
    position: relative;
    margin: 15px 18px 0
}

    .icon-search i {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted)
    }

    .icon-search .field {
        padding-left: 38px
    }

.modal-card .icon-grid {
    padding: 0 18px 18px;
    overflow: auto
}

.icon-choice span {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 12px
}

/* Art Design Pro inspired login page */
.login-body {
    background: #f1f5ff;
    overflow: hidden
}

.login-header {
    position: fixed;
    left: 30px;
    top: 25px;
    z-index: 10
}

    .login-header .login-brand {
        position: static
    }

.login-page {
    grid-template-columns: minmax(0,62%) minmax(420px,38%)
}

.login-orbit {
    position: absolute;
    border: 2px solid #d8e4ff;
    border-radius: 50%
}

.orbit-one {
    width: 520px;
    height: 520px;
    right: -190px;
    top: -290px;
    background: #e6edff
}

.orbit-two {
    width: 42px;
    height: 42px;
    left: 14%;
    top: 13%
}

.login-art h2 {
    z-index: 1;
    margin: 25px 0 6px;
    font-size: 25px;
    font-weight: 600
}

.login-art > p {
    z-index: 1;
    margin: 0;
    color: #8392ae
}

.login-welcome {
    margin-bottom: 30px
}

.login-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 2px
}

.login-welcome h1 {
    font-size: 34px;
    margin: 0 0 6px
}

.login-welcome p {
    margin: 0;
    color: var(--muted)
}

.login-welcome h1 { font-weight: 700; }

.login-field {
    height: 48px;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 18px;
    border: 1px solid #dce3ef;
    border-radius: 8px;
    background: var(--panel);
    transition: border-color .2s,box-shadow .2s
}

    .login-field:focus-within {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px #5b82ff16
    }

    .login-field i {
        width: 46px;
        text-align: center;
        color: #9aa8bc
    }

    .login-field input {
        width: 100%;
        height: 100%;
        border: 0;
        outline: 0;
        padding: 0 14px 0 0;
        color: var(--text);
        background: transparent !important
    }

.login-remember {
    gap: 5px !important;
    margin: 17px 0 22px;
    color: #69768c
}

.login-field.has-error { border-color: var(--danger); }
.login-submit:disabled { cursor: wait; transform: none; opacity: .85; }
.login-submit.is-success:disabled { cursor: default; opacity: 1; }
.login-submit [hidden] { display: none !important; }
.login-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 9px;
    vertical-align: -3px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin .75s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

.login-submit {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(90deg,#4f7df7,#6c67ed);
    box-shadow: 0 10px 24px #5b74ec35;
    cursor: pointer;
    font-weight: 650;
    transition: transform .18s,box-shadow .18s
}

    .login-submit:hover {
        transform: translateY(-1px);
        box-shadow: 0 13px 28px #5b74ec45
    }

    .login-submit i {
        margin-left: 8px
    }

.login-safe {
    text-align: center;
    color: #a0aabd;
    font-size: 12px;
    margin-top: 22px
}

.login-box .field-validation-error {
    margin: 5px 0 0
}

.login-page input:-webkit-autofill, .login-page input:-webkit-autofill:hover, .login-page input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--panel) inset !important;
    transition: background-color 9999s ease-out 0s
}

@media(max-width: 760px) {
    .login-header {
        left: 20px;
        top: 20px
    }

    .login-page {
        grid-template-columns: 1fr
    }

    .login-box-wrap {
        padding-top: 70px
    }

    .login-box {
        width: min(430px,86%)
    }
}

/* Manage frame refinement */
:root {
    --topbar-height: 60px
}

.sidebar-pref-collapsed .sidebar {
    --sidebar-width: var(--sidebar-collapsed)
}

    .sidebar-pref-collapsed .sidebar ~ .main-area {
        --sidebar-width: var(--sidebar-collapsed)
    }

.theme-pref-dark body {
    background: #0a0a0b;
    color: #f1f3f7
}

.brand {
    height: 60px
}

.brand-mark {
    box-shadow: none;
    overflow: hidden
}

    .brand-mark img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.brand-title {
    font-size: 18px
}

.topbar {
    height: 60px;
    padding: 0 18px
}

.icon-button {
    width: 40px;
    height: 40px;
    font-size: 17px
}

.square-button {
    flex-basis: 40px
}

.breadcrumb {
    margin-left: 7px
}

.side-nav {
    padding-top: 12px
}

    .side-nav > * + * {
        margin-top: 5px
    }

.nav-link, .nav-group-trigger {
    height: 48px
}

.nav-children-inner {
    padding-top: 3px;
    padding-bottom: 3px
}

.nav-children a {
    height: 42px;
    margin-top: 3px
}

.nav-group.active > .nav-group-trigger {
    background: transparent;
    color: var(--primary)
}

    .nav-group.active > .nav-group-trigger:hover {
        background: var(--primary-soft)
    }

.sidebar.collapsed .nav-link, .sidebar.collapsed .nav-group-trigger {
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 11px
}

.sidebar.collapsed .nav-icon {
    width: 56px;
    height: 56px;
    flex-basis: 56px
}

.sidebar.collapsed .nav-children a .nav-icon {
    width: 34px;
    height: 40px;
    flex-basis: 34px
}

.sidebar.sidebar-switching .nav-children {
    transition: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important
}

.sidebar.sidebar-switching .account-menu {
    transition: none !important;
    visibility: hidden !important;
    opacity: 0 !important
}

.page-loading {
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    z-index: 500;
    transition: opacity .12s
}

    .page-loading span {
        width: 0;
        background: var(--primary);
        box-shadow: 0 0 7px color-mix(in srgb,var(--primary) 60%,transparent);
        animation: none
    }

    .page-loading.active span {
        animation: solidPageLoading 2.2s cubic-bezier(.1,.6,.2,1) forwards
    }

@keyframes solidPageLoading {
    0% {
        width: 0
    }

    45% {
        width: 58%
    }

    75% {
        width: 78%
    }

    100% {
        width: 92%
    }
}

.top-actions {
    position: relative
}

.notification-trigger {
    position: relative
}

.notification-badge {
    position: absolute;
    right: 1px;
    top: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border: 2px solid var(--panel);
    border-radius: 10px;
    background: #f25555;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1
}

    .notification-badge.empty {
        display: none
    }

.notification-popover {
    position: absolute;
    right: 42px;
    top: 49px;
    width: 390px;
    max-height: 520px;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-7px) scale(.98);
    transform-origin: right top;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 55px #1b294333;
    transition: opacity .18s,transform .22s var(--ease),visibility .18s;
    z-index: 210
}

    .notification-popover.open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none
    }

.notification-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 18px;
    border-bottom: 1px solid var(--border)
}

    .notification-head > div {
        display: flex;
        align-items: baseline;
        gap: 9px
    }

    .notification-head strong {
        font-size: 16px
    }

    .notification-head small {
        color: var(--muted)
    }

    .notification-head > a {
        color: var(--primary);
        font-size: 13px
    }

.notification-list {
    padding: 7px;
    overflow: auto
}

.notification-item {
    display: flex;
    gap: 12px;
    padding: 11px;
    border-radius: 9px;
    transition: background .18s
}

    .notification-item:hover {
        background: var(--primary-soft)
    }

.notification-item-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary)
}

.notification-item > span:last-child {
    min-width: 0;
    display: grid;
    flex: 1
}

.notification-item strong, .notification-item small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.notification-item small {
    color: #66738a;
    margin-top: 2px
}

.notification-item time {
    color: var(--muted);
    font-size: 11px;
    margin-top: 3px
}

.notification-empty {
    min-height: 150px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    color: var(--muted)
}

    .notification-empty i {
        font-size: 28px;
        color: var(--success)
    }

.logo-uploader {
    display: flex;
    align-items: center;
    gap: 14px
}

.logo-preview {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    /*background: linear-gradient(135deg,#36c5f0,var(--primary));*/
    color: #fff;
    font-size: 24px
}

    .logo-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.logo-uploader > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.logo-uploader label.btn {
    display: inline-flex;
    margin: 0
}

.logo-help {
    width: 100%;
    display: block
}

.dark {
    --bg: #09090a;
    --panel: #171719;
    --text: #f1f2f5;
    --muted: #8e929d;
    --border: #2b2c30;
    --primary-soft: #242831;
    --primary: #5d88ff
}

    .dark .sidebar, .dark .topbar {
        background: #171719
    }

    .dark .topbar {
        backdrop-filter: none
    }

    .dark .side-nav .nav-link, .dark .nav-group-trigger, .dark .nav-children a {
        color: #c7cad1
    }

        .dark .nav-link:hover, .dark .nav-group-trigger:hover, .dark .nav-children a:hover, .dark .nav-link.active, .dark .nav-children a.active {
            background: #292b30;
            color: #6f98ff
        }

    .dark .nav-group.active > .nav-group-trigger {
        background: transparent;
        color: #f0f1f4
    }

        .dark .nav-group.active > .nav-group-trigger:hover {
            background: #292b30
        }

    .dark .panel, .dark .metric-card {
        background: #18181a;
        border-color: #303136
    }

    .dark .metric-icon {
        background: #202638
    }

    .dark .data-table th, .dark .data-table td {
        border-color: #303136
    }

    .dark .data-table th {
        color: #a6aab3
    }

    .dark .field, .dark .select, .dark .textarea {
        background: #1d1d20;
        border-color: #393a40;
        color: #f1f2f5
    }

        .dark .field:focus, .dark .select:focus, .dark .textarea:focus {
            background: #1d1d20
        }

    .dark .btn {
        background: #1b1b1e
    }

        .dark .btn.primary {
            background: var(--primary)
        }

        .dark .btn.danger {
            background: #2a1b1d
        }

    .dark .account-menu, .dark .notification-popover, .dark .sidebar.collapsed .nav-group > .nav-children, .dark .modal-card {
        background: #1b1b1e;
        border-color: #34353a;
        box-shadow: 0 18px 55px #0009
    }

    .dark .account-trigger:hover, .dark .account-trigger[aria-expanded="true"], .dark .account-menu-item:hover, .dark .account-menu-item.active, .dark .notification-item:hover {
        background: #292b30
    }

    .dark .notification-item small {
        color: #b2b5bd
    }

    .dark .chart {
        border-color: #34353a
    }

    .dark .chart-bar {
        background: linear-gradient(#4468bd,#5d88ff)
    }

    .dark .tag {
        background: #222a3b
    }

    .dark .alert.success {
        background: #132b24
    }

    .dark .alert.error, .dark .validation-summary-errors {
        background: #311d20;
        border-color: #593035
    }

    .dark .logo-preview {
        border-color: #3b3c42
    }

@media(max-width: 760px) {
    .notification-popover {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 66px;
        width: auto
    }

    .topbar {
        padding: 0 10px
    }

    .top-actions {
        gap: 4px
    }
}

.nav-group.active > .nav-group-trigger {
    background: transparent;
    color: #566176
}

    .nav-group.active > .nav-group-trigger:hover {
        background: var(--primary-soft);
        color: var(--primary)
    }

.dark .nav-group.active > .nav-group-trigger {
    background: transparent;
    color: #c7cad1
}

    .dark .nav-group.active > .nav-group-trigger:hover {
        background: #292b30;
        color: #6f98ff
    }

/* Tailwind migration refinements */
.sidebar.collapsed .nav-link, .sidebar.collapsed .nav-group-trigger {
    height: 44px
}

.sidebar.collapsed .nav-icon {
    height: 44px
}

.nav-children {
    opacity: 1 !important;
    transition: grid-template-rows .28s var(--ease) !important
}

.nav-group:not(.open) > .nav-children {
    opacity: 1 !important
}

.nav-arrow {
    margin-right: 9px
}

.sidebar.collapsed .nav-arrow {
    width: 0;
    margin: 0;
    overflow: hidden
}

.account-chevron {
    font-size: 14px
}

.dark .tw-action-link {
    border-color: #343844;
    background: #222631;
    color: #78a0ff
}

    .dark .tw-action-link:hover {
        border-color: #5d88ff;
        background: #292d38
    }

.dark .kl-dialog-panel, .dark .kl-toast, .dark .kl-loading-card {
    border-color: #34353a;
    background: #1b1b1e;
    color: #d2d5dc
}

    .dark .kl-dialog-panel h3 {
        color: #f1f2f5
    }

    .dark .kl-dialog-panel p {
        color: #a8acb6
    }

    .dark .kl-dialog-panel .tw-dialog-button:not(.bg-brand-500):not(.bg-red-500) {
        border-color: #3a3b41;
        background: #242529;
        color: #d2d5dc
    }

.dark .kl-dialog-icon {
    background: #252936
}

.dark #klLoadingLayer {
    background: #0008
}

/* Shared form components */
.ui-select {
    width: 100%;
    height: 42px;
    appearance: none;
    border: 1px solid #dbe1ea;
    border-radius: 8px;
    padding: 0 42px 0 12px;
    color: var(--text);
    background-color: var(--panel);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238190aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    outline: none;
    transition: border-color .2s,box-shadow .2s
}

    .ui-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px #5b82ff18
    }

.toolbar .ui-select {
    width: 220px
}

.ui-checkbox {
    display: inline-flex !important;
    align-items: center;
    gap: 9px !important;
    width: max-content;
    color: #566176 !important;
    cursor: pointer;
    user-select: none
}

    .ui-checkbox input, .permission-grid input[type="checkbox"] {
        appearance: none;
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
        margin: 0;
        border: 1px solid #cbd3df;
        border-radius: 5px;
        background: var(--panel);
        cursor: pointer;
        transition: border-color .18s,background-color .18s,box-shadow .18s
    }

        .ui-checkbox input:checked, .permission-grid input[type="checkbox"]:checked {
            border-color: var(--primary);
            background-color: var(--primary);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center
        }

        .ui-checkbox input:indeterminate, .permission-grid input[type="checkbox"]:indeterminate {
            border-color: var(--primary);
            background-color: var(--primary);
            background-image: linear-gradient(#fff,#fff);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 9px 2px
        }

        .ui-checkbox input:focus-visible, .permission-grid input[type="checkbox"]:focus-visible {
            outline: 0;
            box-shadow: 0 0 0 3px #5b82ff25
        }

.ui-btn {
    height: 35px;
    min-width: 79px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .18s,border-color .18s,color .18s,transform .18s
}

    .ui-btn:active {
        transform: scale(.97)
    }

.ui-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff
}

    .ui-btn-primary:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover)
    }

.ui-btn-secondary {
    background: var(--panel);
    border-color: #d6deea;
    color: #526078
}

    .ui-btn-secondary:hover, .ui-btn-ghost:hover {
        border-color: var(--primary);
        background: var(--primary-soft);
        color: var(--primary)
    }

.ui-btn-ghost {
    min-width: auto;
    background: transparent;
    border-color: transparent;
    color: #66738a
}

.form-actions {
    display: flex !important;
    align-items: center;
    gap: 14px;
    margin-top: 4px
}

.ui-single-upload {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 146px;
    padding: 16px;
    border: 1px dashed #cfd8e6;
    border-radius: 11px;
    background: color-mix(in srgb,var(--bg) 52%,var(--panel));
    transition: border-color .2s,background .2s
}

    .ui-single-upload:hover {
        border-color: var(--primary);
        background: var(--primary-soft)
    }

.ui-upload-preview {
    width: 176px;
    height: 112px;
    flex: 0 0 176px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--panel);
    color: var(--muted)
}

    .ui-upload-preview:empty:before {
        content: "暂无图片"
    }

    .ui-upload-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.ui-upload-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px
}

    .ui-upload-actions small {
        display: block;
        width: 100%;
        color: var(--muted)
    }

.search-card {
    padding: 18px 20px
}

    .search-card .toolbar {
        margin: 0
    }

.list-card > .toolbar:first-child {
    margin-bottom: 12px
}

.dark .ui-select {
    border-color: #393a40;
    background-color: #1d1d20;
    color: #f1f2f5
}

.dark .ui-checkbox {
    color: #c7cad1 !important
}

    .dark .ui-checkbox input, .dark .permission-grid input[type="checkbox"] {
        border-color: #4a4b52;
        background-color: #202024
    }

        .dark .ui-checkbox input:checked, .dark .permission-grid input[type="checkbox"]:checked {
            border-color: var(--primary);
            background-color: var(--primary)
        }

.dark .ui-btn-secondary {
    border-color: #41434a;
    background: #202024;
    color: #d7dae1
}

.dark .ui-btn-ghost {
    color: #b8bdc8
}

.dark .ui-single-upload {
    border-color: #454750;
    background: #1b1b1e
}

    .dark .ui-single-upload:hover {
        border-color: var(--primary);
        background: #202638
    }

.dark .ui-upload-preview {
    background: #202024
}

/* Real navigation progress */
#nprogress {
    pointer-events: none
}

    #nprogress .bar {
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--primary)
    }

    #nprogress .peg {
        display: block;
        position: absolute;
        right: 0;
        width: 110px;
        height: 100%;
        box-shadow: 0 0 12px var(--primary),0 0 6px var(--primary);
        opacity: 1;
        transform: rotate(2deg) translateY(-1px)
    }

    #nprogress .spinner {
        display: none !important
    }

/* Open submenus must be visible without a delayed fade. */
.nav-children {
    transition: none !important
}

.account-trigger[aria-expanded="true"] .account-chevron {
    transform: rotate(90deg)
}

@media(max-width: 760px) {
    .ui-single-upload {
        align-items: flex-start;
        flex-direction: column
    }

    .ui-upload-preview {
        width: 100%;
        height: 160px
    }

    .toolbar .ui-select {
        width: 100%
    }
}

/* Refined custom select */
.ui-select-control {
    position: relative;
    width: 100%;
    min-width: 0
}

.toolbar .ui-select-control {
    width: 220px
}

.ui-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none
}

.ui-select-trigger {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid #d7dee9;
    border-radius: 9px;
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    outline: 0;
    transition: border-color .18s,box-shadow .18s,background-color .18s
}

    .ui-select-trigger > span {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .ui-select-trigger i {
        color: #8290a5;
        font-size: 11px;
        transition: transform .2s var(--ease)
    }

.ui-select-control.open .ui-select-trigger {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px #5b82ff1f
}

    .ui-select-control.open .ui-select-trigger i {
        transform: rotate(180deg)
    }

.ui-select-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 7px);
    z-index: 260;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: 0 16px 42px #23304a24;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-7px) scale(.985);
    transform-origin: top;
    transition: opacity .18s ease,transform .2s var(--ease),visibility .18s
}

.ui-select-control.open .ui-select-dropdown {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none
}

.ui-select-option {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background .15s,color .15s
}

    .ui-select-option:before {
        content: "";
        width: 14px;
        flex: 0 0 14px
    }

    .ui-select-option:hover {
        background: var(--primary-soft);
        color: var(--primary)
    }

    .ui-select-option.selected {
        background: #eef0f4;
        color: var(--text)
    }

        .ui-select-option.selected:before {
            content: "✓";
            font-weight: 700
        }

    .ui-select-option.disabled {
        opacity: .45;
        pointer-events: none
    }

.dark .ui-select-trigger, .dark .ui-select-dropdown {
    border-color: #3b3d44;
    background: #1d1d20;
    color: #f1f2f5
}

.dark .ui-select-option.selected {
    background: #303137
}

.dark .ui-select-option:hover {
    background: #292d38;
    color: #78a0ff
}

/* Compact image uploader */
.ui-single-upload {
    min-height: 86px;
    padding: 14px 15px;
    gap: 14px;
    background: var(--panel)
}

.ui-upload-preview {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 10px;
    background: var(--bg);
    font-size: 20px
}

    .ui-upload-preview span {
        display: grid;
        place-items: center;
        color: #61708a
    }

        .ui-upload-preview span small {
            display: none
        }

.ui-upload-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1
}

    .ui-upload-copy strong {
        font-size: 14px;
        color: var(--text)
    }

    .ui-upload-copy small {
        color: var(--muted)
    }

.ui-upload-actions {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap
}

.ui-upload-remove {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .18s,color .18s
}

    .ui-upload-remove:hover {
        background: #fff0f0;
        color: var(--danger)
    }

/* Slightly wider focus halo */
.field:focus, .select:focus, .textarea:focus, .ui-select:focus {
    box-shadow: 0 0 0 4px #5b82ff20
}

.login-field:focus-within {
    box-shadow: 0 0 0 4px #5b82ff1e
}

.account-chevron {
    margin-left: auto;
    margin-right: 8px;
    transform: none !important;
    transition: none !important
}

/* Dialog and toast proportions */
.kl-dialog-panel {
    max-width: 540px !important;
    padding: 26px !important;
    border-radius: 17px !important
}

.kl-dialog-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    font-size: 20px !important
}

.kl-dialog-panel h3 {
    font-size: 17px !important;
    line-height: 25px !important
}

.kl-dialog-panel p {
    font-size: 14px !important;
    line-height: 24px !important
}

.kl-dialog-panel footer {
    margin-top: 24px !important;
    gap: 10px !important
}

.kl-dialog-panel .tw-dialog-button {
    height: 42px;
    min-width: 78px;
    padding: 0 20px !important;
    border-radius: 8px !important;
    font-size: 14px !important
}

.kl-dialog-confirm {
    color: #fff !important
}

.kl-toast {
    position: relative;
    min-height: 76px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    overflow: hidden
}

.kl-toast-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 11px;
    font-size: 18px
}

.kl-toast-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1
}

    .kl-toast-copy strong {
        font-size: 15px;
        color: var(--text)
    }

    .kl-toast-copy span {
        color: var(--muted);
        font-size: 13px
    }

.kl-toast-close {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer
}

.kl-toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: var(--primary);
    animation: klToastProgress linear forwards
}

@keyframes klToastProgress {
    from {
        width: 100%
    }

    to {
        width: 0
    }
}

.kl-toast.toast-success .kl-toast-progress {
    background: var(--success)
}

.kl-toast.toast-error .kl-toast-progress {
    background: var(--danger)
}

.content-editor-card {
    margin: 16px 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
}
.content-editor-form > .full,
.content-editor-form .form-grid > .full {
    grid-column: 1 / -1;
}
.content-editor-form .form-row > label {
    color: var(--text);
}
.content-section-heading {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* Laydate keeps the same semantic colors as the management shell. */
.layui-laydate.laydate-theme-cms {
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(31, 41, 64, .12);
    overflow: hidden;
}
.laydate-theme-cms .layui-laydate-header,
.laydate-theme-cms .layui-laydate-footer {
    border-color: var(--border);
}
.laydate-theme-cms .layui-laydate-header,
.laydate-theme-cms .layui-laydate-content,
.laydate-theme-cms .layui-laydate-list {
    background: var(--panel);
    color: var(--text);
}
.laydate-theme-cms .layui-laydate-content th,
.laydate-theme-cms .layui-laydate-header i,
.laydate-theme-cms .laydate-time-list p {
    color: var(--muted);
}
.laydate-theme-cms .layui-laydate-content td {
    color: var(--text);
}
.laydate-theme-cms .layui-laydate-content .laydate-day-prev,
.laydate-theme-cms .layui-laydate-content .laydate-day-next {
    color: var(--muted);
    opacity: .55;
}
.laydate-theme-cms .layui-laydate-header i:hover,
.laydate-theme-cms .layui-laydate-header span:hover,
.laydate-theme-cms .layui-laydate-footer span:hover,
.laydate-theme-cms .layui-laydate-content td.laydate-day-now {
    color: var(--primary);
}
.laydate-theme-cms .laydate-day-now:after {
    border-color: var(--primary);
}
.laydate-theme-cms .layui-laydate-content td > div:hover,
.laydate-theme-cms .layui-laydate-list li:hover {
    background: var(--primary-soft);
}
.laydate-theme-cms .layui-this,
.laydate-theme-cms .layui-this > div {
    background: var(--primary) !important;
    color: #fff !important;
}
.laydate-theme-cms .laydate-time-list ol {
    background: var(--panel);
    border-color: var(--border);
}
.laydate-theme-cms .laydate-footer-btns span,
.laydate-theme-cms .laydate-btns-time {
    border-color: var(--border);
    background: var(--panel);
    color: var(--text);
}
.laydate-theme-cms .laydate-footer-btns .laydate-btns-confirm {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
.laydate-theme-cms .laydate-footer-btns .laydate-btns-confirm:hover {
    background: var(--primary-hover);
    color: #fff;
}

/* Light, theme-tinted grid scrollbar; keep the page-size popover unaffected. */
.layui-table-view .layui-table-body {
    --grid-scroll-thumb: #d0d9ed;
    --grid-scroll-hover: #b1c2e6;
    --grid-scroll-track: #f4f6fa;
    scrollbar-width: thin;
    scrollbar-color: var(--grid-scroll-thumb) var(--grid-scroll-track);
}
.layui-table-view .layui-table-body:hover {
    scrollbar-color: var(--grid-scroll-hover) var(--grid-scroll-track);
}
.dark .layui-table-view .layui-table-body {
    --grid-scroll-thumb: #505b73;
    --grid-scroll-hover: #697893;
    --grid-scroll-track: #242831;
}
.layui-table-view .layui-table-body::-webkit-scrollbar { width: 8px; height: 8px; }
.layui-table-view .layui-table-body::-webkit-scrollbar-track { background: var(--grid-scroll-track); }
.layui-table-view .layui-table-body::-webkit-scrollbar-thumb { background: var(--grid-scroll-thumb); border-radius: 8px; }
.layui-table-view .layui-table-body::-webkit-scrollbar-thumb:hover { background: var(--grid-scroll-hover); }
.layui-table-view .layui-table-body::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* Layui table is scoped to data grids so its form styles do not leak. */
.layui-table-view {
    margin: 0;
    border-color: var(--border);
    border-radius: 10px;
    overflow: hidden;
    color: var(--text)
}

    .layui-table-view .layui-table {
        color: var(--text);
        background: var(--panel)
    }

.layui-table-header, .layui-table-header table {
    background: #f8f9fb !important
}

.layui-table-view th, .layui-table-view td {
    border-color: var(--border) !important
}

.layui-table-view .layui-table th {
    color: #718098;
    font-weight: 600
}

.layui-table-view .layui-table-cell {
    height: 46px;
    line-height: 46px;
    padding: 0 12px
}

.layui-table-view .layui-table-body tr:hover, .layui-table-hover {
    background: var(--primary-soft) !important
}

.layui-table-view .layui-table-sort[lay-sort=asc] .layui-edge:first-child, .layui-table-view .layui-table-sort[lay-sort=desc] .layui-edge:last-child {
    border-bottom-color: var(--primary);
    border-top-color: var(--primary)
}

.dark .layui-table-view, .dark .layui-table-view .layui-table, .dark .layui-table-header, .dark .layui-table-header table {
    background: #18181a !important;
    color: #f1f2f5
}

    .dark .layui-table-view th, .dark .layui-table-view td {
        border-color: #303136 !important
    }

    .dark .layui-table-view .layui-table th {
        color: #a6aab3
    }

    .dark .layui-table-view .layui-table-body tr:hover {
        background: #292d38 !important
    }

@media(max-width: 760px) {
    .toolbar .ui-select-control {
        width: 100%
    }

    .ui-single-upload {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap
    }

    .ui-upload-actions {
        width: 100%;
        padding-left: 68px
    }

    .kl-dialog-panel {
        padding: 21px !important
    }
}

/* Unified subtle control shadow */
.field, .select, .textarea, .ui-select-trigger, .ui-select-option, .ui-checkbox input, .permission-grid input[type="checkbox"], .ui-btn, .btn, .icon-button, .account-trigger, .ui-single-upload, .logo-preview, .login-field, .layui-input, .layui-select, .layui-textarea, .layui-btn, .layui-table-view {
    box-shadow: rgba(0,0,0,0) 0 0,rgba(0,0,0,0) 0 0,rgba(0,0,0,.05) 0 1px 2px 0
}

/* Screenshot-aligned one-line image uploader */
.ui-single-upload {
    width: 100%;
    min-height: 86px !important;
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    border: 1px dashed #d1d7e0 !important;
    border-radius: 11px !important;
    background: var(--panel) !important
}

.ui-upload-preview {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    border: 1px solid #dfe4eb !important;
    border-radius: 9px !important;
    background: #f7f8fa !important
}

    .ui-upload-preview span {
        font-size: 20px;
        color: #536071
    }

.ui-upload-copy {
    display: flex !important;
    flex: 1 !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 1px !important
}

    .ui-upload-copy strong {
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 22px !important
    }

    .ui-upload-copy small {
        font-size: 12px !important;
        line-height: 20px !important;
        color: #7e8ba0 !important
    }

.ui-upload-actions {
    width: auto !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    margin-left: auto !important;
    padding: 0 !important
}

    .ui-upload-actions .ui-btn {
        height: 40px !important;
        min-width: 126px !important;
        padding: 0 16px !important;
        border-color: #d5dbe4 !important;
        background: var(--panel) !important;
        color: var(--text) !important
    }

        .ui-upload-actions .ui-btn:hover {
            border-color: var(--primary) !important;
            color: var(--primary) !important;
            background: var(--primary-soft) !important
        }

.ui-upload-remove {
    display: none !important
}

.dark .ui-upload-preview {
    border-color: #3b3d44 !important;
    background: #242529 !important
}

/* Expanded sidebar submenus render immediately: no fade, blur or height transition. */
.sidebar:not(.collapsed) .nav-children {
    transition: none !important;
    animation: none !important;
    filter: none !important;
    transform: none !important
}

.sidebar:not(.collapsed) .nav-group.open > .nav-children {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-template-rows: none !important
}

    .sidebar:not(.collapsed) .nav-group.open > .nav-children > .nav-children-inner {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important
    }

.sidebar:not(.collapsed) .nav-group:not(.open) > .nav-children {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important
}

.sidebar:not(.collapsed) .nav-children a {
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: background-color .15s,color .15s !important
}

/* Layui table controls mapped to the existing blue theme */
.layui-table-view .layui-btn {
    height: 28px !important;
    line-height: 26px !important;
    margin: 0 5px 0 0 !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    box-shadow: rgba(0,0,0,0) 0 0,rgba(0,0,0,0) 0 0,rgba(0,0,0,.05) 0 1px 2px 0 !important
}

.layui-table-view .layui-btn-primary {
    border-color: #b8c8ff !important;
    background: #fff !important;
    color: var(--primary) !important
}

.layui-table-view .layui-btn-normal {
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    color: #fff !important
}

.layui-table-view .layui-btn-danger {
    border-color: #ffbcbc !important;
    background: #fff3f3 !important;
    color: var(--danger) !important
}

.layui-table-view .layui-badge {
    height: 23px;
    line-height: 23px;
    padding: 0 9px;
    border-radius: 6px
}

.layui-table-page {
    height: auto !important;
    padding: 13px 12px !important;
    border-color: var(--border) !important;
    text-align: right
}

    .layui-table-page > div {
        height: auto !important
    }

.layui-laypage {
    margin: 0 !important
}

    .layui-laypage a, .layui-laypage span, .layui-laypage button, .layui-laypage input, .layui-laypage select {
        border-radius: 6px !important
    }

    .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background: var(--primary) !important
    }

    .layui-laypage input:focus, .layui-laypage select:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px #5b82ff1a
    }

.dark .layui-table-view .layui-btn-primary {
    border-color: #4b5f91 !important;
    background: #202638 !important;
    color: #78a0ff !important
}

.dark .layui-table-view .layui-btn-danger {
    border-color: #69383d !important;
    background: #2a1b1d !important
}

.dark .layui-table-page {
    background: #18181a !important
}

.dark .layui-laypage a, .dark .layui-laypage span, .dark .layui-laypage button, .dark .layui-laypage input, .dark .layui-laypage select {
    border-color: #3a3c42 !important;
    background: #202024 !important;
    color: #c7cad1 !important
}

@media(max-width: 760px) {
    .ui-single-upload {
        flex-wrap: wrap !important
    }

    .ui-upload-copy {
        min-width: calc(100% - 70px) !important
    }

    .ui-upload-actions {
        width: 100% !important;
        padding-left: 66px !important
    }

    .layui-table-page {
        text-align: left
    }
}

/* Shadow exclusions requested for navigation and dropdown internals */
.account-trigger, .ui-select-option, #sidebarToggle, .top-actions .icon-button {
    box-shadow: none !important
}

.topbar .icon-button:active {
    transform: scale(.98);
    background: color-mix(in srgb,var(--primary-soft) 65%,transparent)
}

/* Layui primary color follows the shell theme */
.layui-btn-normal, .layui-btn-warm:not(.layui-btn-danger), .layui-bg-blue {
    border-color: var(--primary) !important;
    background-color: var(--primary) !important;
    color: #fff !important
}

.layui-border-blue {
    border-color: var(--primary) !important;
    color: var(--primary) !important
}

.layui-form-checked[lay-skin=primary] i, .layui-form-checkbox[lay-skin=primary]:hover i, .layui-form-radio:hover > *, .layui-form-radioed > i {
    border-color: var(--primary) !important;
    color: var(--primary) !important
}

.layui-table-view .layui-bg-blue {
    background: var(--primary) !important
}

.layui-table-view .layui-table-sort[lay-sort=asc] .layui-edge:first-child {
    border-bottom-color: var(--primary) !important
}

.layui-table-view .layui-table-sort[lay-sort=desc] .layui-edge:last-child {
    border-top-color: var(--primary) !important
}

/* Final upload layout guardrails */
.form-row.full > .ui-single-upload {
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important
}

.ui-single-upload {
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    padding: 17px 18px !important
}

.ui-upload-preview {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important
}

    .ui-upload-preview img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important
    }

.ui-upload-copy {
    justify-content: center !important
}

.ui-upload-actions .ui-btn {
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    white-space: nowrap !important
}

    .ui-upload-actions .ui-btn i {
        display: inline-block !important;
        width: 16px !important;
        flex: 0 0 16px !important;
        text-align: center !important
    }

.ui-single-upload + .field-validation-error {
    margin-top: 6px
}

/* Basic settings: aligned sections, logo actions and repeatable addresses */
.settings-panel {
    padding: 0 !important;
    overflow: hidden
}

.settings-form {
    display: grid
}

.settings-form > .validation-summary:not(:empty) {
    margin: 20px 24px 0
}

.settings-section {
    padding: 24px
}

.settings-section + .settings-section {
    border-top: 1px solid var(--border)
}

.settings-section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px
}

.settings-section > header h2 {
    margin: 0;
    color: var(--text);
    font-size: 17px
}

.settings-section > header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px 24px;
    align-items: start
}

.settings-grid > .full {
    grid-column: 1/-1
}

.settings-grid .form-row {
    min-width: 0
}

.settings-grid .form-row > label:first-child,
.address-row .form-row > label {
    min-height: 24px;
    margin-bottom: 7px
}

.logo-setting-row .logo-uploader {
    min-height: 76px;
    align-items: center
}

.logo-control {
    display: grid !important;
    align-content: center;
    gap: 7px !important
}

.logo-buttons {
    display: flex;
    align-items: center;
    gap: 9px
}

.logo-buttons .ui-btn {
    height: 40px;
    margin: 0 !important
}

.logo-help {
    margin: 0
}

.address-editor {
    margin-top: 22px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden
}

.address-editor-head {
    min-height: 70px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #f8faff;
    border-bottom: 1px solid var(--border)
}

.address-editor-head strong,
.address-editor-head small {
    display: block
}

.address-editor-head small {
    margin-top: 3px;
    color: var(--muted)
}

.address-list {
    display: grid
}

.address-row {
    display: grid;
    grid-template-columns: minmax(130px,.8fr) minmax(260px,2fr) minmax(150px,.9fr) 90px auto 38px;
    gap: 12px;
    align-items: end;
    padding: 16px
}

.address-row + .address-row {
    border-top: 1px solid var(--border)
}

.address-enabled {
    height: 42px;
    margin: 0;
    align-self: end;
    white-space: nowrap
}

.address-remove {
    width: 38px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fff7f7;
    color: var(--danger);
    cursor: pointer
}

.address-empty {
    margin: 0;
    padding: 26px;
    text-align: center;
    color: var(--muted)
}

.address-empty.hidden {
    display: none
}

.toggle-form-row .ui-checkbox {
    height: 42px;
    margin: 0
}

.settings-form > .form-actions {
    margin: 0;
    padding: 20px 24px 24px;
    border-top: 1px solid var(--border)
}

.dark .address-editor-head {
    background: #1c1c1f
}

@media(max-width:1100px) {
    .address-row {
        grid-template-columns: 1fr 1.6fr 1fr 90px
    }
    .address-enabled,
    .address-remove {
        grid-row: 2
    }
}

@media(max-width:760px) {
    .settings-section { padding: 20px 16px }
    .settings-grid { grid-template-columns: 1fr }
    .settings-grid > .full { grid-column: auto }
    .address-editor-head { align-items: flex-start }
    .address-row { grid-template-columns: 1fr }
    .address-enabled,.address-remove { grid-row: auto }
    .address-remove { justify-self: end }
    .logo-buttons { flex-wrap: wrap }
    .settings-form > .form-actions { padding: 18px 16px 20px }
}

/* Keep primary menu hit areas identical in expanded and collapsed states */
.side-nav > .nav-link, .side-nav > .nav-group > .nav-group-trigger, .sidebar.collapsed .side-nav > .nav-link, .sidebar.collapsed .side-nav > .nav-group > .nav-group-trigger {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

    .side-nav > .nav-link > .nav-icon, .side-nav > .nav-group > .nav-group-trigger > .nav-icon {
        height: 44px !important
    }

/* Larger Layui rows and 33px pagination controls */
.layui-table-view .layui-table-header .layui-table-cell {
    height: 42px !important;
    line-height: 42px !important;
    font-size: 12px !important;
    font-weight: 600 !important
}

.layui-table-view .layui-table-body .layui-table-cell {
    height: 45px !important;
    line-height: 45px !important;
    font-size: 14px !important
}

.layui-table-view .layui-table-body td {
    height: 45px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.layui-table-page {
    min-height: 59px !important;
    padding: 13px 12px !important
}

    .layui-table-page .layui-laypage a, .layui-table-page .layui-laypage > span:not(.layui-laypage-count):not(.layui-laypage-limits), .layui-table-page .layui-laypage .layui-laypage-curr {
        height: 33px !important;
        min-width: 33px !important;
        line-height: 33px !important;
        padding: 0 10px !important
    }

    .layui-table-page .layui-laypage input, .layui-table-page .layui-laypage button, .layui-table-page .layui-laypage select {
        height: 33px !important;
        line-height: 33px !important;
        font-size: 13px !important
    }

    .layui-table-page .layui-laypage .layui-laypage-count, .layui-table-page .layui-laypage .layui-laypage-skip, .layui-table-page .layui-laypage .layui-laypage-limits {
        height: 33px !important;
        line-height: 33px !important;
        font-size: 13px !important
    }

    .layui-table-page .layui-laypage select {
        padding: 0 28px 0 10px !important
    }

/* Quiet sidebar scrollbar; visible on hover, without arrow buttons */
.side-nav {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent
}

    .side-nav:hover {
        scrollbar-color: #b9c3d1 transparent
    }

    .side-nav::-webkit-scrollbar {
        width: 6px;
        height: 6px
    }

    .side-nav::-webkit-scrollbar-track {
        background: transparent
    }

    .side-nav::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: transparent
    }

    .side-nav:hover::-webkit-scrollbar-thumb {
        background: #b9c3d1
    }

    .side-nav::-webkit-scrollbar-thumb:hover {
        background: #98a5b8
    }

    .side-nav::-webkit-scrollbar-button, .side-nav::-webkit-scrollbar-button:single-button {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important
    }

.dark .side-nav:hover {
    scrollbar-color: #515763 transparent
}

    .dark .side-nav:hover::-webkit-scrollbar-thumb {
        background: #515763
    }

/* Layui table pagination, labels and selection refinements */
.list-card .table-wrap, .layui-table-view {
    overflow: visible !important
}

    .layui-table-view .layui-table-body .layui-table-cell, .layui-table-view .layui-table-body td {
        color: #666 !important
    }

    .layui-table-view .layui-badge, .layui-table-view .layui-bg-blue, .list-card > .toolbar > .tag {
        border-color: var(--primary) !important;
        background: var(--primary) !important;
        color: #fff !important
    }

    .layui-table-view .layui-form-checked[lay-skin=primary] i {
        border-color: var(--primary) !important;
        background-color: var(--primary) !important;
        color: #fff !important
    }

.layui-table-page .layui-laypage {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    white-space: nowrap !important
}

    .layui-table-page .layui-laypage > a, .layui-table-page .layui-laypage > .layui-laypage-curr {
        box-sizing: border-box !important;
        width: 33px !important;
        min-width: 33px !important;
        max-width: 33px !important;
        height: 33px !important;
        min-height: 33px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 33px !important;
        text-align: center !important;
        border-radius: 7px !important
    }

        .layui-table-page .layui-laypage > .layui-laypage-curr > em {
            position: relative !important;
            inset: auto !important;
            box-sizing: border-box !important;
            width: 33px !important;
            height: 33px !important;
            padding: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            line-height: 33px !important;
            text-align: center !important;
            border-radius: 7px !important
        }

        .layui-table-page .layui-laypage > a i {
            display: block !important;
            line-height: 33px !important
        }

    .layui-table-page .layui-laypage .layui-laypage-skip {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 0 !important
    }

    .layui-table-page .layui-laypage .layui-laypage-count {
        margin: 0 4px !important
    }

    .layui-table-page .layui-laypage .layui-laypage-limits {
        height: 33px !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        overflow: visible !important
    }

.layui-table-page .layui-laypage-limits .ui-select-control {
    width: 116px !important;
    height: 33px !important;
    display: inline-block !important
}

.layui-table-page .layui-laypage-limits .ui-select-trigger {
    height: 33px !important;
    min-height: 33px !important;
    padding: 0 10px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    box-shadow: none !important
}

.layui-table-page .layui-laypage-limits .ui-select-dropdown {
    top: auto !important;
    bottom: calc(100% + 7px) !important;
    min-width: 116px !important
}

.layui-table-page .layui-laypage-limits .ui-select-option {
    min-height: 36px !important;
    padding: 7px 9px !important;
    font-size: 13px !important
}

.batch-delete-button {
    border-color: #ffc9c9 !important;
    background: #fff7f7 !important;
    color: var(--danger) !important
}

    .batch-delete-button:hover {
        border-color: var(--danger) !important;
        background: #fff0f0 !important
    }

    .batch-delete-button:disabled {
        opacity: .55;
        cursor: not-allowed
    }

.dark .layui-table-view .layui-table-body .layui-table-cell, .dark .layui-table-view .layui-table-body td {
    color: #c8cbd2 !important
}

.dark .layui-table-page .layui-laypage-limits .ui-select-trigger, .dark .layui-table-page .layui-laypage-limits .ui-select-dropdown {
    background: #202024 !important
}

@media(max-width: 900px) {
    .layui-table-page {
        overflow-x: auto !important
    }

        .layui-table-page .layui-laypage {
            justify-content: flex-end !important;
            flex-wrap: nowrap !important;
            min-width: max-content !important
        }
}

/* Fix Layui current-page layers and keep the custom limit menu above table cells. */
.layui-table-view .layui-table-box {
    position: relative !important;
    z-index: 1 !important;
    border-radius: 9px 9px 0 0;
    overflow: hidden;
}

/* Clip only the grid, not the pagination and its floating page-size menu. */
.layui-table-view .layui-form-checkbox[lay-skin=primary] > i {
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0) 0 0, rgba(0, 0, 0, 0) 0 0, rgba(0, 0, 0, .05) 0 1px 2px 0;
}

.layui-table-view .layui-table-body tr.layui-table-checked,
.layui-table-view .layui-table-body tr.layui-table-click {
    background-color: #f1f2f4 !important;
}

.dark .layui-table-view .layui-table-body tr.layui-table-checked,
.dark .layui-table-view .layui-table-body tr.layui-table-click {
    background-color: #2b2d31 !important;
}

.layui-table-view .layui-table-page {
    position: relative !important;
    z-index: 20 !important;
    overflow: visible !important
}

.layui-table-page .layui-laypage > .layui-laypage-curr {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    color: #fff !important
}

    .layui-table-page .layui-laypage > .layui-laypage-curr > .layui-laypage-em {
        position: absolute !important;
        inset: 0 !important;
        z-index: -1 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        display: block !important;
        border-radius: 7px !important;
        background: var(--primary) !important
    }

    .layui-table-page .layui-laypage > .layui-laypage-curr > em:not(.layui-laypage-em) {
        position: relative !important;
        z-index: 1 !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        display: block !important;
        line-height: 33px !important;
        color: #fff !important;
        background: transparent !important
    }

.layui-table-page .layui-laypage-limits {
    position: relative !important;
    z-index: 30 !important
}

    .layui-table-page .layui-laypage-limits .ui-select-control {
        position: relative !important;
        z-index: 31 !important;
        overflow: visible !important
    }

        .layui-table-page .layui-laypage-limits .ui-select-control.open {
            z-index: 500 !important
        }

    .layui-table-page .layui-laypage-limits .ui-select-dropdown {
        z-index: 510 !important
    }

/* Compact Layui pager: one baseline, right aligned, matching the management theme. */
.layui-table-view .layui-table-page {
    box-sizing: border-box !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 13px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important
}

.layui-table-page > div {
    width: 100% !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: visible !important
}

.layui-table-page .layui-laypage {
    width: auto !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 34px !important;
    overflow: visible !important
}

    .layui-table-page .layui-laypage > a, .layui-table-page .layui-laypage > .layui-laypage-curr {
        position: relative !important;
        top: auto !important;
        float: none !important;
        box-sizing: border-box !important;
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 34px !important;
        vertical-align: middle !important;
        border-radius: 7px !important
    }

        .layui-table-page .layui-laypage > a i {
            position: static !important;
            display: block !important;
            margin: 0 !important;
            line-height: 1 !important
        }

    .layui-table-page .layui-laypage > .layui-laypage-curr {
        isolation: auto !important;
        overflow: hidden !important;
        border: 1px solid var(--primary) !important;
        background: var(--primary) !important;
        color: #fff !important
    }

        .layui-table-page .layui-laypage > .layui-laypage-curr > .layui-laypage-em {
            position: absolute !important;
            inset: 0 !important;
            z-index: 0 !important;
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            display: block !important;
            border-radius: 6px !important;
            background: var(--primary) !important
        }

        .layui-table-page .layui-laypage > .layui-laypage-curr > em:not(.layui-laypage-em) {
            position: relative !important;
            inset: auto !important;
            z-index: 1 !important;
            width: auto !important;
            height: auto !important;
            margin: 0 !important;
            padding: 0 !important;
            display: block !important;
            line-height: 32px !important;
            color: #fff !important;
            background: transparent !important
        }

    .layui-table-page .layui-laypage .layui-laypage-skip, .layui-table-page .layui-laypage .layui-laypage-count, .layui-table-page .layui-laypage .layui-laypage-limits {
        position: relative !important;
        top: auto !important;
        float: none !important;
        flex: 0 0 auto !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        line-height: 34px !important;
        vertical-align: middle !important;
        white-space: nowrap !important
    }

    .layui-table-page .layui-laypage .layui-laypage-skip {
        gap: 6px !important
    }

    .layui-table-page .layui-laypage .layui-laypage-count {
        margin-left: 2px !important
    }

    .layui-table-page .layui-laypage input, .layui-table-page .layui-laypage button {
        box-sizing: border-box !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        line-height: 32px !important;
        text-align: center !important;
        border-radius: 7px !important
    }

    .layui-table-page .layui-laypage input {
        width: 46px !important;
        padding: 0 6px !important
    }

    .layui-table-page .layui-laypage button {
        padding: 0 13px !important
    }

.layui-table-page .layui-laypage-limits {
    width: 110px !important;
    overflow: visible !important
}

    .layui-table-page .layui-laypage-limits .ui-select-control {
        position: relative !important;
        width: 110px !important;
        height: 34px !important;
        display: block !important;
        overflow: visible !important
    }

    .layui-table-page .layui-laypage-limits .ui-select-trigger {
        box-sizing: border-box !important;
        width: 110px !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 11px !important;
        border: 1px solid #cfd5df !important;
        border-radius: 7px !important;
        background: var(--panel) !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 32px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,.05) !important
    }

        .layui-table-page .layui-laypage-limits .ui-select-trigger i {
            font-size: 10px !important;
            color: #7c8798 !important
        }

    .layui-table-page .layui-laypage-limits .ui-select-control.open .ui-select-trigger {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent) !important
    }

    .layui-table-page .layui-laypage-limits .ui-select-dropdown {
        box-sizing: border-box !important;
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(100% + 6px) !important;
        width: 110px !important;
        min-width: 110px !important;
        margin: 0 !important;
        padding: 5px !important;
        display: block !important;
        border: 1px solid #dfe3e9 !important;
        border-radius: 9px !important;
        background: var(--panel) !important;
        box-shadow: 0 8px 22px rgba(31,41,55,.14) !important;
        transform: translateY(5px) scale(.99) !important;
        transform-origin: bottom !important
    }

    .layui-table-page .layui-laypage-limits .ui-select-control.open .ui-select-dropdown {
        transform: none !important
    }

    .layui-table-page .layui-laypage-limits .ui-select-option {
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 9px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        border: 0 !important;
        border-radius: 6px !important;
        background: transparent !important;
        color: var(--text) !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 36px !important;
        box-shadow: none !important
    }

        .layui-table-page .layui-laypage-limits .ui-select-option:before {
            width: 14px !important;
            flex: 0 0 14px !important
        }

        .layui-table-page .layui-laypage-limits .ui-select-option:hover {
            background: var(--primary-soft) !important;
            color: var(--primary) !important
        }

        .layui-table-page .layui-laypage-limits .ui-select-option.selected {
            background: #eef0f3 !important;
            color: var(--text) !important
        }

.dark .layui-table-page .layui-laypage-limits .ui-select-option.selected {
    background: #303137 !important;
    color: #f1f2f5 !important
}

/* Center the selected page-size text independently from the dropdown arrow. */
.layui-table-page .layui-laypage-limits .ui-select-trigger {
    position: relative !important;
    justify-content: center !important;
    text-align: center !important;
    padding-left: 28px !important;
    padding-right: 28px !important
}

    .layui-table-page .layui-laypage-limits .ui-select-trigger > span {
        display: block !important;
        flex: 0 1 auto !important;
        width: 100% !important;
        text-align: center !important
    }

    .layui-table-page .layui-laypage-limits .ui-select-trigger > i {
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        margin: 0 !important;
        transform: translateY(-50%) !important
    }

.layui-table-page .layui-laypage-limits .ui-select-control.open .ui-select-trigger > i {
    transform: translateY(-50%) rotate(180deg) !important
}

/* Treat the selected value and arrow as one centered visual group. */
.layui-table-page .layui-laypage-limits .ui-select-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 10px !important;
    text-align: center !important
}

    .layui-table-page .layui-laypage-limits .ui-select-trigger > span {
        display: inline-block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        text-align: center !important
    }

    .layui-table-page .layui-laypage-limits .ui-select-trigger > i {
        position: static !important;
        right: auto !important;
        top: auto !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        transform: none !important
    }

.layui-table-page .layui-laypage-limits .ui-select-control.open .ui-select-trigger > i {
    transform: rotate(180deg) !important
}

/* Keep edit/configuration panels at Tailwind's max-w-4xl width even when
   unlayered component styles are loaded after Tailwind utilities. */
section.panel.max-w-4xl {
    box-sizing: border-box;
    max-width: 70rem !important
}

.seo-settings-list {
    display: grid;
    gap: 18px
}

.seo-setting-form {
    width: 100%;
    margin-bottom: 0
}

.seo-setting-form .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px
}

.seo-setting-form .panel-title {
    margin-bottom: 3px
}

@media (max-width: 640px) {
    .seo-setting-form .panel-head {
        align-items: stretch;
        flex-direction: column
    }
}

@media (max-width: 900px) {
    .permission-capability-grid { grid-template-columns: repeat(3,minmax(70px,1fr)) }
    .admin-create-grid { grid-template-columns: repeat(2,minmax(150px,1fr)) }
}

@media (max-width: 640px) {
    .permission-capability-grid,.admin-create-grid { grid-template-columns: 1fr }
    .log-cleanup { width: 100%; align-items: stretch; flex-direction: column }
    .log-cleanup .ui-select,.log-cleanup .ui-btn { width: 100% }
    .traffic-heading { align-items: flex-start; flex-direction: column }
    .traffic-ranges { width: 100% }
    .traffic-ranges button { flex: 1 }
}