/* 澄境 · Lucent. Theme-only paint; layout, data and personal sizing stay owned by the application. */
html[data-ui-theme="lucent"] {
    color-scheme: light;
    --lucent-canvas: #f4f5f7;
    --lucent-surface: #fff;
    --lucent-chrome: #f8f9fb;
    --lucent-ink: #20242c;
    --lucent-muted: #626c7a;
    --lucent-line: #dfe3e8;
    --lucent-line-soft: #eceef2;
    --lucent-hover: #f0f5fd;
    --lucent-selected: #eaf2ff;
    --lucent-radius: 12px;
    --lucent-float-radius: 16px;
    --lucent-shadow: 0 2px 8px rgba(28, 39, 57, .035), 0 0 0 1px rgba(28, 39, 57, .025);
    --lucent-float-shadow: 0 20px 60px rgba(28, 39, 57, .14), 0 3px 12px rgba(28, 39, 57, .06);
    --lucent-focus: rgba(23, 101, 207, .2);
    --ui-page-bg: var(--lucent-canvas);
    --ui-panel-bg: var(--lucent-surface);
    --ui-topbar-bg: var(--lucent-chrome);
    --ui-sidebar-bg: var(--lucent-chrome);
    --ui-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
    --ui-font-color: var(--lucent-ink);
    --ui-text-color: var(--ui-font-color);
    --ui-muted-color: var(--lucent-muted);
    --ui-accent-color: #1765cf;
    --ui-accent-foreground: #fff;
    --ui-border-color: var(--lucent-line);
    --ui-border-soft: var(--lucent-line-soft);
    --ui-control-bg: var(--lucent-surface);
    --ui-row-hover-color: var(--lucent-hover);
    --ui-button-radius: 10px;
    --ui-card-radius: var(--lucent-radius);
    /* The preset base is already shared by every registered theme. */
    --cyxy-theme-bg: var(--lucent-canvas);
    --cyxy-theme-bg-secondary: var(--lucent-chrome);
    --cyxy-theme-nav: var(--lucent-chrome);
    --cyxy-theme-sidebar: var(--lucent-chrome);
    --cyxy-theme-sidebar-text: var(--ui-font-color);
    --cyxy-theme-panel: var(--lucent-surface);
    --cyxy-theme-panel-secondary: var(--lucent-chrome);
    --cyxy-theme-border: var(--ui-border-color);
    --cyxy-theme-border-strong: #c4cad3;
    --cyxy-theme-primary: var(--ui-accent-color);
    --cyxy-theme-accent: var(--ui-accent-color);
    --cyxy-theme-text: var(--ui-font-color);
    --cyxy-theme-muted: var(--ui-muted-color);
    --cyxy-theme-input: var(--lucent-surface);
    --cyxy-theme-shadow: var(--lucent-shadow);
    --cyxy-theme-overlay: rgba(31, 38, 50, .28);
    --cy-primary: var(--ui-accent-color);
    --cy-ink: var(--ui-font-color);
    --cy-muted: var(--ui-muted-color);
    --cy-line: var(--ui-border-color);
    --cy-surface: var(--lucent-surface);
    --cy-canvas: var(--lucent-canvas);
}

html[data-ui-theme="lucent"] body {
    background-color: var(--lucent-canvas);
    color: var(--ui-font-color);
    font-family: var(--ui-font-family);
}

html[data-ui-theme="lucent"] :is(.wrapper, .content-wrapper, .right-side) {
    background-color: var(--lucent-canvas);
    color: var(--ui-font-color);
}

/* Navigation is the material layer; the working canvas remains quiet and opaque. */
html[data-ui-theme="lucent"] .main-header :is(.navbar, .logo) {
    background: var(--lucent-chrome);
    color: var(--ui-font-color);
    box-shadow: inset 0 -1px 0 var(--lucent-line);
}

html[data-ui-theme="lucent"] .main-header .navbar :is(.nav > li > a, .sidebar-toggle) {
    color: var(--ui-font-color);
}

html[data-ui-theme="lucent"] .main-header .navbar :is(.nav > li > a:hover, .nav > li.open > a, .sidebar-toggle:hover) {
    background-color: var(--lucent-selected);
    color: var(--ui-accent-color);
}

