:root {
    --center-brand: #1677ff;
    --center-brand-hover: #0958d9;
    --center-brand-active: #003eb3;
    --center-brand-soft: #e6f4ff;
    --center-brand-border: #91caff;
}

/* Shared learning-center scrollbar treatment. */
.center-shell,
.center-shell * {
    scrollbar-width: thin;
    scrollbar-color: var(--center-brand-border) var(--center-bg-subtle);
}

.center-shell::-webkit-scrollbar,
.center-shell *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.center-shell::-webkit-scrollbar-track,
.center-shell *::-webkit-scrollbar-track {
    background: var(--center-bg-subtle);
    box-shadow: none;
}

.center-shell::-webkit-scrollbar-thumb,
.center-shell *::-webkit-scrollbar-thumb {
    min-height: 32px;
    border: 2px solid var(--center-bg-subtle);
    border-radius: 8px;
    background: var(--center-brand-border);
    box-shadow: none;
}

.center-shell::-webkit-scrollbar-thumb:hover,
.center-shell *::-webkit-scrollbar-thumb:hover {
    background: var(--center-brand);
}

.center-shell::-webkit-scrollbar-thumb:active,
.center-shell *::-webkit-scrollbar-thumb:active {
    background: var(--center-brand-hover);
}

.center-shell::-webkit-scrollbar-corner,
.center-shell *::-webkit-scrollbar-corner {
    background: var(--center-bg-subtle);
}

.center-shell {
    color: var(--center-text-primary);
    background: var(--center-bg-page);
}

.center-shell a,
.center-shell button,
.center-shell input,
.center-shell select,
.center-shell textarea {
    letter-spacing: 0;
}

.center-shell a:focus-visible,
.center-shell button:focus-visible,
.center-shell input:focus-visible,
.center-shell select:focus-visible,
.center-shell textarea:focus-visible,
.center-shell [tabindex]:focus-visible {
    outline: 2px solid var(--center-focus);
    outline-offset: 2px;
}

/* .center-shell .layui-btn:not(.layui-btn-primary):not(.layui-btn-normal):not(.layui-btn-warm):not(.layui-btn-danger):not(.layui-btn-disabled) {
    border-color: var(--center-brand);
    color: var(--center-text-white);
    background-color: var(--center-brand);
}

.center-shell .layui-btn:not(.layui-btn-primary):not(.layui-btn-normal):not(.layui-btn-warm):not(.layui-btn-danger):not(.layui-btn-disabled):hover,
.center-shell .layui-btn:not(.layui-btn-primary):not(.layui-btn-normal):not(.layui-btn-warm):not(.layui-btn-danger):not(.layui-btn-disabled):focus-visible {
    border-color: var(--center-brand-hover);
    color: var(--center-text-white);
    background-color: var(--center-brand-hover);
}

.center-shell .layui-btn:not(.layui-btn-primary):not(.layui-btn-normal):not(.layui-btn-warm):not(.layui-btn-danger):not(.layui-btn-disabled):active {
    border-color: var(--center-brand-active);
    background-color: var(--center-brand-active);
    transform: translateY(1px);
} */

.center-shell .layui-btn-primary,
.center-shell .layui-btn.layui-btn-primary {
    border-color: var(--center-border);
    color: var(--center-text-primary);
    background: var(--center-bg-surface);
}

.center-shell .layui-btn-primary:hover,
.center-shell .layui-btn-primary:focus-visible {
    border-color: var(--center-brand);
    color: var(--center-brand);
    background: var(--center-brand-soft);
}

.center-shell .layui-btn-normal {
    border-color: var(--center-info);
    color: var(--center-text-white);
    background-color: var(--center-info);
}

.center-shell .layui-btn-warm {
    border-color: var(--center-warning);
    color: var(--center-text-white);
    background-color: var(--center-warning);
}

.center-shell .layui-btn-danger {
    border-color: var(--center-danger);
    color: var(--center-text-white);
    background-color: var(--center-danger);
}

.center-shell .layui-btn-disabled,
.center-shell .layui-btn[disabled],
.center-shell button[disabled] {
    color: var(--center-text-muted) !important;
    border-color: var(--center-border) !important;
    background: var(--center-bg-subtle) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none !important;
}

.center-shell .layui-border-blue {
    border-color: var(--center-brand) !important;
    color: var(--center-brand) !important;
    background: var(--center-bg-surface) !important;
}

.center-shell .layui-border-blue:hover,
.center-shell .layui-border-blue:focus-visible {
    color: var(--center-text-white) !important;
    background: var(--center-brand) !important;
}

.center-shell .layui-tab-brief > .layui-tab-title .layui-this,
.center-shell .layui-tab-title .layui-this {
    color: var(--center-brand);
}

.center-shell .layui-tab-brief > .layui-tab-title .layui-this::after,
.center-shell .layui-tab-title .layui-this::after {
    border-bottom-color: var(--center-brand);
}

.center-shell .layui-form-select dl dd.layui-this,
.center-shell .layui-laypage .layui-laypage-curr .layui-laypage-em,
.center-shell .layui-laydate .layui-this {
    color: var(--center-text-white) !important;
    background-color: var(--center-brand) !important;
}

.center-shell .layui-input:focus,
.center-shell .layui-textarea:focus,
.center-shell .layui-select:focus,
.center-shell .layui-form-select .layui-input:focus {
    border-color: var(--center-brand) !important;
    box-shadow: 0 0 0 3px var(--center-brand-shadow);
}

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

.center-shell .layui-breadcrumb a:hover,
.center-shell .layui-laypage a:hover {
    color: var(--center-brand) !important;
}

.center-shell .layui-card,
.center-shell .layui-elem-field {
    border-color: var(--center-border);
    border-radius: var(--center-radius-lg);
    background: var(--center-bg-surface);
}

.center-shell .layui-card-header {
    color: var(--center-text-primary);
    border-bottom-color: var(--center-border);
    font-weight: 600;
}

.center-shell .layui-layer-btn .layui-layer-btn0 {
    border-color: var(--center-brand);
    color: var(--center-text-white);
    background: var(--center-brand);
}

.center-shell .layui-layer-btn .layui-layer-btn0:hover {
    border-color: var(--center-brand-hover);
    background: var(--center-brand-hover);
}

@media (prefers-reduced-motion: reduce) {
    .center-shell *,
    .center-shell *::before,
    .center-shell *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}