/* ==================== 主题系统 ==================== */

/* 经典主题 (默认) - 保持原有样式 */
[data-theme="classic"] {
    --theme-primary: #4facfe;
    --theme-primary-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --theme-bg: #f0f2f5;
    --theme-sidebar-bg: white;
    --theme-card-bg: white;
    --theme-text: #2c3e50;
    --theme-text-secondary: #64748b;
    --theme-border: #e9ecef;
}

/* ==================== 极简主题 (白蓝玻璃拟态) ==================== */
[data-theme="minimal"] {
    --theme-primary: #00C6FB;
    --theme-primary-gradient: linear-gradient(135deg, #00C6FB 0%, #005BEA 100%);
    --theme-bg: radial-gradient(circle at 10% 20%, rgb(242, 246, 255) 0%, rgb(235, 240, 250) 90%);
    /* Reference background */
    --theme-sidebar-bg: rgba(255, 255, 255, 0.75);
    --theme-card-bg: rgba(255, 255, 255, 0.65);
    /* Reference glass-bg */
    --theme-text: #2D3748;
    /* Reference text-main */
    --theme-text-secondary: #718096;
    /* Reference text-sub */
    --theme-border: rgba(255, 255, 255, 0.8);
    /* Reference glass-border */
    --theme-glass-blur: 24px;
    /* Reference blur */
    --theme-glass-shadow: 0 20px 50px -12px rgba(0, 91, 234, 0.1), 0 0 1px rgba(0, 0, 0, 0.05);
    /* Reference shadow */
}

[data-theme="minimal"] body {
    background: var(--theme-bg);
}

[data-theme="minimal"] .sidebar {
    background: var(--theme-sidebar-bg);
    backdrop-filter: blur(var(--theme-glass-blur));
    -webkit-backdrop-filter: blur(var(--theme-glass-blur));
    border: 1px solid var(--theme-border);
    border-radius: 0;
    margin: 0;
    height: 100%;
    box-shadow: var(--theme-glass-shadow);
}

[data-theme="minimal"] .nav-item {
    border-radius: 12px;
    transition: all 0.2s ease;
    color: #64748b;
    background: transparent;
}

[data-theme="minimal"] .nav-item i {
    color: inherit;
}

[data-theme="minimal"] .nav-item:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #005BEA;
}

[data-theme="minimal"] .nav-item:hover i {
    color: #005BEA;
}

[data-theme="minimal"] .nav-item.active {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    color: #0284c7;
    border: 1px solid #bae6fd;
    border-left: 3px solid #0284c7;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
}

[data-theme="minimal"] .nav-item.active i {
    color: #0284c7;
}

[data-theme="minimal"] .nav-item.active:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    transform: translateX(0);
}

[data-theme="minimal"] .preview-placeholder {
    background: var(--theme-bg);
}

[data-theme="minimal"] .preview-placeholder {
    background: var(--theme-bg);
}

[data-theme="minimal"] .modal-container,
[data-theme="minimal"] .modal-content {
    background: var(--theme-card-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--theme-border);
    border-radius: 24px;
    box-shadow: var(--theme-glass-shadow);
}

[data-theme="minimal"] .modal-header {
    background: var(--theme-primary-gradient);
    border-radius: 24px 24px 0 0;
}

[data-theme="minimal"] .btn-primary,
[data-theme="minimal"] .btn-save-profile {
    background: var(--theme-primary-gradient);
    box-shadow: 0 10px 20px -5px rgba(0, 91, 234, 0.4);
}

[data-theme="minimal"] .user-profile {
    background: linear-gradient(145deg, rgba(224, 242, 254, 0.6), rgba(186, 230, 253, 0.4));
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(186, 230, 253, 0.6);
    margin: 0.75rem -1rem 0 -1rem;
    padding: 0.85rem 1rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="minimal"] .user-avatar {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    color: #0284c7;
}

[data-theme="minimal"] .user-name {
    color: #0c4a6e;
}

[data-theme="minimal"] .user-role {
    color: #0369a1;
}

[data-theme="minimal"] .theme-btn,
[data-theme="minimal"] .settings-btn {
    background: rgba(224, 242, 254, 0.6);
    color: #0284c7;
}

[data-theme="minimal"] .theme-btn:hover,
[data-theme="minimal"] .settings-btn:hover {
    background: rgba(186, 230, 253, 0.8);
}

[data-theme="minimal"] .logout-btn {
    background: rgba(254, 226, 226, 0.6);
    color: #dc2626;
}

[data-theme="minimal"] .logout-btn:hover {
    background: rgba(254, 202, 202, 0.8);
}

[data-theme="minimal"] .admin-card {
    background: var(--theme-card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-glass-shadow);
}

[data-theme="minimal"] .logo-title {
    background: var(--theme-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 极简主题 - 欢迎页面光斑效果 */
[data-theme="minimal"] .preview-placeholder::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    top: -100px;
    left: -100px;
    z-index: 0;
    animation: floatBg 15s ease-in-out infinite alternate;
    pointer-events: none;
}

/* 极简主题 - 子界面统一适配 */
[data-theme="minimal"] .qingzhi-container,
[data-theme="minimal"] .taisha-page,
[data-theme="minimal"] .photos-page,
[data-theme="minimal"] .article-reader,
[data-theme="minimal"] #admin-panel-container,
[data-theme="minimal"] #photos-container,
[data-theme="minimal"] #taisha-container,
[data-theme="minimal"] #article-reader-container {
    background: var(--theme-bg) !important;
    color: var(--theme-text);
}

/* 极简主题 - 滚动条适配 */
[data-theme="minimal"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="minimal"] ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

[data-theme="minimal"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 198, 251, 0.4);
    border-radius: 4px;
}

[data-theme="minimal"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 198, 251, 0.6);
}

/* 极简主题 - 关闭按钮 */
[data-theme="minimal"] .close-modal {
    background: rgba(255, 255, 255, 0.5);
    color: var(--theme-text-secondary);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

[data-theme="minimal"] .close-modal:hover {
    background: white;
    color: #ef4444;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 情志病因 - 极简主题 */
[data-theme="minimal"] .qingzhi-header h2 {
    color: var(--theme-text);
}

[data-theme="minimal"] .qingzhi-header h2::after {
    background: var(--theme-primary-gradient);
}

[data-theme="minimal"] .qingzhi-card-title {
    color: var(--theme-text);
}

[data-theme="minimal"] .qingzhi-meta,
[data-theme="minimal"] .qingzhi-author {
    color: var(--theme-text-secondary);
}

/* 太傻天书 & 文章阅读 - 极简主题 */
[data-theme="minimal"] .taisha-header h2,
[data-theme="minimal"] .taisha-subtitle,
[data-theme="minimal"] .article-content-header h1 {
    color: var(--theme-text);
}

[data-theme="minimal"] .article-content {
    color: var(--theme-text);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--theme-glass-shadow);
}

/* 管理后台 - 极简主题 */
[data-theme="minimal"] .admin-header-content h1 {
    color: var(--theme-text);
}

[data-theme="minimal"] .stat-card {
    background: var(--theme-card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-glass-shadow);
}

[data-theme="minimal"] .stat-value {
    color: var(--theme-text);
}

[data-theme="minimal"] .stat-label {
    color: var(--theme-text-secondary);
}

[data-theme="minimal"] .admin-tab {
    background: rgba(255, 255, 255, 0.4);
    color: var(--theme-text-secondary);
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 8px 16px;
}

[data-theme="minimal"] .admin-tab.active {
    background: white;
    color: #4facfe;
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.2);
}

/* 极简主题 - 表单元素统一适配 */
[data-theme="minimal"] input,
[data-theme="minimal"] select,
[data-theme="minimal"] textarea {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--theme-border);
    color: var(--theme-text);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

[data-theme="minimal"] input:focus,
[data-theme="minimal"] select:focus,
[data-theme="minimal"] textarea:focus {
    background: rgba(255, 255, 255, 0.8);
    border-color: #00C6FB;
    box-shadow: 0 0 0 3px rgba(0, 198, 251, 0.1);
    outline: none;
}

/* 极简主题 - 弹窗底部适配 */
[data-theme="minimal"] .modal-actions,
[data-theme="minimal"] .modal-tips,
[data-theme="minimal"] .modal-footer {
    background: rgba(240, 245, 255, 0.4);
    border-top: 1px solid var(--theme-border);
    border-radius: 0 0 24px 24px;
}

/* 疗程照片 - 极简主题 */
[data-theme="minimal"] .photos-header h2 {
    color: var(--theme-text);
}

/* 极简主题 - iframe内容适配 (检测报告/SOC计算) */
[data-theme="minimal"] .stats-panel,
[data-theme="minimal"] .filter-section,
[data-theme="minimal"] .report-card,
[data-theme="minimal"] .score-panel,
[data-theme="minimal"] .question-card,
[data-theme="minimal"] .soc-result-card,
[data-theme="minimal"] .history-card {
    background: var(--theme-card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-glass-shadow);
}

[data-theme="minimal"] .stat-item,
[data-theme="minimal"] .level-item {
    background: rgba(255, 255, 255, 0.5);
}

[data-theme="minimal"] .photos-subtitle {
    color: var(--theme-text-secondary);
}

[data-theme="minimal"] .photo-card,
[data-theme="minimal"] .photo-upload-form {
    background: var(--theme-card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-glass-shadow);
}

[data-theme="minimal"] .photo-info h4 {
    color: var(--theme-text);
}

[data-theme="minimal"] .photo-info p {
    color: var(--theme-text-secondary);
}

/* 按钮样式适配 - 极简主题 */
[data-theme="minimal"] .btn-calculate,
[data-theme="minimal"] .btn-save,
[data-theme="minimal"] .modal-btn-primary {
    background: var(--theme-primary-gradient);
    color: white;
    box-shadow: 0 10px 20px -5px rgba(0, 91, 234, 0.4);
    border: none;
    border-radius: 50px;
    /* Reference rounded buttons */
    transition: all 0.3s ease;
}

[data-theme="minimal"] .page-title {
    background: var(--theme-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

[data-theme="minimal"] .btn-calculate:hover,
[data-theme="minimal"] .btn-save:hover,
[data-theme="minimal"] .modal-btn-primary:hover {
    box-shadow: 0 15px 30px -5px rgba(0, 91, 234, 0.6);
    transform: translateY(-2px);
}

/* SOC Calculation Page Specifics for Minimal Theme */
[data-theme="minimal"] .soc-header h2,
[data-theme="minimal"] .logo-title {
    background: var(--theme-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

[data-theme="minimal"] .score-value {
    background: var(--theme-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 10px 20px rgba(0, 91, 234, 0.15);
    font-weight: 800;
}

[data-theme="minimal"] .question-number {
    background: var(--theme-primary-gradient);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 91, 234, 0.3);
    border: none;
}

/* Detection Report Empty State - Minimal Theme */
[data-theme="minimal"] .empty-state {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    margin: 40px auto;
    padding: 60px 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 32px;
    box-shadow: 0 20px 50px -12px rgba(0, 91, 234, 0.1), 0 0 1px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-theme="minimal"] .empty-state:hover {
    transform: translateY(-5px);
}

[data-theme="minimal"] .quantum-orb-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

[data-theme="minimal"] .quantum-orb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--theme-primary-gradient);
    box-shadow: 0 10px 30px rgba(0, 91, 234, 0.4);
    position: relative;
    z-index: 2;
    animation: breathe 3s ease-in-out infinite;
}

[data-theme="minimal"] .orbit-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 198, 251, 0.3);
    border-radius: 50%;
    z-index: 1;
    animation: spin 8s linear infinite;
}

[data-theme="minimal"] .orbit-ring::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #00C6FB;
    border-radius: 50%;
    box-shadow: 0 0 10px #00C6FB;
}

[data-theme="minimal"] .empty-title {
    margin: 0 0 12px;
    font-size: 24px;
    color: var(--theme-text);
    font-weight: 700;
    letter-spacing: -0.5px;
}

[data-theme="minimal"] .empty-desc {
    margin: 0 0 40px;
    font-size: 15px;
    color: var(--theme-text-secondary);
    line-height: 1.6;
}

/* 极简主题 - 空内容页面样式 */
[data-theme="minimal"] .empty-content-page {
    background: var(--theme-bg);
}

[data-theme="minimal"] .empty-content-icon {
    background: linear-gradient(135deg, rgba(0, 198, 251, 0.15) 0%, rgba(0, 91, 234, 0.15) 100%);
    box-shadow: 0 8px 30px rgba(0, 91, 234, 0.15);
}

[data-theme="minimal"] .empty-content-icon i {
    background: var(--theme-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="minimal"] .empty-content-title {
    color: var(--theme-text);
}

[data-theme="minimal"] .empty-content-desc {
    color: var(--theme-text-secondary);
}

[data-theme="minimal"] .empty-content-hint {
    background: rgba(0, 198, 251, 0.08);
    color: var(--theme-primary);
    border-left-color: var(--theme-primary);
}

/* Animations */
@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(0, 91, 234, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(0, 198, 251, 0.6);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

[data-theme="minimal"] .btn-reset,
[data-theme="minimal"] .modal-btn-secondary {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--theme-border);
    color: var(--theme-text-secondary);
}

[data-theme="minimal"] .btn-reset:hover,
[data-theme="minimal"] .modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.8);
}

@keyframes floatBg {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(40px, 40px);
    }
}


