/* ===== Theme Variables ===== */
:root {
    --primary: #4361ee;
    --primary-light: #e8ecfd;
    --primary-rgb: 67,97,238;
    --secondary: #3f37c9;
    --success: #06d6a0;
    --warning: #ffd166;
    --danger: #ef476f;
    --dark: #1d1d2c;
    --light: #f8f9fa;
    --gray: #6c757d;
    --gray-light: #e9ecef;
    --sidebar-width: 260px;
    --header-height: 60px;

    /* Frosted glass/hazy theme */
    --bg-body-solid: #f4f6f9;
    --bg-card: rgba(255, 255, 255, 0.7);
    --bg-sidebar: rgba(255, 255, 255, 0.75);
    --bg-sidebar-search: rgba(240, 242, 245, 0.6);
    --bg-input: rgba(255, 255, 255, 0.8);
    --bg-result: rgba(248, 249, 250, 0.6);
    --bg-footer: rgba(255, 255, 255, 0.6);
    --bg-hover: rgba(248, 249, 250, 0.8);
    
    --text-primary: #333;
    --text-secondary: #555;
    --text-muted: #6c757d;
    --border-color: rgba(233, 236, 239, 0.8);
    --border-focus: var(--primary);
    --shadow-card: 0 4px 16px rgba(0,0,0,.04);
    --shadow-hover: 0 8px 25px rgba(67,97,238,.12);

    --code-bg: #f5f5f5;
    --code-border: #e0e0e0;
    --code-text: #333;
    --code-tag: #0550ae;
    --code-attr: #953800;
    --code-val: #0a3069;
    --code-comment: #6a737d;
    --code-bracket: #6c757d;
    --code-entity: #8250df;
    --code-linenr-bg: #f0f0f0;
    --code-linenr-border: #ddd;
    --code-linenr-text: #999;
    --code-caret: #333;
    --code-selection: rgba(67,97,238,.18);
}

html[data-theme="dark"] {
    --bg-body-solid: #0f172a;
    --bg-card: rgba(30, 41, 59, 0.7);
    --bg-sidebar: #1e293b;
    --bg-sidebar-search: rgba(30, 41, 59, 0.9);
    --bg-input: rgba(30, 41, 59, 0.8);
    --bg-result: rgba(15, 23, 42, 0.6);
    --bg-footer: rgba(30, 41, 59, 0.6);
    --bg-hover: rgba(51, 65, 85, 0.6);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-focus: #3b82f6;
    --shadow-card: 0 4px 16px rgba(0,0,0,.3);
    --shadow-hover: 0 8px 25px rgba(59,130,246,.25);
    --gray-light: #1e293b;
    --dark: #f8fafc;
    --primary-light: rgba(59, 130, 246, 0.15);

    --code-bg: #1e293b;
    --code-border: rgba(255, 255, 255, 0.08);
    --code-text: #e2e8f0;
    --code-tag: #60a5fa;
    --code-attr: #93c5fd;
    --code-val: #fca5a5;
    --code-comment: #94a3b8;
    --code-bracket: #cbd5e1;
    --code-entity: #c084fc;
    --code-linenr-bg: #0f172a;
    --code-linenr-border: rgba(255, 255, 255, 0.08);
    --code-linenr-text: #64748b;
    --code-caret: #f8fafc;
    --code-selection: rgba(59, 130, 246, 0.3);

    /* Bootstrap 变量覆写（供 color/regex 等使用 --bs-* 的页面） */
    --bs-body-bg: #0f172a;
    --bs-body-color: #f8fafc;
    --bs-secondary-color: #94a3b8;
    --bs-border-color: rgba(255, 255, 255, 0.08);
    --bs-tertiary-bg: rgba(30, 41, 59, 0.6);
    --bs-secondary-bg: rgba(51, 65, 85, 0.5);
    --bs-primary-bg-subtle: rgba(59, 130, 246, 0.15);
    --bs-primary-text-emphasis: #93c5fd;
    --bs-success-bg-subtle: rgba(34, 197, 94, 0.15);
    --bs-success-border-subtle: rgba(34, 197, 94, 0.3);
    --bs-danger-bg-subtle: rgba(239, 68, 68, 0.15);
    --bs-danger-border-subtle: rgba(239, 68, 68, 0.3);
    --bs-table-color: #f8fafc;
    --bs-table-bg: transparent;
}

