/* =====================================================
   CODEX-style Minimalist UI Override for 凸维MATH
   Flat, high-contrast, neutral monochrome palette.
   Loaded after app.css; overrides glassmorphism defaults.
   ===================================================== */

/* ---------- Design Tokens ---------- */
:root,
.theme-violet,
.theme-obsidian,
.theme-emerald,
.theme-ocean,
.theme-amber,
.theme-crimson {
    /* Light mode neutrals */
    --cdx-bg: #ffffff;
    --cdx-bg-soft: #fafafa;
    --cdx-bg-muted: #f5f5f5;
    --cdx-surface: #ffffff;
    --cdx-surface-elevated: #ffffff;
    --cdx-border: #e5e5e5;
    --cdx-border-strong: #d4d4d4;
    --cdx-text-primary: #171717;
    --cdx-text-secondary: #737373;
    --cdx-text-tertiary: #a3a3a3;
    --cdx-accent: #000000;
    --cdx-accent-text: #ffffff;
    --cdx-muted-text: #525252;
    --cdx-radius-sm: 6px;
    --cdx-radius-md: 8px;
    --cdx-radius-lg: 10px;
    --cdx-radius-xl: 12px;
    --cdx-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    --cdx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);

    /* Override legacy Apple tokens */
    --apple-bg: var(--cdx-bg);
    --apple-bg-elevated: var(--cdx-surface-elevated);
    --apple-glass-bg: var(--cdx-surface);
    --apple-glass-bg-hover: var(--cdx-bg-soft);
    --apple-glass-border: var(--cdx-border);
    --apple-glass-blur: 0px;
    --apple-glass-saturate: 100%;
    --apple-radius-sm: var(--cdx-radius-sm);
    --apple-radius-md: var(--cdx-radius-md);
    --apple-radius-lg: var(--cdx-radius-lg);
    --apple-radius-xl: var(--cdx-radius-xl);
    --apple-shadow-sm: var(--cdx-shadow);
    --apple-shadow-md: var(--cdx-shadow-md);
    --apple-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
    --apple-shadow-glow: none;

    /* Neutral brand so Tailwind brand-* becomes grayscale */
    --brand-50-rgb: 250, 250, 250;
    --brand-100-rgb: 245, 245, 245;
    --brand-200-rgb: 229, 229, 229;
    --brand-500-rgb: 82, 82, 82;
    --brand-600-rgb: 38, 38, 38;
    --brand-700-rgb: 23, 23, 23;
    --brand-900-rgb: 10, 10, 10;
    --brand-rgb: 0, 0, 0;

    --text-primary: var(--cdx-text-primary);
    --text-secondary: var(--cdx-text-secondary);
    --text-tertiary: var(--cdx-text-tertiary);
}

.dark {
    /* Dark mode neutrals */
    --cdx-bg: #0d0d0d;
    --cdx-bg-soft: #161616;
    --cdx-bg-muted: #1c1c1c;
    --cdx-surface: #161616;
    --cdx-surface-elevated: #1c1c1c;
    --cdx-border: #262626;
    --cdx-border-strong: #404040;
    --cdx-text-primary: #ededed;
    --cdx-text-secondary: #a3a3a3;
    --cdx-text-tertiary: #737373;
    --cdx-accent: #ffffff;
    --cdx-accent-text: #000000;
    --cdx-muted-text: #d4d4d4;

    --apple-bg: var(--cdx-bg);
    --apple-bg-elevated: var(--cdx-surface-elevated);
    --apple-glass-bg: var(--cdx-surface);
    --apple-glass-bg-hover: var(--cdx-bg-soft);
    --apple-glass-border: var(--cdx-border);

    --brand-50-rgb: 38, 38, 38;
    --brand-100-rgb: 64, 64, 64;
    --brand-200-rgb: 82, 82, 82;
    --brand-500-rgb: 212, 212, 212;
    --brand-600-rgb: 229, 229, 229;
    --brand-700-rgb: 245, 245, 245;
    --brand-900-rgb: 255, 255, 255;
    --brand-rgb: 255, 255, 255;

    --text-primary: var(--cdx-text-primary);
    --text-secondary: var(--cdx-text-secondary);
    --text-tertiary: var(--cdx-text-tertiary);
}