/* ==================== 赛博量子主题 (深色科技风) ==================== */
[data-theme="cyber"] {
    /* Core Variables from Reference - DEEPER BLACK + MAGENTA */
    --theme-primary: #ff00ff;
    --theme-primary-dim: rgba(255, 0, 255, 0.2);
    --theme-bg: #020208;
    --theme-panel-bg: rgba(2, 2, 8, 0.9);
    --theme-text: #ffffff;
    --theme-text-secondary: #8b9bb4;

    /* Derived/Auxiliary Variables */
    --theme-primary-gradient: linear-gradient(90deg, #ff00ff 0%, #00f3ff 100%);
    --theme-sidebar-bg: var(--theme-panel-bg);
    --theme-card-bg: var(--theme-panel-bg);
    --theme-border: rgba(255, 0, 255, 0.2);
    --theme-glow: rgba(255, 0, 255, 0.6);
    --theme-grid-color: rgba(255, 0, 255, 0.015);
}

[data-theme="cyber"] body {
    background-color: var(--theme-bg);
    /* Deep Space Grid Background with magenta tint */
    background-image:
        radial-gradient(circle at 50% 50%, rgba(255, 0, 255, 0.06) 0%, transparent 50%),
        linear-gradient(var(--theme-grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--theme-grid-color) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    color: var(--theme-text);
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

[data-theme="cyber"] .sidebar {
    background: var(--theme-sidebar-bg);
    border: 1px solid var(--theme-border);
    border-radius: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin: 0;
    height: 100vh;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

[data-theme="cyber"] .logo-title {
    background: linear-gradient(90deg, #fff, var(--theme-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    letter-spacing: 1px;
    font-weight: 700;
}

[data-theme="cyber"] .nav-group-title {
    color: var(--theme-primary);
    opacity: 0.6;
    letter-spacing: 1px;
}

[data-theme="cyber"] .nav-item {
    color: var(--theme-text-secondary);
    border-radius: 4px;
    border-left: 2px solid transparent;
    transition: all 0.3s;
    margin-bottom: 6px;
}

[data-theme="cyber"] .nav-item:hover {
    color: white;
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.1), transparent);
    border-left-color: var(--theme-primary);
    text-shadow: 0 0 8px var(--theme-glow);
}

[data-theme="cyber"] .nav-item.active {
    color: white;
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.15), transparent);
    border-left-color: var(--theme-primary);
    text-shadow: 0 0 8px var(--theme-glow);
    box-shadow: none;
}

[data-theme="cyber"] .nav-item i {
    transition: all 0.3s;
}

[data-theme="cyber"] .nav-item:hover i,
[data-theme="cyber"] .nav-item.active i {
    color: var(--theme-primary);
    filter: drop-shadow(0 0 4px var(--theme-glow));
}

/* 赛博主题主页按钮样式 */
[data-theme="cyber"] .nav-home-btn {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.15) 0%, rgba(255, 0, 255, 0.1) 100%);
    border: 1px solid rgba(0, 243, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

[data-theme="cyber"] .nav-home-btn:hover {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.25) 0%, rgba(255, 0, 255, 0.2) 100%);
    border-color: rgba(0, 243, 255, 0.5);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.4);
}

[data-theme="cyber"] .nav-home-btn i {
    color: #00f3ff;
    filter: drop-shadow(0 0 4px rgba(0, 243, 255, 0.6));
}

/* Background Pulse Animation */
[data-theme="cyber"] .preview-placeholder::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 243, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: cyberPulse 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes cyberPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Content Containers */
[data-theme="cyber"] .preview-placeholder,
[data-theme="cyber"] .qingzhi-container,
[data-theme="cyber"] .taisha-page,
[data-theme="cyber"] .photos-page,
[data-theme="cyber"] .article-reader,
[data-theme="cyber"] #admin-panel-container,
[data-theme="cyber"] #photos-container,
[data-theme="cyber"] #taisha-container,
[data-theme="cyber"] #article-reader-container {
    background: transparent !important;
    /* Let body grid show through */
    color: var(--theme-text);
}

[data-theme="cyber"] .preview-placeholder h2 {
    color: white;
    text-shadow: 0 0 10px var(--theme-glow);
    font-weight: 500;
    letter-spacing: 2px;
}

[data-theme="cyber"] .preview-placeholder p {
    color: var(--theme-text-secondary);
    letter-spacing: 0.5px;
}

/* Cards & Panels - Uniform Glass & Glow */
[data-theme="cyber"] .modal-container,
[data-theme="cyber"] .modal-content,
[data-theme="cyber"] .stats-panel,
[data-theme="cyber"] .filter-section,
[data-theme="cyber"] .report-card,
[data-theme="cyber"] .score-panel,
[data-theme="cyber"] .question-card,
[data-theme="cyber"] .soc-result-card,
[data-theme="cyber"] .history-card,
[data-theme="cyber"] .admin-card,
[data-theme="cyber"] .article-card,
[data-theme="cyber"] .photo-card {
    background: var(--theme-panel-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    /* Consistency */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

/* Typography Headings */
[data-theme="cyber"] h1,
[data-theme="cyber"] h2,
[data-theme="cyber"] h3,
[data-theme="cyber"] .modal-header h3,
[data-theme="cyber"] .qingzhi-header h2,
[data-theme="cyber"] .taisha-header h2,
[data-theme="cyber"] .photos-header h2,
[data-theme="cyber"] .article-content-header h1,
[data-theme="cyber"] .admin-header-content h1,
[data-theme="cyber"] .sys-stat .stat-val {
    color: var(--theme-primary) !important;
    text-shadow: 0 0 10px var(--theme-glow);
    font-weight: 500;
}

/* Modal Specifics */
[data-theme="cyber"] .modal-header {
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.1), transparent) !important;
    border-bottom: 1px solid var(--theme-border);
    border-radius: 4px 4px 0 0;
}

[data-theme="cyber"] .modal-body,
[data-theme="cyber"] .modal-actions,
[data-theme="cyber"] .modal-footer {
    background: transparent !important;
    color: var(--theme-text);
    border-top-color: var(--theme-border);
}

[data-theme="cyber"] .modal-tips {
    background: rgba(0, 243, 255, 0.05);
    border: 1px solid var(--theme-border);
}

/* Form Elements - Tech Style */
[data-theme="cyber"] input,
[data-theme="cyber"] select,
[data-theme="cyber"] textarea,
[data-theme="cyber"] .report-note-inline-input {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--theme-border) !important;
    color: var(--theme-text) !important;
    border-radius: 2px;
    font-family: inherit;
}

[data-theme="cyber"] input:focus,
[data-theme="cyber"] select:focus,
[data-theme="cyber"] textarea:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 10px var(--theme-glow);
    background: rgba(0, 243, 255, 0.05) !important;
    outline: none;
}

[data-theme="cyber"] ::placeholder {
    color: rgba(139, 155, 180, 0.5);
}

/* Minimal Theme - Admin Panel & Consent Form Overrides */
[data-theme="minimal"] .admin-header-content h1,
[data-theme="minimal"] .consent-header h1 {
    background: var(--theme-primary-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: 800;
}

[data-theme="minimal"] .admin-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

[data-theme="minimal"] .admin-card-header {
    background: transparent;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

[data-theme="minimal"] .admin-card-header h3 {
    color: #1e293b;
    font-weight: 700;
    display: flex;
    align-items: center;
}

[data-theme="minimal"] .admin-card-header h3 i {
    background: var(--theme-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: 10px;
}

[data-theme="minimal"] .gradient-header {
    background: transparent !important;
    /* Override default gradient */
}

[data-theme="minimal"] .btn-action-primary,
[data-theme="minimal"] .admin-tab.active {
    background: var(--theme-primary-gradient);
    border: none;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
    color: white;
}

/* Minimal Theme - Consent Form */
[data-theme="minimal"] .consent-header h1 {
    background: var(--theme-primary-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: 800;
}

[data-theme="minimal"] .consent-intro {
    background: rgba(240, 249, 255, 0.8);
    border-left: 4px solid #38bdf8;
    color: #0c4a6e;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

[data-theme="minimal"] .section-number {
    background: var(--theme-primary-gradient);
    color: white;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    margin-right: 12px;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(56, 189, 248, 0.4);
}

[data-theme="minimal"] .consent-section h2 {
    display: flex;
    align-items: center;
    color: #1e293b;
}

[data-theme="minimal"] .btn-consent-submit:not(:disabled) {
    background: var(--theme-primary-gradient);
    border: none;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.4);
    transition: transform 0.2s;
}

[data-theme="minimal"] .btn-consent-submit:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
}

[data-theme="minimal"] .signature-canvas-area {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 16px;
    border: 1px dashed #cbd5e1;
}

/* Minimal Theme - History & Report Cards */
[data-theme="minimal"] .history-card,
[data-theme="minimal"] .report-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid white;
    box-shadow: 0 4px 15px rgba(0, 198, 251, 0.15);
    /* Soft blue glow */
    border-left: 4px solid #00c6fb;
    /* Accent border */
    transition: all 0.3s ease;
}

[data-theme="minimal"] .history-card:hover,
[data-theme="minimal"] .report-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 198, 251, 0.3);
    /* Stronger glow on hover */
    border-left-color: #005bea;
}