html[data-theme="dark"] body {
    background-image: none !important;
    background-color: var(--bg-body-solid);
    color: var(--text-primary);
}

html[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .text-primary {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .text-dark {
    color: #f8fafc !important;
}
html[data-theme="dark"] h1, 
html[data-theme="dark"] h2, 
html[data-theme="dark"] h3, 
html[data-theme="dark"] h4, 
html[data-theme="dark"] h5, 
html[data-theme="dark"] h6 {
    color: var(--text-primary);
}

        /* Bootstrap Overrides for Dark Mode */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-color);
}
html[data-theme="dark"] .json-pane-card,
html[data-theme="dark"] .sql-pane-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}
html[data-theme="dark"] .CodeMirror {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .CodeMirror-gutters {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .CodeMirror-linenumber {
    color: var(--text-muted);
}
html[data-theme="dark"] .CodeMirror-cursor {
    border-left-color: var(--text-primary);
}
html[data-theme="dark"] .cm-s-default .cm-string {
    color: #86efac; /* success green */
}
html[data-theme="dark"] .cm-s-default .cm-property {
    color: #93c5fd; /* light blue */
}
html[data-theme="dark"] .cm-s-default .cm-number {
    color: #fca5a5; /* light red */
}
html[data-theme="dark"] .cm-s-default .cm-atom {
    color: #c084fc; /* light purple */
}
html[data-theme="dark"] .cm-s-default .cm-keyword {
    color: #60a5fa; /* blue */
}
html[data-theme="dark"] .json-key { color: #93c5fd; }
html[data-theme="dark"] .json-str { color: #86efac; }
html[data-theme="dark"] .json-num { color: #fca5a5; }
html[data-theme="dark"] .json-bool { color: #c084fc; }
html[data-theme="dark"] .json-null { color: #94a3b8; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-focus);
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
}
html[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .auth-modal-content,
html[data-theme="dark"] .avatar-picker-panel,
html[data-theme="dark"] .user-dropdown-menu,
html[data-theme="dark"] .vip-plan,
html[data-theme="dark"] .draw-import-modal,
html[data-theme="dark"] .draw-modal,
html[data-theme="dark"] .draw-drafts-panel,
html[data-theme="dark"] .draw-chat-footer,
html[data-theme="dark"] .draw-msg-ai,
html[data-theme="dark"] .draw-example,
html[data-theme="dark"] .drawio-loading-card {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .tool-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-focus);
    box-shadow: var(--shadow-hover);
}
html[data-theme="dark"] .tool-panel {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .draw-chat,
html[data-theme="dark"] .draw-editor:fullscreen {
    background: var(--bg-body-solid) !important;
}
html[data-theme="dark"] .navbar-custom .search-box .form-control:focus {
    background: var(--bg-input);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
html[data-theme="dark"] .vip-plan.selected {
    background: rgba(59, 130, 246, 0.15) !important;
}
html[data-theme="dark"] .vip-tab-btn.active {
    background: var(--bg-card) !important;
    color: var(--primary) !important;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .offcanvas-header {
    border-color: var(--border-color);
}
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
/* Bootstrap Card */
html[data-theme="dark"] .card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: rgba(255,255,255,.04);
    border-color: var(--border-color);
    color: var(--text-primary);
}
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-body b,
html[data-theme="dark"] .card-body span,
html[data-theme="dark"] .card-body div { color: var(--text-primary); }

/* Bootstrap form-check (checkbox / radio) */
html[data-theme="dark"] .form-check-input {
    background-color: var(--bg-input);
    border-color: rgba(255,255,255,.25);
}
html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
html[data-theme="dark"] .form-check-label { color: var(--text-primary); }
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .tool-panel label,
html[data-theme="dark"] .tool-panel .small { color: var(--text-primary); }

/* 左侧边栏黑夜模式（避免白底白字） */
html[data-theme="dark"] .sidebar {
    background-color: var(--bg-sidebar) !important;
    color: var(--text-primary);
    border-right-color: var(--border-color);
}
html[data-theme="dark"] .sidebar-search {
    background-color: var(--bg-sidebar) !important;
    border-bottom-color: var(--border-color);
}
html[data-theme="dark"] .sidebar-search .form-control {
    background-color: var(--bg-sidebar-search) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color);
}
html[data-theme="dark"] .sidebar .nav-category,
html[data-theme="dark"] .sidebar .nav-link {
    color: var(--text-primary);
}
html[data-theme="dark"] .sidebar .nav-link i {
    color: var(--text-muted);
}
html[data-theme="dark"] .sidebar-module-switch {
    background-color: var(--bg-sidebar) !important;
    border-bottom-color: var(--border-color);
}
html[data-theme="dark"] .smw-btn {
    background-color: var(--bg-sidebar-search) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color);
}
html[data-theme="dark"] .smw-btn.active {
    background-color: var(--primary) !important;
    color: #fff !important;
}
html[data-theme="dark"] .sidebar-collapse-btn {
    color: var(--text-muted);
    background-color: var(--bg-sidebar-search) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .sidebar-expand-btn {
    background-color: var(--bg-card) !important;
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* select[multiple] option items */
html[data-theme="dark"] select option {
    background-color: #1e293b;
    color: var(--text-primary);
}

/* Bootstrap table */
html[data-theme="dark"] .table {
    color: var(--text-primary);
    border-color: var(--border-color);
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
    border-color: var(--border-color);
    color: var(--text-primary);
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,.04);
    color: var(--text-primary);
}
html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(255,255,255,.06);
    color: var(--text-primary);
}
html[data-theme="dark"] .table-light {
    background-color: rgba(255,255,255,.06);
    color: var(--text-primary);
}

/* Bootstrap nav-tabs / nav-pills */
html[data-theme="dark"] .nav-tabs { border-color: var(--border-color); }
html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-muted);
}
html[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--border-color);
    color: var(--text-primary);
}
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-card);
    border-color: var(--border-color) var(--border-color) var(--bg-card);
    color: var(--primary);
}
html[data-theme="dark"] .tab-content { color: var(--text-primary); }

/* text-success / text-danger 在黑夜模式下需更亮才能看清 */
html[data-theme="dark"] .text-success { color: #4ade80 !important; }
html[data-theme="dark"] .text-danger { color: #f87171 !important; }

/* Bootstrap badge bg-secondary */
html[data-theme="dark"] .badge.bg-secondary { background-color: rgba(148,163,184,.25) !important; }

/* Bootstrap input-group text */
html[data-theme="dark"] .input-group-text {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* Bootstrap hr */
html[data-theme="dark"] hr { border-color: var(--border-color); opacity: 1; }

/* 颜色拾取与调色板 dark mode */
html[data-theme="dark"] .color-lab-card {
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
html[data-theme="dark"] .img-upload-mini {
    border-color: rgba(59, 130, 246, .4);
    background: linear-gradient(180deg, rgba(59,130,246,.08), rgba(59,130,246,.04));
}
html[data-theme="dark"] .img-upload-mini:hover {
    border-color: rgba(59, 130, 246, .55);
    background: linear-gradient(180deg, rgba(59,130,246,.12), rgba(59,130,246,.06));
}
html[data-theme="dark"] .palette-swatch:hover {
    box-shadow: 0 16px 30px rgba(0,0,0,.4);
}
html[data-theme="dark"] .preview-mini-card,
html[data-theme="dark"] .preview-tone {
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 8px 18px rgba(0,0,0,.2);
}
html[data-theme="dark"] .preview-badge {
    background: rgba(255,255,255,.15);
    color: #f8fafc;
}
html[data-theme="dark"] .image-canvas-box #imgCanvas {
    border-color: rgba(255,255,255,.15);
}
html[data-theme="dark"] .dropzone-pro {
    border-color: rgba(59, 130, 246, .4);
    background: linear-gradient(180deg, rgba(59,130,246,.08), rgba(59,130,246,.04));
}
html[data-theme="dark"] .dropzone-pro:hover {
    border-color: rgba(59, 130, 246, .55);
    background: linear-gradient(180deg, rgba(59,130,246,.12), rgba(59,130,246,.06));
}
html[data-theme="dark"] .gradient-card {
    box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
}
html[data-theme="dark"] .gradient-card:hover {
    box-shadow: 0 20px 36px rgba(0,0,0,.45), 0 0 0 2px var(--card-glow);
}

html[data-theme="dark"] .alert-light {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}
html[data-theme="dark"] .alert-secondary {
    background-color: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.2);
    color: var(--text-secondary);
}
html[data-theme="dark"] .list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-body-solid);
    border-color: var(--border-color);
}
html[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}
html[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

html[data-theme="dark"] .navbar-custom {
    background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.01) 0px, rgba(255, 255, 255, 0.01) 1px, transparent 1px, transparent 10px),
        linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 70%, rgba(15, 23, 42, 0.85) 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ===== Global Toast ===== */
.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.custom-toast {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    color: #333;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: toastSlideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    pointer-events: auto;
}
.custom-toast.toast-error {
    background: rgba(254, 242, 242, 0.9);
    border-color: rgba(252, 165, 165, 0.5);
    color: #991b1b;
}
.custom-toast.toast-success {
    background: rgba(240, 253, 244, 0.9);
    border-color: rgba(134, 239, 172, 0.5);
    color: #166534;
}
.custom-toast i {
    font-size: 1.1rem;
}
.custom-toast.fade-out {
    animation: toastFadeOut 0.3s ease-in forwards;
}
@keyframes toastSlideDown {
    from { opacity: 0; transform: translateY(-20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastFadeOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-10px) scale(0.95); }
}
html[data-theme="dark"] .custom-toast {
    background: rgba(30, 30, 46, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}
html[data-theme="dark"] .custom-toast.toast-error {
    background: rgba(153, 27, 27, 0.9);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}
html[data-theme="dark"] .custom-toast.toast-success {
    background: rgba(22, 101, 52, 0.9);
    border-color: rgba(34, 197, 94, 0.5);
    color: #86efac;
}

/* ===== Global Scrollbar ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg-body-solid);
    background-image: radial-gradient(circle at top left, #fdfbfb 0%, #ebedee 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background .3s, color .3s;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== Theme Center Animation ===== */
.theme-center-anim {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100000;
    pointer-events: none;
    font-size: 8rem;
    opacity: 0;
    -webkit-font-smoothing: antialiased;
    animation: themeCenterPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes themeCenterPop {
    0% { transform: translate(-50%, -50%) scale(0.2) rotate(-90deg); opacity: 0; }
    30% { transform: translate(-50%, -50%) scale(1.2) rotate(15deg); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    80% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.2) rotate(15deg); opacity: 0; }
}
.theme-toggle-animating i {
    display: inline-block;
    animation: themeIconSpin 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes themeIconSpin {
    0% { transform: rotate(0) scale(1); }
    50% { transform: rotate(180deg) scale(0.6); opacity: 0.5; }
    100% { transform: rotate(360deg) scale(1); opacity: 1; }
}