/* ================================================================
   智学习 - 法学智能学习平台
   Design System v5.0 — 莫兰迪色系 + 主题切换
   ================================================================ */

/* ===== 字体引入 ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap');

/* ===== 莫兰迪色系设计令牌 (Design Tokens) ===== */
:root {
    /* ======== 浅色主题 — 莫兰迪暖调 ======== */

    /* 核心莫兰迪色 */
    --morandi-dusty-rose: #D4A5A5;     /* 灰粉色 - 主色 */
    --morandi-muted-teal: #6C9A8B;     /* 灰蓝绿 - 次要色 */
    --morandi-warm-gray: #8A7F8D;      /* 暖灰色 - 边框/文字 */
    --morandi-soft-yellow: #E6D3A7;    /* 柔黄色 - 强调色 */
    --morandi-cream: #F5F0E6;          /* 奶油色 - 背景 */
    --morandi-off-white: #FAF7F0;      /* 米白色 - 卡片背景 */

    /* 主色系 */
    --primary-50:  #F9F2F2;
    --primary-100: #F0E0E0;
    --primary-200: #E5CBCB;
    --primary-300: #D9B5B5;
    --primary-400: #D4A5A5;
    --primary-500: #C89090;
    --primary-600: #B87A7A;
    --primary-700: #A66565;

    /* 次要色系 */
    --secondary-50:  #EFF5F3;
    --secondary-100: #D8EBE5;
    --secondary-200: #B8D9CF;
    --secondary-300: #92C4B5;
    --secondary-400: #6C9A8B;
    --secondary-500: #5A877A;
    --secondary-600: #4A7168;
    --secondary-700: #3A5B54;

    /* 强调色 */
    --accent-50:  #FBF7EE;
    --accent-100: #F5ECDA;
    --accent-200: #EEDFC3;
    --accent-300: #E6D3A7;
    --accent-400: #DCC68E;
    --accent-500: #D0B775;
    --accent-600: #C4A85C;
    --accent-700: #B89943;

    /* 语义色 — 莫兰迪风格 */
    --success:       #7BA05B;
    --success-bg:    #F2F7EE;
    --success-border:#D4E5C8;
    --warning:       #D4A574;
    --warning-bg:    #FBF6F0;
    --warning-border:#EED9C4;
    --error:         #C67B7B;
    --error-bg:      #FBF2F2;
    --error-border:  #E5CBCB;
    --info:          #6C9A8B;
    --info-bg:       #EFF5F3;
    --info-border:   #B8D9CF;
    --warning-text:  #7A5900;

    /* 中性色 — 暖调灰色系 */
    --gray-50:  #FAF8F5;
    --gray-100: #F5F0E6;
    --gray-200: #EBE5DA;
    --gray-300: #D9D3C7;
    --gray-400: #B8B2A6;
    --gray-500: #8A7F8D;
    --gray-600: #6B6570;
    --gray-700: #524E55;
    --gray-800: #3A373D;
    --gray-900: #252326;

    /* 文字色 */
    --text-primary:   #5A4E4E;
    --text-secondary: #8A7F8D;
    --text-disabled:  #B8B2A6;
    --text-on-dark:   #FAF7F0;
    --text-heading:   #4A3F3F;

    /* 背景色 */
    --bg-page:    #F5F0E6;
    --bg-card:    #FAF7F0;
    --bg-elevated:#FFFFFF;
    --bg-hover:   #F0EBE0;
    --bg-active:  #EBE5DA;

    /* 投影 — 莫兰迪暖调 */
    --shadow-color: rgba(138, 127, 141, 0.15);
    --shadow-sm:  0 1px 3px rgba(138, 127, 141, 0.08), 0 1px 2px rgba(90, 78, 78, 0.04);
    --shadow-md:  0 4px 14px rgba(138, 127, 141, 0.12), 0 2px 6px rgba(90, 78, 78, 0.04);
    --shadow-lg:  0 10px 30px rgba(138, 127, 141, 0.15), 0 4px 10px rgba(90, 78, 78, 0.05);
    --shadow-xl:  0 20px 50px rgba(138, 127, 141, 0.18), 0 8px 20px rgba(90, 78, 78, 0.06);
    --shadow-card-hover: 0 14px 40px rgba(138, 127, 141, 0.18), 0 6px 16px rgba(212, 165, 165, 0.08);
    --shadow-inset-subtle: inset 0 1px 3px rgba(138, 127, 141, 0.06);
    --shadow-accent: 0 4px 16px rgba(212, 165, 165, 0.25);

    /* 卡片系统令牌 */
    --card-bg:         linear-gradient(180deg, #FFFFFF 0%, #FAF7F0 100%);
    --card-border:     rgba(138, 127, 141, 0.1);
    --card-shadow:     0 2px 8px rgba(138, 127, 141, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --card-hover-y:    -4px;
    --card-hover-shadow: 0 16px 48px rgba(138, 127, 141, 0.16), 0 8px 20px rgba(212, 165, 165, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
    --card-hover-border: rgba(212, 165, 165, 0.3);
    --card-hover-glow:  0 0 0 4px rgba(212, 165, 165, 0.08);

    /* 渐变 */
    --gradient-primary: linear-gradient(135deg, #D4A5A5 0%, #C89090 100%);
    --gradient-secondary: linear-gradient(135deg, #6C9A8B 0%, #5A877A 100%);
    --gradient-accent: linear-gradient(135deg, #E6D3A7 0%, #D0B775 100%);
    --gradient-header: linear-gradient(135deg, #8A7F8D 0%, #6B6570 40%, #524E55 100%);
    --gradient-card-top: linear-gradient(90deg, #D4A5A5, #6C9A8B, #E6D3A7);

    /* 圆角 */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 999px;

    /* 过渡 */
    --transition-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   0.5s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* 字体 */
    --font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:   'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

    /* 导航栏高度 */
    --header-height: auto;
    --launcher-bar-height: 52px;
}

/* ======== 深色主题 — 莫兰迪深调 ======== */
[data-theme="dark"] {
    /* 核心深色莫兰迪色 */
    --morandi-dusty-rose: #A68080;
    --morandi-muted-teal: #507D70;
    --morandi-warm-gray: #6D6373;
    --morandi-soft-yellow: #C4B48A;
    --morandi-cream: #2A2830;
    --morandi-off-white: #353340;

    /* 主色系 */
    --primary-50:  #3D3540;
    --primary-100: #4A4048;
    --primary-200: #5D5058;
    --primary-300: #7A6A70;
    --primary-400: #A68080;
    --primary-500: #B89090;
    --primary-600: #C8A0A0;
    --primary-700: #D8B0B0;

    /* 次要色系 */
    --secondary-50:  #2D3835;
    --secondary-100: #354540;
    --secondary-200: #40574F;
    --secondary-300: #4A6A60;
    --secondary-400: #507D70;
    --secondary-500: #6C9A8B;
    --secondary-600: #88B0A3;
    --secondary-700: #A4C6BB;

    /* 强调色 */
    --accent-50:  #3A3630;
    --accent-100: #4A4438;
    --accent-200: #5D5445;
    --accent-300: #7A6D55;
    --accent-400: #A08B65;
    --accent-500: #C4B48A;
    --accent-600: #D4C4A0;
    --accent-700: #E4D4B0;

    /* 语义色 */
    --success:       #81C784;
    --success-bg:    #2A3A2D;
    --success-border:#3D5040;
    --warning:       #FFB74D;
    --warning-bg:    #3A3228;
    --warning-border:#504538;
    --error:         #E57373;
    --error-bg:      #3A2A2A;
    --error-border:  #503838;
    --info:          #6C9A8B;
    --info-bg:       #2D3835;
    --info-border:   #40574F;
    --warning-text:  #FFB74D;

    /* 中性色 */
    --gray-50:  #353340;
    --gray-100: #3D3A48;
    --gray-200: #454250;
    --gray-300: #5A5565;
    --gray-400: #706B7A;
    --gray-500: #8A8590;
    --gray-600: #A4A0A8;
    --gray-700: #BEB8C0;
    --gray-800: #D8D2D8;
    --gray-900: #F2EEF2;

    /* 文字色 */
    --text-primary:   #E8E4E8;
    --text-secondary: #B0A8B0;
    --text-disabled:  #706B7A;
    --text-on-dark:   #E8E4E8;
    --text-heading:   #F5F0F5;

    /* 背景色 */
    --bg-page:    #252330;
    --bg-card:    #2D2B38;
    --bg-elevated:#353340;
    --bg-hover:   #3D3A48;
    --bg-active:  #454250;

    /* 投影 */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-md:  0 4px 14px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg:  0 10px 30px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.2);
    --shadow-xl:  0 20px 50px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.25);
    --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(166, 128, 128, 0.1);
    --shadow-inset-subtle: inset 0 1px 3px rgba(0, 0, 0, 0.15);
    --shadow-accent: 0 4px 16px rgba(166, 128, 128, 0.2);

    /* 卡片系统令牌 */
    --card-bg:         linear-gradient(180deg, #353340 0%, #2D2B38 100%);
    --card-border:     rgba(90, 85, 101, 0.3);
    --card-shadow:     0 2px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --card-hover-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 10px 25px rgba(166, 128, 128, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --card-hover-border: rgba(166, 128, 128, 0.3);
    --card-hover-glow:  0 0 0 4px rgba(166, 128, 128, 0.1);

    /* 渐变 */
    --gradient-primary: linear-gradient(135deg, #A68080 0%, #8A6A6A 100%);
    --gradient-secondary: linear-gradient(135deg, #507D70 0%, #406560 100%);
    --gradient-accent: linear-gradient(135deg, #C4B48A 0%, #A09070 100%);
    --gradient-header: linear-gradient(135deg, #353340 0%, #2D2B38 40%, #252330 100%);
    --gradient-card-top: linear-gradient(90deg, #A68080, #507D70, #C4B48A);
}

/* ===== 主题过渡动画 ===== */
html {
    transition: background-color 0.5s ease, color 0.3s ease;
}

body, .header, .footer, .question-card, .filter-section, .progress-section {
    transition: background 0.5s ease, background-color 0.5s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===== 全局重置 ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* ===== 基础样式 ===== */
body {
    font-family: var(--font-family);
    background: var(--bg-page);
    background-attachment: fixed;
    color: var(--text-primary);
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 莫兰迪风格背景纹理 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(212, 165, 165, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(108, 154, 139, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(230, 211, 167, 0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: -2;
    transition: opacity 0.5s ease;
}

[data-theme="dark"] body::before {
    background-image:
        radial-gradient(circle at 20% 80%, rgba(166, 128, 128, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(80, 125, 112, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(196, 180, 138, 0.06) 0%, transparent 60%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(138, 127, 141, 0.03) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.5s ease;
}

[data-theme="dark"] body::after {
    background-image: radial-gradient(rgba(90, 85, 101, 0.2) 1px, transparent 1px);
}

/* 标题字体系统 */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-heading);
}

/* ===== 全局动画关键帧 ===== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pulseCorrect {
    0%   { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.4); }
    70%  { box-shadow: 0 0 0 10px rgba(46, 125, 50, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}

@keyframes pulseIncorrect {
    0%   { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.4); }
    70%  { box-shadow: 0 0 0 10px rgba(211, 47, 47, 0); }
    100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

/* 页面入场动画工具类 */
.animate-fade-in-up {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease both;
}

.animate-scale-in {
    animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* 级联延迟（用于列表项） */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.10s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.20s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.30s; }

/* 选项反馈动画 */
.option.correct {
    animation: pulseCorrect 0.6s ease;
}

.option.incorrect {
    animation: pulseIncorrect 0.6s ease;
}

/* 骨架屏加载占位 */
.skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* ===== 容器 ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== 页面头部 ===== */
.header {
    background: var(--gradient-header);
    color: var(--text-on-dark);
    padding: 28px 0;
    box-shadow: 0 4px 30px var(--shadow-color);
    position: relative;
    overflow: hidden;
}

.header::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -5%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 165, 165, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.header::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -5%;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 211, 167, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.header h1 {
    font-size: 2.1rem;
    margin-bottom: 8px;
    text-align: center;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    color: var(--text-on-dark);
}

.subtitle {
    text-align: center;
    font-size: 1rem;
    opacity: 0.85;
    margin-bottom: 16px;
    font-weight: 400;
}

/* ===== 题库选择器 ===== */
.bank-selector-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.bank-selector-container label {
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.9;
}

.bank-selector {
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    background-color: rgba(255, 255, 255, 0.08);
    color: white;
    cursor: pointer;
    min-width: 200px;
    transition: all var(--transition-normal);
    backdrop-filter: blur(4px);
}

.bank-selector:hover {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
}

.bank-selector:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.bank-selector option {
    background-color: var(--bg-card);
    color: var(--text-primary);
    padding: 8px 12px;
}

/* ===== 主要内容区域 ===== */
.main {
    padding: 32px 0;
}

/* ===== 筛选器区域 ===== */
.filter-section {
    background: var(--card-bg);
    padding: 20px 24px;
    border-radius: var(--radius-xl);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
    border: 1px solid var(--card-border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.filter-section:hover {
    box-shadow: var(--card-hover-shadow), var(--card-hover-glow);
    border-color: var(--card-hover-border);
    transform: translateY(calc(-1 * var(--card-hover-y) / 2));
}

.filter-container {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.filter-select {
    padding: 8px 14px;
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    background-color: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 150px;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
}

.filter-select:hover {
    border-color: var(--gray-400);
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(212, 165, 165, 0.15);
}

/* ===== 知识点统计面板 ===== */
.subject-stats {
    padding: 10px 16px;
    background-color: var(--primary-50);
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    color: var(--primary-700);
    border: 1px solid var(--primary-100);
}

#stats-text {
    font-weight: 600;
}

/* ===== 进度统计 ===== */
.progress-section {
    background: var(--card-bg);
    padding: 20px 24px;
    border-radius: var(--radius-xl);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
    border: 1px solid var(--card-border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.progress-section:hover {
    box-shadow: var(--card-hover-shadow), var(--card-hover-glow);
    border-color: var(--card-hover-border);
    transform: translateY(calc(-1 * var(--card-hover-y) / 2));
}

.progress-info {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 16px;
}

.progress-item {
    text-align: center;
    padding: 12px 16px;
    background: var(--bg-hover);
    border-radius: var(--radius-lg);
    min-width: 140px;
    transition: all var(--transition-fast);
}

.progress-item:hover {
    background: var(--bg-active);
}

.progress-item .label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ===== 题目卡片 ===== */
.question-card {
    background: var(--card-bg);
    padding: 28px;
    border-radius: var(--radius-xl);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--primary-500);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.question-card:hover {
    transform: translateY(var(--card-hover-y));
    box-shadow: var(--card-hover-shadow), var(--card-hover-glow);
    border-color: var(--card-hover-border);
    border-left-color: var(--primary-400);
}

#question-text {
    font-size: 1.35rem;
    margin-bottom: 10px;
    color: var(--text-heading);
    font-weight: 600;
    line-height: 1.5;
}

.question-meta {
    display: flex;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-bottom: 12px;
}

/* ===== 题目统计信息 ===== */
.question-stats {
    font-size: 0.83rem;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    background-color: var(--gray-100);
    color: var(--text-secondary);
    margin-bottom: 16px;
    display: inline-block;
    font-weight: 500;
    border: 1px solid var(--gray-200);
}

.question-stats-mastered {
    background-color: var(--success-bg);
    color: var(--success);
    border-color: var(--success-border);
}

.question-stats-high-error {
    background-color: var(--error-bg);
    color: var(--error);
    border-color: var(--error-border);
}

.question-stats-needs-practice {
    background-color: var(--warning-bg);
    color: var(--warning-text);
    border-color: var(--warning-border);
}

.question-stats-normal {
    background-color: var(--gray-100);
    color: var(--text-secondary);
    border-color: var(--gray-300);
}

/* ===== 难度/知识点标签 ===== */
.difficulty {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background-color: var(--primary-50);
    color: var(--primary-500);
    font-size: 0.82rem;
    font-weight: 600;
}

.subject {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background-color: var(--accent-50);
    color: var(--accent-600);
    font-size: 0.82rem;
    font-weight: 600;
}

/* ===== 选项容器 ===== */
.options-container {
    margin-bottom: 20px;
}

.option {
    display: flex;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
    border: 2px solid transparent;
    position: relative;
}

.option:hover {
    background: var(--bg-active);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.option.selected {
    background-color: var(--primary-50);
    border-color: var(--primary-500);
}

.option.correct {
    background-color: var(--success-bg);
    border-color: var(--success);
}

.option.correct::after {
    content: '✓';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--success);
    font-weight: 700;
    font-size: 1.1rem;
}

.option.incorrect {
    background-color: var(--error-bg);
    border-color: var(--error);
}

.option.incorrect::after {
    content: '✗';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--error);
    font-weight: 700;
    font-size: 1.1rem;
}

.option-letter {
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-right: 12px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.option:hover .option-letter {
    background: var(--primary-100);
    color: var(--primary-600);
}

.option.selected .option-letter {
    background: var(--primary-500);
    color: white;
}

.option.correct .option-letter {
    background: var(--success);
    color: white;
}

.option.incorrect .option-letter {
    background: var(--error);
    color: white;
}

.option-text {
    flex: 1;
    font-size: 1.02rem;
    line-height: 1.5;
    padding-top: 4px;
}

/* ===== 题目头部 ===== */
.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* ===== 题目操作按钮 ===== */
.question-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ===== 按钮系统 ===== */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-family: var(--font-family);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
    user-select: none;
}

/* 涟漪效果容器 */
.btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 3px 12px rgba(212, 165, 165, 0.35);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%);
    box-shadow: 0 6px 20px rgba(212, 165, 165, 0.45);
    transform: translateY(-2px);
}

/* 按钮光泽效果 */
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.6s ease;
}

.btn-primary:hover::after {
    left: 100%;
}

.btn-secondary {
    background: var(--gradient-secondary);
    color: white;
    box-shadow: 0 3px 10px rgba(108, 154, 139, 0.3);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--secondary-600) 0%, var(--secondary-500) 100%);
    box-shadow: 0 6px 18px rgba(108, 154, 139, 0.4);
    transform: translateY(-2px);
}

.btn-info {
    background: var(--gradient-secondary);
    color: white;
    box-shadow: 0 3px 10px rgba(108, 154, 139, 0.3);
}

.btn-info:hover {
    background: linear-gradient(135deg, var(--secondary-600) 0%, var(--secondary-500) 100%);
    box-shadow: 0 6px 18px rgba(108, 154, 139, 0.4);
    transform: translateY(-2px);
}

.btn-warning {
    background: var(--gradient-accent);
    color: var(--gray-800);
    box-shadow: 0 3px 12px rgba(230, 211, 167, 0.4);
}

.btn-warning:hover {
    background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-500) 100%);
    box-shadow: 0 6px 20px rgba(230, 211, 167, 0.5);
    transform: translateY(-2px);
}

.btn-danger {
    background: linear-gradient(135deg, var(--error) 0%, var(--primary-700) 100%);
    color: white;
    box-shadow: 0 3px 12px rgba(198, 123, 123, 0.35);
}

.btn-danger:hover {
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--error) 100%);
    box-shadow: 0 6px 20px rgba(198, 123, 123, 0.45);
    transform: translateY(-2px);
}

.btn:disabled {
    background: var(--gray-300);
    color: var(--text-disabled);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.82rem;
    border-radius: var(--radius-sm);
}

/* ===== 功能按钮组 ===== */
.function-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* ===== 弹窗系统 ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    animation: modalFadeIn var(--transition-fast) ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: var(--bg-card);
    margin: 8% auto;
    padding: 28px;
    border: none;
    width: 88%;
    max-width: 640px;
    border-radius: var(--radius-xl);
    position: relative;
    box-shadow: var(--shadow-xl);
    animation: modalSlideIn var(--transition-normal) ease-out;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.close {
    color: var(--gray-500);
    float: right;
    font-size: 1.6rem;
    font-weight: 400;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    line-height: 1;
}

.close:hover {
    color: var(--text-primary);
    background: var(--gray-100);
}

#explanation-text {
    margin-top: 16px;
    line-height: 1.8;
    color: var(--text-secondary);
    padding: 16px;
    background: var(--warning-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--warning-border);
}

/* ===== 页面底部 ===== */
.footer {
    background: var(--gradient-header);
    color: var(--text-on-dark);
    text-align: center;
    padding: 28px 0;
    margin-top: 40px;
    font-size: 0.88rem;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-card-top);
}

.footer::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -5%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(212, 165, 165, 0.06);
    pointer-events: none;
}

/* ===== 题目列表 ===== */
.question-list {
    max-height: 400px;
    overflow-y: auto;
}

.question-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

.question-item:hover {
    background: var(--bg-active);
    transform: translateY(-2px);
    box-shadow: var(--card-hover-shadow), var(--card-hover-glow);
    border-color: var(--card-hover-border);
}

.question-item.answered {
    background: var(--success-bg);
    border-left: 4px solid var(--success);
}

.question-item.answered.incorrect {
    background: var(--error-bg);
    border-left: 4px solid var(--error);
}

.question-item.unanswered {
    background: var(--warning-bg);
    border-left: 4px solid var(--warning);
}

.question-number {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-heading);
    min-width: 48px;
    text-align: center;
}

.question-preview {
    flex: 1;
    margin-left: 12px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.question-status {
    margin-left: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
}

.question-status.answered {
    background: var(--success-bg);
    color: var(--success);
}

.question-status.unanswered {
    background: var(--warning-bg);
    color: var(--warning);
}

/* ===== 状态标识说明 ===== */
.status-explanation {
    background: var(--card-bg);
    padding: 20px 24px;
    border-radius: var(--radius-xl);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
    border: 1px solid var(--card-border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.status-explanation:hover {
    box-shadow: var(--card-hover-shadow), var(--card-hover-glow);
    border-color: var(--card-hover-border);
}

.status-explanation h3 {
    margin-bottom: 14px;
    color: var(--text-heading);
    font-size: 1.1rem;
    font-weight: 600;
}

.status-items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 120px;
}

.status-badge {
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.88rem;
    border: 1px solid;
}

.status-badge.mastered {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success-border);
}

.status-badge.needs-practice {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-color: var(--warning-border);
}

.status-badge.high-error {
    background: var(--error-bg);
    color: var(--error);
    border-color: var(--error-border);
}

.status-badge.normal {
    background: var(--gray-100);
    color: var(--text-secondary);
    border-color: var(--gray-300);
}

.status-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: center;
}

/* ===== 上传题库表单 ===== */
.upload-form {
    margin-top: 20px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    resize: vertical;
    font-family: var(--font-family);
    transition: all var(--transition-fast);
}

.form-group input[type="text"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(212, 165, 165, 0.15);
}

.form-group input[type="file"] {
    padding: 8px;
    font-family: var(--font-family);
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* ===== 预览区域 ===== */
.preview-container {
    background: var(--gray-50);
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    max-height: 300px;
    overflow-y: auto;
}

.preview-question {
    margin-bottom: 16px;
}

.preview-question h4 {
    margin-bottom: 8px;
    color: var(--text-heading);
    font-size: 0.95rem;
}

.preview-options p {
    margin-bottom: 4px;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.preview-more {
    text-align: center;
    color: var(--text-disabled);
    font-style: italic;
    margin-top: 10px;
}

/* ===== 题库列表 ===== */
.user-banks-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.bank-item {
    margin-bottom: 12px;
    padding: 16px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--primary-500);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--card-shadow);
}

.bank-item:hover {
    background: var(--bg-active);
    transform: translateY(-2px);
    box-shadow: var(--card-hover-shadow), var(--card-hover-glow);
    border-color: var(--card-hover-border);
    border-left-color: var(--primary-600);
}

.bank-item h4 {
    margin-bottom: 4px;
    color: var(--text-heading);
    font-size: 1.05rem;
}

.bank-description {
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
}

.bank-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: var(--text-disabled);
}

.bank-actions {
    display: flex;
    gap: 6px;
}

/* ===== 文件格式提示 ===== */
.file-format-hint {
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    font-size: 0.83rem;
    color: var(--secondary-600);
    line-height: 1.5;
}

.file-format-hint strong {
    color: var(--secondary-600);
}

/* ===== 收藏按钮 ===== */
.favorite-btn {
    background: transparent;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    padding: 6px 10px;
    color: var(--gray-400);
    transition: all var(--transition-fast);
    border-radius: var(--radius-full);
    line-height: 1;
    user-select: none;
}

.favorite-btn.active {
    color: var(--primary-600);
}

.favorite-btn:hover {
    color: var(--accent-600);
    transform: scale(1.15);
    background: rgba(196, 168, 92, 0.08);
}

.favorite-btn:active {
    transform: scale(0.95);
}

.question-item .favorite-btn {
    flex-shrink: 0;
    margin-left: 8px;
}

/* ===== 上传进度条 ===== */
.upload-progress {
    margin-top: 16px;
    padding: 14px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.progress-bar-container {
    width: 100%;
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-400), var(--primary-600));
    width: 0%;
    transition: width var(--transition-normal);
    border-radius: var(--radius-full);
}

.progress-text {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

/* ===== 智能提示栏 ===== */
.smart-prompt {
    position: fixed;
    bottom: -100px;
    left: 0;
    width: 100%;
    background: linear-gradient(135deg, var(--error) 0%, var(--primary-700) 100%);
    color: white;
    padding: 14px 20px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.smart-prompt.show {
    bottom: 0;
}

.prompt-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.prompt-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.prompt-text {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.4;
}

.prompt-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-practice {
    background: rgba(255, 255, 255, 0.95);
    color: var(--error);
    border: none;
    padding: 8px 18px;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
}

.btn-practice:hover {
    background: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.btn-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .header h1 {
        font-size: 1.6rem;
    }

    .subtitle {
        font-size: 0.9rem;
    }

    .main {
        padding: 20px 0;
    }

    .container {
        padding: 0 16px;
    }

    .progress-info {
        flex-direction: column;
        align-items: center;
    }

    .question-card {
        padding: 20px;
    }

    #question-text {
        font-size: 1.15rem;
    }

    /* 增强触摸区域 — 最小 44px */
    .option {
        padding: 16px;
        min-height: 48px;
    }

    .option-letter {
        min-width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .btn {
        min-height: 44px;
        padding: 12px 20px;
    }

    .btn-sm {
        min-height: 36px;
        padding: 8px 14px;
    }

    .question-actions {
        flex-direction: column;
    }

    .question-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .function-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .function-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .question-preview {
        display: none;
    }

    .question-number {
        min-width: 40px;
    }

    .status-items {
        flex-direction: column;
        gap: 12px;
    }

    .status-item {
        min-width: auto;
    }

    .bank-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .bank-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .bank-selector-container {
        flex-direction: column;
        gap: 8px;
    }

    .bank-selector {
        min-width: auto;
        width: 100%;
    }

    .smart-prompt {
        padding: 12px 15px;
    }

    .prompt-content {
        gap: 10px;
    }

    .prompt-icon {
        font-size: 1.2rem;
    }

    .prompt-text {
        font-size: 0.88rem;
    }

    /* 弹窗移动端优化 */
    .modal-content {
        width: 95%;
        margin: 5% auto;
        padding: 20px;
    }

    /* 筛选器移动端优化 */
    .filter-container {
        flex-direction: column;
        gap: 12px;
    }

    .filter-group {
        width: 100%;
    }

    .filter-select {
        width: 100%;
        min-width: auto;
    }
}

/* ===== 主题切换按钮 ===== */
.theme-toggle-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle-btn {
    position: relative;
    width: 52px;
    height: 28px;
    background: var(--gray-300);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-normal);
    padding: 0;
    overflow: hidden;
}

.theme-toggle-btn::before {
    content: '☀️';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    transition: opacity var(--transition-fast);
}

.theme-toggle-btn::after {
    content: '🌙';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.theme-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-normal);
}

[data-theme="dark"] .theme-toggle-btn {
    background: var(--primary-400);
}

[data-theme="dark"] .theme-toggle-btn::before {
    opacity: 0.5;
}

[data-theme="dark"] .theme-toggle-btn::after {
    opacity: 1;
}

[data-theme="dark"] .theme-slider {
    transform: translateX(24px);
}

.theme-toggle-btn:hover {
    box-shadow: 0 0 0 3px rgba(212, 165, 165, 0.2);
}

[data-theme="dark"] .theme-toggle-btn:hover {
    box-shadow: 0 0 0 3px rgba(166, 128, 128, 0.3);
}

/* ===== 启动器导航栏 — 毛玻璃固定导航（由 launcher-bridge.js 自动注入） ===== */
#zx-launcher-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: rgba(250, 247, 240, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(138, 127, 141, 0.12);
    color: var(--text-primary);
    height: 48px;
    box-shadow: 0 1px 8px rgba(138, 127, 141, 0.08);
    transition: all 0.3s ease;
}

[data-theme="dark"] #zx-launcher-bar {
    background: rgba(45, 43, 56, 0.92);
    border-bottom-color: rgba(90, 85, 101, 0.3);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

#zx-launcher-bar.scrolled {
    box-shadow: 0 2px 16px rgba(138, 127, 141, 0.12);
}

[data-theme="dark"] #zx-launcher-bar.scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

.zx-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 16px;
}

.zx-bar-back {
    background: rgba(212, 165, 165, 0.12);
    border: none;
    color: var(--primary-600);
    padding: 6px 14px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    font-family: var(--font-family);
}

.zx-bar-back:hover {
    background: rgba(212, 165, 165, 0.2);
    transform: translateX(-2px);
}

[data-theme="dark"] .zx-bar-back {
    background: rgba(166, 128, 128, 0.15);
    color: var(--primary-500);
}

[data-theme="dark"] .zx-bar-back:hover {
    background: rgba(166, 128, 128, 0.25);
}

.zx-bar-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    color: var(--text-heading);
}

.zx-bar-nav {
    margin-left: auto;
    display: flex;
    gap: 4px;
    align-items: center;
}

.zx-bar-nav a {
    position: relative;
    overflow: hidden;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.25s ease;
}

/* 动画下划线 */
.zx-bar-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--primary-400);
    transition: width 0.3s ease, left 0.3s ease;
    border-radius: 3px 3px 0 0;
}