html[data-ui-theme="lucent"] .main-header .nav-addtabs > li.active > a {
    background: var(--lucent-surface);
    color: var(--ui-accent-color);
    box-shadow: inset 0 -2px 0 var(--ui-accent-color);
}

html[data-ui-theme="lucent"] :is(.main-sidebar, .left-side) {
    background: var(--lucent-chrome);
    box-shadow: inset -1px 0 0 var(--lucent-line);
}

html[data-ui-theme="lucent"] .sidebar :is(a, .user-panel > .info) {
    color: #444d5b;
}

html[data-ui-theme="lucent"] .main-sidebar .sidebar-account-identity > .info {
    color: var(--ui-font-color);
}

html[data-ui-theme="lucent"] .sidebar-menu > li.header {
    background: transparent;
    color: var(--ui-muted-color);
}

html[data-ui-theme="lucent"] .sidebar-menu > li > a {
    border-left-color: transparent;
    background: transparent;
}

html[data-ui-theme="lucent"] .sidebar-menu > li:is(.active, :hover) > a {
    border-left-color: var(--ui-accent-color);
    background: var(--lucent-selected);
    color: var(--ui-accent-color);
}

html[data-ui-theme="lucent"] .sidebar-menu > li > .treeview-menu {
    background: #eff1f5;
}

html[data-ui-theme="lucent"] .sidebar-menu .treeview-menu > li > a {
    color: #525c6b;
}

html[data-ui-theme="lucent"] .sidebar-menu .treeview-menu > li:is(.active, :hover) > a {
    color: var(--ui-accent-color);
    background: var(--lucent-selected);
}

html[data-ui-theme="lucent"] :is(.sidebar-form, .sidebar-form .input-group) {
    border-color: var(--lucent-line);
    border-radius: var(--ui-button-radius);
    background: #e9ecf1;
}

html[data-ui-theme="lucent"] .sidebar-form :is(.form-control, .btn) {
    background: transparent;
    color: #525c6b;
}

html[data-ui-theme="lucent"] #secondnav {
    border-bottom-color: var(--lucent-line);
    background: var(--lucent-chrome);
}

html[data-ui-theme="lucent"] :is(#secondnav .nav-addtabs > li > a, .nav-tabs > li > a) {
    color: var(--ui-muted-color);
    border-radius: var(--ui-button-radius) var(--ui-button-radius) 0 0;
}

html[data-ui-theme="lucent"] :is(#secondnav .nav-addtabs > li.active > a, .nav-tabs > li.active > a) {
    border-color: var(--lucent-line);
    border-bottom-color: var(--lucent-surface);
    background: var(--lucent-surface);
    color: var(--ui-accent-color);
}

html[data-ui-theme="lucent"] .navbar-global-search .global-search-input {
    border-color: var(--lucent-line);
    background: var(--lucent-surface);
    color: var(--ui-font-color);
    box-shadow: inset 0 1px 2px rgba(28, 39, 57, .025);
}

html[data-ui-theme="lucent"] .navbar-global-search :is(.global-search-icon, .global-search-state, .global-search-item-subtitle) {
    color: var(--ui-muted-color);
}

html[data-ui-theme="lucent"] .navbar-global-search .global-search-kbd {
    background: var(--lucent-chrome);
    color: var(--ui-muted-color);
}

html[data-ui-theme="lucent"] .navbar-global-search .global-search-item {
    color: var(--ui-font-color);
}

html[data-ui-theme="lucent"] .navbar-global-search :is(.global-search-item:hover, .global-search-item.is-active) {
    background: var(--lucent-hover);
    color: var(--ui-accent-color);
}

/* Shared panels, filters and toolbars: no geometry that could alter column widths. */
html[data-ui-theme="lucent"] :is(.panel, .box, .well, .thumbnail) {
    border-radius: var(--lucent-radius);
    background-color: var(--lucent-surface);
    box-shadow: var(--lucent-shadow);
}

html[data-ui-theme="lucent"] :is(.panel-default, .well, .thumbnail, .crm-common-search-panel) {
    border-color: var(--ui-border-color);
}

html[data-ui-theme="lucent"] :is(.panel-default > .panel-heading, .box-header, .crm-common-search-header) {
    border-bottom-color: var(--lucent-line-soft);
    background: var(--lucent-chrome);
    color: var(--ui-font-color);
}

html[data-ui-theme="lucent"] :is(.panel-default > .panel-heading, .box-header) {
    border-radius: var(--lucent-radius) var(--lucent-radius) 0 0;
}