[data-theme="minimal"] .history-score,
[data-theme="minimal"] .stat-value,
[data-theme="minimal"] .page-title,
[data-theme="minimal"] .export-title i,
[data-theme="minimal"] .export-title {
    background: var(--theme-primary-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: 800;
}

[data-theme="minimal"] .export-title {
    display: inline-flex;
    /* Ensure background-clip works on wrapper if needed, though text-fill handles text */
    align-items: center;
}

[data-theme="minimal"] .btn-edit,
[data-theme="minimal"] .btn-cancel,
[data-theme="minimal"] .btn-cancel-focus {
    background: rgba(241, 245, 249, 0.8);
    color: #64748b;
    border: 1px solid transparent;
}

[data-theme="minimal"] .btn-edit:hover,
[data-theme="minimal"] .btn-cancel:hover,
[data-theme="minimal"] .btn-cancel-focus:hover {
    background: white;
    border-color: #cbd5e1;
    color: #334155;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Buttons - "Tech Btn" Style */
[data-theme="cyber"] .btn-primary,
[data-theme="cyber"] .btn-save-profile,
[data-theme="cyber"] .btn-calculate,
[data-theme="cyber"] .btn-save,
[data-theme="cyber"] .modal-btn-primary {
    background: transparent;
    color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    border-radius: 2px;
    /* Sharper */
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
    transition: 0.3s;
    letter-spacing: 1px;
}

[data-theme="cyber"] .btn-primary:hover,
[data-theme="cyber"] .btn-save-profile:hover,
[data-theme="cyber"] .btn-calculate:hover,
[data-theme="cyber"] .btn-save:hover,
[data-theme="cyber"] .modal-btn-primary:hover {
    background: var(--theme-primary);
    color: #000;
    box-shadow: 0 0 30px var(--theme-glow);
    transform: translateY(-1px);
}

[data-theme="cyber"] .btn-secondary,
[data-theme="cyber"] .btn-reset,
[data-theme="cyber"] .modal-btn-secondary {
    background: transparent;
    border: 1px solid var(--theme-text-secondary);
    color: var(--theme-text-secondary);
    border-radius: 2px;
}

[data-theme="cyber"] .btn-secondary:hover,
[data-theme="cyber"] .btn-reset:hover,
[data-theme="cyber"] .modal-btn-secondary:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* Scrollbar */
[data-theme="cyber"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[data-theme="cyber"] ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="cyber"] ::-webkit-scrollbar-thumb {
    background: var(--theme-primary);
    border-radius: 3px;
    box-shadow: 0 0 5px var(--theme-glow);
}

/* Sub-page Specifics */
[data-theme="cyber"] .qingzhi-header h2::after {
    background: linear-gradient(to right, #00f3ff, #00a8ff);
    box-shadow: 0 0 10px var(--theme-glow);
}

[data-theme="cyber"] .qingzhi-cover-wrapper {
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.15);
    border: 1px solid rgba(0, 243, 255, 0.2);
}

[data-theme="cyber"] .article-content blockquote {
    border-left: 4px solid var(--theme-primary);
    background: rgba(0, 243, 255, 0.05);
    color: var(--theme-text-secondary);
}

[data-theme="cyber"] .photo-date {
    background: rgba(0, 243, 255, 0.1);
    color: var(--theme-primary);
    border: 1px solid rgba(0, 243, 255, 0.3);
}

[data-theme="cyber"] .admin-tab {
    background: rgba(0, 0, 0, 0.5);
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 2px;
}

[data-theme="cyber"] .admin-tab.active {
    background: rgba(0, 243, 255, 0.15);
    color: var(--theme-primary);
    border-color: var(--theme-primary);
    box-shadow: 0 0 10px var(--theme-glow);
}

[data-theme="cyber"] .stat-value {
    font-family: Consolas, monospace;
}

/* Table Enhancements */
[data-theme="cyber"] th {
    background: rgba(0, 243, 255, 0.1);
    color: var(--theme-primary);
    letter-spacing: 1px;
}

/* ==================== Ethereal Daylight (以太晨光) ==================== */
[data-theme="ethereal"] {
    /* Backgrounds: Paper & Morning Light */
    --theme-bg: #f8fafc;
    --theme-bg-gradient: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    --theme-panel-bg: rgba(255, 255, 255, 0.75);
    --theme-sidebar-bg: rgba(255, 255, 255, 0.82);
    --theme-card-bg: rgba(255, 255, 255, 0.85);

    /* Colors: Bio-Teal & Lavender */
    --theme-primary: #0ea5e9;
    /* Sky Blue */
    --theme-primary-gradient: linear-gradient(135deg, #0ea5e9 0%, #2dd4bf 100%);
    --theme-secondary: #8b5cf6;

    /* Text: Slate scale */
    --theme-text: #1e293b;
    /* Slate 800 */
    --theme-text-secondary: #64748b;
    /* Slate 500 */
    --theme-border: rgba(255, 255, 255, 0.6);

    /* Shadows & Glows */
    --theme-shadow-sm: 0 2px 8px -2px rgba(148, 163, 184, 0.15);
    --theme-shadow-lg: 0 20px 40px -10px rgba(148, 163, 184, 0.2);
    --theme-glow: 0 0 20px rgba(14, 165, 233, 0.15);

    /* Fonts & Radius */
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Inter', sans-serif;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 10px;
}

[data-theme="ethereal"] body {
    background: var(--theme-bg);
    background-image: var(--theme-bg-gradient);
    font-family: var(--font-body);
    color: var(--theme-text);
}

/* Texture Overlay */
[data-theme="ethereal"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: multiply;
}

[data-theme="ethereal"] h1,
[data-theme="ethereal"] h2,
[data-theme="ethereal"] h3,
[data-theme="ethereal"] .logo-title,
[data-theme="ethereal"] .welcome-title,
[data-theme="ethereal"] .page-title {
    font-family: var(--font-display);
    font-weight: 600;
}

[data-theme="ethereal"] .sidebar,
[data-theme="ethereal"] .main-content,
[data-theme="ethereal"] .stats-panel,
[data-theme="ethereal"] .card,
[data-theme="ethereal"] .admin-card,
[data-theme="ethereal"] .history-card,
[data-theme="ethereal"] .report-card,
[data-theme="ethereal"] .soc-result-card {
    background: var(--theme-panel-bg);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border: 1px solid white;
    box-shadow: var(--theme-shadow-sm);
    border-radius: var(--radius-lg);
}

[data-theme="ethereal"] .nav-item:hover,
[data-theme="ethereal"] .nav-item.active {
    background: linear-gradient(90deg, #f0f9ff, #fff);
    color: var(--theme-primary);
    box-shadow: var(--theme-shadow-sm);
}

[data-theme="ethereal"] .nav-item.active i {
    color: var(--theme-primary);
}

[data-theme="ethereal"] .btn-primary,
[data-theme="ethereal"] .btn-action-primary,
[data-theme="ethereal"] .btn-save-profile,
[data-theme="ethereal"] .btn-start,
[data-theme="ethereal"] .btn-login {
    background: var(--theme-primary-gradient);
    border: none;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    color: white;
}

[data-theme="ethereal"] .btn-primary:hover,
[data-theme="ethereal"] .btn-action-primary:hover,
[data-theme="ethereal"] .btn-save-profile:hover,
[data-theme="ethereal"] .btn-start:hover,
[data-theme="ethereal"] .btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4);
}

[data-theme="ethereal"] input,
[data-theme="ethereal"] select,
[data-theme="ethereal"] textarea {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    color: var(--theme-text);
    transition: all 0.3s;
}

[data-theme="ethereal"] input:focus,
[data-theme="ethereal"] select:focus,
[data-theme="ethereal"] textarea:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

/* Ethereal Specifics for Admin/History */
[data-theme="ethereal"] .admin-header-content h1,
[data-theme="ethereal"] .consent-header h1,
[data-theme="ethereal"] .page-title,
[data-theme="ethereal"] .stat-value,
[data-theme="ethereal"] .history-score {
    background: var(--theme-primary-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

[data-theme="ethereal"] .stat-item.highlight {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border: 1px solid white;
}/* ==================== 以太晨光 (Ethereal Daylight) ==================== */
[data-theme="ethereal"] {
    /* Core Variables from Reference */
    --theme-primary: #0ea5e9;
    --theme-primary-gradient: linear-gradient(135deg, #0ea5e9 0%, #2dd4bf 100%);
    --theme-bg: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);

    /* Matte Ceramic / Gel Surface */
    --theme-sidebar-bg: rgba(255, 255, 255, 0.75);
    --theme-card-bg: rgba(255, 255, 255, 0.75);

    --theme-text: #1e293b;
    --theme-text-secondary: #64748b;
    --theme-border: rgba(255, 255, 255, 0.6);

    /* Soft Diffused Shadows */
    --theme-glass-blur: 20px;
    --theme-glass-shadow: 0 20px 40px -10px rgba(148, 163, 184, 0.2);
    --theme-glow: 0 0 20px rgba(14, 165, 233, 0.15);
}

[data-theme="ethereal"] body {
    background: var(--theme-bg);
    background-attachment: fixed;
    /* Noise Texture */
    background-image: var(--theme-bg), url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    background-blend-mode: normal, multiply;
}

[data-theme="ethereal"] .sidebar {
    background: var(--theme-sidebar-bg);
    backdrop-filter: blur(var(--theme-glass-blur)) saturate(120%);
    -webkit-backdrop-filter: blur(var(--theme-glass-blur)) saturate(120%);
    border: 1px solid #fff;
    border-radius: 0;
    margin: 0;
    height: 100%;
    width: 280px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--theme-glass-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

[data-theme="ethereal"] .nav-item {
    border-radius: 10px;
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    color: var(--theme-text-secondary);
    font-weight: 500;
}

[data-theme="ethereal"] .nav-item:hover {
    background: #f1f5f9;
    color: var(--theme-text);
}

[data-theme="ethereal"] .nav-item.active {
    background: linear-gradient(90deg, #f0f9ff, #fff);
    color: var(--theme-primary);
    box-shadow: 0 2px 8px -2px rgba(148, 163, 184, 0.15);
    border-left: none;
    /* Reset distinct style */
}

/* Content Containers */
[data-theme="ethereal"] .preview-placeholder,
[data-theme="ethereal"] .qingzhi-container,
[data-theme="ethereal"] .taisha-page,
[data-theme="ethereal"] .photos-page,
[data-theme="ethereal"] .article-reader,
[data-theme="ethereal"] #admin-panel-container,
[data-theme="ethereal"] #photos-container,
[data-theme="ethereal"] #taisha-container,
[data-theme="ethereal"] #article-reader-container {
    background: transparent !important;
    color: var(--theme-text);
}

[data-theme="ethereal"] .main-content {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid #fff;
    border-radius: 24px;
    box-shadow: var(--theme-glass-shadow);
}

/* Cards & Modals - Matte Ceramic Look */
[data-theme="ethereal"] .modal-container,
[data-theme="ethereal"] .modal-content,
[data-theme="ethereal"] .stats-panel,
[data-theme="ethereal"] .filter-section,
[data-theme="ethereal"] .report-card,
[data-theme="ethereal"] .score-panel,
[data-theme="ethereal"] .question-card,
[data-theme="ethereal"] .soc-result-card,
[data-theme="ethereal"] .history-card,
[data-theme="ethereal"] .admin-card,
[data-theme="ethereal"] .article-card,
[data-theme="ethereal"] .photo-card {
    background: var(--theme-card-bg) !important;
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border: 1px solid #fff;
    border-radius: 16px;
    box-shadow: var(--theme-glass-shadow);
}

[data-theme="ethereal"] .modal-header {
    border-bottom: 1px solid #f1f5f9;
    background: transparent !important;
}

[data-theme="ethereal"] .modal-header h3,
[data-theme="ethereal"] h1,
[data-theme="ethereal"] h2,
[data-theme="ethereal"] h3 {
    color: var(--theme-text);
    font-weight: 600;
    letter-spacing: -0.5px;
}

/* Buttons */
[data-theme="ethereal"] .btn-primary,
[data-theme="ethereal"] .btn-save-profile,
[data-theme="ethereal"] .btn-calculate,
[data-theme="ethereal"] .btn-save,
[data-theme="ethereal"] .modal-btn-primary {
    background: var(--theme-primary-gradient);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-theme="ethereal"] .btn-primary:hover,
[data-theme="ethereal"] .btn-save-profile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4);
}

/* Inputs */
[data-theme="ethereal"] input,
[data-theme="ethereal"] select,
[data-theme="ethereal"] textarea {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: var(--theme-text);
    border-radius: 10px;
    padding: 12px 16px;
}

[data-theme="ethereal"] input:focus,
[data-theme="ethereal"] select:focus,
[data-theme="ethereal"] textarea:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
    outline: none;
}

/* Specific Page Adaptations */
[data-theme="ethereal"] .user-profile {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    margin-top: auto;
    flex-shrink: 0;
}

[data-theme="ethereal"] .logo-title {
    background: none;
    -webkit-text-fill-color: var(--theme-text);
    color: var(--theme-text);
}

[data-theme="ethereal"] .sidebar-logo-svg g {
    stroke: var(--theme-primary) !important;
    filter: none !important;
}

[data-theme="ethereal"] .sidebar-logo-svg circle {
    fill: var(--theme-primary) !important;
}
/* ==================== 以太晨光 (Ethereal Daylight) - Refined ==================== */
[data-theme="ethereal"] {
    /* Core Variables */
    --theme-primary: #0ea5e9;
    --theme-primary-gradient: linear-gradient(135deg, #0ea5e9 0%, #2dd4bf 100%);
    --theme-bg: #f8fafc;
    /* Main background base */
    --theme-bg-gradient: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);

    /* Matte Ceramic / Gel Surface */
    --theme-glass-surface: rgba(255, 255, 255, 0.85);
    --theme-glass-border: rgba(255, 255, 255, 0.6);
    --theme-radius-lg: 24px;
    --theme-radius-md: 16px;

    --theme-text: #1e293b;
    --theme-text-secondary: #64748b;

    /* Soft Diffused Shadows */
    --theme-shadow-sm: 0 2px 8px -2px rgba(148, 163, 184, 0.15);
    --theme-shadow-lg: 0 20px 40px -10px rgba(148, 163, 184, 0.2);
    --theme-blur: 20px;
}

[data-theme="ethereal"] body {
    background: var(--theme-bg);
    background-image: var(--theme-bg-gradient);
    background-attachment: fixed;
    color: var(--theme-text);
}

/* Noise Texture Overlay */
[data-theme="ethereal"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: multiply;
}

/* ==================== LAYOUT OVERRIDES ==================== */

/* Detached Sidebar - Floating Card Look */
[data-theme="ethereal"] .dashboard-container {
    gap: 24px;
    padding: 24px;
    background: transparent;
}

[data-theme="ethereal"] .sidebar {
    background: var(--theme-glass-surface);
    backdrop-filter: blur(var(--theme-blur)) saturate(120%);
    -webkit-backdrop-filter: blur(var(--theme-blur)) saturate(120%);
    border: 1px solid #fff;
    border-radius: var(--theme-radius-lg);
    box-shadow: var(--theme-shadow-sm);
    /* 侧边栏全高并使用flex布局 */
    height: 100vh;
    width: 280px;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Main Content Area - Transparent or Card? 
   The main content area itself is usually a container for pages.
   For Ethereal, we want the PAGES to look like cards, OR the main content wrapper.
   If we want the "Floating Card" look shown in the screenshot for the content area:
*/
[data-theme="ethereal"] .main-content {
    background: transparent;
    /* Let body bg show through */
    border-radius: var(--theme-radius-lg);
    /* No border or shadow on the wrapper, apply to children */
    overflow: hidden;
}

/* ==================== COMPONENT OVERRIDES ==================== */

/* Consent Page Card - The White Sheet Look */
[data-theme="ethereal"] .consent-page {
    background: var(--theme-glass-surface);
    backdrop-filter: blur(var(--theme-blur)) saturate(120%);
    -webkit-backdrop-filter: blur(var(--theme-blur)) saturate(120%);
    border: 1px solid #fff;
    border-radius: var(--theme-radius-lg);
    box-shadow: var(--theme-shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    margin: 0 auto;
    max-width: 1200px;
    /* Or appropriate width */
    height: 100%;
    padding: 40px;
    overflow-y: auto;
}

[data-theme="ethereal"] .consent-header h1 {
    font-family: 'Cormorant Garamond', serif;
    /* Use the serif font */
    font-weight: 600;
    font-size: 2.5rem;
    color: var(--theme-text);
    letter-spacing: -0.5px;
    margin-bottom: 0.5rem;
}

[data-theme="ethereal"] .consent-subtitle {
    font-family: 'Inter', sans-serif;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Consent Text Area - Inner Card */
[data-theme="ethereal"] .consent-document {
    background: #fff;
    /* Pure white or very light for text area */
    border: 1px solid #f1f5f9;
    border-radius: var(--theme-radius-md);
    padding: 0;
    /* Reset */
    box-shadow: none;
    /* Flat inside the glass card? Or inner shadow? */
}

/* Actually, looking at the reference HTML, the .login-container is the card.
   So .consent-page should be the main card. 
   Inside it, specific sections might just be layout blocks.
*/

/* Back Button */
[data-theme="ethereal"] .consent-back-btn {
    color: var(--theme-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.3s;
}

[data-theme="ethereal"] .consent-back-btn:hover {
    color: var(--theme-primary);
    background: rgba(14, 165, 233, 0.1);
    border-color: rgba(14, 165, 233, 0.2);
}

/* Navigation Items on Sidebar */
[data-theme="ethereal"] .nav-item {
    color: var(--theme-text-secondary);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    font-weight: 500;
}

[data-theme="ethereal"] .nav-item:hover {
    background: #f1f5f9;
    color: var(--theme-text);
    transform: translateX(4px);
}

[data-theme="ethereal"] .nav-item.active {
    background: linear-gradient(90deg, #f0f9ff, #fff);
    color: var(--theme-primary);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
    border-left: none;
    /* Remove Classic/Minimal borders */
}

[data-theme="ethereal"] .nav-item.active i {
    color: var(--theme-primary);
}

/* User Profile in Sidebar */
[data-theme="ethereal"] .user-profile {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 0 0 12px 12px;
    margin-top: auto;
    flex-shrink: 0;
}

/* Buttons */
[data-theme="ethereal"] .btn-primary,
[data-theme="ethereal"] .btn-consent-submit {
    background: var(--theme-primary-gradient);
    color: white;
    box-shadow: 0 10px 20px -5px rgba(14, 165, 233, 0.4);
    border: none;
    border-radius: 12px;
}

[data-theme="ethereal"] .btn-primary:hover,
[data-theme="ethereal"] .btn-consent-submit:hover {
    box-shadow: 0 15px 30px -5px rgba(14, 165, 233, 0.6);
    transform: translateY(-2px);
}

/* Admin Panel Cards */
[data-theme="ethereal"] .admin-card {
    background: var(--theme-glass-surface);
    backdrop-filter: blur(20px);
    border: 1px solid #fff;
    border-radius: var(--theme-radius-md);
    box-shadow: var(--theme-shadow-sm);
}

/* Ensure inputs match the theme */
[data-theme="ethereal"] input,
[data-theme="ethereal"] select,
[data-theme="ethereal"] textarea {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: var(--theme-text);
    border-radius: 10px;
    transition: all 0.3s;
}

[data-theme="ethereal"] input:focus,
[data-theme="ethereal"] select:focus,
[data-theme="ethereal"] textarea:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
    background: #fff;
}
/* ==================== Ethereal Mobile Sidebar Fix ==================== */
@media screen and (max-width: 768px) {
    [data-theme="ethereal"] .sidebar {
        /* Reset floating behavior on mobile */
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        /* Ensure it behaves like a drawer */
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 1000;
        /* Revert to standard mobile sidebar width if needed */
        width: 250px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    [data-theme="ethereal"] .sidebar.show {
        transform: translateX(0);
    }

    /* Ensure content doesn't break */
    [data-theme="ethereal"] .dashboard-container {
        padding: 0 !important;
        gap: 0 !important;
        display: block;
        /* Stack layout on mobile */
    }

    [data-theme="ethereal"] .main-content {
        border-radius: 0 !important;
        height: 100vh;
        overflow-y: auto;
    }
}
/* ==================== Cyber Theme Sidebar Fix ==================== */
[data-theme="cyber"] .user-profile {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
    border-top: 1px solid var(--theme-border);
}

[data-theme="cyber"] .user-name {
    color: var(--theme-text);
}

[data-theme="cyber"] .user-role {
    color: var(--theme-text-secondary);
}

[data-theme="cyber"] .user-avatar {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
    color: var(--theme-primary);
    border: 1px solid var(--theme-border);
}

[data-theme="cyber"] .sidebar-resource-list {
    background-color: rgba(12, 20, 35, 0.5);
    border: 1px solid var(--theme-border);
}

[data-theme="cyber"] .sidebar-resource-list .resource-item {
    background: transparent;
    color: var(--theme-text-secondary);
    border: 1px solid transparent;
}

[data-theme="cyber"] .sidebar-resource-list .resource-item:hover {
    background: rgba(0, 243, 255, 0.05);
    color: white;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
    border-color: var(--theme-primary-dim);
}

[data-theme="cyber"] .sidebar-resource-list .resource-item.active {
    background: rgba(0, 243, 255, 0.15);
    border-color: var(--theme-primary);
    color: white;
    box-shadow: 0 0 10px var(--theme-glow);
}

[data-theme="cyber"] .sidebar-resource-list .resource-title {
    color: inherit;
}

[data-theme="cyber"] .sidebar-resource-list .empty-resource-hint {
    color: var(--theme-text-secondary);
    text-shadow: none;
}
/* ==================== Cyber SOC Page Upgrade (Less "Gray", More "Neon") ==================== */

/* 1. Main Background - Deepen the darkness */
[data-theme="cyber"] .question-card,
[data-theme="cyber"] .soc-result-card,
[data-theme="cyber"] .score-panel,
[data-theme="cyber"] .history-card {
    background: rgba(5, 11, 20, 0.85) !important;
    /* Much darker background */
    border: 1px solid rgba(0, 243, 255, 0.3) !important;
    /* Brighter neon border */
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.1), inset 0 0 20px rgba(0, 243, 255, 0.05) !important;
    backdrop-filter: blur(10px);
}

/* 2. Result Card Specifics */
[data-theme="cyber"] .soc-result-card .result-header {
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.1), transparent) !important;
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
}

[data-theme="cyber"] .current-score-display {
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.8);
}

[data-theme="cyber"] .score-value {
    color: #fff !important;
    text-shadow: 0 0 10px #00f3ff, 0 0 20px #00f3ff;
}

/* 3. Question Cards */
[data-theme="cyber"] .question-number {
    background: linear-gradient(135deg, #00f3ff, #00a8ff) !important;
    color: #000 !important;
    /* Black text on neon blue for high contrast */
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
    font-weight: 800;
}

[data-theme="cyber"] .question-text {
    color: #e0e6ed !important;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* 4. Score Input Control - Make it pop */
[data-theme="cyber"] .score-control {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(0, 243, 255, 0.3) !important;
}

[data-theme="cyber"] .score-btn {
    color: #00f3ff !important;
    background: rgba(0, 243, 255, 0.1) !important;
    border: 1px solid rgba(0, 243, 255, 0.2) !important;
}

[data-theme="cyber"] .score-btn:hover {
    background: #00f3ff !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.6);
}

[data-theme="cyber"] .score-input {
    color: #fff !important;
    font-weight: bold;
    background: transparent !important;
}

/* 5. Score Legend Cards (Low/Med/High Risk) */
[data-theme="cyber"] .score-legend-item {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="cyber"] .score-legend-item:hover {
    background: rgba(0, 243, 255, 0.05) !important;
    border-color: rgba(0, 243, 255, 0.4);
}

/* 6. Typography adjustments for readability */
[data-theme="cyber"] .monitor-label {
    color: #8b9bb4 !important;
}

[data-theme="cyber"] .monitor-value {
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.5);
}
/* ==================== Cyber SOC Redesign (Neon Glass) ==================== */

/* Force darker background for the main container if possible */
[data-theme="cyber"] .soc-container,
[data-theme="cyber"] #soc-content {
    background: transparent !important;
}

/* Question Cards & Result Card - Deep Glass Stye */
[data-theme="cyber"] .question-card,
[data-theme="cyber"] .soc-result-card,
[data-theme="cyber"] .score-panel,
[data-theme="cyber"] .history-card {
    background: rgba(5, 11, 20, 0.95) !important;
    /* Almost opaque black/navy */
    border: 1px solid #00f3ff !important;
    /* Solid neon cyan border */
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.15), inset 0 0 30px rgba(0, 243, 255, 0.05) !important;
    backdrop-filter: blur(15px) !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
    color: #fff !important;
}

/* Typography Overrides */
[data-theme="cyber"] .question-text {
    color: #fff !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8) !important;
    opacity: 1 !important;
}

[data-theme="cyber"] .monitor-label {
    color: #94a3b8 !important;
    /* Lighter slate for labels */
}

/* Input Fields - High Contrast */
[data-theme="cyber"] .score-control {
    background: #000 !important;
    border: 1px solid #00f3ff !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1) !important;
}

[data-theme="cyber"] .score-input {
    color: #00f3ff !important;
    font-family: 'Courier New', monospace !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

[data-theme="cyber"] .score-btn {
    background: rgba(0, 243, 255, 0.15) !important;
    color: #00f3ff !important;
    border: 1px solid rgba(0, 243, 255, 0.3) !important;
}

[data-theme="cyber"] .score-btn:hover {
    background: #00f3ff !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.5) !important;
}

/* Result Header Gradient */
[data-theme="cyber"] .result-header {
    background: linear-gradient(180deg, rgba(0, 243, 255, 0.1) 0%, transparent 100%) !important;
    border-bottom: 1px solid rgba(0, 243, 255, 0.3) !important;
}

[data-theme="cyber"] .total-score-value {
    color: #00f3ff !important;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.8) !important;
}

/* Floating Action Button / Reset Button */
[data-theme="cyber"] .btn-calculate,
[data-theme="cyber"] .btn-reset {
    background: linear-gradient(135deg, #00f3ff 0%, #0066ff 100%) !important;
    color: #000 !important;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.4) !important;
    border: none !important;
}
/* ==================== Cyber Theme OVERHAUL (v2.0) ==================== */
/* Design Spec: Deep Space, Neon Glass, Glitch Tech */

[data-theme="cyber"] {
    /* --- 1. Color Palette --- */
    /* Deep Backgrounds (Not Pure Black) */
    --theme-bg-base: #0D0D15;
    --theme-bg-deep: #050508;

    /* Neon Accents */
    --theme-neon-cyan: #00FFFF;
    --theme-neon-magenta: #FF00FF;
    --theme-neon-green: #00FF41;
    /* Matrix Green for subtle details */

    /* Gradients */
    --theme-grad-primary: linear-gradient(135deg, #FF00FF 0%, #00FFFF 100%);
    --theme-grad-hover: linear-gradient(135deg, #00FFFF 0%, #FF00FF 100%);

    /* Glassmorphism Variables */
    --theme-glass-bg: rgba(255, 255, 255, 0.03);
    --theme-glass-border: rgba(0, 255, 255, 0.2);
    --theme-glass-blur: 12px;

    /* Shadows & Glows */
    --theme-glow-sm: 0 0 5px rgba(0, 255, 255, 0.3);
    --theme-glow-md: 0 0 15px rgba(0, 255, 255, 0.2);
    --theme-glow-text: 0 0 8px rgba(0, 255, 255, 0.6);

    /* --- typography --- */
    --font-heading: 'Orbitron', 'Rajdhani', sans-serif;
    --font-mono: 'JetBrains Mono', 'Roboto Mono', monospace;
}

/* --- 2. Global Resets & Typography --- */
[data-theme="cyber"] body {
    background-color: var(--theme-bg-base);
    background-image:
        radial-gradient(circle at 10% 20%, rgba(13, 13, 21, 1) 0%, transparent 60%),
        radial-gradient(circle at 90% 80%, rgba(5, 5, 8, 1) 0%, transparent 60%),
        /* Subtle colored bokeh spots */
        radial-gradient(circle at 80% 10%, rgba(255, 0, 255, 0.05) 0%, transparent 20%),
        radial-gradient(circle at 20% 90%, rgba(0, 255, 255, 0.05) 0%, transparent 20%);
    background-attachment: fixed;
    color: #E0E0E0;
    font-family: var(--font-heading);
}

[data-theme="cyber"] h1,
[data-theme="cyber"] h2,
[data-theme="cyber"] h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 2px;
    background: var(--theme-grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
}

/* --- 3. Component Styling: The Glass Cards --- */
[data-theme="cyber"] .sidebar,
[data-theme="cyber"] .admin-card,
[data-theme="cyber"] .modal-container,
[data-theme="cyber"] .question-card,
[data-theme="cyber"] .soc-result-card,
[data-theme="cyber"] .score-panel,
[data-theme="cyber"] .history-card,
[data-theme="cyber"] .article-card,
[data-theme="cyber"] .photo-card,
[data-theme="cyber"] .filter-section {
    background: var(--theme-glass-bg) !important;
    backdrop-filter: blur(var(--theme-glass-blur));
    -webkit-backdrop-filter: blur(var(--theme-glass-blur));
    border: 1px solid var(--theme-glass-border) !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    /* Reset previous overrides if any */
    color: #fff;
}

/* Hover Effect for Cards (Subtle Glitch/Glow boost) */
[data-theme="cyber"] .card:hover,
[data-theme="cyber"] .admin-card:hover,
[data-theme="cyber"] .question-card:hover {
    border-color: rgba(0, 255, 255, 0.5) !important;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2) !important;
}

/* --- 4. DATA & MONOSPACE Content --- */
[data-theme="cyber"] .question-text,
[data-theme="cyber"] .data-value,
[data-theme="cyber"] .score-value,
[data-theme="cyber"] input,
[data-theme="cyber"] textarea,
[data-theme="cyber"] select {
    font-family: var(--font-mono) !important;
}

/* Inputs styling */
[data-theme="cyber"] input,
[data-theme="cyber"] textarea,
[data-theme="cyber"] select {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 0, 255, 0.3) !important;
    color: var(--theme-neon-cyan) !important;
    transition: all 0.3s;
}

[data-theme="cyber"] input:focus,
[data-theme="cyber"] textarea:focus {
    border-color: var(--theme-neon-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

/* --- 5. BUTTONS: Gradient & Glitch --- */
[data-theme="cyber"] .btn-primary,
[data-theme="cyber"] .btn-action-primary,
[data-theme="cyber"] button[class*="primary"] {
    background: var(--theme-grad-primary) !important;
    border: none !important;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    font-weight: 700;
    color: #000 !important;
    /* Contrast against bright gradient */
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}

[data-theme="cyber"] .btn-primary:hover::before {
    /* Glitch effect overlay on hover (simplified CSS version) */
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: glitch-anim 0.3s linear infinite;
}

/* --- 6. NAVIGATION --- */
[data-theme="cyber"] .sidebar {
    border-right: 1px solid var(--theme-glass-border);
}

[data-theme="cyber"] .nav-item {
    font-family: var(--font-heading);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
}

[data-theme="cyber"] .nav-item:hover {
    background: rgba(255, 0, 255, 0.05);
    border: 1px solid rgba(255, 0, 255, 0.3);
    color: #fff;
}

[data-theme="cyber"] .nav-item.active {
    background: rgba(255, 0, 255, 0.1) !important;
    border: 1px solid var(--theme-neon-magenta);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.2);
    text-shadow: 0 0 5px var(--theme-neon-magenta);
}

[data-theme="cyber"] .nav-item i {
    filter: drop-shadow(0 0 2px rgba(0, 255, 255, 0.5));
}

/* --- 7. SPECIAL ELEMENTS: SOC SCORE --- */
[data-theme="cyber"] .current-score-display {
    border: 2px solid var(--theme-neon-cyan) !important;
    background: rgba(0, 255, 255, 0.05);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.2), inset 0 0 20px rgba(0, 255, 255, 0.1);
}

[data-theme="cyber"] .score-value {
    color: var(--theme-neon-cyan) !important;
    text-shadow: 0 0 15px var(--theme-neon-cyan);
}

/* User Profile Sidebar Fix (Cyber) */
[data-theme="cyber"] .user-profile {
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid var(--theme-glass-border);
}

[data-theme="cyber"] .user-avatar {
    background: transparent;
    border: 1px solid var(--theme-neon-magenta);
    box-shadow: 0 0 5px var(--theme-neon-magenta);
    color: var(--theme-neon-magenta);
}

/* --- ANIMATIONS --- */
@keyframes glitch-anim {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

/* Scrollbars */
[data-theme="cyber"] ::-webkit-scrollbar-thumb {
    background: var(--theme-grad-primary);
    border-radius: 4px;
}

[data-theme="cyber"] ::-webkit-scrollbar-track {
    background: #000;
}
/* ==================== Cyber Theme NUCLEAR REPAIR ==================== */
/* Forcing overrides on persistent white backgrounds */

/* 1. Global Reset for Cyber Theme */
[data-theme="cyber"] .dashboard-container,
[data-theme="cyber"] .main-content,
[data-theme="cyber"] .admin-dashboard,
[data-theme="cyber"] .admin-content-wrapper,
[data-theme="cyber"] #admin-panel-container {
    background: transparent !important;
    background-color: transparent !important;
}

[data-theme="cyber"] .sidebar {
    background: rgba(13, 13, 21, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    border-right: 1px solid rgba(0, 255, 255, 0.2) !important;
}

/* 2. Admin Panel Specifics - Killing the White */
[data-theme="cyber"] .admin-card,
[data-theme="cyber"] .admin-side-area .admin-card,
[data-theme="cyber"] .admin-main-area .admin-card,
[data-theme="cyber"] .stat-card {
    background: rgba(13, 13, 21, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* The resource list container specifically */
[data-theme="cyber"] .resource-list-container,
[data-theme="cyber"] .admin-table-wrapper,
[data-theme="cyber"] .table-container {
    background: transparent !important;
}

/* 3. Table Headers & Rows */
[data-theme="cyber"] .admin-table th,
[data-theme="cyber"] .resource-table-layout th {
    background: rgba(0, 255, 255, 0.1) !important;
    color: #00FFFF !important;
    /* Cyan Text */
    border-bottom: 1px solid rgba(0, 255, 255, 0.3) !important;
}

[data-theme="cyber"] .admin-table td,
[data-theme="cyber"] .resource-table-layout td {
    background: transparent !important;
    color: #E0E0E0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="cyber"] .admin-table tr:hover td {
    background: rgba(0, 255, 255, 0.05) !important;
}

/* 4. Inputs inside Admin Panel */
[data-theme="cyber"] .admin-dashboard input,
[data-theme="cyber"] .admin-dashboard select,
[data-theme="cyber"] .admin-dashboard textarea,
[data-theme="cyber"] .search-bar input {
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: #00FFFF !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
}

/* 5. Sidebar Items - 默认状态使用较暗的颜色 */
[data-theme="cyber"] .nav-item:not(.active) {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="cyber"] .nav-item:not(.active) i {
    color: rgba(0, 243, 255, 0.5);
}

/* 6. Text Colors */
[data-theme="cyber"] h1,
[data-theme="cyber"] h2,
[data-theme="cyber"] h3,
[data-theme="cyber"] .card-title,
[data-theme="cyber"] .admin-card-header h3 {
    color: #fff !important;
    /* Force white headings */
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

[data-theme="cyber"] .text-muted,
[data-theme="cyber"] .stat-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 7. Buttons */
[data-theme="cyber"] .btn-primary {
    background: linear-gradient(135deg, #FF00FF 0%, #00FFFF 100%) !important;
    color: #000 !important;
    font-weight: bold;
}

[data-theme="cyber"] .btn-secondary,
[data-theme="cyber"] .btn-action {
    background: rgba(0, 0, 0, 0.5) !important;
    color: #00FFFF !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
}

[data-theme="cyber"] .btn-secondary:hover {
    background: rgba(0, 255, 255, 0.2) !important;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}
/* ==================== Cyber Theme FINAL POLISH ==================== */
/* Objective: Remove "Gray/Misty" look. Force DEEP BLACK content. */

[data-theme="cyber"] {
    /* Redefine glass var to be dark, not white-ish */
    --theme-glass-bg: rgba(0, 0, 5, 0.85) !important;
    --theme-glass-border: rgba(0, 255, 255, 0.3) !important;
}

/* 1. Force sidebar and cards to be DARK, not Gray */
[data-theme="cyber"] .sidebar,
[data-theme="cyber"] .admin-card,
[data-theme="cyber"] .stat-card,
[data-theme="cyber"] .question-card,
[data-theme="cyber"] .soc-result-card,
[data-theme="cyber"] .score-panel,
[data-theme="cyber"] .history-card {
    /* Use pure black with slight transparency, NO white mix */
    background: rgba(2, 2, 8, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 243, 255, 0.2) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8) !important;
    /* Heavy black shadow */
}

/* 2. Remove any lingering white backgrounds in lists */
[data-theme="cyber"] .resource-list-item,
[data-theme="cyber"] .user-item,
[data-theme="cyber"] .admin-table tr {
    background: transparent !important;
}

[data-theme="cyber"] .resource-list-item:hover,
[data-theme="cyber"] .admin-table tr:hover td {
    background: rgba(0, 255, 255, 0.1) !important;
    /* Cyan highlight, not gray */
}

/* 3. Darken Inputs further */
[data-theme="cyber"] input,
[data-theme="cyber"] select,
[data-theme="cyber"] textarea,
[data-theme="cyber"] .admin-search {
    background-color: #000 !important;
    /* Pure black inputs */
    color: #00ffff !important;
    border-color: #005555 !important;
}

/* 4. Fix specific "Gray" areas in Admin */
[data-theme="cyber"] .admin-header,
[data-theme="cyber"] .admin-tabs {
    background: transparent !important;
}

[data-theme="cyber"] .admin-tab.active {
    background: rgba(0, 255, 255, 0.2) !important;
    color: #fff !important;
    border: 1px solid #00ffff !important;
}

[data-theme="cyber"] .admin-tab {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #888 !important;
}

/* 5. Typography Fixes - Ensure Contrast */
[data-theme="cyber"] h1,
[data-theme="cyber"] h2,
[data-theme="cyber"] h3,
[data-theme="cyber"] h4,
[data-theme="cyber"] .admin-card-header h3 {
    text-shadow: 0 0 5px rgba(0, 0, 0, 1) !important;
    /* Shadow against background */
    color: #fff !important;
}

[data-theme="cyber"] .text-muted,
[data-theme="cyber"] .description,
[data-theme="cyber"] label {
    color: #a0a0b0 !important;
    /* Light cool gray, not dark gray */
}

/* 6. Sidebar specific fix */
[data-theme="cyber"] .sidebar {
    border-right: 1px solid rgba(0, 255, 255, 0.1) !important;
}

/* 7. Button Gradients - Make them Pop against black */
[data-theme="cyber"] .btn-primary {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3) !important;
}
/* ==================== Cyber Theme LAYOUT & COLOR FIX ==================== */

/* 1. Sidebar Footer Overflow Fix */
[data-theme="cyber"] .user-profile {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-bottom: 20px !important;
    /* Give more space */
}

/* Make action buttons (Settings/Logout) flow nicely */
[data-theme="cyber"] .user-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: space-between !important;
    margin-top: 8px !important;
}

[data-theme="cyber"] .btn-icon-only {
    flex: 1 !important;
    /* Buttons share space equally */
    width: auto !important;
    min-width: 0 !important;
}

/* 2. Unified Color Palette (No More Harsh Black/White) */
[data-theme="cyber"] {
    /* Soften the white text to a cool cyan-tinted white */
    --theme-text-main: #e0f7fa;
    --theme-text-muted: #94a3b8;
}

[data-theme="cyber"] body,
[data-theme="cyber"] h1,
[data-theme="cyber"] h2,
[data-theme="cyber"] h3,
[data-theme="cyber"] h4,
[data-theme="cyber"] .card-title,
[data-theme="cyber"] .admin-card-header h3,
[data-theme="cyber"] .question-text {
    color: var(--theme-text-main) !important;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.3) !important;
    /* Softer glow */
}

/* 3. Input Text Visibility Fix */
/* Ensure input text is bright Cyan/White and background is not pitch black */
[data-theme="cyber"] input,
[data-theme="cyber"] select,
[data-theme="cyber"] textarea {
    color: #e0f7fa !important;
    background: rgba(13, 13, 21, 0.6) !important;
    /* Slightly lighter than pitch black */
    border-color: rgba(0, 243, 255, 0.3) !important;
}

[data-theme="cyber"] input::placeholder {
    color: rgba(148, 163, 184, 0.6) !important;
}

/* 4. Right Side UI Unification */
/* Ensure all "Right Side" cards match the Sidebar's tint */
[data-theme="cyber"] .content-wrapper,
[data-theme="cyber"] .main-content {
    color: var(--theme-text-main) !important;
}

/* Soften the strong neon borders slightly to reduce eye strain */
[data-theme="cyber"] .question-card,
[data-theme="cyber"] .soc-result-card,
[data-theme="cyber"] .score-panel {
    border-color: rgba(0, 243, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}
/* ==================== Cyber Theme TARGETED COLOR FIXES ==================== */
/* Fixing specific elements highlighted in user screenshot */

/* 1. Admin Tabs ("内容管理", "添加用户" etc.) */
[data-theme="cyber"] .admin-tab {
    background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.9) 100%) !important;
    border: 1px solid rgba(0, 243, 255, 0.2) !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
}

[data-theme="cyber"] .admin-tab.active {
    background: linear-gradient(135deg, #00f3ff 0%, #0066ff 100%) !important;
    /* Neon Blue Gradient */
    color: #000 !important;
    /* Black text on bright button */
    border: none !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.4) !important;
}

/* 2. Admin Header Buttons (Like "+ Add User") */
[data-theme="cyber"] .admin-header .btn-primary {
    background: linear-gradient(135deg, #00f3ff 0%, #0066ff 100%) !important;
    color: #000 !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.3) !important;
}

/* 3. File Upload Area ("选择PDF") */
[data-theme="cyber"] .file-upload-label,
[data-theme="cyber"] #upload-drop-zone {
    background: rgba(13, 13, 21, 0.6) !important;
    border: 2px dashed rgba(0, 243, 255, 0.3) !important;
    color: #e0f7fa !important;
}

[data-theme="cyber"] .file-upload-label:hover {
    background: rgba(0, 243, 255, 0.1) !important;
    border-color: #00f3ff !important;
}

/* 4. SOC Page Background - Kill the Light Mode */
/* Force the entire SOC/Qingzhi container to be transparent or dark */
[data-theme="cyber"] .qingzhi-container,
[data-theme="cyber"] #soc-content-area,
[data-theme="cyber"] .soc-wrapper {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure SOC specific cards are dark */
[data-theme="cyber"] .soc-calculation-section,
[data-theme="cyber"] .calculation-box {
    background: rgba(2, 2, 8, 0.9) !important;
    color: #e0f7fa !important;
}

/* 5. Sidebar Active State & Highlight */
[data-theme="cyber"] .nav-item.active {
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.15) 0%, transparent 100%) !important;
    border-left: 3px solid #00f3ff !important;
    color: #fff !important;
}

[data-theme="cyber"] .nav-item.active i {
    color: #00f3ff !important;
}

/* 6. Admin Table Headers - Specific Fix */
[data-theme="cyber"] .admin-table thead th {
    background: rgba(0, 10, 20, 0.8) !important;
    color: #00f3ff !important;
    border-bottom: 1px solid rgba(0, 243, 255, 0.3) !important;
}
/* ==================== Cyber Theme FINAL ADJUSTMENTS ==================== */

/* 1. Sidebar User Profile OVERFLOW FIX (Aggressive) */
[data-theme="cyber"] .user-profile {
    display: flex !important;
    flex-direction: column !important;
    /* Stack vertical */
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 15px !important;
    height: auto !important;
    overflow: visible !important;
}

[data-theme="cyber"] .user-info {
    width: 100% !important;
}

/* Force action buttons to be a row below info */
[data-theme="cyber"] .user-actions {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 5px !important;
}

[data-theme="cyber"] .btn-icon-only {
    flex: 1 !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 0, 255, 0.3) !important;
    /* Purple Border */
    background: rgba(255, 0, 255, 0.1) !important;
    color: #FF00FF !important;
    /* Pink/Purple Icon */
}

/* 2. SOC Legend Cards (Green/Orange/Red) - Remove White Background */
[data-theme="cyber"] .score-legend-item {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(0, 243, 255, 0.2) !important;
    color: #e0f7fa !important;
    backdrop-filter: blur(5px);
}

/* 3. Add Requested PURPLE/PINK Elements */
/* Titles & Highlights */
[data-theme="cyber"] h1,
[data-theme="cyber"] h2,
[data-theme="cyber"] .soc-title {
    background: linear-gradient(90deg, #00f3ff 0%, #ff00ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 20px rgba(255, 0, 255, 0.3) !important;
}

/* Active State borders */
[data-theme="cyber"] .nav-item.active {
    border-left-color: #FF00FF !important;
    /* Pink active border */
    background: linear-gradient(90deg, rgba(255, 0, 255, 0.15) 0%, transparent 100%) !important;
}

/* Primary Action Buttons (Upload, Save) */
[data-theme="cyber"] .btn-primary,
[data-theme="cyber"] .btn-save-profile,
[data-theme="cyber"] .btn-calculate {
    background: linear-gradient(135deg, #FF00FF 0%, #00f3ff 100%) !important;
    border: none !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4) !important;
}

/* Hover effects */
[data-theme="cyber"] .btn-primary:hover {
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.6) !important;
}
/* ==================== Cyber Theme SIDEBAR OVERFLOW FIX ==================== */

/* 1. Ensure Sidebar has breathing room at the bottom */
[data-theme="cyber"] .sidebar {
    padding-bottom: 0 !important;
    height: 100vh !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
}

/* 2. Adjust User Profile to sit properly */
[data-theme="cyber"] .user-profile {
    margin-top: auto !important;
    /* Push to bottom */
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
    flex-shrink: 0 !important;
    /* Prevent shrinking */
    background: rgba(13, 13, 21, 0.95) !important;
    /* Solid dark background */
    border-top: 1px solid rgba(0, 243, 255, 0.2) !important;
}

/* 3. Compact the footer stack if screen is short */
[data-theme="cyber"] .user-actions {
    margin-top: 8px !important;
    margin-bottom: 5px !important;
}

/* 4. Ensure middle content shrinks, not the footer */
[data-theme="cyber"] .sidebar-resource-list {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    /* Allow shrinking */
}
/* ==================== Cyber Theme SIDEBAR BUTTON FIX ==================== */

/* 1. Reset user profile to wrap properly but allow horizontal flow */
[data-theme="cyber"] .user-profile {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    /* Allow wrapping */
    align-items: center !important;
    padding-bottom: 30px !important;
    /* Ensure extra space at bottom */
}

/* 2. User Info takes full width on top */
[data-theme="cyber"] .user-info {
    width: auto !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* 3. Force User Actions (Buttons) to be a HORIZONTAL ROW */
[data-theme="cyber"] .user-actions {
    display: flex !important;
    flex-direction: row !important;
    /* Explicitly Horizontal */
    width: 100% !important;
    gap: 8px !important;
    margin-top: 10px !important;
    justify-content: space-between !important;
}

/* 4. Ensure buttons fit and look nice */
[data-theme="cyber"] .btn-icon-only {
    flex: 1 !important;
    /* Share width equally */
    height: 32px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 5. Reduce User Avatar size slightly if needed to prevent crowding */
[data-theme="cyber"] .user-avatar {
    width: 36px !important;
    height: 36px !important;
}
/* ==================== Cyber Theme SOC PINK/PURPLE FIX ==================== */

/* 1. Calculate Score Button (Blue/Purple Gradient) */
[data-theme="cyber"] #calculate-score-btn,
[data-theme="cyber"] .btn-calculate {
    background: linear-gradient(135deg, #b000ff 0%, #00aaff 100%) !important;
    /* Vivid Purple to Blue */
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(176, 0, 255, 0.4) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    font-weight: bold !important;
}

[data-theme="cyber"] #calculate-score-btn:hover {
    background: linear-gradient(135deg, #c44dff 0%, #33bbff 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(176, 0, 255, 0.6) !important;
}

/* 2. Floating Home Button (Purple/Pink Style) */
[data-theme="cyber"] .mobile-floating-home {
    background: linear-gradient(135deg, #5b247a 0%, #1bcedf 100%) !important;
    /* Deep Purple to Neon Blue/Pink hint */
    /* Or specifically requested "Purple Pink" - let's go with a rich purple pink gradient */
    background: linear-gradient(135deg, #d53369 0%, #cbad6d 100%) !important;
    /* Actually let's match the screenshot's vibe: "Match Purple/Pink Style" */
    background: linear-gradient(135deg, #FF00CC 0%, #333399 100%) !important;
    /* Pink to Purple */

    border: 2px solid rgba(255, 0, 204, 0.5) !important;
    box-shadow: 0 0 15px rgba(255, 0, 204, 0.5) !important;
}

[data-theme="cyber"] .mobile-floating-home i {
    color: #fff !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8) !important;
}

/* 3. Reset Button (Keep it cool blue or make it complementary) */
[data-theme="cyber"] .btn-reset-light {
    background: rgba(0, 243, 255, 0.1) !important;
    border: 1px solid rgba(0, 243, 255, 0.3) !important;
    color: #00f3ff !important;
}

/* 4. SOC Question Cards - Soften the blow, add pink accent on active/hover */
[data-theme="cyber"] .question-card {
    border-left: 3px solid transparent !important;
}

[data-theme="cyber"] .question-card:hover {
    border-left: 3px solid #ff00ff !important;
    background: rgba(255, 0, 255, 0.05) !important;
}

/* 5. Save Record Button (If distinct from calculate) */
/* Usually "Save Record" appears after calculation. Let's make sure it pops. */
[data-theme="cyber"] #save-record-btn {
    background: linear-gradient(135deg, #00f3ff 0%, #00ff99 100%) !important;
    /* Green/Cyan for Save */
    color: #000 !important;
}
/* ==================== Cyber Theme RESOURCE LIST FIX ==================== */

/* 1. Ensure the resource list has proper flex behavior and can grow/shrink */
[data-theme="cyber"] .sidebar-resource-list {
    flex: 1 1 auto !important;
    /* Allow it to grow and shrink */
    min-height: 50px !important;
    /* Minimum visible height */
    max-height: none !important;
    /* Remove any hardcoded max */
    overflow-y: auto !important;
    /* Always allow vertical scroll */
    overflow-x: hidden !important;
    /* Hide horizontal scroll */
    margin-bottom: 10px !important;
    /* Space before user profile */
    padding: 8px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px !important;
}

/* 隐藏赛博主题侧边栏滚动条 */
[data-theme="cyber"] .sidebar-resource-list::-webkit-scrollbar {
    display: none;
    width: 0;
}

/* 3. Resource items inside the list */
[data-theme="cyber"] .sidebar-resource-list .resource-item {
    background: rgba(13, 13, 21, 0.6) !important;
    border: 1px solid rgba(0, 243, 255, 0.2) !important;
    color: #e0f7fa !important;
    margin-bottom: 6px !important;
}

[data-theme="cyber"] .sidebar-resource-list .resource-item:hover {
    border-color: #00f3ff !important;
    background: rgba(0, 243, 255, 0.1) !important;
}

[data-theme="cyber"] .sidebar-resource-list .resource-title {
    color: #e0f7fa !important;
}

/* 4. Empty hint styling */
[data-theme="cyber"] .sidebar-resource-list .empty-resource-hint {
    color: #94a3b8 !important;
}
/* ==================== Ethereal Mobile Sidebar NUCLEAR FIX ==================== */
@media screen and (max-width: 768px) {

    /* Force Sidebar to behave as mobile drawer */
    [data-theme="ethereal"] .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        height: 100dvh !important;
        /* Dynamic viewport for iOS */
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        z-index: 9999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        background: var(--theme-glass-surface, rgba(255, 255, 255, 0.9)) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Show state - activated by JS adding .show class */
    [data-theme="ethereal"] .sidebar.show {
        transform: translateX(0) !important;
    }

    /* Ensure mobile header is visible */
    [data-theme="ethereal"] .mobile-header {
        display: flex !important;
        background: var(--theme-glass-surface, rgba(255, 255, 255, 0.9)) !important;
    }

    /* Sidebar overlay for closing */
    [data-theme="ethereal"] .sidebar-overlay.show {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.3) !important;
        z-index: 9998 !important;
    }

    /* Main content adjustment */
    [data-theme="ethereal"] .dashboard-container {
        display: block !important;
        padding: 0 !important;
    }

    [data-theme="ethereal"] .main-content {
        width: 100% !important;
        margin-left: 0 !important;
        border-radius: 0 !important;
    }
}
/* ==================== Ethereal Mobile Sidebar CORRECTED FIX ==================== */
/* JavaScript uses .active class, NOT .show class */
@media screen and (max-width: 768px) {

    /* Force Sidebar to behave as mobile drawer */
    [data-theme="ethereal"] .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        z-index: 9999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        background: var(--theme-glass-surface, rgba(255, 255, 255, 0.95)) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* ACTIVE state - this is what JS actually uses */
    [data-theme="ethereal"] .sidebar.active {
        transform: translateX(0) !important;
    }

    /* Sidebar overlay */
    [data-theme="ethereal"] #sidebar-overlay.active {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.3) !important;
        z-index: 9998 !important;
    }

    /* Mobile header visibility */
    [data-theme="ethereal"] .mobile-header {
        display: flex !important;
    }

    /* Main content adjustment */
    [data-theme="ethereal"] .dashboard-container {
        display: block !important;
        padding: 0 !important;
    }

    [data-theme="ethereal"] .main-content {
        width: 100% !important;
        margin-left: 0 !important;
        border-radius: 0 !important;
    }
}

/* ==================== SOC Calculator Liquid Glass Enhancement (Cyber Theme) ==================== */
/* Inspired by Apple's Liquid Glass / rdev/liquid-glass-react */
/* Pure CSS implementation for cyber theme SOC calculator page */
/* V3: FORCE deep black backgrounds, override all inline styles */

/* ==================== LIQUID GLASS CSS VARIABLES ==================== */
[data-theme="cyber"] {
    /* Liquid Glass Core Effects */
    --lg-blur: 16px;
    --lg-saturation: 150%;
    --lg-brightness: 1.0;
    --lg-contrast: 1.15;
    
    /* Glass Surface - DEEPER BLACK */
    --lg-surface-bg: rgba(8, 2, 15, 0.98);
    --lg-surface-border: rgba(255, 0, 255, 0.35);
    --lg-surface-highlight: linear-gradient(135deg, 
        rgba(255, 0, 255, 0.1) 0%, 
        rgba(0, 243, 255, 0.05) 50%,
        transparent 100%);
    
    /* Primary Accent - Magenta/Pink */
    --lg-accent-magenta: #ff00ff;
    --lg-accent-cyan: #00f3ff;
    --lg-gradient-primary: linear-gradient(135deg, #ff00ff 0%, #00f3ff 100%);
    --lg-gradient-hover: linear-gradient(135deg, #ff66ff 0%, #66ffff 100%);
    
    /* Hover States - KEY FIX for text visibility */
    --lg-hover-bg: rgba(255, 0, 255, 0.9);
    --lg-hover-text: #000000;
    --lg-hover-glow: 0 0 25px rgba(255, 0, 255, 0.6);
    
    /* Secondary Hover (for less prominent elements) */
    --lg-hover-bg-subtle: rgba(255, 0, 255, 0.2);
    --lg-hover-text-subtle: #ffffff;
    
    /* Transitions - Elastic "liquid" feel */
    --lg-transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    --lg-transition-fast: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==================== SOC CALCULATOR - BODY & CONTAINER OVERRIDE ==================== */
/* CRITICAL: Override inline styles from soc-calculator.html */
[data-theme="cyber"] body {
    background: #020208 !important;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(255, 0, 255, 0.08) 0%, transparent 50%),
        linear-gradient(rgba(255, 0, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 255, 0.02) 1px, transparent 1px) !important;
    background-size: 100% 100%, 40px 40px, 40px 40px !important;
}

[data-theme="cyber"] .container {
    background: transparent !important;
}

[data-theme="cyber"] .top-bar {
    background: transparent !important;
}

[data-theme="cyber"] .page-title {
    background: var(--lg-gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 15px rgba(255, 0, 255, 0.5));
}

[data-theme="cyber"] .questions-grid {
    background: transparent !important;
}

[data-theme="cyber"] .actions {
    background: transparent !important;
}


/* ==================== SOC CALCULATOR - SCORE PANEL ==================== */
[data-theme="cyber"] .score-panel {
    background: #0a0215 !important;
    background-color: #0a0215 !important;
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation)) brightness(var(--lg-brightness)) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation)) brightness(var(--lg-brightness)) !important;
    border: 1px solid rgba(255, 0, 255, 0.45) !important;
    border-radius: 16px !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.8),
        0 0 35px rgba(255, 0, 255, 0.3),
        inset 0 1px 0 rgba(255, 0, 255, 0.25) !important;
    position: relative;
    overflow: hidden;
}

[data-theme="cyber"] .score-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 255, 0.7), transparent);
}

[data-theme="cyber"] .score-main {
    border-bottom: 1px solid rgba(255, 0, 255, 0.3) !important;
}

[data-theme="cyber"] .score-label {
    color: #b0b8c4 !important;
}

[data-theme="cyber"] .score-value {
    background: var(--lg-gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none !important;
    filter: drop-shadow(0 0 20px rgba(255, 0, 255, 0.7));
}

[data-theme="cyber"] .score-status {
    text-shadow: 0 0 12px currentColor;
}


/* ==================== SOC CALCULATOR - QUESTION CARDS ==================== */
/* CRITICAL: Force dark background - override inline styles */
[data-theme="cyber"] .question-card,
[data-theme="cyber"] .questions-grid .question-card {
    background: #0a0212 !important;
    background-color: #0a0212 !important;
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation)) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation)) !important;
    border: 1px solid rgba(255, 0, 255, 0.35) !important;
    border-radius: 12px !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.7),
        0 0 15px rgba(255, 0, 255, 0.15),
        inset 0 1px 0 rgba(255, 0, 255, 0.12) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative;
    overflow: hidden;
}