.zx-bar-nav a:hover {
    color: var(--primary-600);
    background: rgba(212, 165, 165, 0.1);
}

[data-theme="dark"] .zx-bar-nav a:hover {
    color: var(--primary-500);
    background: rgba(166, 128, 128, 0.15);
}

.zx-bar-nav a:hover::after {
    width: 60%;
    left: 20%;
}

@media (max-width: 480px) {
    .zx-bar-title {
        display: none;
    }
    .zx-bar-nav a {
        padding: 6px 8px;
        font-size: 0.8rem;
    }
    .zx-bar-nav a::after {
        display: none;
    }
    .theme-toggle-btn {
        width: 44px;
        height: 24px;
    }
    .theme-slider {
        width: 18px;
        height: 18px;
    }
    [data-theme="dark"] .theme-slider {
        transform: translateX(20px);
    }
}

/* ===== 滚动条美化 ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* ===== 选中文本高亮 ===== */
::selection {
    background: var(--primary-100);
    color: var(--primary-700);
}

/* ===== 页面背景装饰 ===== */
body::before {
    content: '';
    position: fixed;
    top: -20%;
    right: -10%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 35, 126, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

body::after {
    content: '';
    position: fixed;
    bottom: -15%;
    left: -8%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* ===== 空状态增强 ===== */
.empty-state {
    padding: 60px 20px;
    text-align: center;
}

.empty-state::before {
    content: '📭';
    display: block;
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.6;
    animation: fadeInUp 0.5s ease both;
}

.empty-state h3 {
    font-size: 1.4rem;
    color: var(--text-heading);
    margin-bottom: 8px;
    animation: fadeInUp 0.5s ease 0.1s both;
}

.empty-state p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    animation: fadeInUp 0.5s ease 0.2s both;
}

/* ===== 深色主题增强 — 组件级覆盖 ===== */

/* 表单输入框 — 深色背景 + 亮色文字 */
[data-theme="dark"] .form-group input[type="text"],
[data-theme="dark"] .form-group textarea {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--gray-300);
}