html[data-ui-theme="lucent"] :is(.panel-title, .box-title, .control-label) {
    font-weight: 600;
}

html[data-ui-theme="lucent"] :is(.panel-footer, .box-footer, .main-footer) {
    border-color: var(--lucent-line-soft);
    background: var(--lucent-surface);
    color: var(--ui-muted-color);
}

html[data-ui-theme="lucent"] :is(.fixed-table-toolbar, .crm-common-search-panel, .crm-common-search-content, .form-commonsearch) {
    background-color: var(--lucent-surface);
}

html[data-ui-theme="lucent"] .crm-common-search-panel {
    border-radius: var(--lucent-radius);
    box-shadow: none;
}

html[data-ui-theme="lucent"] .crm-common-search-header {
    border-radius: var(--lucent-radius) var(--lucent-radius) 0 0;
}

html[data-ui-theme="lucent"] :is(.btn-default, .btn-grey, .settings-action-btn:not(.is-danger), .ui-secondary-button) {
    border-color: var(--ui-border-color);
    background: var(--lucent-surface);
    color: #444d5b;
    box-shadow: 0 1px 2px rgba(28, 39, 57, .025);
}

html[data-ui-theme="lucent"] :is(.btn-default:hover, .btn-grey:hover, .settings-action-btn:not(.is-danger):hover, .ui-secondary-button:hover) {
    border-color: #b8c4d5;
    background: var(--lucent-hover);
    color: var(--ui-accent-color);
}

html[data-ui-theme="lucent"] :is(.btn-primary, .layui-layer-btn .layui-layer-btn0) {
    border-color: var(--ui-accent-color);
    background: var(--ui-accent-color);
    color: var(--ui-accent-foreground);
    box-shadow: 0 1px 2px rgba(23, 101, 207, .12);
}

html[data-ui-theme="lucent"] .btn-primary:is(:hover, :focus) {
    background-image: linear-gradient(rgba(0, 0, 0, .06), rgba(0, 0, 0, .06));
    color: var(--ui-accent-foreground);
}

html[data-ui-theme="lucent"] :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ui-accent-color);
    outline-offset: 2px;
}

/* Solid data surfaces; preserve status classes, personal hover, grids and row density. */
html[data-ui-theme="lucent"] :is(.bootstrap-table .table, .fixed-table-body, .fixed-table-header, .fixed-table-footer, .fixed-columns, .fixed-columns-right) {
    background-color: var(--lucent-surface);
}

html[data-ui-theme="lucent"] .fixed-table-container {
    border-color: var(--ui-border-color);
    border-radius: var(--lucent-radius);
    background: var(--lucent-surface);
}

html[data-ui-theme="lucent"] :is(.bootstrap-table .table > thead > tr > th, .fixed-table-container thead th, .fixed-table-header table thead th) {
    border-color: var(--ui-border-color);
    background: var(--lucent-chrome);
    color: #444d5b;
}

html[data-ui-theme="lucent"] :is(.table > tbody > tr > td, .fixed-table-container tbody td) {
    border-color: var(--lucent-line-soft);
}

html[data-ui-theme="lucent"][data-ui-table-grid="weak"] .bootstrap-table .table > tbody > tr > td {
    border-color: #f0f1f4;
}

html[data-ui-theme="lucent"] .table > tbody > tr.selected > td {
    background-color: var(--lucent-selected);
}

html[data-ui-theme="lucent"] .table a:not(.btn, .label, .text-danger, .text-success, .text-warning, .text-info, .text-muted) {
    color: var(--ui-accent-color);
}

html[data-ui-theme="lucent"] .table a:not(.btn, .label, .text-danger, .text-success, .text-warning, .text-info, .text-muted):hover {
    text-decoration: underline;
}

/* Status names keep their semantic hue; small label text gains readable contrast. */
html[data-ui-theme="lucent"] .label-success {
    background: #e9f7ef;
    color: #216b42;
}

html[data-ui-theme="lucent"] .label-warning {
    background: #fff4df;
    color: #85520a;
}

html[data-ui-theme="lucent"] .label-info {
    background: #eaf3ff;
    color: #225f9e;
}

html[data-ui-theme="lucent"] .label-danger {
    background: #ffedeb;
    color: #a32a20;
}