/* Question card text - ensure white on dark */
[data-theme="cyber"] .question-card .question-text {
    color: #ffffff !important;
}

[data-theme="cyber"] .question-card .input-label,
[data-theme="cyber"] .question-card .score-label-small {
    color: #9ca3af !important;
}

[data-theme="cyber"] .question-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 255, 0.4), transparent);
    opacity: 0;
    transition: opacity var(--lg-transition-fast);
}

[data-theme="cyber"] .question-card:hover {
    background: rgba(255, 0, 255, 0.15) !important;
    background-color: rgba(255, 0, 255, 0.15) !important;
    border-color: rgba(255, 0, 255, 0.7) !important;
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(255, 0, 255, 0.35) !important;
    transform: translateY(-2px);
}

/* CRITICAL: Question card hover - text stays WHITE (not dark) since bg is still dark-ish */
[data-theme="cyber"] .question-card:hover .question-text {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

[data-theme="cyber"] .question-card:hover .input-label,
[data-theme="cyber"] .question-card:hover .score-label-small {
    color: #d1d5db !important;
}

[data-theme="cyber"] .question-card:hover::before {
    opacity: 1;
}

[data-theme="cyber"] .question-number {
    background: var(--lg-gradient-primary) !important;
    color: #000 !important;
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.5);
    font-weight: 700 !important;
}