/* ---------- Base ---------- */
html, body {
    background: var(--cdx-bg) !important;
    color: var(--cdx-text-primary);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    background: var(--cdx-border-strong);
    border-radius: 3px;
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- Typography helpers ---------- */
.text-slate-800,
.text-slate-900,
.text-gray-900 {
    color: var(--cdx-text-primary) !important;
}
.text-slate-700,
.text-slate-600,
.text-gray-700,
.text-gray-600 {
    color: var(--cdx-text-secondary) !important;
}
.text-slate-500,
.text-slate-400,
.text-gray-500,
.text-gray-400 {
    color: var(--cdx-text-tertiary) !important;
}

.brand-title {
    color: var(--cdx-text-primary) !important;
}

/* ---------- Layout areas ---------- */
header,
.glass-panel[role="banner"],
body > header {
    background: var(--cdx-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--cdx-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

main,
#main,
#bankWorkspaceSection,
#paperWorkspaceSection {
    background: var(--cdx-bg) !important;
}

#editorSection {
    background: var(--cdx-bg) !important;
}

/* ---------- Sidebar ---------- */
.glass-sidebar,
#sidebarSection {
    background: var(--cdx-bg-soft) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: 1px solid var(--cdx-border) !important;
    border-radius: 0 !important;
}

#sidebarTopPanel > .p-3.border-b {
    border-color: var(--cdx-border) !important;
}

#sidebarPagination {
    background: var(--cdx-bg-soft) !important;
    border-color: var(--cdx-border) !important;
    backdrop-filter: none !important;
}

/* ---------- Resizers ---------- */
#resizer-1,
#sidebar-resizer-v,
[class*="resizer"] {
    background: var(--cdx-border) !important;
}
#resizer-1:hover,
#sidebar-resizer-v:hover,
[class*="resizer"]:hover {
    background: var(--cdx-border-strong) !important;
}

/* ---------- Panels / Cards ---------- */
.glass-panel,
.glass-card {
    background: var(--cdx-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--cdx-border) !important;
    border-radius: var(--cdx-radius-lg) !important;
    box-shadow: none !important;
}

.glass-panel:hover,
.glass-card:hover {
    background: var(--cdx-bg-soft) !important;
    box-shadow: none !important;
    transform: none !important;
}

.glass-card {
    border-radius: var(--cdx-radius-md) !important;
}

/* active/selected card (drafts/items) */
.border-emerald-500,
.ring-emerald-100,
[class*="ring-emerald"] {
    border-color: var(--cdx-accent) !important;
    --tw-ring-color: rgba(0, 0, 0, 0.08) !important;
}
.dark .border-emerald-500,
.dark [class*="ring-emerald"] {
    --tw-ring-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---------- Buttons ---------- */
.glass-btn,
.glass-btn-primary,
.glass-btn-danger,
.glass-btn-success {
    border-radius: var(--cdx-radius-md) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    font-weight: 500 !important;
}

.glass-btn {
    background: var(--cdx-surface) !important;
    border: 1px solid var(--cdx-border) !important;
    color: var(--cdx-text-primary) !important;
}
.glass-btn:hover {
    background: var(--cdx-bg-muted) !important;
    border-color: var(--cdx-border-strong) !important;
    color: var(--cdx-text-primary) !important;
    box-shadow: none !important;
    transform: none !important;
}

.glass-btn-primary {
    background: var(--cdx-accent) !important;
    border: 1px solid var(--cdx-accent) !important;
    color: var(--cdx-accent-text) !important;
}
.glass-btn-primary:hover {
    background: var(--cdx-text-secondary) !important;
    border-color: var(--cdx-text-secondary) !important;
    color: var(--cdx-accent-text) !important;
    box-shadow: none !important;
    transform: none !important;
}

.glass-btn-danger {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}
.glass-btn-danger:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    box-shadow: none !important;
    transform: none !important;
}

.glass-btn-success {
    background: #171717 !important;
    border-color: #171717 !important;
    color: #fff !important;
}
.dark .glass-btn-success {
    background: #fff !important;
    border-color: #fff !important;
    color: #000 !important;
}

/* Header icon buttons */
header button,
header .glass-btn {
    border-color: var(--cdx-border) !important;
}

/* ---------- Inputs & Selects ---------- */
.glass-input,
.glass-select,
input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea {
    background: var(--cdx-surface) !important;
    border: 1px solid var(--cdx-border) !important;
    border-radius: var(--cdx-radius-md) !important;
    color: var(--cdx-text-primary) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.glass-input:focus,
.glass-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--cdx-accent) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06) !important;
    outline: none !important;
}
.dark .glass-input:focus,
.dark .glass-select:focus,
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08) !important;
}

/* Override violet focus rings from Tailwind */
.focus\:ring-violet-500:focus,
.focus\:ring-violet-500\/40:focus,
.focus\:ring-brand-500:focus,
.focus\:border-violet-500:focus {
    --tw-ring-color: rgba(0, 0, 0, 0.08) !important;
    border-color: var(--cdx-accent) !important;
}

/* ---------- Tabs ---------- */
.glass-tab {
    background: transparent !important;
    border: 1px solid var(--cdx-border) !important;
    border-radius: var(--cdx-radius-md) !important;
    padding: 3px !important;
}