html[data-ui-theme="lucent"] .label-primary {
    background: #eaf2ff;
    color: #225f9e;
}

html[data-ui-theme="lucent"] .label-default {
    background: #eceff3;
    color: #515c6b;
}

html[data-ui-theme="lucent"] .fixed-table-pagination {
    background: var(--lucent-surface);
    color: var(--ui-muted-color);
}

html[data-ui-theme="lucent"] .pagination > li > :is(a, span) {
    border-color: var(--lucent-line);
    background: var(--lucent-surface);
    color: #525c6b;
}

html[data-ui-theme="lucent"] .pagination > .active > :is(a, span) {
    border-color: var(--ui-accent-color);
    background: var(--ui-accent-color);
    color: var(--ui-accent-foreground);
}

html[data-ui-theme="lucent"] .pagination > .disabled > :is(a, span, a:hover, a:focus) {
    border-color: var(--lucent-line);
    background: var(--lucent-chrome);
    color: #7b8491;
    cursor: not-allowed;
}

/* Native and enhanced form controls share a restrained, readable material. */
html[data-ui-theme="lucent"] :is(.form-control, .input-group-addon, .select2-container .select2-choice, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .sp_container_combo, .sp_input) {
    border-color: var(--ui-border-color);
    background: var(--lucent-surface);
    color: var(--ui-font-color);
}

html[data-ui-theme="lucent"] .form-control::placeholder {
    color: #707987;
    opacity: 1;
}

html[data-ui-theme="lucent"] :is(.form-control:focus, .select2-container--focus .select2-selection, .bootstrap-select.open > .dropdown-toggle) {
    border-color: var(--ui-accent-color);
    box-shadow: 0 0 0 3px var(--lucent-focus);
}

html[data-ui-theme="lucent"] :is(.form-control[readonly], .form-control[disabled], fieldset[disabled] .form-control) {
    border-color: var(--lucent-line);
    background: #f0f2f5;
    color: #626c7a;
}

html[data-ui-theme="lucent"] :is(.has-error .form-control, .form-control[aria-invalid="true"]) {
    border-color: #b42318;
}

html[data-ui-theme="lucent"] .has-success .form-control {
    border-color: #24804d;
}

html[data-ui-theme="lucent"] .has-error :is(.help-block, .control-label, label) {
    color: #b42318;
}

html[data-ui-theme="lucent"] .has-warning :is(.help-block, .control-label, label) {
    color: #85520a;
}

html[data-ui-theme="lucent"] :is(.form-group:not(.has-error):not(.has-success):not(.has-warning) .help-block:not(.text-danger), .text-muted) {
    color: var(--ui-muted-color);
}

html[data-ui-theme="lucent"] :is(.dropdown-menu, .select2-dropdown, .select2-drop, .sp_result_area, .datepicker, .datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .global-search-dropdown) {
    border-color: var(--lucent-line);
    border-radius: var(--lucent-radius);
    background: var(--lucent-surface);
    color: var(--ui-font-color);
    box-shadow: var(--lucent-float-shadow);
}

html[data-ui-theme="lucent"] :is(.dropdown-menu > li > a, .bootstrap-select .dropdown-menu li a, .select2-results__option, .select2-results .select2-result-label) {
    color: var(--ui-font-color);
}

html[data-ui-theme="lucent"] :is(.dropdown-menu > li:not(.disabled) > a:hover, .dropdown-menu > li.active > a, .select2-results__option--highlighted, .select2-results .select2-highlighted) {
    background: var(--lucent-selected);
    color: var(--ui-accent-color);
}

html[data-ui-theme="lucent"] :is(.dropdown-menu > li.disabled > a, .select2-results__option[aria-disabled="true"]) {
    background: transparent;
    color: #7b8491;
}

html[data-ui-theme="lucent"] :is(.datetimepicker table tr td.active, .datepicker table tr td.active, .daterangepicker td.active, .daterangepicker .ranges li.active) {
    background: var(--ui-accent-color);
    color: var(--ui-accent-foreground);
    text-shadow: none;
}

/* Dialog bodies are opaque. Glass is confined to their title/tool chrome. */
html[data-ui-theme="lucent"] :is(.layui-layer, .modal-content, .office-todo-drawer) {
    border: 1px solid var(--lucent-line);
    border-radius: var(--lucent-float-radius);
    background: var(--lucent-surface);
    color: var(--ui-font-color);
    box-shadow: var(--lucent-float-shadow);
}