[data-theme="cyber"] .question-text {
    color: #ffffff !important;
}


/* ==================== SOC CALCULATOR - LEVEL ITEMS ==================== */
[data-theme="cyber"] .level-item {
    background: #080210 !important;
    background-color: #080210 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 0, 255, 0.3) !important;
    border-radius: 10px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative;
    overflow: hidden;
}

[data-theme="cyber"] .level-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    pointer-events: none;
}

/* Green Level - 深黑色背景 + 绿色边框和文字 */
[data-theme="cyber"] .level-item.level-green,
[data-theme="cyber"] .level-green {
    background: #050d0a !important;
    background-color: #050d0a !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: #34d399 !important;
}

[data-theme="cyber"] .level-item.level-green .level-text,
[data-theme="cyber"] .level-item.level-green .level-range,
[data-theme="cyber"] .level-green .level-text,
[data-theme="cyber"] .level-green .level-range {
    color: #34d399 !important;
}

[data-theme="cyber"] .level-item.level-green .level-icon,
[data-theme="cyber"] .level-green .level-icon {
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.6));
}

/* Yellow Level - 深黑色背景 + 黄色边框和文字 */
[data-theme="cyber"] .level-item.level-yellow,
[data-theme="cyber"] .level-yellow {
    background: #0d0a05 !important;
    background-color: #0d0a05 !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    color: #fbbf24 !important;
}

