html[data-cyxy-theme-preset="crystal-white"] {
    --cyxy-theme-bg: #f7fafd;
    --cyxy-theme-bg-secondary: #ffffff;
    --cyxy-theme-nav: rgba(255, 255, 255, .98);
    --cyxy-theme-sidebar: #ffffff;
    --cyxy-theme-sidebar-text: #172033;
    --cyxy-theme-panel: rgba(255, 255, 255, .96);
    --cyxy-theme-panel-secondary: rgba(248, 252, 255, .96);
    --cyxy-theme-border: #dceaf6;
    --cyxy-theme-border-strong: #bfd8ee;
    --cyxy-theme-primary: #3578e5;
    --cyxy-theme-accent: #2db6c7;
    --cyxy-theme-text: #172033;
    --cyxy-theme-muted: #6e798b;
    --cyxy-theme-input: rgba(255,255,255,.98);
    --cyxy-theme-shadow: 0 14px 30px rgba(42, 89, 136, .10);
    --cyxy-theme-overlay: rgba(67, 93, 118, .30);
}

html[data-cyxy-theme-preset="crystal-white"] body {
    background-image:
        radial-gradient(circle at 20% 0%, rgba(45,182,199,.12), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f7fafd 58%, #eaf6ff 100%);
}

html[data-cyxy-theme-preset="crystal-white"] .main-header .navbar,
html[data-cyxy-theme-preset="crystal-white"] .main-header .logo {
    border-bottom: 1px solid #dceaf6;
    color: #172033;
    box-shadow: 0 8px 24px rgba(36, 78, 120, .08);
}

html[data-cyxy-theme-preset="crystal-white"] .main-header .navbar .nav > li > a,
html[data-cyxy-theme-preset="crystal-white"] .main-header .logo {
    color: #172033;
}

html[data-cyxy-theme-preset="crystal-white"] .main-sidebar {
    border-right: 1px solid #dceaf6;
}

html[data-cyxy-theme-preset="crystal-white"] .sidebar a {
    color: #334155;
}

html[data-cyxy-theme-preset="crystal-white"] .sidebar-menu > li.active > a,
html[data-cyxy-theme-preset="crystal-white"] .sidebar-menu > li:hover > a {
    border-left-color: #3578e5;
    background: #eef7ff;
    color: #0f172a;
}

html[data-cyxy-theme-preset="crystal-white"] .box,
html[data-cyxy-theme-preset="crystal-white"] .panel {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 28px rgba(36, 78, 120, .08);
}

html[data-cyxy-theme-preset="crystal-white"] .fixed-table-container thead th,
html[data-cyxy-theme-preset="crystal-white"] .bootstrap-table .table > thead > tr > th {
    background: linear-gradient(180deg, #ffffff 0%, #f1f8ff 100%);
}

html[data-cyxy-theme-preset="crystal-white"] .dropdown-menu,
html[data-cyxy-theme-preset="crystal-white"] .layui-layer,
html[data-cyxy-theme-preset="crystal-white"] .modal-content {
    box-shadow: 0 18px 38px rgba(36, 78, 120, .14);
}