html[data-ui-theme="lucent"] :is(.layui-layer-title, .modal-header) {
    border-bottom-color: var(--lucent-line-soft);
    border-radius: var(--lucent-float-radius) var(--lucent-float-radius) 0 0;
    background: var(--lucent-chrome);
    color: var(--ui-font-color);
    font-weight: 600;
}

html[data-ui-theme="lucent"] :is(.modal-footer, .layui-layer-btn, .layer-footer) {
    border-top-color: var(--lucent-line-soft);
    border-radius: 0 0 var(--lucent-float-radius) var(--lucent-float-radius);
    background-color: var(--lucent-surface);
}

html[data-ui-theme="lucent"] :is(.layui-layer-shade, .modal-backdrop, .system-settings-backdrop) {
    background: rgba(31, 38, 50, .28) !important;
}

html[data-ui-theme="lucent"] .layui-layer-tips .layui-layer-content {
    background: #303b4e;
    color: #fff;
}

html[data-ui-theme="lucent"] .control-sidebar[data-ui-personalization-center] {
    border-color: var(--lucent-line);
    background: var(--lucent-chrome);
    color: var(--ui-font-color);
    box-shadow: -12px 0 44px rgba(28, 39, 57, .12);
}

html[data-ui-theme="lucent"] .control-sidebar[data-ui-personalization-center] > :is(.nav-tabs, .tab-content) {
    background: var(--lucent-chrome);
    border-color: var(--lucent-line);
}

html[data-ui-theme="lucent"] .control-sidebar[data-ui-personalization-center] > .nav-tabs > li > a {
    background: transparent;
    color: var(--ui-font-color);
}

html[data-ui-theme="lucent"] :is(.system-settings-panel-close, .system-settings-panel-close:hover, .system-settings-panel-close:focus) {
    background: #e9ecf1;
    color: #525c6b;
}

html[data-ui-theme="lucent"] :is(.ui-preference-section, .ui-theme-card, .ui-office-popup-history__item) {
    border-color: var(--lucent-line);
    border-radius: var(--lucent-radius);
    background: var(--lucent-surface);
    box-shadow: none;
}

html[data-ui-theme="lucent"] .ui-personalization-heading {
    border-color: var(--lucent-line);
    background: var(--lucent-chrome);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html[data-ui-theme="lucent"] :is(.ui-personalization-heading p, .ui-preference-section__title h5, .ui-theme-current__copy strong, .ui-theme-card__copy strong) {
    color: var(--ui-font-color);
}

html[data-ui-theme="lucent"] .ui-preference-actions {
    border-color: var(--lucent-line);
    background: var(--lucent-chrome);
    box-shadow: 0 -3px 16px rgba(28, 39, 57, .04);
}

/* Dashboard components retain their semantic icon/rate colors and existing grids. */
html[data-ui-theme="lucent"] :is(.business-overview-card, .brief-item > .panel, .sm-st, .stat-info) {
    border-color: var(--lucent-line);
    border-radius: var(--lucent-radius);
    background: var(--lucent-surface);
    box-shadow: var(--lucent-shadow);
}

html[data-ui-theme="lucent"] :is(.business-overview__heading, .business-overview-card header, .brief-title, .dashboard-title) {
    color: var(--ui-font-color);
}

/* Login and standalone status templates load this same scoped stylesheet. */
html[data-ui-theme="lucent"] body.crm-login-page {
    background: var(--lucent-canvas);
    color: var(--ui-font-color);
}

html[data-ui-theme="lucent"] .crm-login-page .bg-tech {
    background: radial-gradient(ellipse at 50% 20%, #fff 0, #f4f5f7 65%);
}

html[data-ui-theme="lucent"] .crm-login-page .bg-grid {
    opacity: 0;
}

html[data-ui-theme="lucent"] .crm-login-page .login-card {
    border-color: var(--lucent-line);
    border-radius: 22px;
    background: var(--lucent-surface);
    box-shadow: var(--lucent-float-shadow);
}

html[data-ui-theme="lucent"] .crm-login-page :is(.brand-company, .greeting-text, .calendar-title, .calendar-day) {
    color: var(--ui-font-color);
}

html[data-ui-theme="lucent"] .crm-login-page :is(.brand-system, .brand-company-en, .greeting-kicker, .greeting-sub, .calendar-tag, .calendar-week, .calendar-meta, .calendar-tip, .login-footer, .captcha-help, #login-form .checkbox) {
    color: var(--ui-muted-color);
    border-color: var(--lucent-line);
}

html[data-ui-theme="lucent"] .crm-login-page :is(.brand-divider, .calendar-panel) {
    border-color: var(--lucent-line);
}

html[data-ui-theme="lucent"] .crm-login-page .brand-divider {
    background: var(--lucent-line);
}

html[data-ui-theme="lucent"] .crm-login-page #login-form .input-group {
    border-color: #cdd3dc;
    border-radius: var(--ui-button-radius);
    background: var(--lucent-chrome);
}

html[data-ui-theme="lucent"] .crm-login-page #login-form :is(.form-control, .input-group-addon) {
    background: transparent;
    color: var(--ui-font-color);
}