.glass-tab-item {
    background: transparent !important;
    border: none !important;
    border-radius: var(--cdx-radius-sm) !important;
    color: var(--cdx-text-secondary) !important;
    backdrop-filter: none !important;
}
.glass-tab-item:hover {
    background: var(--cdx-bg-muted) !important;
    color: var(--cdx-text-primary) !important;
    box-shadow: none !important;
}

.glass-tab-item.active,
.glass-tab-item.active-green {
    background: var(--cdx-accent) !important;
    color: var(--cdx-accent-text) !important;
    border: none !important;
    box-shadow: none !important;
}

/* ---------- Dropdowns ---------- */
.glass-dropdown,
#workspaceDropdownMenu,
#themeDropdownMenu,
#filterSourceSuggestions,
[role="menu"] {
    background: var(--cdx-surface-elevated) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--cdx-border) !important;
    border-radius: var(--cdx-radius-lg) !important;
    box-shadow: var(--cdx-shadow-md) !important;
}

.glass-dropdown-item {
    border-radius: var(--cdx-radius-sm) !important;
    color: var(--cdx-text-primary) !important;
}
.glass-dropdown-item:hover {
    background: var(--cdx-bg-muted) !important;
    color: var(--cdx-text-primary) !important;
}

/* ---------- Modals ---------- */
.glass-modal-overlay {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.glass-modal {
    background: var(--cdx-surface-elevated) !important;
    border: 1px solid var(--cdx-border) !important;
    border-radius: var(--cdx-radius-xl) !important;
    box-shadow: var(--cdx-shadow-md) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.modal-active header,
body.modal-active main {
    opacity: 0.35 !important;
}

/* ---------- Badges / Tags ---------- */
.text-brand-600,
.text-brand-700,
.text-brand-500 {
    color: var(--cdx-text-primary) !important;
}
.bg-brand-50,
.bg-brand-100,
.bg-brand-200 {
    background: var(--cdx-bg-muted) !important;
}
.border-brand-500,
.border-brand-200 {
    border-color: var(--cdx-border) !important;
}

/* Difficulty/source mini pills */
[class*="bg-"][class*="text-"].text-\[10px\],
span.text-\[10px\].font-medium,
span.text-\[10px\].font-bold,
span.text-\[10px\].font-extrabold {
    background: var(--cdx-bg-muted) !important;
    color: var(--cdx-text-secondary) !important;
    border: 1px solid var(--cdx-border) !important;
}

/* API status dot */
#apiStatusIndicator {
    background: var(--cdx-bg-muted) !important;
    border: 1px solid var(--cdx-border) !important;
    color: var(--cdx-text-secondary) !important;
}
#apiStatusIndicator .bg-green-500,
#apiStatusIndicator .bg-slate-400,
#apiStatusIndicator .bg-red-500 {
    background: currentColor !important;
}

/* ---------- Theme picker ---------- */
/* Keep only the dark-mode toggle; hide the colorful palette dropdown */
#themeDropdownContainer,
#themeDropdownBtn,
#themeDropdownMenu {
    display: none !important;
}

/* ---------- Login overlay ---------- */
#login-overlay > div {
    background: var(--cdx-surface-elevated) !important;
    border: 1px solid var(--cdx-border) !important;
    border-radius: var(--cdx-radius-xl) !important;
    box-shadow: var(--cdx-shadow-md) !important;
}
#login-overlay .bg-violet-600,
#login-submit-btn {
    background: var(--cdx-accent) !important;
    color: var(--cdx-accent-text) !important;
    border-color: var(--cdx-accent) !important;
    box-shadow: none !important;
}
#login-overlay .bg-violet-600:hover,
#login-submit-btn:hover {
    opacity: 0.85 !important;
}

/* ---------- Question cards (editor.js) ---------- */
#questionsList .glass-card,
#draftList .glass-card {
    background: var(--cdx-surface) !important;
    border: 1px solid var(--cdx-border) !important;
    box-shadow: none !important;
}
#questionsList .glass-card:hover,
#draftList .glass-card:hover {
    border-color: var(--cdx-border-strong) !important;
    background: var(--cdx-bg-soft) !important;
}

/* ---------- Difficulty / Type tags (editor.js dynamic badges) ---------- */
#questionsList span[class*="bg-"][class*="text-"],
#draftList span[class*="bg-"][class*="text-"],
#questionsList span[class*="text-brand"],
#draftList span[class*="text-brand"] {
    background: var(--cdx-bg-muted) !important;
    color: var(--cdx-text-secondary) !important;
    border: 1px solid var(--cdx-border) !important;
}

/* ---------- Preview panel ---------- */
#previewSection,
#previewSection .glass-panel,
#questionPreview .glass-panel {
    background: var(--cdx-surface) !important;
    border-color: var(--cdx-border) !important;
}

/* Favorite star */
.fa-star.text-brand-600,
.fa-star.text-yellow-400,
.fa-star.text-violet-500 {
    color: var(--cdx-accent) !important;
}