[data-theme="cyber"] .level-item.level-yellow .level-text,
[data-theme="cyber"] .level-item.level-yellow .level-range,
[data-theme="cyber"] .level-yellow .level-text,
[data-theme="cyber"] .level-yellow .level-range {
    color: #fbbf24 !important;
}

[data-theme="cyber"] .level-item.level-yellow .level-icon,
[data-theme="cyber"] .level-yellow .level-icon {
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6));
}

/* Red Level - 深黑色背景 + 红色边框和文字 */
[data-theme="cyber"] .level-item.level-red,
[data-theme="cyber"] .level-red {
    background: #0d0505 !important;
    background-color: #0d0505 !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #f87171 !important;
}

[data-theme="cyber"] .level-item.level-red .level-text,
[data-theme="cyber"] .level-item.level-red .level-range,
[data-theme="cyber"] .level-red .level-text,
[data-theme="cyber"] .level-red .level-range {
    color: #f87171 !important;
}

[data-theme="cyber"] .level-item.level-red .level-icon,
[data-theme="cyber"] .level-red .level-icon {
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.6));
}

/* Level Item Hover - 保持深色背景，增强边框发光 */
[data-theme="cyber"] .level-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="cyber"] .level-item.level-green:hover,
[data-theme="cyber"] .level-green:hover {
    background: #081510 !important;
    background-color: #081510 !important;
    border-color: rgba(16, 185, 129, 0.7) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(16, 185, 129, 0.4) !important;
}