html[data-ui-theme="lucent"] .crm-login-page #login-form .form-control::placeholder {
    color: #707987;
}

html[data-ui-theme="lucent"] .crm-login-page #login-form .input-group:focus-within {
    border-color: var(--ui-accent-color);
    box-shadow: 0 0 0 3px var(--lucent-focus);
}

html[data-ui-theme="lucent"] .crm-login-page .calendar-day.is-muted {
    color: #7b8491;
}

html[data-ui-theme="lucent"] .crm-login-page .calendar-day.is-today {
    background: var(--ui-accent-color);
    color: var(--ui-accent-foreground);
}

html[data-ui-theme="lucent"] .crm-login-page #errtips {
    border-color: #efc7c3;
    background: #fff0ef;
    color: #a32a20;
}

/* The existing login template uses !important on this one button's fill. */
html[data-ui-theme="lucent"] .crm-login-page #login-form .btn-success {
    border-color: var(--ui-accent-color);
    border-radius: var(--ui-button-radius);
    background: var(--ui-accent-color) !important;
    color: var(--ui-accent-foreground);
}

html[data-ui-theme="lucent"] .crm-login-page #login-form .btn-success:hover {
    background: var(--ui-accent-color) !important;
    box-shadow: 0 2px 8px var(--lucent-focus);
}

html[data-ui-theme="lucent"] :is(.system-message, .permission-card, .error-panel) {
    border: 1px solid var(--lucent-line);
    border-radius: var(--lucent-float-radius);
    background: var(--lucent-surface);
    color: var(--ui-font-color);
    box-shadow: var(--lucent-float-shadow);
}

html[data-ui-theme="lucent"] :is(.system-message .status-visual, .permission-icon) {
    border-color: #d7e5fb;
    background: var(--lucent-selected);
    color: var(--ui-accent-color);
}

html[data-ui-theme="lucent"][data-ui-system-page="1"] :is(.system-message h1, .error-panel h1) {
    color: var(--ui-font-color);
}

html[data-ui-theme="lucent"][data-ui-system-page="1"] .system-message :is(h1, p, button, a, span) {
    font-family: var(--ui-font-family);
}

html[data-ui-theme="lucent"][data-ui-system-page="1"] :is(.permission-copy, .permission-card .permission-copy, .error-panel .brand, .error-panel .message, .system-message .jump) {
    color: var(--ui-muted-color);
}

html[data-ui-theme="lucent"][data-ui-system-page="1"] :is(.permission-feature, .permission-card .permission-feature) {
    background: var(--lucent-selected);
    color: var(--ui-accent-color);
}

html[data-ui-theme="lucent"][data-ui-system-page="1"] :is(.permission-hint, .permission-card .permission-hint) {
    color: var(--ui-accent-color);
}

html[data-ui-theme="lucent"][data-ui-system-page="1"] :is(.system-message .status-visual, .error-panel .status-visual) {
    border-color: #d7e5fb;
    background: var(--lucent-selected);
    color: var(--ui-accent-color);
}

html[data-ui-theme="lucent"][data-ui-system-page="1"] :is(.error-panel .action, .system-message .btn) {
    border-radius: var(--ui-button-radius);
}

html[data-ui-theme="lucent"][data-ui-system-page="1"] :is(.error-panel .action.primary, .error-panel .action.primary:hover) {
    border-color: var(--ui-accent-color);
    background: var(--ui-accent-color);
    color: var(--ui-accent-foreground);
}