/* ---------- Pagination ---------- */
#sidebarPagination button,
#sidebarPagination a,
#sidebarPagination span {
    border-color: var(--cdx-border) !important;
    color: var(--cdx-text-secondary) !important;
}
#sidebarPagination button.active,
#sidebarPagination .active,
#sidebarPagination button.bg-brand-600,
#sidebarPagination .bg-brand-600 {
    background: var(--cdx-accent) !important;
    color: var(--cdx-accent-text) !important;
    border-color: var(--cdx-accent) !important;
}

/* ---------- Status indicators ---------- */
.bg-green-500,
.bg-emerald-500 {
    background: #10b981 !important;
}
.text-green-600,
.text-emerald-600 {
    color: #10b981 !important;
}

/* ---------- File upload area ---------- */
[class*="border-dashed"] {
    border-style: dashed !important;
    border-color: var(--cdx-border-strong) !important;
    background: var(--cdx-bg-soft) !important;
}
[class*="border-dashed"]:hover {
    border-color: var(--cdx-text-tertiary) !important;
    background: var(--cdx-bg-muted) !important;
}

/* ---------- Enhance.js injected UI ---------- */
#aiGenOpenBtn,
#aiGenBtn {
    background: var(--cdx-accent) !important;
    border: 1px solid var(--cdx-accent) !important;
    color: var(--cdx-accent-text) !important;
}
#aiGenOpenBtn:hover,
#aiGenBtn:hover {
    opacity: 0.85 !important;
}

/* Batch operations bar neutralization */
#bankBatchBar,
#bankBatchBar * {
    background: var(--cdx-bg-soft) !important;
    border-color: var(--cdx-border) !important;
    color: var(--cdx-text-primary) !important;
}
#bankBatchBar select,
#bankBatchBar input[type="checkbox"] {
    background: var(--cdx-surface) !important;
    border-color: var(--cdx-border) !important;
    color: var(--cdx-text-primary) !important;
}
#bankBatchBar b,
#bankBatchBar .font-semibold,
#bankBatchBar .font-bold {
    color: var(--cdx-text-primary) !important;
}
#bankBatchBar #bankBatchDeleteBtn,
#bankBatchBar button[class*="bg-rose-"] {
    background: var(--cdx-accent) !important;
    color: var(--cdx-accent-text) !important;
    border-color: var(--cdx-accent) !important;
}

#aiGenModal,
#aiGenModal .bg-white,
#aiGenModal [class*="glass-panel"],
#aiGenModal > div {
    background: var(--cdx-surface-elevated) !important;
    border: 1px solid var(--cdx-border) !important;
    color: var(--cdx-text-primary) !important;
}
#aiGenModal input,
#aiGenModal select,
#aiGenModal textarea {
    background: var(--cdx-surface) !important;
    border-color: var(--cdx-border) !important;
    color: var(--cdx-text-primary) !important;
}
#aiGenModal button[class*="bg-violet-"],
#aiGenModal button[class*="bg-brand-"] {
    background: var(--cdx-accent) !important;
    color: var(--cdx-accent-text) !important;
    border-color: var(--cdx-accent) !important;
}
#aiGenModal .text-brand-600,
#aiGenModal .text-brand-500,
#aiGenModal i.fa-wand-magic-sparkles {
    color: var(--cdx-text-primary) !important;
}
#aiGenStartBtn {
    background: var(--cdx-accent) !important;
    color: var(--cdx-accent-text) !important;
    border-color: var(--cdx-accent) !important;
}
#aiGenStartBtn:disabled {
    background: var(--cdx-bg-muted) !important;
    color: var(--cdx-text-tertiary) !important;
    border-color: var(--cdx-border) !important;
}