[data-theme="dark"] .form-group input[type="text"]:focus,
[data-theme="dark"] .form-group textarea:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(166, 128, 128, 0.15);
}

/* 解析/提示弹窗 — 深色主题下保证可读性 */
[data-theme="dark"] .explanation-content,
[data-theme="dark"] .explanation {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-color: var(--warning-border);
}

/* header 装饰效果 — 深色主题微调 */
[data-theme="dark"] .header::before {
    background: radial-gradient(circle, rgba(166, 128, 128, 0.12) 0%, transparent 70%);
}

[data-theme="dark"] .header::after {
    background: radial-gradient(circle, rgba(196, 180, 138, 0.06) 0%, transparent 70%);
}

/* 选项卡片 — 深色模式可读性 */
[data-theme="dark"] .option {
    background: var(--gray-50);
}

[data-theme="dark"] .option:hover {
    background: var(--bg-active);
}

/* 统计标签 — 深色模式对比度 */
[data-theme="dark"] .question-stats-badge,
[data-theme="dark"] .status-badge {
    border-width: 1px;
}

/* 文件格式提示 — 深色可读性 */
[data-theme="dark"] .file-format-hint {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--secondary-600);
}

/* 智能提示条按钮 — 深色模式下降低白色亮度 */
[data-theme="dark"] .btn-practice {
    background: rgba(255, 255, 255, 0.88);
}