[data-theme="cyber"] .level-item.level-yellow:hover,
[data-theme="cyber"] .level-yellow:hover {
    background: #151008 !important;
    background-color: #151008 !important;
    border-color: rgba(245, 158, 11, 0.7) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.4) !important;
}

[data-theme="cyber"] .level-item.level-red:hover,
[data-theme="cyber"] .level-red:hover {
    background: #150808 !important;
    background-color: #150808 !important;
    border-color: rgba(239, 68, 68, 0.7) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(239, 68, 68, 0.4) !important;
}


/* ==================== SOC CALCULATOR - STEPPER CONTROLS ==================== */
[data-theme="cyber"] .stepper {
    background: #050008 !important;
    background-color: #050008 !important;
    border: 1px solid rgba(255, 0, 255, 0.35) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

[data-theme="cyber"] .stepper-btn {
    background: rgba(255, 0, 255, 0.15) !important;
    background-color: rgba(255, 0, 255, 0.15) !important;
    border: 1px solid rgba(255, 0, 255, 0.4) !important;
    color: #ff66ff !important;
    border-radius: 8px !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* CRITICAL FIX: Stepper button hover - 洋红色背景 + 深色文字 */
[data-theme="cyber"] .stepper-btn:hover {
    background: #ff00ff !important;
    background-color: #ff00ff !important;
    color: #000000 !important;
    border-color: #ff66ff !important;
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.7) !important;
    transform: scale(1.08);
}

[data-theme="cyber"] .stepper-btn:active {
    transform: scale(0.95);
}

[data-theme="cyber"] .stepper-value {
    color: #ff66ff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.6);
}

[data-theme="cyber"] .input-label {
    color: #8b9bb4 !important;
}

[data-theme="cyber"] .score-label-small {
    color: #8b9bb4 !important;
}

[data-theme="cyber"] .score-value-small {
    background: var(--lg-gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}


/* ==================== SOC CALCULATOR - ACTION BUTTONS ==================== */
[data-theme="cyber"] .actions {
    background: transparent !important;
}

[data-theme="cyber"] .actions .btn {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 12px !important;
    transition: var(--lg-transition) !important;
    position: relative;
    overflow: hidden;
}

/* Calculate Button - Primary action with magenta */
[data-theme="cyber"] .btn-calculate {
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.2) 0%, rgba(0, 243, 255, 0.2) 100%) !important;
    border: 1px solid rgba(255, 0, 255, 0.5) !important;
    color: #ff66ff !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 0, 255, 0.25) !important;
}

/* CRITICAL FIX: Calculate button hover - dark text on light background */
[data-theme="cyber"] .btn-calculate:hover {
    background: var(--lg-gradient-primary) !important;
    color: #000000 !important;
    border-color: #ff00ff !important;
    box-shadow: 
        0 6px 30px rgba(0, 0, 0, 0.5),
        0 0 35px rgba(255, 0, 255, 0.6) !important;
    transform: translateY(-2px);
}

/* Reset Button - Secondary action */
[data-theme="cyber"] .btn-reset {
    background: rgba(30, 30, 40, 0.9) !important;
    border: 1px solid rgba(100, 116, 139, 0.5) !important;
    color: #94a3b8 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

/* CRITICAL FIX: Reset button hover - 深色背景变亮，文字变深 */
[data-theme="cyber"] .btn-reset:hover {
    background: rgba(148, 163, 184, 0.95) !important;
    color: #000000 !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(148, 163, 184, 0.3) !important;
    transform: translateY(-2px);
}

/* Save Button - Success action */
[data-theme="cyber"] .btn-save {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: #34d399 !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(16, 185, 129, 0.25) !important;
}

/* CRITICAL FIX: Save button hover - dark text on light background */
[data-theme="cyber"] .btn-save:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #000000 !important;
    border-color: #10b981 !important;
    box-shadow: 
        0 6px 30px rgba(0, 0, 0, 0.5),
        0 0 35px rgba(16, 185, 129, 0.6) !important;
    transform: translateY(-2px);
}

/* Button active state */
[data-theme="cyber"] .actions .btn:active {
    transform: translateY(0) scale(0.98);
}


/* ==================== HOVER TEXT VISIBILITY FIXES ==================== */
/* Ensuring text remains readable when backgrounds become light on hover */

/* Question Card Hover - text stays visible */
[data-theme="cyber"] .question-card:hover .question-text {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

[data-theme="cyber"] .question-card:hover .question-number {
    box-shadow: 0 0 18px rgba(255, 0, 255, 0.7);
}

/* Question Controls Hover */
[data-theme="cyber"] .question-card:hover .input-label,
[data-theme="cyber"] .question-card:hover .score-label-small {
    color: #b0b8c4 !important;
}


/* ==================== LIQUID GLASS ANIMATIONS ==================== */
/* Smooth elastic transitions for "liquid" feel */

/* Pulse glow animation for active elements - magenta */
@keyframes lg-pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 0, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 35px rgba(255, 0, 255, 0.4);
    }
}

/* Subtle shimmer effect */
@keyframes lg-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Apply pulse to score panel */
[data-theme="cyber"] .score-panel {
    animation: lg-pulse-glow 4s ease-in-out infinite;
}

/* Shimmer effect on buttons hover */
[data-theme="cyber"] .btn-calculate::after,
[data-theme="cyber"] .btn-save::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.3s;
}

[data-theme="cyber"] .btn-calculate:hover::after,
[data-theme="cyber"] .btn-save:hover::after {
    opacity: 1;
    animation: lg-shimmer 1.5s ease-in-out infinite;
}