/* ---------- Admin panel ---------- */
#admin-panel,
#admin-panel > div,
#admin-panel .glass-panel,
#admin-panel header,
#admin-panel section {
    background: var(--cdx-surface) !important;
    border-color: var(--cdx-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
#admin-panel .bg-slate-100,
#admin-panel .bg-slate-50 {
    background: var(--cdx-bg) !important;
}
#admin-panel button,
#admin-panel a.btn,
#adminPanel button,
#adminPanel a.btn {
    background: var(--cdx-surface) !important;
    border-color: var(--cdx-border) !important;
    color: var(--cdx-text-primary) !important;
}
#admin-panel button[class*="bg-violet-"],
#admin-panel button[class*="bg-emerald-"],
#admin-panel button[class*="bg-amber-"],
#admin-panel button[class*="bg-slate-800"],
#admin-panel button[class*="bg-brand-"],
#adminPanel button[class*="bg-violet-"],
#adminPanel button[class*="bg-emerald-"],
#adminPanel button[class*="bg-amber-"],
#adminPanel button[class*="bg-slate-800"],
#adminPanel button[class*="bg-brand-"] {
    background: var(--cdx-accent) !important;
    color: var(--cdx-accent-text) !important;
    border-color: var(--cdx-accent) !important;
}
#admin-panel [class*="bg-violet-50"],
#admin-panel [class*="bg-violet-100"],
#admin-panel [class*="bg-emerald-100"],
#admin-panel [class*="bg-emerald-50"],
#admin-panel [class*="bg-rose-100"],
#admin-panel [class*="bg-rose-50"],
#admin-panel [class*="bg-amber-50"],
#adminPanel [class*="bg-violet-50"],
#adminPanel [class*="bg-violet-100"],
#adminPanel [class*="bg-emerald-100"],
#adminPanel [class*="bg-emerald-50"],
#adminPanel [class*="bg-rose-100"],
#adminPanel [class*="bg-rose-50"],
#adminPanel [class*="bg-amber-50"] {
    background: var(--cdx-bg-muted) !important;
    border-color: var(--cdx-border) !important;
}
#admin-panel [class*="text-violet-"],
#admin-panel [class*="text-emerald-"],
#admin-panel [class*="text-amber-"],
#admin-panel [class*="text-rose-"],
#admin-panel [class*="text-purple-"],
#adminPanel [class*="text-violet-"],
#adminPanel [class*="text-emerald-"],
#adminPanel [class*="text-amber-"],
#adminPanel [class*="text-rose-"],
#adminPanel [class*="text-purple-"] {
    color: var(--cdx-text-secondary) !important;
}
#admin-panel i.text-violet-500,
#admin-panel i.text-emerald-500,
#admin-panel i.text-amber-500,
#admin-panel i.text-rose-500,
#adminPanel i.text-violet-500,
#adminPanel i.text-emerald-500,
#adminPanel i.text-amber-500,
#adminPanel i.text-rose-500 {
    color: var(--cdx-text-tertiary) !important;
}
#admin-panel table tbody tr,
#adminPanel table tbody tr {
    border-color: var(--cdx-border) !important;
}
#admin-panel .rounded-2xl,
#admin-panel .rounded-xl,
#adminPanel .rounded-2xl,
#adminPanel .rounded-xl {
    border-radius: var(--cdx-radius-md) !important;
}

/* ---------- Stats Modal ---------- */
#statsModal .grid > div,
.dark #statsModal .grid > div {
    background: var(--cdx-bg-muted) !important;
    border-color: var(--cdx-border) !important;
    box-shadow: none !important;
}
#statsModal .grid > div [class*="text-indigo-"],
#statsModal .grid > div [class*="text-emerald-"],
#statsModal .grid > div [class*="text-amber-"],
#statsModal .grid > div [class*="text-rose-"],
#statsModal .grid > div [class*="text-purple-"] {
    color: var(--cdx-text-secondary) !important;
}
#statsModal .grid > div h2 {
    color: var(--cdx-text-primary) !important;
}
#statsModal .grid > div .fa-solid {
    color: var(--cdx-border-strong) !important;
}

/* Calendar today highlight */
#statsModal .ring-brand-500,
#statsModal .border-brand-200,
#statsModal [class*="ring-brand"] {
    --tw-ring-color: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--cdx-accent) !important;
}
.dark #statsModal .ring-brand-500,
.dark #statsModal [class*="ring-brand"] {
    --tw-ring-color: rgba(255, 255, 255, 0.25) !important;
}

/* ---------- Settings / AI / Generic Modals ---------- */
#settingsModal [class*="bg-indigo-50"],
#settingsModal [class*="bg-emerald-50"],
#settingsModal [class*="bg-amber-50"],
#settingsModal [class*="bg-rose-50"],
#settingsModal [class*="bg-purple-50"],
#settingsModal [class*="bg-blue-50"] {
    background: var(--cdx-bg-muted) !important;
    border-color: var(--cdx-border) !important;
}

/* ---------- Tailwind arbitrary colored utility overrides ---------- */
.bg-blue-50, .bg-indigo-50, .bg-emerald-50, .bg-amber-50, .bg-rose-50, .bg-purple-50,
.bg-blue-100, .bg-indigo-100, .bg-emerald-100, .bg-amber-100, .bg-rose-100, .bg-purple-100 {
    background: var(--cdx-bg-muted) !important;
}
.text-blue-600, .text-indigo-600, .text-emerald-600, .text-amber-600, .text-rose-600, .text-purple-600,
.text-blue-700, .text-indigo-700, .text-emerald-700, .text-amber-700, .text-rose-700, .text-purple-700 {
    color: var(--cdx-text-secondary) !important;
}
.border-blue-200, .border-indigo-200, .border-emerald-200, .border-amber-200, .border-rose-200, .border-purple-200 {
    border-color: var(--cdx-border) !important;
}