[data-theme="dark"] .btn-practice:hover {
    background: rgba(255, 255, 255, 0.95);
}

/* 页面背景装饰 — 深色主题适配 */
[data-theme="dark"] body::before {
    background: radial-gradient(circle, rgba(166, 128, 128, 0.05) 0%, transparent 70%);
}

[data-theme="dark"] body::after {
    background: radial-gradient(circle, rgba(80, 125, 112, 0.04) 0%, transparent 70%);
}

/* 筛选区域 — 深色模式文字对比度修复 */
[data-theme="dark"] .filter-select {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--gray-300);
}

[data-theme="dark"] .filter-select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(166, 128, 128, 0.15);
}

[data-theme="dark"] .filter-select option {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .filter-group label {
    color: var(--text-primary);
}

/* 知识点统计面板 — 深色模式高对比度 */
[data-theme="dark"] .subject-stats {
    background-color: var(--primary-50);
    color: var(--primary-700);
    border-color: var(--primary-100);
}

/* 警告按钮 — 深色模式下保持深色文字 (金色背景 + 深色文字) */
[data-theme="dark"] .btn-warning {
    color: var(--bg-page);
}

[data-theme="dark"] .btn-warning:hover {
    color: var(--bg-page);
}

/* 进度统计标签 — 深色模式增强可读性 */
[data-theme="dark"] .progress-item .label {
    color: var(--text-primary);
}

/* 焦点可见性（无障碍） ===== */
:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ===== 减少动画偏好 ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== 系统深色偏好回退 ===== */
/* 在 JS ThemeManager 加载前，根据 OS 偏好提供初始暗色渲染，避免白色闪烁 */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        --morandi-dusty-rose: #A68080;
        --morandi-muted-teal: #507D70;
        --morandi-warm-gray: #6D6373;
        --morandi-cream: #2A2830;
        --morandi-off-white: #353340;

        --primary-50: #3D3540; --primary-100: #4A4048;
        --primary-400: #A68080; --primary-500: #B89090;
        --primary-600: #C8A0A0; --primary-700: #D8B0B0;

        --secondary-400: #507D70; --secondary-500: #6C9A8B; --secondary-600: #88B0A3;
        --accent-50: #3A3630; --accent-500: #C4B48A; --accent-600: #D4C4A0;

        --success: #81C784; --success-bg: #2A3A2D;
        --warning: #FFB74D; --warning-bg: #3A3228;
        --error: #E57373; --error-bg: #3A2A2A;
        --warning-text: #FFB74D;
        --info: #6C9A8B; --info-bg: #2D3835; --info-border: #40574F;

        --gray-50: #353340; --gray-100: #3D3A48; --gray-200: #454250;
        --gray-300: #5A5565; --gray-400: #706B7A; --gray-500: #8A8590;
        --gray-600: #A4A0A8; --gray-700: #BEB8C0;

        --text-primary: #E8E4E8; --text-secondary: #B0A8B0; --text-disabled: #706B7A;
        --text-heading: #F5F0F5; --text-on-dark: #E8E4E8;
        --bg-page: #252330; --bg-card: #2D2B38; --bg-hover: #3D3A48; --bg-active: #454250;

        --shadow-sm: 0 1px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.15);
        --shadow-md: 0 4px 14px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.15);
        --shadow-lg: 0 10px 30px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.2);

        --gradient-header: linear-gradient(135deg, #353340 0%, #2D2B38 40%, #252330 100%);
        --gradient-primary: linear-gradient(135deg, #A68080 0%, #8A6A6A 100%);
        --gradient-secondary: linear-gradient(135deg, #507D70 0%, #406560 100%);
    }
}

/* ================================================================
   iframe 模式样式 — 在 iframe 中加载时隐藏冗余导航元素
   launcher-bridge.js 会在 iframe 模式下给 body 添加 .in-iframe 类
   ================================================================ */

/* iframe 模式下：隐藏 header 的标题和装饰，但保留题库选择器 */
body.in-iframe .header {
    padding: 12px 0;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

body.in-iframe .header::before,
body.in-iframe .header::after {
    display: none;
}

body.in-iframe .header h1,
body.in-iframe .header .subtitle {
    display: none;
}

/* 题库选择器在 iframe 模式下的样式调整 */
body.in-iframe .bank-selector-container {
    margin-top: 0;
}

body.in-iframe .bank-selector-container label {
    color: var(--text-primary);
}

body.in-iframe .bank-selector {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--gray-300);
}

body.in-iframe .bank-selector:hover {
    background-color: var(--bg-active);
    border-color: var(--gray-400);
}

/* 隐藏返回按钮（父窗口处理导航） */
body.in-iframe .back-button {
    display: none;
}

/* 移除 body 顶部内边距（因为没有 header 了） */
body.in-iframe {
    padding-top: 0;
}

/* 调整主内容区域的上边距 */
body.in-iframe .main {
    padding-top: 20px;
}

/* ================================================================
   题目类型标识样式 — 单选/多选
   ================================================================ */

.question-type {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 8px;
    vertical-align: middle;
}

.question-type-single {
    background: linear-gradient(135deg, var(--secondary-100), var(--secondary-200));
    color: var(--secondary-600);
    border: 1px solid var(--secondary-300);
}

.question-type-multiple {
    background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
    color: var(--primary-600);
    border: 1px solid var(--primary-300);
}

[data-theme="dark"] .question-type-single {
    background: linear-gradient(135deg, var(--secondary-600), var(--secondary-500));
    color: var(--secondary-100);
    border-color: var(--secondary-400);
}

[data-theme="dark"] .question-type-multiple {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    color: var(--primary-100);
    border-color: var(--primary-400);
}

/* ================================================================
   题号跳转样式
   ================================================================ */

.jump-to-question {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jump-input {
    width: 70px;
    padding: 6px 10px;
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    text-align: center;
    background: var(--bg-card);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.jump-input:focus {
    outline: none;
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px rgba(212, 165, 165, 0.15);
}

.jump-input::placeholder {
    color: var(--text-disabled);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* 深色主题适配 */
[data-theme="dark"] .jump-input {
    background: var(--bg-hover);
    border-color: var(--gray-500);
}

[data-theme="dark"] .jump-input:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px rgba(166, 128, 128, 0.2);
}

/* ================================================================
   多选题确认按钮样式
   ================================================================ */

.confirm-multiple-btn {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 12px rgba(212, 165, 165, 0.3);
}

.confirm-multiple-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 165, 165, 0.4);
}

.confirm-multiple-btn:disabled {
    background: var(--gray-300);
    color: var(--text-disabled);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

[data-theme="dark"] .confirm-multiple-btn {
    background: var(--gradient-primary);
    box-shadow: 0 4px 12px rgba(166, 128, 128, 0.3);
}

[data-theme="dark"] .confirm-multiple-btn:disabled {
    background: var(--gray-600);
    color: var(--gray-400);
}

/* 多选题选中状态优化 */
.option.selected {
    border-color: var(--primary-400);
    background: var(--primary-50);
    box-shadow: 0 0 0 3px rgba(212, 165, 165, 0.2);
}

[data-theme="dark"] .option.selected {
    border-color: var(--primary-400);
    background: var(--primary-100);
}