/* ==================== SOC CALCULATOR - MODAL LIQUID GLASS ==================== */
/* Modal Overlay with blur */
[data-theme="cyber"] .modal-overlay {
    background: rgba(0, 0, 5, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Modal Content - Enhanced glass effect with magenta */
[data-theme="cyber"] .modal-content {
    background: rgba(8, 2, 15, 0.98) !important;
    backdrop-filter: blur(20px) saturate(var(--lg-saturation)) brightness(var(--lg-brightness)) !important;
    -webkit-backdrop-filter: blur(20px) saturate(var(--lg-saturation)) brightness(var(--lg-brightness)) !important;
    border: 1px solid rgba(255, 0, 255, 0.45) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.8),
        0 0 50px rgba(255, 0, 255, 0.25),
        inset 0 1px 0 rgba(255, 0, 255, 0.2) !important;
    overflow: hidden;
}

/* Modal Header */
[data-theme="cyber"] .modal-header {
    background: linear-gradient(180deg, rgba(255, 0, 255, 0.15) 0%, transparent 100%) !important;
    border-bottom: 1px solid rgba(255, 0, 255, 0.3) !important;
}

[data-theme="cyber"] .modal-title {
    color: #ffffff !important;
    text-shadow: 0 0 12px rgba(255, 0, 255, 0.6);
}

[data-theme="cyber"] .modal-icon {
    filter: drop-shadow(0 0 12px currentColor);
}

/* Modal Body */
[data-theme="cyber"] .modal-body {
    background: transparent !important;
}

[data-theme="cyber"] .result-score-label {
    color: #8b9bb4 !important;
}

[data-theme="cyber"] .result-score {
    filter: drop-shadow(0 0 18px currentColor);
}

[data-theme="cyber"] .result-status {
    text-shadow: 0 0 10px currentColor;
}

[data-theme="cyber"] .result-desc {
    color: #b0b8c4 !important;
}

/* Modal Tips Section */
[data-theme="cyber"] .modal-tips {
    background: rgba(255, 0, 255, 0.06) !important;
    border-top: 1px solid rgba(255, 0, 255, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

[data-theme="cyber"] .tip-title {
    color: #ff66ff !important;
}

[data-theme="cyber"] .tip-title i {
    color: #f59e0b !important;
    filter: drop-shadow(0 0 6px #f59e0b);
}

[data-theme="cyber"] .tip-list {
    color: #b0b8c4 !important;
}

/* Modal Actions */
[data-theme="cyber"] .modal-actions {
    background: transparent !important;
    border-top: 1px solid rgba(255, 0, 255, 0.25) !important;
}

/* Modal Secondary Button */
[data-theme="cyber"] .modal-btn-secondary {
    background: rgba(30, 30, 40, 0.9) !important;
    border: 1px solid rgba(100, 116, 139, 0.5) !important;
    color: #94a3b8 !important;
    border-radius: 10px !important;
    transition: var(--lg-transition) !important;
}

/* CRITICAL FIX: Modal secondary button hover - 深色背景变亮，文字变深 */
[data-theme="cyber"] .modal-btn-secondary:hover {
    background: rgba(148, 163, 184, 0.95) !important;
    color: #000000 !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 0 15px rgba(148, 163, 184, 0.3) !important;
}

/* Modal Primary Button */
[data-theme="cyber"] .modal-btn-primary {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: #34d399 !important;
    border-radius: 10px !important;
    transition: var(--lg-transition) !important;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.25) !important;
}

/* CRITICAL FIX: Modal primary button hover - dark text on light background */
[data-theme="cyber"] .modal-btn-primary:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #000000 !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.6) !important;
}


/* ==================== BROWSER COMPATIBILITY FALLBACK ==================== */
/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(16px)) {
    [data-theme="cyber"] .score-panel,
    [data-theme="cyber"] .question-card,
    [data-theme="cyber"] .level-item,
    [data-theme="cyber"] .modal-content,
    [data-theme="cyber"] .modal-tips {
        background: rgba(8, 2, 15, 0.99) !important;
    }
    
    [data-theme="cyber"] .modal-overlay {
        background: rgba(0, 0, 5, 0.97) !important;
    }
    
    [data-theme="cyber"] .stepper {
        background: rgba(0, 0, 0, 0.85) !important;
    }
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */
@media (max-width: 768px) {
    [data-theme="cyber"] .score-panel,
    [data-theme="cyber"] .question-card,
    [data-theme="cyber"] .modal-content {
        --lg-blur: 12px;
    }
    
    [data-theme="cyber"] .level-item {
        padding: 8px 10px !important;
    }
    
    [data-theme="cyber"] .actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== SOC CALCULATOR - FINAL OVERRIDE RULES ==================== */
/* These rules ensure ALL white/light backgrounds are overridden */
/* Using high specificity selectors to override inline styles */

/* Force dark background on ALL elements in SOC calculator */
[data-theme="cyber"] .score-panel,
[data-theme="cyber"] .score-panel *,
[data-theme="cyber"] .question-card,
[data-theme="cyber"] .question-card *,
[data-theme="cyber"] .level-item,
[data-theme="cyber"] .level-item *,
[data-theme="cyber"] .modal-content,
[data-theme="cyber"] .modal-content * {
    --white-override: transparent;
}

/* Score panel main section */
[data-theme="cyber"] .score-main {
    background: transparent !important;
}

/* Score levels container */
[data-theme="cyber"] .score-levels {
    background: transparent !important;
}

/* Question header and controls */
[data-theme="cyber"] .question-header {
    background: transparent !important;
}

[data-theme="cyber"] .question-controls {
    background: transparent !important;
}

[data-theme="cyber"] .stepper-group {
    background: transparent !important;
}

[data-theme="cyber"] .question-score {
    background: transparent !important;
}

/* Modal sections */
[data-theme="cyber"] .modal-header {
    background: linear-gradient(180deg, rgba(255, 0, 255, 0.12) 0%, transparent 100%) !important;
}

[data-theme="cyber"] .modal-body {
    background: transparent !important;
}

[data-theme="cyber"] .modal-actions {
    background: transparent !important;
    border-top: 1px solid rgba(255, 0, 255, 0.3) !important;
}

/* Result score in modal - ensure gradient text works */
[data-theme="cyber"] .result-score {
    background: var(--lg-gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="cyber"] .result-score.level-green {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="cyber"] .result-score.level-yellow {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="cyber"] .result-score.level-red {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Tip list styling */
[data-theme="cyber"] .tip-list li {
    color: #b0b8c4 !important;
}

[data-theme="cyber"] .tip-list li::marker {
    color: #ff66ff !important;
}

/* ==================== ADDITIONAL MAGENTA GLOW EFFECTS ==================== */
/* Add more magenta/pink accents throughout */

[data-theme="cyber"] .score-panel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 255, 0.5), transparent);
    pointer-events: none;
}

[data-theme="cyber"] .question-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

[data-theme="cyber"] .question-card:hover::after {
    opacity: 1;
}

/* Enhanced stepper value glow */
[data-theme="cyber"] .stepper-value {
    text-shadow: 0 0 12px rgba(255, 0, 255, 0.7) !important;
}

/* Score value enhanced glow */
[data-theme="cyber"] .score-value {
    filter: drop-shadow(0 0 25px rgba(255, 0, 255, 0.8)) !important;
}

/* Question number enhanced glow on hover */
[data-theme="cyber"] .question-card:hover .question-number {
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.8) !important;
}

/* ==================== ULTIMATE OVERRIDE - SOC CALCULATOR ==================== */
/* These rules have maximum specificity to override ANY inline styles */

/* Body background for SOC calculator page */
body[data-theme="cyber"] {
    background: #020208 !important;
    background-color: #020208 !important;
}

/* Force ALL card-like elements to be dark */
body[data-theme="cyber"] .score-panel,
body[data-theme="cyber"] .question-card,
body[data-theme="cyber"] .level-item,
body[data-theme="cyber"] .modal-content,
body[data-theme="cyber"] .stepper {
    background-color: #0a0212 !important;
}

/* Specific overrides for question-card which has inline background: white */
body[data-theme="cyber"] .questions-grid > .question-card {
    background: #0a0212 !important;
    background-color: #0a0212 !important;
}

/* Level items specific overrides */
body[data-theme="cyber"] .score-levels > .level-item.level-green {
    background: #050d0a !important;
    background-color: #050d0a !important;
}

body[data-theme="cyber"] .score-levels > .level-item.level-yellow {
    background: #0d0a05 !important;
    background-color: #0d0a05 !important;
}

body[data-theme="cyber"] .score-levels > .level-item.level-red {
    background: #0d0505 !important;
    background-color: #0d0505 !important;
}

/* Stepper override */
body[data-theme="cyber"] .stepper-group .stepper {
    background: #050008 !important;
    background-color: #050008 !important;
}

body[data-theme="cyber"] .stepper .stepper-btn {
    background: rgba(255, 0, 255, 0.15) !important;
    background-color: rgba(255, 0, 255, 0.15) !important;
}

/* Stepper button hover - 洋红色背景 + 黑色文字 */
body[data-theme="cyber"] .stepper .stepper-btn:hover {
    background: #ff00ff !important;
    background-color: #ff00ff !important;
    color: #000000 !important;
}

/* Action buttons override */
body[data-theme="cyber"] .actions .btn-reset {
    background: #1a1a24 !important;
    background-color: #1a1a24 !important;
}

body[data-theme="cyber"] .actions .btn-reset:hover {
    background: #94a3b8 !important;
    background-color: #94a3b8 !important;
    color: #000000 !important;
}

body[data-theme="cyber"] .actions .btn-calculate {
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.25) 0%, rgba(0, 243, 255, 0.25) 100%) !important;
}

body[data-theme="cyber"] .actions .btn-calculate:hover {
    background: linear-gradient(135deg, #ff00ff 0%, #00f3ff 100%) !important;
    color: #000000 !important;
}

body[data-theme="cyber"] .actions .btn-save {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.25) 100%) !important;
}

body[data-theme="cyber"] .actions .btn-save:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #000000 !important;
}

/* Modal override */
body[data-theme="cyber"] .modal-overlay .modal-content {
    background: #0a0212 !important;
    background-color: #0a0212 !important;
}

body[data-theme="cyber"] .modal-content .modal-tips {
    background: rgba(255, 0, 255, 0.08) !important;
    background-color: rgba(255, 0, 255, 0.08) !important;
}

body[data-theme="cyber"] .modal-actions .modal-btn-secondary {
    background: #1a1a24 !important;
    background-color: #1a1a24 !important;
}

body[data-theme="cyber"] .modal-actions .modal-btn-secondary:hover {
    background: #94a3b8 !important;
    background-color: #94a3b8 !important;
    color: #000000 !important;
}

body[data-theme="cyber"] .modal-actions .modal-btn-primary {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.25) 100%) !important;
}

body[data-theme="cyber"] .modal-actions .modal-btn-primary:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #000000 !important;
}

/* ==================== Safari Compatibility Fallbacks ==================== */

/* Safari fallback for backdrop-filter - provides solid backgrounds when blur is not supported */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    /* Minimal Theme Fallbacks */
    [data-theme="minimal"] .sidebar {
        background: rgba(255, 255, 255, 0.95);
    }
    
    [data-theme="minimal"] .modal-container,
    [data-theme="minimal"] .modal-content {
        background: rgba(255, 255, 255, 0.98);
    }
    
    [data-theme="minimal"] .admin-card {
        background: rgba(255, 255, 255, 0.95);
    }
    
    [data-theme="minimal"] .article-content {
        background: rgba(255, 255, 255, 0.95);
    }
    
    [data-theme="minimal"] .stat-card {
        background: rgba(255, 255, 255, 0.95);
    }
    
    [data-theme="minimal"] .empty-state {
        background: rgba(255, 255, 255, 0.95);
    }
    
    [data-theme="minimal"] .history-card,
    [data-theme="minimal"] .report-card {
        background: rgba(255, 255, 255, 0.98);
    }
    
    [data-theme="minimal"] .photo-upload-form,
    [data-theme="minimal"] .photo-card {
        background: rgba(255, 255, 255, 0.98);
    }
    
    /* Cyber Theme Fallbacks */
    [data-theme="cyber"] .sidebar {
        background: rgba(2, 2, 8, 0.98);
    }
    
    [data-theme="cyber"] .modal-container,
    [data-theme="cyber"] .modal-content,
    [data-theme="cyber"] .stats-panel,
    [data-theme="cyber"] .filter-section,
    [data-theme="cyber"] .report-card,
    [data-theme="cyber"] .score-panel,
    [data-theme="cyber"] .question-card,
    [data-theme="cyber"] .soc-result-card,
    [data-theme="cyber"] .history-card,
    [data-theme="cyber"] .admin-card,
    [data-theme="cyber"] .article-card,
    [data-theme="cyber"] .photo-card {
        background: rgba(2, 2, 8, 0.98) !important;
    }
    
    /* Ethereal Theme Fallbacks */
    [data-theme="ethereal"] .soc-result-card {
        background: rgba(255, 255, 255, 0.95);
    }
    
    [data-theme="ethereal"] .sidebar {
        background: rgba(255, 255, 255, 0.95);
    }
    
    [data-theme="ethereal"] .main-content {
        background: rgba(255, 255, 255, 0.95);
    }
}

/* Safari fallback for gradient text - provides solid color when gradient text is not supported */
/* Note: -webkit-text-fill-color is well supported in Safari, but we add color fallbacks for edge cases */

/* Minimal Theme - gradient text fallbacks */
[data-theme="minimal"] .logo-title {
    color: #00C6FB; /* Fallback color before gradient is applied */
}

[data-theme="minimal"] .page-title,
[data-theme="minimal"] .history-score,
[data-theme="minimal"] .stat-value,
[data-theme="minimal"] .export-title {
    color: #00C6FB; /* Fallback color */
}

[data-theme="minimal"] .admin-header-content h1,
[data-theme="minimal"] .consent-header h1 {
    color: #00C6FB; /* Fallback color */
}

[data-theme="minimal"] .soc-header h2,
[data-theme="minimal"] .score-value {
    color: #00C6FB; /* Fallback color */
}

/* Cyber Theme - gradient text fallbacks */
[data-theme="cyber"] .logo-title {
    color: #ff00ff; /* Fallback color */
}

/* Ethereal Theme - gradient text fallbacks */
[data-theme="ethereal"] .logo-title {
    color: #0ea5e9; /* Fallback color */
}

/* Liquid Glass Theme - gradient text fallbacks */
[data-theme="liquid-glass"] .logo-title,
[data-theme="liquid-glass"] .page-title,
[data-theme="liquid-glass"] .stat-value {
    color: #ff00ff; /* Fallback color */
}

[data-theme="liquid-glass"] .result-score.level-green {
    color: #10b981; /* Fallback for green level */
}

[data-theme="liquid-glass"] .result-score.level-yellow {
    color: #f59e0b; /* Fallback for yellow level */
}

[data-theme="liquid-glass"] .result-score.level-red {
    color: #ef4444; /* Fallback for red level */
}


/* ==================== 主题切换按钮适配 ==================== */

/* 极简主题 - 用户名显示修复 */
[data-theme="minimal"] .user-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

[data-theme="minimal"] .user-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 极简主题 - 主题按钮 */
[data-theme="minimal"] .theme-btn {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    width: 38px;
    height: 38px;
}

[data-theme="minimal"] .theme-btn i {
    font-size: 16px;
}

[data-theme="minimal"] .theme-btn:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: #00C6FB;
    color: #005BEA;
}

[data-theme="minimal"] .theme-panel {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 50px -12px rgba(0, 91, 234, 0.2);
}

[data-theme="minimal"] .theme-option:hover {
    background: rgba(0, 198, 251, 0.1);
}

[data-theme="minimal"] .theme-option.active {
    border-color: #00C6FB;
    background: rgba(0, 198, 251, 0.15);
}

[data-theme="minimal"] .theme-option.active span {
    color: #005BEA;
}

/* 赛博主题 - 主题按钮 */
[data-theme="cyber"] .theme-btn {
    background: rgba(2, 2, 8, 0.8);
    border: 1px solid rgba(255, 0, 255, 0.3);
    color: #8b9bb4;
    width: 38px;
    height: 38px;
}

[data-theme="cyber"] .theme-btn i {
    font-size: 16px;
}

[data-theme="cyber"] .theme-btn:hover {
    background: rgba(255, 0, 255, 0.1);
    border-color: #ff00ff;
    color: #ff00ff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
}

[data-theme="cyber"] .theme-panel {
    background: rgba(2, 2, 8, 0.95);
    border: 1px solid rgba(255, 0, 255, 0.3);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 0, 255, 0.2);
}

[data-theme="cyber"] .theme-option {
    border-color: transparent;
}

[data-theme="cyber"] .theme-option:hover {
    background: rgba(255, 0, 255, 0.1);
}

[data-theme="cyber"] .theme-option.active {
    border-color: #ff00ff;
    background: rgba(255, 0, 255, 0.15);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
}

[data-theme="cyber"] .theme-option span {
    color: #8b9bb4;
}

[data-theme="cyber"] .theme-option.active span {
    color: #ff00ff;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
}

[data-theme="cyber"] .theme-preview {
    border-color: rgba(255, 0, 255, 0.3);
}


/* ==================== 修复赛博主题下隐藏元素问题 ==================== */
/* 确保 hidden 类在所有主题下都能正常工作 */
[data-theme="cyber"] .user-profile.hidden,
[data-theme="cyber"] .hidden,
[data-theme="minimal"] .user-profile.hidden,
[data-theme="minimal"] .hidden {
    display: none !important;
}

/* 确保只显示一个用户区域 */
[data-theme="cyber"] #user-profile-guest.hidden,
[data-theme="cyber"] #user-profile-logged-in.hidden {
    display: none !important;
}