/* ---------- Utility: hide glows ---------- */
[class*="shadow-violet"],
[class*="shadow-brand"],
[class*="shadow-emerald"],
[class*="shadow-amber"] {
    box-shadow: none !important;
}

.animate-pulse,
.animate-bounce {
    animation: none !important;
}

/* ---------- Tertiary surfaces ---------- */
.bg-slate-100,
.bg-slate-50,
.bg-gray-100,
.bg-gray-50 {
    background: var(--cdx-bg-muted) !important;
}
.dark .bg-slate-100,
.dark .bg-slate-800,
.dark .bg-gray-800,
.dark .bg-gray-900 {
    background: var(--cdx-bg-muted) !important;
}
.border-slate-100,
.border-slate-200,
.border-gray-200 {
    border-color: var(--cdx-border) !important;
}
.dark .border-slate-700,
.dark .border-slate-800 {
    border-color: var(--cdx-border) !important;
}

/* Buttons that still carry slate/violet backgrounds */
button[class*="bg-violet-"],
button[class*="bg-emerald-"],
button[class*="bg-amber-"],
button[class*="bg-rose-"],
button[class*="bg-brand-"],
a[class*="bg-violet-"] {
    background: var(--cdx-accent) !important;
    color: var(--cdx-accent-text) !important;
    border-color: var(--cdx-accent) !important;
}

/* CODEX: keep destructive buttons neutral monochrome */
button.glass-btn-danger,
button[class*="bg-red-"],
button[class*="hover:bg-red-"] {
    background: var(--cdx-text-primary) !important;
    color: var(--cdx-accent-text) !important;
    border-color: var(--cdx-text-primary) !important;
}
button.glass-btn-danger:hover {
    background: var(--cdx-text-secondary) !important;
    border-color: var(--cdx-text-secondary) !important;
}
.dark button.glass-btn-danger {
    background: var(--cdx-accent) !important;
    color: var(--cdx-accent-text) !important;
    border-color: var(--cdx-accent) !important;
}
.dark button.glass-btn-danger:hover {
    background: var(--cdx-text-secondary) !important;
    border-color: var(--cdx-text-secondary) !important;
}

/* Inline code / markdown preview neutralized */
.prose code, .prose pre, .markdown-body code, .markdown-body pre {
    background: var(--cdx-bg-muted) !important;
    border-color: var(--cdx-border) !important;
}

/* ---------- Misc cleanup ---------- */
/* Remove gradient decorations on preview header bar */
#previewSection .bg-gradient-to-r,
#questionPreview .bg-gradient-to-r {
    background: var(--cdx-surface) !important;
}

/* Ensure sidebar tabs use accent active color */
#sidebarTab-bank.active,
#sidebarTab-drafts.active,
.glass-tab-item.active {
    background: var(--cdx-accent) !important;
    color: var(--cdx-accent-text) !important;
}

/* ---------- Workspace switcher neutralized ---------- */
#workspaceDropdownMenu,
#workspaceDropdownMenu .glass-dropdown-item {
    background: var(--cdx-surface-elevated) !important;
    border-color: var(--cdx-border) !important;
    color: var(--cdx-text-primary) !important;
}
#workspaceDropdownMenu .glass-dropdown-item:hover {
    background: var(--cdx-bg-muted) !important;
}

/* ---------- Toasts / notifications ---------- */
.toast,
.notification,
#toastContainer > div,
[class*="toast"] {
    background: var(--cdx-surface-elevated) !important;
    border: 1px solid var(--cdx-border) !important;
    box-shadow: var(--cdx-shadow-md) !important;
    color: var(--cdx-text-primary) !important;
}

/* ---------- Loading / empty states ---------- */
.fa-circle-notch.animate-spin,
.fa-spinner {
    color: var(--cdx-text-secondary) !important;
}

/* ---------- Focus rings on all interactive elements ---------- */
*:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important;
}
.dark *:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
}

/* ---------- Floating action button / close badge neutral ---------- */
.badge,
.tag,
[class*="badge"],
[class*="tag-"] {
    background: var(--cdx-bg-muted) !important;
    border: 1px solid var(--cdx-border) !important;
    color: var(--cdx-text-secondary) !important;
}

/* ---------- Codex-style disabled/secondary buttons ---------- */
button:disabled,
button[disabled],
.glass-btn:disabled {
    opacity: 0.45 !important;
    background: var(--cdx-bg-muted) !important;
    color: var(--cdx-text-tertiary) !important;
    border-color: var(--cdx-border) !important;
    cursor: not-allowed !important;
}

/* ---------- Codex-style links ---------- */
a,
.link,
.text-brand-600,
.text-brand-500,
.text-brand-700 {
    color: var(--cdx-text-primary) !important;
}
a:hover,
.link:hover {
    text-decoration: underline !important;
    color: var(--cdx-text-secondary) !important;
}