html[data-ui-theme="lucent"][data-ui-system-page="1"] :is(pre, code) {
    border-color: var(--lucent-line);
    background: var(--lucent-chrome);
    color: #303b4e;
}

/* Explicit personal dark chrome choices remain legible. */
html[data-ui-theme="lucent"][data-ui-topbar-tone="dark"] .main-header .navbar :is(.nav > li > a, .sidebar-toggle) {
    color: #fff;
}

html[data-ui-theme="lucent"][data-ui-topbar-tone="dark"] .main-header .nav-addtabs > li.active > a {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

html[data-ui-theme="lucent"][data-ui-sidebar-tone="dark"] .sidebar :is(a, .user-panel > .info) {
    color: #e7edf6;
}

html[data-ui-theme="lucent"][data-ui-sidebar-tone="dark"] .sidebar-menu > li > .treeview-menu {
    background: #263346;
}

html[data-ui-theme="lucent"][data-ui-sidebar-tone="dark"] .sidebar-menu .treeview-menu > li > a {
    color: #d7e2f1;
}

/* Opaque fallback is the default. Only a small, fixed set of chrome gains blur. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-ui-theme="lucent"] :is(.main-header .navbar, .main-header .logo, .main-sidebar, .fixed-table-toolbar, .modal-header, .layui-layer-title, .control-sidebar[data-ui-personalization-center]) {
        background-color: rgba(255, 255, 255, .78);
        -webkit-backdrop-filter: saturate(125%) blur(16px);
        backdrop-filter: saturate(125%) blur(16px);
    }
}

/* Color and focus respond; no layout/blur animation or entrance blocking. */
html[data-ui-theme="lucent"] :is(.btn, .sidebar-menu a, .main-header .navbar .nav > li > a, .pagination a, .settings-action-btn) {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui-theme="lucent"] *,
    html[data-ui-theme="lucent"] *::before,
    html[data-ui-theme="lucent"] *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    html[data-ui-theme="lucent"] :is(.main-header .navbar, .main-header .logo, .main-sidebar, .fixed-table-toolbar, .modal-header, .layui-layer-title, .control-sidebar[data-ui-personalization-center]) {
        background-color: var(--lucent-chrome);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (forced-colors: active) {
    html[data-ui-theme="lucent"] :is(.panel, .box, .layui-layer, .modal-content, .form-control, .btn) {
        box-shadow: none;
        border-color: CanvasText;
    }
}

/* Legacy skin chrome must not paint black inside the light Lucent preset. */
html[data-ui-theme="lucent"]:not([data-ui-topbar-tone="dark"]) .main-header,
html[data-ui-theme="lucent"]:not([data-ui-topbar-tone="dark"]) .main-header .logo,
html[data-ui-theme="lucent"]:not([data-ui-topbar-tone="dark"]) .main-header .logo:hover {
    background:var(--lucent-chrome) !important; color:var(--lucent-ink) !important;
    border-color:var(--lucent-line);
}
html[data-ui-theme="lucent"]:not([data-ui-sidebar-tone="dark"]) .sidebar-menu > li > a {
    background:transparent !important; color:var(--lucent-ink) !important;
}
html[data-ui-theme="lucent"]:not([data-ui-sidebar-tone="dark"]) .sidebar-menu > li:is(.active,.menu-open,:hover) > a {
    background:var(--lucent-selected) !important; color:var(--ui-accent-color) !important;
    border-left-color:var(--ui-accent-color);
}
html[data-ui-theme="lucent"]:not([data-ui-sidebar-tone="dark"]) .sidebar-menu .treeview-menu {
    background:rgba(235,239,246,.65);
}
html[data-ui-theme="lucent"] .wrapper .main-header .navbar .dropdown-menu > li:is(.active,:hover) > a {
    background:var(--lucent-selected); color:var(--ui-accent-color);
}
html[data-ui-theme="lucent"] :is(.btn-inverse,.btn-black,.btn-dark) {
    background:var(--lucent-surface); border-color:var(--lucent-line); color:var(--lucent-ink);
}
html[data-ui-theme="lucent"] :is(.btn-inverse,.btn-black,.btn-dark):hover {
    background:var(--lucent-hover); border-color:var(--ui-accent-color); color:var(--ui-accent-color);
}