/* ---------- Print / Word export panel neutralized ---------- */
#paperWorkspaceSection .glass-panel,
#paperWorkspaceSection .glass-card,
#paperExportPanel,
.export-panel {
    background: var(--cdx-surface) !important;
    border-color: var(--cdx-border) !important;
    box-shadow: none !important;
}

/* ---------- KaTeX preview neutral ---------- */
.katex {
    color: var(--cdx-text-primary) !important;
}

/* ---------- Scrollbars ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--cdx-border-strong) transparent;
}

/* ---------- Segmented / mini toggle controls ---------- */
[class*="segmented"],
.segmented-control {
    background: var(--cdx-bg-muted) !important;
    border-color: var(--cdx-border) !important;
}
.segmented-control > button.active,
.segmented-control > .active {
    background: var(--cdx-accent) !important;
    color: var(--cdx-accent-text) !important;
}

/* ---------- Transition cleanup: remove hover lifts ---------- */
.transition-all {
    transition-property: color, background-color, border-color, opacity, box-shadow !important;
}

/* ---------- Ensure legacy Tailwind ring colors are neutral ---------- */
.ring-violet-500,
.ring-brand-500,
.ring-emerald-500,
.ring-amber-500,
.ring-rose-500 {
    --tw-ring-color: rgba(0, 0, 0, 0.12) !important;
}
.dark .ring-violet-500,
.dark .ring-brand-500,
.dark .ring-emerald-500,
.dark .ring-amber-500,
.dark .ring-rose-500 {
    --tw-ring-color: rgba(255, 255, 255, 0.15) !important;
}

/* ---------- Drag handles and separators ---------- */
.resizer,
.handle,
[class*="resize-handle"] {
    background: var(--cdx-border) !important;
}
.resizer:hover,
.handle:hover,
[class*="resize-handle"]:hover {
    background: var(--cdx-border-strong) !important;
}

/* ---------- Empty / placeholder text ---------- */
.text-slate-400,
.text-gray-400,
.text-neutral-400,
.placeholder-slate-400::placeholder,
::placeholder {
    color: var(--cdx-text-tertiary) !important;
}

/* ---------- Brand icon in header ---------- */
.brand-title {
    color: var(--cdx-text-primary) !important;
}

/* Grayscale logo / favicon images for monochrome Codex look */
#appLogoMark img,
#login-overlay img[alt*="Logo"],
#admin-panel img[alt="Logo"],
#currentUserBadge .fa-circle-user,
.brand-mark,
[alt*="凸维MATH Logo"] {
    filter: grayscale(100%) contrast(1.1) !important;
}
#appLogoMark {
    background: var(--cdx-bg-muted) !important;
    box-shadow: none !important;
}
#currentUserBadge .fa-circle-user {
    color: var(--cdx-text-secondary) !important;
}

/* ---------- Final safety: neutralize any remaining violet/emerald/amber/rose backgrounds ---------- */
[class*="bg-violet-"],
[class*="bg-emerald-"],
[class*="bg-amber-"],
[class*="bg-rose-"],
[class*="bg-indigo-"],
[class*="bg-purple-"],
[class*="bg-blue-"],
[class*="bg-cyan-"],
[class*="bg-pink-"] {
    background: var(--cdx-bg-muted) !important;
}
[class*="text-violet-"],
[class*="text-emerald-"],
[class*="text-amber-"],
[class*="text-rose-"],
[class*="text-indigo-"],
[class*="text-purple-"],
[class*="text-blue-"],
[class*="text-cyan-"],
[class*="text-pink-"] {
    color: var(--cdx-text-secondary) !important;
}
[class*="border-violet-"],
[class*="border-emerald-"],
[class*="border-amber-"],
[class*="border-rose-"],
[class*="border-indigo-"],
[class*="border-purple-"],
[class*="border-blue-"],
[class*="border-cyan-"],
[class*="border-pink-"] {
    border-color: var(--cdx-border) !important;
}

/* ---------- Codex-style ghost/secondary buttons in editor toolbar ---------- */
#editorSection button:not(.glass-btn-primary):not(.glass-btn-danger):not(.glass-btn-success) {
    color: var(--cdx-text-secondary) !important;
}
#editorSection button:not(.glass-btn-primary):not(.glass-btn-danger):not(.glass-btn-success):hover {
    color: var(--cdx-text-primary) !important;
    background: var(--cdx-bg-muted) !important;
}

/* ---------- Danger / warning text neutralized for Codex ---------- */
.text-red-600,
.text-red-500,
.text-red-700,
.text-rose-500,
.text-rose-600,
.text-rose-700,
.text-rose-400,
.text-yellow-600,
.text-amber-500,
.text-amber-600,
.text-amber-700,
.text-amber-800,
.text-green-500,
.text-green-600,
.text-emerald-500,
.text-emerald-600,
.text-emerald-700 {
    color: var(--cdx-text-secondary) !important;
}

/* Neutralize semantic background tints */
.bg-red-50,
.bg-red-100,
.bg-rose-50,
.bg-rose-100,
.bg-amber-50,
.bg-amber-100,
.bg-emerald-50,
.bg-emerald-100,
.bg-green-50,
.bg-green-100 {
    background: var(--cdx-bg-muted) !important;
    border-color: var(--cdx-border) !important;
}

/* Neutralize semantic icons */
i.text-green-500,
i.text-emerald-500,
i.text-amber-500,
i.text-red-500,
i.text-rose-500,
i.fa-square-check.text-green-500,
i.fa-triangle-exclamation.text-amber-500,
i.fa-ban.text-red-500 {
    color: var(--cdx-text-tertiary) !important;
}

/* Editor toolbar: 清空草稿 */
#editorSection button.text-slate-400,
#editorSection button.hover\:text-red-500,
#editorSection button.hover\:bg-red-50,
button.hover\:text-red-500,
button.hover\:bg-red-50,
button.hover\:text-rose-600,
button.hover\:bg-rose-50,
button.hover\:text-amber-600,
button.hover\:bg-amber-50,
button.hover\:text-red-600,
button.hover\:bg-red-100,
button.hover\:text-rose-700,
button.hover\:bg-rose-100 {
    color: var(--cdx-text-tertiary) !important;
    background: transparent !important;
}
#editorSection button.text-slate-400:hover,
#editorSection button.hover\:text-red-500:hover,
#editorSection button.hover\:bg-red-50:hover,
button.hover\:text-red-500:hover,
button.hover\:bg-red-50:hover,
button.hover\:text-rose-600:hover,
button.hover\:bg-rose-50:hover,
button.hover\:text-amber-600:hover,
button.hover\:bg-amber-50:hover,
button.hover\:text-red-600:hover,
button.hover\:bg-red-100:hover,
button.hover\:text-rose-700:hover,
button.hover\:bg-rose-100:hover {
    color: var(--cdx-text-primary) !important;
    background: var(--cdx-bg-muted) !important;
}

/* Toast / notification inner icons and success indicators */
.toast i.text-green-500,
.toast i.text-emerald-500,
.notification i.text-green-500,
.notification i.text-emerald-500,
#toastContainer i.text-green-500,
#toastContainer i.text-emerald-500,
.toast .fa-circle-check,
.notification .fa-circle-check {
    color: var(--cdx-text-secondary) !important;
}

/* ---------- Codex-style radio/checkbox selection ---------- */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--cdx-accent) !important;
    border-color: var(--cdx-border) !important;
}

/* ---------- Final typography tweaks ---------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* ---------- Compact buttons: reduce excessive padding ---------- */
.glass-btn,
.glass-btn-primary,
.glass-btn-danger,
.glass-btn-success {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* ---------- Editor preview card title ---------- */
#previewSection h2,
#questionPreview h2,
#previewSection h3,
#questionPreview h3 {
    color: var(--cdx-text-primary) !important;
}

/* ---------- Tooltips ---------- */
[role="tooltip"],
.tooltip,
[class*="tooltip"] {
    background: var(--cdx-surface-elevated) !important;
    border: 1px solid var(--cdx-border) !important;
    color: var(--cdx-text-primary) !important;
    box-shadow: var(--cdx-shadow-md) !important;
}

/* ---------- Modal close button hover neutral ---------- */
.glass-modal button[data-modal-close]:hover,
.glass-modal .fa-xmark:hover {
    background: var(--cdx-bg-muted) !important;
    color: var(--cdx-text-primary) !important;
}

/* ---------- Paper workspace neutralization ---------- */
#paperWorkspaceSection {
    background: var(--cdx-bg) !important;
}
#paperWorkspaceSection button:not(.glass-btn-danger):not(.glass-btn-success) {
    background: var(--cdx-surface) !important;
    border-color: var(--cdx-border) !important;
    color: var(--cdx-text-primary) !important;
}
#paperWorkspaceSection button.glass-btn-primary,
#paperWorkspaceSection button[class*="bg-violet-"] {
    background: var(--cdx-accent) !important;
    color: var(--cdx-accent-text) !important;
    border-color: var(--cdx-accent) !important;
}

/* ---------- Login overlay: minimal centered card ---------- */
#login-overlay {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#login-overlay .rounded-3xl {
    border-radius: var(--cdx-radius-xl) !important;
}

/* ---------- App version / small metadata ---------- */
.text-\[10px\],
.text-\[11px\] {
    color: var(--cdx-text-tertiary) !important;
}

/* ---------- Ensure form labels stay muted ---------- */
label,
.form-label {
    color: var(--cdx-text-secondary) !important;
}

/* ---------- END ---------- */