/* ============================================
   全局变量和重置
   ============================================ */
:root {
    /* 颜色主题 */
    --primary-color: #4a9d9a;
    --primary-hover: #3d8582;
    --primary-emphasis: #19aca4;
    --primary-light: #e8f5f4;
    --secondary-color: #6B7280;
    --background: #F5F7FA;
    --surface: #FFFFFF;
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --border-color: #E5E7EB;
    --success: #10B981;
    --error: #EF4444;
    --warning: #F59E0B;
    
    /* 动画时长 */
    --transition-fast: 0.15s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;
    
    /* 阴影 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* 间距 */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* 圆角 */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
}

/* 暗黑模式 */
[data-theme="dark"] {
    --background: #1E2126;
    --surface: #282C34;
    --text-primary: #E0E0E0;
    --text-secondary: #A0A0A0;
    --text-tertiary: #707070;
    --border-color: #3A3F4B;
    --primary-light: #2d4443;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
    background: var(--background);
    color: var(--text-primary);
    line-height: 1.6;
    overflow: hidden;
    transition: background var(--transition-normal), color var(--transition-normal);
    height: 100vh;
}

/* ============================================
   工具类
   ============================================ */
.hidden {
    display: none !important;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ============================================
   顶部导航栏
   ============================================ */
.header {
    background: var(--surface);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.header-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary-color);
}

.logo-icon {
    width: 28px;
    height: 28px;
    stroke-width: 2;
}

.header-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* ============================================
   按钮样式
   ============================================ */
.btn-icon {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.btn-icon:hover {
    background: var(--primary-light);
    color: var(--primary-color);
}

.btn-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.btn-primary {
    padding: 0.35rem 0.5rem;
    background: var(--primary-color);
    color: white;
    border: none;
    width: 150px;
    height: 60px;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--primary-emphasis);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    position: relative;
    width: 150px;
    height: 60px;
    padding: 0.35rem 0.5rem;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-text {
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: var(--border-radius);
}

.btn-text:hover {
    color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.05);
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* 暗黑模式图标切换 */
.icon-moon {
    display: none;
}

[data-theme="dark"] .icon-sun {
    display: none;
}

[data-theme="dark"] .icon-moon {
    display: block;
}

/* ============================================
   主容器布局
   ============================================ */
.main-container {
    display: flex;
    max-width: 1600px;
    margin: 0 auto;
    height: calc(100vh - 56px);
    overflow: hidden;
}

/* 左侧单词列表 */
.sidebar {
    width: 260px;
    background: var(--surface);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-normal);
    height: 100%;
}

.sidebar.collapsed {
    transform: translateX(-100%);
}

.sidebar-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.sidebar-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.book-list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.book-list {
    padding: var(--spacing-sm);
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.book-item {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    background: var(--background);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

.book-item:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
}

.book-item.active {
    background: var(--primary-color);
    color: white;
}

.book-item-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.book-item-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.book-item:hover .book-item-icon {
    transform: scale(1.1) rotate(-5deg);
}

.book-item-name {
    font-weight: 600;
    font-size: 1rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-item-count {
    font-size: 0.875rem;
    opacity: 0.8;
    flex-shrink: 0;
}

.book-item-progress {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: var(--spacing-xs);
}

.book-item-time {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-top: var(--spacing-xs);
    font-style: italic;
}

.book-item-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.btn-book-action {
    flex: 1;
    padding: 0.375rem;
    font-size: 0.75rem;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.book-item.active .btn-book-action {
    background: rgba(255, 255, 255, 0.3);
}

.btn-book-action:hover {
    background: rgba(255, 255, 255, 0.4);
}

.btn-book-settings {
    width: 32px;
    height: 32px;
    padding: 0.375rem;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-book-settings svg {
    width: 16px;
    height: 16px;
    stroke-width: 2px;
}

.book-item.active .btn-book-settings {
    background: rgba(255, 255, 255, 0.3);
}

.btn-book-settings:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(30deg);
}

.btn-add-book {
    margin: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--primary-light);
    color: var(--primary-color);
    border: 2px dashed var(--primary-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.btn-add-book:hover {
    background: var(--primary-color);
    color: white;
}

.btn-add-book svg {
    width: 16px;
    height: 16px;
}

/* 主内容区 */
.main-content {
    flex: 1;
    padding: var(--spacing-lg);
    overflow-y: auto;
    position: relative;
    min-width: 0;
    height: 100%;
}

/* 右侧统计面板 */
.stats-panel {
    width: 260px;
    background: var(--surface);
    border-left: 1px solid var(--border-color);
    padding: var(--spacing-sm) var(--spacing-sm);
    overflow-y: auto;
    height: 100%;
    flex-shrink: 0;
}

.stats-header {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
}

.stats-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.stats-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.stat-card {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--background);
    border-radius: var(--radius-md);
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.stat-icon {
    font-size: 1.5rem;
}

.stat-info {
    flex: 1;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* 学习时长 - 现代化时钟样式 (MM:SS格式) */
#todayTime {
    font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, var(--primary-color), #9333ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.85rem;
    font-weight: 800;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    min-width: 5ch; /* 确保 00:00 有足够空间 */
}

/* 暗黑模式下的时钟样式 */
[data-theme="dark"] #todayTime {
    background: linear-gradient(135deg, #60a5fa, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 时钟数字变化时的微动画 */
@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.95; }
}

#todayTime.updating {
    animation: pulse-subtle 0.5s ease;
}

.stat-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
}

.review-reminder {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--primary-light);
    border-radius: var(--radius-md);
    border: 2px solid var(--primary-color);
}

.review-reminder h4 {
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.review-books-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) transparent;
}

.review-books-list::-webkit-scrollbar {
    width: 6px;
}

.review-books-list::-webkit-scrollbar-track {
    background: transparent;
}

.review-books-list::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 3px;
}

.review-books-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-dark);
}

.review-book-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(135deg, var(--surface) 0%, var(--background) 100%);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
    transition: all var(--transition-normal);
}

.review-book-item:hover {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--surface) 0%, var(--primary-light) 100%);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}

.review-book-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    flex-grow: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: var(--radius-md);
    
    transition: all var(--transition-fast);
}

.review-book-item:hover .review-book-icon {
    transform: rotate(-10deg) scale(1.1);
    border-color: var(--primary-color);
}

.review-book-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.review-book-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
}

.review-book-count {
    font-size: 0.6875rem;
    color: var(--primary-color);
    font-weight: 500;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.review-book-count::before {
    
    font-size: 0.75rem;
}

.review-book-btn {
    flex-shrink: 0;
    flex-grow: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 1rem;
    background: transparent;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-book-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px) scale(1.1);
    
}

.review-book-btn:active {
    transform: translateY(0) scale(1);
}

.review-empty {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    color: var(--text-secondary);
    font-size: 0.875rem;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--surface) 100%);
    border-radius: var(--radius-md);
    border: 1.5px dashed var(--border-color);
}

.review-empty > div:first-child {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
    animation: celebrateAnimation 2s ease-in-out infinite;
}

@keyframes celebrateAnimation {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(-10deg);
    }
    75% {
        transform: scale(1.1) rotate(10deg);
    }
}

.review-count {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding: 6px 8px;
    background: var(--primary-light);
    border-radius: var(--radius-sm);
    text-align: center;
}

.review-count strong {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.9375rem;
}

/* ============================================
   Emoji选择器
   ============================================ */
.emoji-picker-body {
    padding: 0;
}

.emoji-search-bar {
    position: relative;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.emoji-search-bar .search-icon {
    position: absolute;
    left: calc(var(--spacing-md) + 12px);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
    stroke-width: 2.5px;
}

.emoji-search-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--background);
    transition: all var(--transition-fast);
}

.emoji-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.emoji-categories {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border-color);
}

.emoji-categories::-webkit-scrollbar {
    display: none;
}

.emoji-category-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.emoji-category-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.emoji-category-btn.active {
    color: var(--surface);
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 8px;
    padding: var(--spacing-md);
    max-height: 400px;
    overflow-y: auto;
}

.emoji-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: var(--background);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.emoji-item:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
    transform: scale(1.15);
    z-index: 1;
}

.emoji-item:active {
    transform: scale(1.05);
}

/* ============================================
   欢迎页面
   ============================================ */
.welcome-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
}

.welcome-content {
    text-align: center;
    max-width: 500px;
}

.welcome-icon {
    width: 160px;
    height: 160px;
    margin: 0 auto var(--spacing-lg);
    animation: float 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(74, 157, 154, 0.2));
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.welcome-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    background: linear-gradient(135deg, var(--primary-color), #2DD4BF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
}

.upload-area {
    padding: var(--spacing-xl);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    transition: all var(--transition-normal);
    cursor: pointer;
}

.upload-area:hover,
.upload-area.dragover {
    border-color: var(--primary-color);
    background: var(--primary-light);
    background-image: url('../examples/示例格式(极速导入版).png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
   
}

.upload-area:hover::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.087);
    pointer-events: none;
    border-radius: var(--radius-lg);
    
}

.upload-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--spacing-md);
    color: var(--text-tertiary);
    stroke-width: 2;
}

.upload-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}

.upload-hint {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.or-divider {
    position: relative;
    margin: var(--spacing-xl) 0;
    text-align: center;
}

.or-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: var(--border-color);
}

.or-divider span {
    position: relative;
    background: var(--background);
    padding: 0 var(--spacing-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.link {
    display: inline-block;
    margin-top: var(--spacing-lg);
    margin-left: var(--spacing-md);
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.875rem;
   
}

.link:hover {
    text-decoration: underline;
}

/* ============================================
   单词编辑预览
   ============================================ */
.word-editor-screen {
    max-width: 1200px;
    margin: 0 auto;
}

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
}

.editor-header h2 {
    font-size: 1.875rem;
    font-weight: 700;
}

.editor-actions {
    display: flex;
    gap: var(--spacing-md);
}

.editor-container {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.editor-table-wrapper {
    overflow-x: auto;
}

.editor-table {
    width: 100%;
    border-collapse: collapse;
}

.editor-table thead {
    background: var(--primary-light);
}

.editor-table th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.editor-table td {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.editor-table tbody tr:hover {
    background: var(--primary-light);
}

.btn-delete {
    color: var(--error);
    background: transparent;
    border: 1px solid var(--error);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-delete:hover {
    background: var(--error);
    color: var(--surface);
}

/* ============================================
   学习页面
   ============================================ */
.learning-screen {
    max-width: 800px;
    margin: 0 auto;
}

/* 进度条 */
.progress-bar {
    margin-bottom: var(--spacing-xl);
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.progress-track {
    height: 8px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
    display: flex;
    gap: 1px;
}

/* 异色进度条段 */
.progress-segment {
    height: 100%;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.progress-segment.correct {
    background: #4a9d9a; /* 答对：绿色 */
}

.progress-segment.wrong {
    background: #ff4757; /* 答错：红色 */
}

.progress-segment.unknown {
    background: #ffa502; /* 不知道：橙色 */
}

.progress-segment.partial {
    background: #f39c12; /* 部分正确：黄色 */
}

.progress-segment.current {
    background: color-mix(in srgb, var(--primary-color), transparent 60%); 
    animation: pulse 1s ease-in-out infinite;
}

.progress-segment.pending {
    background: var(--border-color); /* 未答：灰色 */
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* 保留旧的进度条样式（兼容性） */
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #2DD4BF);
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
    width: 0%;
}

/* 单词卡片 */
.card-container {
    margin-bottom: var(--spacing-xl);
    perspective: 1000px;
}

.word-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xl);
    min-height: 500px;
    position: relative;
    animation: slideIn var(--transition-normal) ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    position: relative;
}

/* 上次答题记录徽章 */
.last-word-badge {
    display: none;
    position: absolute;
    top: -10px;
    right: 0px;
    padding: 0.5rem 0.75rem;
    background: transparent;


    font-size: 0.75rem;
    align-items: center;
    gap: 0.1rem;
    max-width: 350px;
    z-index: 10;
    animation: slideInFromTop 0.3s ease-out;
}



.badge-icon {
    font-size: 1.2rem;
    font-weight: bold;
    flex-shrink: 0;
}

.last-word-badge.correct .badge-icon {
    color: #10B981;
}

.last-word-badge.wrong .badge-icon {
    color: #EF4444;
}

.last-word-badge.unknown .badge-icon {
    color: #ffa502;
}

.badge-content {
    padding-left: 0.5rem;
    display: flex;
    flex-direction: row;
    gap: 0.1rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
}

.badge-word {
    font-weight: 600;
    font-size: 0.925rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.badge-meaning {
    padding-left: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 15em;
}

/* Badge中的收藏按钮 */
.btn-favorite-badge {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    margin-left: 0.25rem;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
    margin-bottom: 0.25rem;

}

/* 移动端修复：触摸时不显示焦点样式 */
.btn-favorite-badge:focus {
    outline: none;
}

.btn-favorite-badge:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.btn-favorite-badge:hover {
    transform: scale(1.15);
}

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

.btn-favorite-badge .favorite-icon {
    display: flex;
    align-items: center;
    justify-content: center;    
    transition: all var(--transition-fast);
}

.btn-favorite-badge:hover .favorite-icon {
    transform: rotate(15deg);
}

.btn-favorite-badge:hover .favorite-gray {
    opacity: 0.6;
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-sound {
    position: relative;
    color: var(--primary-color);
}

.hint-counter {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* 模式1: 看单词选释义 */
.word-display {
    text-align: center;
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-md) 0;
}

.word-text {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.word-phonetic {
    font-size: 1.25rem;
    color: var(--text-secondary);
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', sans-serif;
    margin-bottom: var(--spacing-sm);
}

.word-pos {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--primary-light);
    color: var(--primary-color);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
}

/* CEFR等级样式 */
.word-pos.cefr-a1 {
    background: rgba(87, 145, 43, 0.15);
    color: #57912b;
}

.word-pos.cefr-a2 {
    background: rgba(147, 164, 24, 0.15);
    color: #93a418;
}

.word-pos.cefr-b1 {
    background: rgba(185, 120, 15, 0.15);
    color: #b9780f;
}

.word-pos.cefr-b2 {
    background: rgba(182, 98, 14, 0.15);
    color: #b6620e;
}

.word-pos.cefr-c1 {
    background: rgba(179, 46, 39, 0.15);
    color: #b32e27;
}

.word-pos.cefr-c2 {
    background: rgba(177, 41, 109, 0.15);
    color: #b1296d;
}

/* 单词统计信息（错误率）*/
.word-stats {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
}

.word-stats .stats-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.word-stats .stats-value {
    color: #ef4444;
    font-weight: 700;
    font-size: 0.85rem;
}

.word-stats .stats-detail {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.options-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    padding-bottom: 2rem; /* 为原词标签留出空间 */
}

.option-btn {
    padding: var(--spacing-lg);
    background: var(--background);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    position: relative;
    overflow: visible;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    max-width: 100%;
}

.hotkey-hint {
    position: absolute;
    top: 4px;
    left: 4px;
    background: transparent;
    color: color-mix(in srgb, var(--text-primary), transparent 75%);
    opacity: 0.6;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0px 0px;
    min-width: 20px;
    text-align: center;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}

.option-text {
    font-size: 1rem;
    font-weight: 500;
    width: 100%;
    max-width: 100%;
    color: inherit;
    /* 使用省略号截断超长文本，不缩小字体 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 最多显示3行 */
    line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    word-break: break-word;
}

.option-pos {
    font-size: 0.75rem;
    
    font-style: italic;
}

.option-btn:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* 移动端修复：使用 focus-visible 替代 focus，触摸时不显示焦点样式 */
.option-btn:focus {
    outline: none;
}

.option-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* iOS修复：禁用带有状态类的按钮的focus效果，保持原有颜色 */
.option-btn.correct:focus,
.option-btn.correct-unknown:focus,
.option-btn.wrong:focus,
.option-btn.selected:focus {
    outline: none;
    border-color: inherit; /* 继承当前状态的边框颜色 */
}

/* 键盘导航时的焦点样式（保持答题状态的边框颜色）*/
.option-btn.correct:focus-visible {
    outline: 2px solid var(--success);
    outline-offset: 2px;
}

.option-btn.correct-unknown:focus-visible {
    outline: 2px solid #ffa502;
    outline-offset: 2px;
}

.option-btn.wrong:focus-visible {
    outline: 2px solid var(--error);
    outline-offset: 2px;
}

.option-btn:active {
    transform: scale(0.98);
}

.option-btn.selected {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
}

.option-btn.correct {
    border-color: var(--success);
    background: var(--success);
    color: white;
    animation: bounce var(--transition-normal);
}

/* 不知道状态下的正确答案（橙色） */
.option-btn.correct-unknown {
    border-color: #ffa502;
    background: #ffa502;
    color: white;
    animation: bounce var(--transition-normal);
}

.option-btn.wrong {
    border-color: var(--error);
    background: var(--error);
    color: white;
    animation: shake var(--transition-normal);
}

/* "如何记忆？"按钮特殊样式 */
.option-btn.memory-aid-btn {
    border-color: #FB923C;
    background: linear-gradient(135deg, #FFF9F0 0%, #FFEDD5 100%);
    color: #EA580C;
    font-weight: 600;
    box-shadow: 0 0 15px rgba(251, 146, 60, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

[data-theme="dark"] .option-btn.memory-aid-btn {
    background: linear-gradient(135deg, #3E3520 0%, #4A3926 100%);
    color: #FB923C;
}

.option-btn.memory-aid-btn:hover {
    border-color: #EA580C;
    background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 100%);
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(251, 146, 60, 0.4);
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(251, 146, 60, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(251, 146, 60, 0.5);
    }
}

/* 禁用状态（概率为0%时） */
.option-btn.option-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--background);
    border-color: var(--border-color);
    pointer-events: none;
}

.option-btn.option-disabled:hover {
    transform: none;
    box-shadow: none;
    background: var(--background);
    border-color: var(--border-color);
}

/* 错误答案下方的原词标签 */
.original-word-label {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: transparent;
    color: var(--text-primary);
    opacity: 0;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    pointer-events: none;
    transition: all 0.5s ease-out;
}

.original-word-label.show {
    opacity: 0.5;
    transform: translateX(-50%) translateY(0);
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* 模式2: 看释义拼单词 */
.meaning-display {
    padding: var(--spacing-xl);
    background: var(--primary-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
}

.meaning-content {
    margin-bottom: var(--spacing-md);
}

.meaning-line {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.meaning-part-of-speech {
    padding: 0.25rem 0.5rem;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.meaning-text {
    margin: 0;
    font-size: 1.125rem;
    color: var(--text-primary);
    flex: 1;
}

.meaning-pos {
    padding: 0.25rem 0.75rem;
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* CEFR等级样式（拼写模式） */
.meaning-pos.cefr-a1 {
    background: rgba(87, 145, 43, 0.15);
    color: #57912b;
}

.meaning-pos.cefr-a2 {
    background: rgba(147, 164, 24, 0.15);
    color: #93a418;
}

.meaning-pos.cefr-b1 {
    background: rgba(185, 120, 15, 0.15);
    color: #b9780f;
}

.meaning-pos.cefr-b2 {
    background: rgba(182, 98, 14, 0.15);
    color: #b6620e;
}

.meaning-pos.cefr-c1 {
    background: rgba(179, 46, 39, 0.15);
    color: #b32e27;
}

.meaning-pos.cefr-c2 {
    background: rgba(177, 41, 109, 0.15);
    color: #b1296d;
}

.example-sentence {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
    padding-left: var(--spacing-md);
    border-left: 3px solid var(--primary-color);
}

/* 答错时显示的例句容器 */
.wrong-answer-example {
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm) var(--spacing-sm);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out, background 0.3s ease-out, border-color 0.3s ease-out, transform 0.2s ease;
    /* 默认隐藏但占据空间 */
    opacity: 0;
    visibility: hidden;
    /* 设置最小高度确保占位 */
    min-height: 60px;
    box-sizing: border-box;
    /* 可点击样式 */
    cursor: pointer;
    user-select: none;
}

.wrong-answer-example:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}

.wrong-answer-example:active {
    transform: scale(0.98);
}

/* 答错样式（红色） */
.wrong-answer-example.example-wrong {
    background: linear-gradient(135deg, #FFF5F5 0%, #FEE2E2 100%);
    border-left: 4px solid var(--error);
}

[data-theme="dark"] .wrong-answer-example.example-wrong {
    background: linear-gradient(135deg, #3E1F1F 0%, #4A2626 100%);
}

/* 不知道样式（橙色） */
.wrong-answer-example.example-unknown {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFE8CC 100%);
    border-left: 4px solid #ffa502;
}

[data-theme="dark"] .wrong-answer-example.example-unknown {
    background: linear-gradient(135deg, #3E3520 0%, #4A3F26 100%);
}

/* 显示状态 */
.wrong-answer-example.show {
    opacity: 1;
    visibility: visible;
    animation: slideDown 0.3s ease-out;
}

.example-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--error);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.example-sentence-choice {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-style: italic;
    line-height: 1.6;
    margin: 0;
    /* 确保内容最小高度，避免空内容时容器塌陷 */
    min-height: 1.6em;
}

/* ============================================
   记忆方法卡片（PC端）
   ============================================ */
.memory-aid-card {
    margin-top: var(--spacing-md);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, #FFF9F0 0%, #FFEDD5 100%);
    border-radius: var(--radius-lg);
    border: 2px solid #FB923C;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.memory-aid-card.show {
    opacity: 1;
    visibility: visible;
    max-height: 1000px;
    animation: slideDown 0.3s ease-out;
}

[data-theme="dark"] .memory-aid-card {
    background: linear-gradient(135deg, #3E3520 0%, #4A3926 100%);
}

.memory-aid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid rgba(251, 146, 60, 0.3);
}

.memory-aid-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #EA580C;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

[data-theme="dark"] .memory-aid-header h3 {
    color: #FB923C;
}

.btn-close-memory {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.btn-close-memory:hover {
    background: rgba(251, 146, 60, 0.1);
    color: #EA580C;
}

.btn-close-memory svg {
    width: 20px;
    height: 20px;
}

.memory-aid-content {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.8;
}

.memory-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-md);
}

.memory-loading p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* 记忆方法内容格式化 */
.memory-method-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-md);
    border-left: 3px solid #FB923C;
    transition: all var(--transition-fast);
}

.memory-method-section:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateX(2px);
}

[data-theme="dark"] .memory-method-section {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .memory-method-section:hover {
    background: rgba(255, 255, 255, 0.1);
}

.memory-method-section:last-child {
    margin-bottom: 0;
}

.memory-method-title {
    font-size: 1rem;
    font-weight: 600;
    color: #EA580C;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

[data-theme="dark"] .memory-method-title {
    color: #FB923C;
}

.memory-icon {
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.memory-type {
    font-weight: 700;
    letter-spacing: 0.3px;
}

.memory-method-content {
    padding-left: calc(var(--spacing-md) + 1.3rem + var(--spacing-xs));
    color: var(--text-primary);
    line-height: 1.8;
    font-size: 0.95rem;
}

.memory-method-content p {
    margin: var(--spacing-xs) 0;
}

.memory-method-content strong,
.memory-highlight {
    color: #DC2626;
    font-weight: 600;
    padding: 0 2px;
}

[data-theme="dark"] .memory-method-content strong,
[data-theme="dark"] .memory-highlight {
    color: #FCA5A5;
}

.memory-method-content ul,
.memory-list {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    list-style: none;
}

.memory-method-content li,
.memory-list li {
    margin-bottom: var(--spacing-xs);
    position: relative;
    padding-left: var(--spacing-md);
}

.memory-method-content li::before,
.memory-list li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #FB923C;
    font-weight: bold;
}

/* ============================================
   移动端记忆方法蒙版弹窗
   ============================================ */
.memory-aid-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.memory-aid-modal.show {
    opacity: 1;
    visibility: visible;
}

.memory-aid-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.memory-aid-modal-content {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    transform: scale(0.9);
    transition: transform var(--transition-normal);
}

.memory-aid-modal.show .memory-aid-modal-content {
    transform: scale(1);
    animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
    from {
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.memory-aid-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.memory-aid-modal-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #EA580C;
    margin: 0;
}

[data-theme="dark"] .memory-aid-modal-header h3 {
    color: #FB923C;
}

.btn-close-memory-modal {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.btn-close-memory-modal:hover {
    background: rgba(251, 146, 60, 0.1);
    color: #EA580C;
}

.btn-close-memory-modal svg {
    width: 24px;
    height: 24px;
}

.memory-aid-modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    flex: 1;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.8;
}

/* 移动端滚动优化 */
.memory-aid-modal-body {
    -webkit-overflow-scrolling: touch;
}

/* 例句中的单词高亮 - 答错样式（红色） */
.example-sentence-choice .word-list-highlight {
    color: var(--error);
    font-weight: 700;
    font-style: italic;
    background: transparent;
    text-decoration: underline var(--error);
    padding: 0.1rem 0.1rem;
    border-radius: var(--radius-sm);
}

/* 例句中的单词高亮 - 不知道样式（橙色） */
.example-sentence-choice .word-highlight-unknown {
    color: #ffa502;
    font-weight: 700;
    font-style: italic;
    background: transparent;
    text-decoration: underline #ffa502;
    padding: 0.1rem 0.1rem;
    border-radius: var(--radius-sm);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.spell-input-area {
    margin-bottom: var(--spacing-xl);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.letter-slots {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.letter-slot {
    width: 48px;
    height: 64px;
    border-bottom: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    position: relative;
}

.letter-slot.active {
    border-bottom-color: var(--primary-color);
}

.letter-slot.filled {
    color: var(--text-primary);
    animation: letterPop var(--transition-fast);
}

.letter-slot.wrong {
    color: var(--error);
    animation: shake var(--transition-fast);
}

.letter-slot.correct {
    color: var(--success);
}

@keyframes letterPop {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.hidden-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.spell-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

/* 反馈叠加层 */
.feedback-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn var(--transition-fast);
}

[data-theme="dark"] .feedback-overlay {
    background: rgba(40, 44, 52, 0.95);
}

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

.feedback-content {
    text-align: center;
}

.feedback-icon {
    font-size: 5rem;
    margin-bottom: var(--spacing-lg);
    animation: scaleIn var(--transition-normal);
}

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

.feedback-text {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.correct-answer {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

/* 底部操作栏 */
.learning-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    align-items: center;
}

/* ============================================
   完成页面
   ============================================ */
.completion-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
}

.completion-content {
    text-align: center;
    max-width: 600px;
}

.completion-icon {
    font-size: 5rem;
    margin-bottom: var(--spacing-lg);
    animation: rotateIn 0.6s ease-out;
}

@keyframes rotateIn {
    from {
        transform: rotate(-180deg) scale(0);
        opacity: 0;
    }
    to {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

.completion-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xl);
}

.stats-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-item {
    padding: var(--spacing-lg);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.completion-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   单词表浏览页面
   ============================================ */
.word-list-screen {
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeIn 0.3s ease-out;
}

.word-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--border-color);
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.word-list-title-section {
    flex: 1;
    min-width: 200px;
}

/* AI补充进度显示 */
.ai-progress-container {
    flex: 0 1 auto;
    background: transparent;
    padding: var(--spacing-md) var(--spacing-lg);
    min-width: 280px;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ai-progress-text {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}

.ai-progress-icon {
    font-size: 1.2rem;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.ai-progress-bar {
    width: 100%;
    height: 6px;
    background: color-mix(in srgb, var(--text-tertiary), transparent 50%);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--spacing-xs);
}

.ai-progress-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 3px;
    transition: width 0.3s ease-out;
    width: 0%;
}

.ai-progress-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
}

.ai-progress-time {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.word-list-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.word-list-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.word-list-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-left: 3.5rem;
}

.word-list-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

/* 浏览词单操作按钮统一样式 */
.btn-word-list-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--surface);
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-word-list-action svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    flex-shrink: 0;
}

.btn-word-list-action:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-word-list-action:active {
    transform: translateY(0);
}

/* 关闭按钮特殊样式 */
.btn-word-list-close {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-word-list-close:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: white;
}

/* 单词表格容器 */
.word-list-table-wrapper {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    position: relative;
}

/* 美化滚动条 */
.word-list-table-wrapper::-webkit-scrollbar {
    width: 10px;
}

.word-list-table-wrapper::-webkit-scrollbar-track {
    background: var(--background);
    border-radius: var(--radius-md);
}

.word-list-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.word-list-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* 单词表格 */
.word-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.word-list-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.word-list-table thead th {
    padding: var(--spacing-lg);
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--primary-light);
    border-bottom: 2px solid var(--primary-color);
    white-space: nowrap;
}

.word-list-table tbody tr {
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--border-color);
}

.word-list-table tbody tr:hover {
    background: var(--primary-light);
    transform: translateX(2px);
}

.word-list-table tbody tr:last-child {
    border-bottom: none;
}

/* 斑马纹 */
.word-list-row-even {
    background: var(--background);
}

.word-list-cell {
    padding: var(--spacing-md) var(--spacing-lg);
    vertical-align: center;
    color: var(--text-primary);
    line-height: 1.6;
    transition: all var(--transition-fast);
}

/* 可编辑单元格 */
.editable-cell {
    position: relative;
}

.editable-cell.editing {
    cursor: text;
    background: var(--primary-light);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
}

.editable-cell.editing:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 157, 154, 0.1);
}

.editable-cell.editing:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 157, 154, 0.2);
    background: var(--surface);
}

/* 列宽设置 */
.word-list-col-edit {
    width: 100px;
    text-align: center;
}

.word-list-col-index {
    width: 60px;
    text-align: center;
    
}

.word-list-col-word {
    width: 150px;
    font-weight: 600;
    
    
}

.word-list-col-phonetic {
    width: 150px;
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', sans-serif;
    color: var(--text-secondary);
}

.word-list-col-meaning {
    width: 250px;
}

.word-list-col-example {
    min-width: 300px;
}

/* 单元格样式 */
.word-list-cell-index {
    font-weight: 500;
    color: var(--text-tertiary);
    
}

.word-list-cell-word strong {
    color: var(--primary-color);
    font-size: 1.05rem;
}

.word-list-cell-phonetic {
    font-style: italic;
}

.word-list-cell-meaning {
    line-height: 1.6;
}

.word-list-cell-example {
    color: var(--text-secondary);
}

/* 词性标签 */
.word-list-pos {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: var(--primary-light);
    color: var(--primary-color);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.25rem;
}

/* 例句中的单词高亮 */
.word-list-highlight {
    color: var(--primary-color);
    font-weight: 600;
    background: var(--primary-light);
    padding: 0.125rem 0.25rem;
    border-radius: var(--radius-sm);
}

/* 编辑模式按钮样式 */
.edit-mode-icon {
    font-size: 1.2rem;
    margin-right: 0.25rem;
}

.word-list-cell-edit {
    text-align: center;
    vertical-align: middle;
}

.word-list-action-btn {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column; /* 垂直排列图标 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
   
}

.word-list-action-btn:hover {
    background: var(--border-color);
    transform: scale(1.1);
}

.favorite-btn {
    margin-right: 0.5rem;
    
}

.delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

.favorite-gray {
    filter: grayscale(100%) ;
    opacity: 0.35;
    transition: all var(--transition-fast);
    
}

.btn-favorite:hover .favorite-gray {
    opacity: 0.6;
}

/* 学习模式中的收藏按钮 */
.word-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.word-meta-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-favorite {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
    line-height: 1;
}

/* 移动端修复：触摸时不显示焦点样式 */
.btn-favorite:focus {
    outline: none;
}

.btn-favorite:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.btn-favorite:hover {
    
    transform: scale(1.15);
}

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

.btn-favorite .favorite-icon {
    display: inline-block;
    transition: transform var(--transition-fast);
}

.btn-favorite:hover .favorite-icon {
    transform: rotate(15deg);
}

/* ============================================
   AI工坊相关样式
   ============================================ */

/* Header中的AI工坊按钮 */
.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-ai-workshop {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 1rem;
    background: linear-gradient(135deg, var(--primary-color), #5ebdba);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 8px rgba(74, 157, 154, 0.3);
}

.btn-ai-workshop:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 157, 154, 0.4);
}

.btn-ai-workshop .ai-icon {
    font-size: 1rem;
}

/* AI工坊页面 */
.ai-workshop-screen {
    max-width: 1200px;
    margin: 0 auto;
    animation: fadeIn 0.3s ease-out;
}

.ai-workshop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--border-color);
}

/* 工坊应用网格 */
.workshop-apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.workshop-app-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    cursor: pointer;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.workshop-app-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-color);
}

.workshop-app-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
    animation: float 3s ease-in-out infinite;
}

.workshop-app-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.workshop-app-desc {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
    flex: 1;
}

.workshop-app-btn {
    width: 100%;
    pointer-events: none;
}

.workshop-app-card:hover .workshop-app-btn {
    background: var(--primary-hover);
}

.ai-workshop-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ai-icon-large {
    font-size: 2.5rem;
}

/* AI功能卡片 */
.ai-feature-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--spacing-xl);
}

.ai-feature-header {
    margin-bottom: var(--spacing-xl);
}

.ai-feature-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.ai-feature-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* 表单样式 */
.ai-story-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-label {
    margin-top: 25px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    white-space: nowrap; /* 强制文字不换行 */
    overflow: hidden;    /* 超出容器的内容隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    max-width: 35vw; /* 可根据实际布局调整宽度 */
}

.form-hint {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.form-select,
.form-input {
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    background: var(--background);
    color: var(--text-primary);
    transition: all var(--transition-fast);
    max-width: 35vw;
}

.form-select:focus,
.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* 关键词选择器 */
.keyword-selector {
    margin-top: 0;
}

.keyword-empty {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-secondary);
    background: var(--background);
    border-radius: var(--radius-md);
    border: 2px dashed var(--border-color);
}

.keyword-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--background);
    border-radius: var(--radius-md);
    max-height: 200px;
    overflow-y: auto;
}

.keyword-item {
    padding: 0.5rem 1rem;
    background: var(--surface);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.keyword-item:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.keyword-item.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* 待复习单词样式 */
.review-keyword-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.review-keyword-word {
    flex: 1;
}

.review-keyword-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.review-keyword-item.selected .review-keyword-badge {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

/* 关键词选择模式切换 */
.keyword-mode-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    padding: 4px;
    background: var(--background);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.keyword-mode-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.keyword-mode-tab svg {
    width: 18px;
    height: 18px;
    stroke-width: 2px;
}

.keyword-mode-tab:hover {
    background: var(--surface);
    color: var(--text-primary);
}

.keyword-mode-tab.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.keyword-mode-tab.active svg {
    stroke: currentColor;
}

/* 设置选项卡样式 */
.settings-tabs {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    padding-bottom: 0;
    background: transparent;
    border-bottom: 1px solid var(--border-color);
}

.settings-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.settings-tab svg {
    width: 18px;
    height: 18px;
    stroke-width: 2px;
}

.settings-tab:hover {
    color: var(--text-primary);
    background: var(--background);
}

.settings-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

.settings-tab.active svg {
    stroke: currentColor;
}

/* 设置选项卡内容 */
.settings-tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

.settings-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 模式内容区 */
.keyword-mode-content {
    margin-top: var(--spacing-md);
    position: relative;
    min-height: 200px;
}

.keyword-mode-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.keyword-mode-panel.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 词单选择器 */
.book-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 2px dashed var(--border-color);
    min-height: 80px;
    transition: all var(--transition-fast);
}

.book-selector:empty::before {
    content: '暂无词单，请先导入词书';
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

.book-selector:has(.book-selector-item) {
    border-style: solid;
}

.book-selector-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.5rem 1rem;
    background: var(--surface);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.book-selector-item:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.book-selector-item.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.book-selector-item-icon {
    font-size: 1.2rem;
}

.book-selector-item-name {
    font-weight: 500;
}

.book-selector-item-count {
    opacity: 0.7;
    font-size: 0.85rem;
}

/* 自动选择控制 */
.auto-select-control {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--surface) 100%);
    border-radius: var(--radius-md);
    border: 1px solid var(--primary-color);
}

.auto-select-control label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.auto-select-input {
    width: 70px;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    transition: all var(--transition-fast);
}

.auto-select-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.auto-select-unit {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.btn-auto-select {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.6rem 1.25rem;
    font-weight: 600;
}

.btn-auto-select svg {
    width: 18px;
    height: 18px;
    stroke-width: 2px;
}

/* 手动输入单词 */
.keyword-input-wrapper {
    position: relative;
    margin-top: 0;
}

.keyword-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.keyword-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--primary-light);
}

.keyword-input.invalid {
    border-color: var(--error);
    background-image: linear-gradient(45deg, transparent 65%, var(--error) 80%, transparent 90%),
                      linear-gradient(135deg, transparent 5%, var(--error) 15%, transparent 25%),
                      linear-gradient(135deg, transparent 45%, var(--error) 55%, transparent 65%),
                      linear-gradient(45deg, transparent 25%, var(--error) 35%, transparent 50%);
    background-size: 8px 2px;
    background-position: 0 100%;
    background-repeat: repeat-x;
    animation: wavy 0.5s linear infinite;
}

@keyframes wavy {
    0% {
        background-position: 0 100%;
    }
    100% {
        background-position: 8px 100%;
    }
}

.keyword-input-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--background);
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

.keyword-input-hint svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}

/* 已选关键词 */
.selected-keywords {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--surface) 0%, var(--background) 100%);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    min-height: 80px;
    transition: all var(--transition-fast);
}

.selected-keywords:empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

.selected-keywords:empty::before {
    content: '请选择关键词...';
}

.selected-keywords:has(.keyword-tag) {
    border-color: var(--primary-color);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.1);
}

.selected-keywords-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.selected-keywords-label::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: bold;
}

.selected-keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.keyword-tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--primary-light);
    color: var(--primary-color);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
}

.keyword-remove {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.keyword-remove:hover {
    background: var(--primary-color);
    color: white;
}

/* 生成按钮 */
.form-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
}

.form-actions button {
    flex: 0 0 auto;
    min-width: 160px;
}

.btn-generate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    padding: 0.75rem 2rem;
}

.generate-icon {
    font-size: 1.2rem;
    animation: sparkle 2s infinite;
}

@keyframes sparkle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
}

/* 故事展示 */
.ai-story-display {
    animation: fadeIn 0.5s ease-out;
}

/* 阅读计时器 */
.reading-timer {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-family: 'Inter', monospace;
    letter-spacing: 0.1em;
    transition: color var(--transition-normal);
}

.reading-timer.negative {
    color: var(--error);
}

.story-header {
    margin-bottom: var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.story-header-content {
    flex: 1;
}

/* 双页展示按钮 */
.btn-dual-view {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-dual-view svg {
    width: 18px;
    height: 18px;
}

.btn-dual-view:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-dual-view:active {
    transform: translateY(0);
}

.btn-dual-view.active {
    background: var(--secondary-color);
}

.btn-dual-view.active:hover {
    background: #e74c3c;
}

/* 双页模式下的按钮样式 */
.dual-view-mode .btn-dual-view {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 双页展示模式布局 */
.dual-view-mode .main-container {
    max-width: none !important;
    margin: 0;
}

/* 双页模式：调整header布局 */
.dual-view-mode .header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
}

.dual-view-mode .header-container {
    padding: 0 var(--spacing-xl);
    justify-content: space-between;
    max-width: 100%;
}

.dual-view-mode .header-center {
    display: none;
}

.dual-view-mode .logo {
    margin-right: auto;
    font-size: 1.25rem;
    font-weight: 700;
}

.dual-view-mode .logo-icon {
    width: 32px;
    height: 32px;
}

.dual-view-mode .header-actions {
    margin-left: auto;
    gap: var(--spacing-md);
}

.dual-view-mode .btn-icon {
    width: 40px;
    height: 40px;
}

.dual-view-mode .sidebar,
.dual-view-mode .stats-panel {
    display: none !important;
}

.dual-view-mode .main-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--spacing-sm) var(--spacing-md);
}

.dual-view-mode .ai-workshop-screen {
    max-width: none !important;
    margin: 0;
    padding: 0;
    width: 100%;
}

.dual-view-mode .reading-app-container {
    max-width: none !important;
    width: 100%;
    height: 100%;
    padding: 0;
}

.dual-view-mode .ai-feature-card {
    display: flex;
    gap: var(--spacing-md);
    height: calc(100vh - 56px); /* 只减去header高度 */
    overflow: hidden;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/* 双页模式：隐藏AI工坊标题栏和表单头部 */
.dual-view-mode .ai-workshop-header {
    display: none;
}

.dual-view-mode .ai-feature-header {
    display: none;
}

.dual-view-mode .ai-story-display {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    min-width: 0;
    position: relative;
    margin-top:var(--spacing-md);
}

/* 右侧区域：题目或结果（二选一显示） */
.dual-view-mode .ai-questions-display:not(.hidden),
.dual-view-mode .ai-results-display:not(.hidden) {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    min-width: 0;
    position: relative;
    margin-top:var(--spacing-md);
}

.dual-view-mode .ai-story-display .story-content,
.dual-view-mode .ai-questions-display .questions-list,
.dual-view-mode .ai-results-display .results-details {
    flex: 1;
    overflow-y: auto;
    margin-bottom: var(--spacing-sm);
    min-height: 0;
}

.dual-view-mode .ai-story-display .story-actions,
.dual-view-mode .ai-questions-display .questions-actions,
.dual-view-mode .ai-results-display .results-actions {
    flex-shrink: 0;
}

/* 双页模式：隐藏单词列表 */
.dual-view-mode .story-vocabulary {
    display: none;
}

/* 双页模式：调整题目header样式 */
.dual-view-mode .questions-header {
    text-align: left;
    margin-bottom: var(--spacing-sm);
}

.dual-view-mode .questions-header h3 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.dual-view-mode .questions-header p {
    font-size: 0.85rem;
}

/* 双页模式：调整故事header样式 */
.dual-view-mode .story-header {
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

.dual-view-mode .story-title {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.dual-view-mode .story-meta {
    font-size: 0.85rem;
}

/* 双页模式：确保内容区域可滚动 */
.dual-view-mode .story-content {
    max-height: none;
    padding: var(--spacing-md);
    font-size: 0.95rem;
    line-height: 1.7;
}

.dual-view-mode .story-paragraph {
    margin-bottom: var(--spacing-md);
}

/* 双页模式：减小按钮高度，节省空间 */
.dual-view-mode .btn-secondary,
.dual-view-mode .btn-primary {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    min-height: auto;
    height: auto;
    width: 150px;
    height: 60px;
}

.dual-view-mode .story-actions,
.dual-view-mode .questions-actions {
    gap: var(--spacing-sm);
}

/* 双页模式：优化主内容区域，防止外层滚动 */
.dual-view-mode .main-content {
    overflow: hidden !important;
}

/* 双页模式：优化题目列表间距 */
.dual-view-mode .questions-list {
    gap: var(--spacing-md);
}

.dual-view-mode .question-item {
    padding: var(--spacing-md);
    margin-bottom: 0;
}

.dual-view-mode .question-header {
    margin-bottom: var(--spacing-sm);
}

.dual-view-mode .question-text {
    font-size: 0.95rem;
    margin-bottom: var(--spacing-sm);
}

.dual-view-mode .question-options {
    gap: 0.5rem;
}

.dual-view-mode .question-option {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* 双页模式：优化结果页面样式 */
.dual-view-mode .results-header {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.dual-view-mode .results-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
}

.dual-view-mode .results-title {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.dual-view-mode .results-score {
    font-size: 1.1rem;
}

.dual-view-mode .result-item {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
}

.dual-view-mode .result-question {
    font-size: 0.9rem;
}

.dual-view-mode .result-answer,
.dual-view-mode .result-explanation {
    font-size: 0.85rem;
}

/* 移动端禁用双页展示 */
@media (max-width: 1024px) {
    .btn-dual-view {
        display: none;
    }
}

.story-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}

.story-meta {
    display: flex;
    gap: var(--spacing-lg);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.story-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.story-meta-item svg {
    width: 16px;
    height: 16px;
}

.story-content {
    background: var(--background);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    line-height: 1.8;
    font-size: 1rem;
    margin-bottom: var(--spacing-xl);
    max-height: 600px;
    overflow-y: auto;
    border: 2px solid var(--border-color);
}

.story-paragraph {
    margin-bottom: var(--spacing-lg);
    text-align: justify;
}

.keyword-highlight {
    color: var(--primary-color);
    background: var(--primary-light);
    padding: 0.125rem 0.25rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: #333;
}

.story-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

/* 题目展示 */
.ai-questions-display {
    animation: fadeIn 0.5s ease-out;
}

.questions-header {
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.questions-header h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.questions-header p {
    color: var(--text-secondary);
}

.questions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.question-item {
    background: var(--background);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.question-number {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.question-type {
    padding: 0.25rem 0.75rem;
    background: var(--primary-light);
    color: var(--primary-color);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
}

.question-text {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.question-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.question-option {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--surface);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.question-option:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.question-option input[type="radio"] {
    margin-right: var(--spacing-md);
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: var(--primary-color);
}

.option-label {
    font-weight: 700;
    margin-right: var(--spacing-sm);
    color: var(--primary-color);
}

.option-text {
    flex: 1;
}

.question-option.correct-answer {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.question-option.wrong-answer {
    border-color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

/* 填空题内联输入框 */
.fill-blank-input-inline {
    display: inline-block;
    min-width: 180px;
    max-width: 300px;
    padding: 0.3rem 0.75rem;
    margin: 0 0.25rem;
    border: none;
    border-bottom: 3px solid var(--primary-color);
    border-radius: 0;
    background: transparent;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
    transition: all var(--transition-fast);
    font-family: 'Inter', -apple-system, sans-serif;
}

.fill-blank-input-inline:focus {
    outline: none;
    border-bottom-color: var(--primary-dark);
    background: var(--primary-light);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.fill-blank-input-inline::placeholder {
    color: var(--text-tertiary);
    font-weight: 500;
    font-size: 0.9rem;
}

.fill-blank-input-inline:disabled {
    cursor: not-allowed;
    opacity: 0.9;
}

/* 填空题文本容器 */
.question-text-fillblank {
    line-height: 2;
    font-size: 1rem;
}

/* 答案正确时的样式 */
.fill-blank-input-inline.correct {
    border-bottom-color: var(--success);
    color: var(--success);
    background: rgba(34, 197, 94, 0.05);
}

/* 答案错误时的样式 */
.fill-blank-input-inline.incorrect {
    border-bottom-color: var(--error);
    color: var(--error);
    background: rgba(239, 68, 68, 0.05);
}

.fill-blank-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    background: var(--surface);
    transition: all var(--transition-fast);
}

.fill-blank-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.fill-blank-input:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

.question-option input[type="radio"]:disabled {
    cursor: not-allowed;
}

.question-option:has(input:disabled) {
    cursor: not-allowed;
}

.questions-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.questions-actions #exitExamBtn,
.results-actions #exitExamBtn2 {
    margin-left: auto;
    opacity: 0.6;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.questions-actions #exitExamBtn:hover,
.results-actions #exitExamBtn2:hover {
    opacity: 1;
    color: var(--error-color);
}

/* 答题结果 */
.ai-results-display {
    animation: fadeIn 0.5s ease-out;
}

.results-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.results-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
    animation: bounceIn 0.6s ease-out;
}

@keyframes bounceIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.results-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.results-score {
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: 600;
}

.results-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.result-item {
    background: var(--background);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--border-color);
}

.result-item.correct {
    border-left-color: var(--success);
    background: rgba(16, 185, 129, 0.05);
}

.result-item.wrong {
    border-left-color: var(--error);
    background: rgba(239, 68, 68, 0.05);
}

.result-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.result-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.result-item.correct .result-icon {
    background: var(--success);
    color: white;
}

.result-item.wrong .result-icon {
    background: var(--error);
    color: white;
}

.result-title {
    font-weight: 700;
    color: var(--primary-color);
}

.result-question {
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.result-answer {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
}

.result-explanation {
    background: var(--surface);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.results-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* 加载动画 */
.loading-spinner-small {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 0.5rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   移动端底部导航栏
   ============================================ */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--surface);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    align-items: center;
    justify-content: space-around;
}

.mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    padding: 10px;
}

.mobile-nav-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.mobile-nav-btn span {
    font-size: 0.75rem;
    font-weight: 500;
}

.mobile-nav-btn:active {
    background: var(--primary-light);
}

.mobile-nav-btn.active {
    color: var(--primary-color);
}

/* 中间AI工坊按钮特殊样式 */
.mobile-nav-center {
    position: relative;
}

.mobile-nav-center::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: transparent;
    border-radius: 50%;
    z-index: -1;

}

.mobile-nav-center {
    color: var(--text-secondary);
}

.mobile-nav-center:active::before {
    background: var(--primary-hover);
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .fort-label, .form-select{
        max-width: 45vw;
    }
    .word-list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .word-list-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    
    .btn-word-list-action {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .btn-word-list-action svg {
        width: 16px;
        height: 16px;
    }
    
    .word-list-table {
        font-size: 0.875rem;
    }
    
    .word-list-col-word {
        width: 120px;
    }
    
    .word-list-col-phonetic {
        width: 120px;
    }
    
    .word-list-col-meaning {
        width: 200px;
    }
}

@media (max-width: 768px) {
    .fort-label, .form-select{
        max-width: 40vw;
    }
    /* 显示移动端底部导航栏 */
    .mobile-bottom-nav {
        display: flex;
    }
    html {
        font-size: 14px;
    }
    /* 调整主容器高度，为底部导航栏留出空间 */
    .main-container {
        height: calc(100vh -  60px); /* 减去header和底部导航栏高度 */
        padding-bottom: 60px;
    }
    
    /* 侧边栏和统计面板默认隐藏，通过固定定位显示 */
    .sidebar,
    .stats-panel {
        display: block !important; /* 覆盖1024px的display: none */
        position: fixed;
        top: 56px;
        bottom: 60px; /* 为底部导航栏留空间 */
        z-index: 999;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
        transition: transform var(--transition-normal);
    }
    
    .sidebar {
        left: 0;
        width: 280px;
        max-width: 80vw;
    }
    
    .stats-panel {
        right: 0;
        width: 280px;
        max-width: 80vw;
        transform: translateX(100%);
    }
    
    /* 显示状态 */
    .sidebar.mobile-show {
        transform: translateX(0);
    }
    
    .stats-panel.mobile-show {
        transform: translateX(0);
    }
    
    /* 侧边栏打开时的遮罩效果 */
    .sidebar.mobile-show::before,
    .stats-panel.mobile-show::before {
        content: '';
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 60px;
        
        z-index: -1;
    }
    
    /* 移动端学习模式优化 */
    .learning-screen {
        padding: 0;
    }
    
    .word-card {
        
        padding: var(--spacing-md) !important;
        margin-bottom: var(--spacing-sm);
    }
    
    .word-display {
        margin-bottom: var(--spacing-md);
        padding: var(--spacing-md) 0;
    }
    
    .word-text {
        font-size: 2.2rem !important;
        margin-bottom: var(--spacing-sm);
    }
    
    .word-phonetic {
        font-size: 0.875rem;
    }
    
    .card-header {
        margin-bottom: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
    }
    
    .btn-sound {
        width: 36px;
        height: 36px;
    }
    
    /* 移动端选释义选项优化 - 2列布局，高度减半 */
    .options-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-sm) !important;
    }
    
    .option-btn {
        padding: 0.75rem 0.3rem !important;
        height: 70px !important;
        min-height: auto !important;
        font-size: 0.875rem !important;
    }
    
    .option-text {
        font-size: 0.875rem !important;
        -webkit-line-clamp: 2 !important; /* 移动端最多显示2行 */
        line-clamp: 2 !important;
        line-height: 1.3 !important;
    }
    
    /* 调整移动端选项顺序：左列第2个和左列第3个调换位置 */
    .option-btn:nth-child(3) {
        order: 5; /* 无正确答案从第3移到左列第5，但被不知道强行调换5-6 */
    }
    .option-btn:nth-child(6) {
        order: 5; /* 无正确答案从第6移到第5，再跟不知道调回来 */
    }
    


    
    /* 同义替换练习选项优化 - 2列布局，高度减半 */
    .synonym-options-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-sm);
    }
    
    .synonym-option {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem;
    }
    
    /* 拼写模式优化 */
    .meaning-display {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    
    .meaning-text {
        font-size: 1rem;
    }
    
    .example-sentence {
        font-size: 0.875rem;
        margin-top: var(--spacing-sm);
    }
    
    .letter-slot {
        width: 35px !important;
        height: 45px !important;
        font-size: 1.25rem !important;
    }
    
    /* 学习操作按钮区域 */
    .learning-actions {
        margin-top: var(--spacing-md);
        padding: var(--spacing-sm) 0;
        gap: var(--spacing-sm);
    }
    
    .learning-actions .btn-primary,
    .learning-actions .btn-text {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
    
    /* 进度条优化 */
    .progress-bar {
        margin-bottom: var(--spacing-md);
    }
    
    .progress-info {
        font-size: 0.75rem;
        margin-bottom: 0.375rem;
    }
    
    /* 确保主内容区域适配移动端 */
    .main-content {
        width: 100%;
        padding: var(--spacing-md);
        overflow-y: auto;
    }
    
    .word-list-title {
        font-size: 1.5rem;
    }
    
    .word-list-icon {
        font-size: 2rem;
    }
    
    .word-list-table-wrapper {
        border-radius: var(--radius-md);
        max-height: calc(100vh - 250px);
    }
    
    .word-list-table {
        font-size: 0.8rem;
    }
    
    .word-list-table thead th {
        padding: var(--spacing-md);
        font-size: 0.8rem;
    }
    
    .word-list-cell {
        padding: var(--spacing-sm) var(--spacing-md);
        display: flex;
  
    }
    
    /* 在小屏幕上调整列宽 */
    .word-list-col-index {
        width: 40px;
        
    }
    
    .word-list-col-word {
        width: 100px;
    }
    
    .word-list-col-phonetic {
        display: none; /* 在小屏幕上隐藏音标 */
    }
    
    .word-list-col-meaning {
        width: 150px;
    }
    
    .word-list-col-example {
        min-width: 200px;
    }
}

/* ============================================
   加载遮罩
   ============================================ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-content {
    background: var(--surface);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    text-align: center;
    min-width: 300px;
    box-shadow: var(--shadow-xl);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    margin: 0 auto var(--spacing-lg);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.loading-progress {
    height: 4px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.loading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #2DD4BF);
    border-radius: var(--radius-full);
    width: 0%;
    transition: width 0.3s ease;
}

/* ============================================
   设置弹窗
   ============================================ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 90%;
    height: 84vh;
    max-width: 500px;
    overflow: hidden;
    animation: slideUp var(--transition-normal);
}

.modal-small {
    max-width: 400px;
}

.modal-medium {
    max-width: 600px;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-body {
    padding: var(--spacing-lg);
    max-height: 60vh;
    overflow-y: auto;
}

/* 词书设置菜单 */
.book-settings-menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.book-settings-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    width: 100%;
}

.book-settings-item:hover:not(:disabled) {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.book-settings-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.book-settings-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2px;
    flex-shrink: 0;
}

.book-settings-item span {
    flex: 1;
}

.badge-dev {
    padding: 0.125rem 0.5rem;
    background: var(--warning);
    color: white;
    font-size: 0.75rem;
    border-radius: var(--radius-full);
    font-weight: 600;
}

.setting-group {
    margin-bottom: var(--spacing-lg);
}

.setting-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--border-color);
}

.setting-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.setting-select {
    width: 100%;
    padding: 0.75rem;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.setting-select:hover,
.setting-select:focus {
    border-color: var(--primary-color);
    outline: none;
}

.setting-input {
    width: 100%;
    padding: 0.75rem;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.setting-input:hover,
.setting-input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.setting-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: var(--spacing-xs);
    line-height: auto;
}

.setting-hint a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.setting-hint a:hover {
    text-decoration: underline;
}

.setting-hint code {
    background: var(--card-background);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
}

/* Switch Button 样式 */
.switch-buttons {
    display: flex;
    gap: var(--spacing-xs);
    background: var(--background);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.switch-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.switch-btn:hover {
    background: var(--surface);
    color: var(--text-primary);
}

.switch-btn.active {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(74, 157, 154, 0.3);
}

.switch-btn:active {
    transform: scale(0.98);
}

/* 快捷键设置 */
.hotkey-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.hotkey-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hotkey-item label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.hotkey-input {
    width: 100%;
    padding: 0.5rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--background);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.hotkey-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.setting-checkbox {
    width: 44px;
    height: 24px;
    appearance: none;
    background: var(--border-color);
    border-radius: var(--radius-full);
    position: relative;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.setting-checkbox::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform var(--transition-fast);
}

.setting-checkbox:checked {
    background: var(--primary-color);
}

.setting-checkbox:checked::before {
    transform: translateX(20px);
}

/* 禁用状态的设置组 */
.setting-group.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* 时间滑块 */
.setting-slider {
    width: 100%;
    height: 6px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    margin: var(--spacing-sm) 0;
}

.setting-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.setting-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 8px rgba(74, 157, 154, 0.1);
}

.setting-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.setting-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 8px rgba(74, 157, 154, 0.1);
}

.time-value {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1rem;
}

.slider-marks {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: var(--spacing-xs);
}

.modal-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
}

/* ============================================
   Toast提示消息
   ============================================ */
.toast {
    position: fixed;
    top: 80px;
    right: 20px;
    padding: 1rem 1.5rem;
    background: var(--surface);
    color: var(--text-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transform: translateX(400px);
    transition: all var(--transition-normal);
    border-left: 4px solid var(--primary-color);
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-success {
    border-left-color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.toast-error {
    border-left-color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

.toast-info {
    border-left-color: var(--primary-color);
}

/* ============================================
   粒子动画
   ============================================ */
.particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* ============================================
   响应式设计
   ============================================ */
/* 中等屏幕优化（笔记本） */
@media (max-width: 1400px) {
    .fort-label, .form-select{
        max-width: 40vw;
    }
    .sidebar {
        width: 240px;
    }
    
    .stats-panel {
        width: 240px;
    }
    
    .main-content {
        padding: var(--spacing-md);
    }
}

@media (max-width: 1024px) {
    .stats-panel {
        display: none;
    }
    
    .sidebar {
        position: fixed;
        left: 0;
        top: 56px;
        height: calc(100vh - 56px);
        z-index: 50;
        transform: translateX(-100%);
     
    }
    
    .sidebar.show {
        transform: translateX(0);
        box-shadow: var(--shadow-xl);
    }
    
    .main-content {
        width: 100%;
        padding: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .header-container {
        padding: 0 var(--spacing-md);
    }
    
    .main-content {
        padding: var(--spacing-md);
    }
    
    .welcome-title {
        font-size: 2rem;
    }
    
    .word-text {
        font-size: 2rem;
    }
    
    .options-container {
        grid-template-columns: 1fr;
    }
    
    .stats-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .letter-slot {
        width: 40px;
        height: 56px;
        font-size: 1.5rem;
    }
    
    /* Toast 移动端样式 */
    .toast {
        top: 70px;
        right: 10px;
        left: 10px;
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }
    
    .editor-table {
        font-size: 0.875rem;
    }
    
    .modal-content {
        width: 95%;
        
    }
}

@media (max-width: 480px) {
    .fort-label, .form-select{
        max-width: 38vw;
    }
    html {
        font-size: 14px;
    }
    
    .welcome-icon {
        width: 120px;
        height: 120px;
    }
    
    .stats-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .stat-item {
        padding: var(--spacing-md);
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    .stat-label {
        font-size: 0.85rem;
    }
    
    .completion-actions {
        flex-direction: column;
    }
    
    .completion-actions button {
        width: 100%;
    }
}

/* ============================================
   AI工坊 - 单词列表
   ============================================ */
.story-vocabulary {
    margin-bottom: var(--spacing-xl);
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.vocabulary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.vocabulary-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.vocabulary-header h4::after {
    content: '点击单词卡片显示释义';
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-left: var(--spacing-sm);
    opacity: 0.7;
}

.vocabulary-count {
    font-size: 0.9rem;
    color: var(--text-secondary);
    background: var(--background);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
}

.vocabulary-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.vocabulary-item {
    background: var(--background);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    animation: vocabularyItemEnter 0.3s ease-out;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
}

.vocabulary-item:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.vocabulary-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.vocabulary-word {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}

.vocabulary-sound-btn {
    background: transparent;
    border: none;
    padding: 0.3rem;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vocabulary-sound-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.vocabulary-sound-btn:hover {
    color: var(--primary-color);
    background: var(--primary-light);
}

.vocabulary-sound-btn:active {
    transform: scale(0.9);
}

.vocabulary-toggle-btn {
    background: transparent;
    border: none;
    padding: 0.3rem;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    pointer-events: none;  /* 不拦截点击事件，让item接收 */
}

.vocabulary-toggle-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.vocabulary-item:hover .vocabulary-toggle-btn {
    color: var(--primary-color);
}

.vocabulary-toggle-btn.active {
    color: var(--primary-color);
}

.vocabulary-meaning {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex: 1;
    overflow: hidden;
    margin-left: auto;
    transition: opacity var(--transition-fast);
    min-width: 0;  /* 允许flex子元素收缩 */
}

.vocabulary-meaning.hidden {
    display: none;
}

.vocabulary-pos {
    font-size: 0.875rem;
    color: var(--primary-color);
    font-style: italic;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}

.vocabulary-meaning-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;  /* 关键：允许文本收缩和省略 */
}

/* ============================================
   同义替换练习
   ============================================ */
.synonym-app-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

@media (max-width: 768px) {
    .synonym-settings .form-row {
        grid-template-columns: 1fr;
    }
    
    .synonym-intro h2 {
        font-size: 1.5rem;
    }
    
    .synonym-intro p {
        font-size: 0.9rem;
    }
}

.synonym-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.synonym-header h3 {
    flex: 1;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.synonym-intro {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
}

.synonym-intro-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-xs);
    opacity: 0.85;
}

.synonym-intro h2 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
    font-weight: 600;
}

.synonym-intro p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

.synonym-settings {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.synonym-settings .form-group {
    margin-bottom: var(--spacing-md);
}

.synonym-settings .form-group:last-child {
    margin-bottom: 0;
}

.synonym-settings .form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.synonym-settings .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: 0;
}

.synonym-settings .form-select {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--background);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.synonym-settings .form-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 157, 154, 0.1);
}

.synonym-settings .form-actions {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.synonym-settings .btn-primary {
    width: 100%;
    padding: var(--spacing-md);
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.synonym-settings .btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.synonym-settings .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.synonym-settings .btn-primary svg {
    width: 18px;
    height: 18px;
}

/* 文档管理器 */
.synonym-docs-manager {
    background: var(--background);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
}

.docs-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.docs-list::-webkit-scrollbar {
    width: 6px;
}

.docs-list::-webkit-scrollbar-track {
    background: transparent;
}

.docs-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-full);
}

.docs-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

.doc-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.doc-item:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.doc-item.active {
    border-color: var(--primary-color);
    background: var(--primary-light);
   
}

.doc-item.built-in {
    border-left: 3px solid var(--primary-color);
}

.doc-item-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    opacity: 0.8;
}

.doc-item-info {
    flex: 1;
    min-width: 0;
}

.doc-item-name {
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.doc-item-meta {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.doc-item-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.btn-doc-action {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    opacity: 0;
}

.doc-item:hover .btn-doc-action {
    opacity: 1;
}

.btn-doc-action:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.btn-doc-action svg {
    width: 14px;
    height: 14px;
}

.btn-add-doc {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.btn-add-doc:hover {
    background: var(--primary-hover);
    box-shadow: var(--shadow-sm);
}

.btn-add-doc svg {
    width: 16px;
    height: 16px;
}

.current-doc-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(74, 157, 154, 0.08);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-sm);
}

.current-doc-info .info-icon {
    font-size: 1.1rem;
    opacity: 0.7;
}

.current-doc-info .info-text {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.current-doc-info .info-text span {
    font-weight: 600;
    color: var(--text-primary);
}

.file-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--background);
}

.file-upload-area:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.file-upload-area svg {
    width: 48px;
    height: 48px;
    stroke-width: 2;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.file-upload-area p {
    margin: var(--spacing-sm) 0;
}

.file-hint {
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

.file-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--success);
    color: white;
    border-radius: var(--radius-md);
    margin-top: var(--spacing-md);
}

.status-icon {
    font-size: 1.5rem;
}

.status-text {
    flex: 1;
    font-weight: 500;
}

.status-count {
    font-weight: 600;
}

.synonym-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.synonym-option {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--background);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    font-size: 1.05rem;
    font-weight: 500;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.synonym-option:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
    transform: translateY(-2px);
}

.synonym-option:focus {
    outline: none;
    border-color: var(--border-color);
}

.synonym-option:active {
    transform: scale(0.98);
}

.synonym-option.selected {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

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

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

.synonym-option.missed {
    background: var(--warning);
    color: white;
    border-color: var(--warning);
}

.synonym-question {
    margin: var(--spacing-lg) 0;
    text-align: center;
}

.question-label {
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.question-hint {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.word-meaning {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-left: var(--spacing-sm);
}

.word-level {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--primary-light);
    color: var(--primary-color);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: var(--spacing-sm);
}

/* ============================================
   文本选择工具栏
   ============================================ */
.text-selection-toolbar {
    position: fixed;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    z-index: 10000;
    border: 1px solid var(--border-color);
    animation: popIn 0.2s ease-out;
    max-width: min(800px, 80vw);
    max-height: 70vh;
}

.toolbar-buttons {
    display: flex;
    gap: var(--spacing-xs);
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(5px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.toolbar-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.toolbar-btn:hover {
    background: var(--primary-light);
    color: var(--primary-color);
}

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

/* 翻译结果区域 */
.toolbar-translation-result {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--background);
    border-radius: var(--radius-md);
    min-width: 250px;
    max-width: 100%;
    overflow-y: auto;
    max-height: calc(70vh - 60px);
}

.translation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-color);
}

.translation-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.translation-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.translation-close-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.translation-close-btn:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.translation-original {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    font-style: italic;
    word-wrap: break-word;
    word-break: break-word;
}

.translation-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-xs) 0;
}

.translation-text {
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 40px;
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
}

.translation-loading {
    color: var(--primary-color);
    font-style: italic;
    animation: pulse 1.5s ease-in-out infinite;
}

.translation-error {
    color: var(--danger-color);
    font-size: 0.85rem;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* 翻译结果滚动条美化 */
.toolbar-translation-result::-webkit-scrollbar {
    width: 6px;
}

.toolbar-translation-result::-webkit-scrollbar-track {
    background: var(--background);
    border-radius: var(--radius-sm);
}

.toolbar-translation-result::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-sm);
}

.toolbar-translation-result::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ============================================
   关键词点击工具栏
   ============================================ */
.keyword-highlight-toolbar {
    position: fixed;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
    z-index: 10000;
    border: 1px solid var(--border-color);
    animation: popIn 0.2s ease-out;
    min-width: 280px;
    max-width: 350px;
}

.keyword-toolbar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.keyword-toolbar-word {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
}

.keyword-toolbar-phonetic {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic;
}

.keyword-toolbar-meaning {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.keyword-toolbar-sound-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    border: none;
    border-radius: var(--radius-md);
    color: var(--primary-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.keyword-toolbar-sound-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.keyword-toolbar-sound-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.05);
}

.keyword-toolbar-sound-btn:active {
    transform: scale(0.95);
}

/* 关键词高亮样式增强 */
.keyword-highlight {
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: 3px;
    padding: 0 2px;
}

.keyword-highlight:hover {
    background-color: #fef3c7;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3);
}

/* 高亮样式 */
.text-highlight {
    background: linear-gradient(to bottom, transparent 20%, var(--highlight-color, #FEF3C7) 20%, var(--highlight-color, #FEF3C7) 100%);
    padding-top: 0.75em;
    padding-bottom: 0.35em;
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
    line-height: 1.6;
    display: inline;
}

.text-highlight:hover {
    background: linear-gradient(to bottom, transparent 20%, var(--highlight-hover-color, #FDE68A) 20%, var(--highlight-hover-color, #FDE68A) 100%);
}

/* 暗黑模式高亮颜色 */
[data-theme="dark"] .text-highlight {
    background: linear-gradient(to bottom, transparent 20%, rgba(251, 191, 36, 0.3) 20%, rgba(251, 191, 36, 0.3) 100%);
}

[data-theme="dark"] .text-highlight:hover {
    background: linear-gradient(to bottom, transparent 20%, rgba(251, 191, 36, 0.5) 20%, rgba(251, 191, 36, 0.5) 100%);
}

/* 阅读内容、题目、结果可选择 */
.story-content,
.questions-list,
.results-details {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.story-content::selection,
.questions-list::selection,
.results-details::selection {
    background: rgba(74, 157, 154, 0.3);
    color: var(--text-primary);
}

/* 题目文本可选择 */
.question-text,
.question-option,
.result-question,
.result-answer,
.result-explanation {
    user-select: text;
    -webkit-user-select: text;
}

.question-text::selection,
.question-option::selection,
.result-question::selection,
.result-answer::selection,
.result-explanation::selection {
    background: rgba(74, 157, 154, 0.3);
    color: var(--text-primary);
}

.story-content::-moz-selection {
    background: rgba(74, 157, 154, 0.3);
    color: var(--text-primary);
}

/* 关键词高亮与文本高亮的区别 */
.keyword-highlight {
    background: var(--primary-light);
    color: var(--text-primary);
    font-weight: 500;
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-sm);
}

/* 响应式优化 */
/* 关键词选择模式响应式 */
@media (max-width: 768px) {
    .keyword-mode-tab span {
        display: none;
    }
    
    .keyword-mode-tab {
        padding: 0.75rem;
    }
    
    .keyword-mode-tab svg {
        width: 20px;
        height: 20px;
    }
    
    /* 设置选项卡移动端适配 */
    .settings-tab span {
        display: none;
    }
    
    .settings-tab {
        padding: 0.75rem;
    }
    
    .settings-tab svg {
        width: 20px;
        height: 20px;
    }
    
    /* Switch Button 移动端适配 */
    .switch-btn {
        padding: 0.6rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .auto-select-control {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    
    .auto-select-control label,
    .auto-select-unit {
        font-size: 0.85rem;
    }
    
    .btn-auto-select {
        width: 100%;
        margin-left: 0;
        margin-top: var(--spacing-sm);
    }
    
    /* 填空题输入框在移动端自适应 */
    .fill-blank-input-inline {
        min-width: 120px;
        max-width: 100%;
        font-size: 1rem;
        padding: 0.25rem 0.5rem;
    }
    
    .question-text-fillblank {
        line-height: 1.8;
    }
}

@media (max-width: 768px) {
    .vocabulary-list {
        grid-template-columns: 1fr;
    }
    
    .vocabulary-item {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    
    .vocabulary-left {
        flex: 1;
    }
    
    .vocabulary-meaning {
        width: 100%;
        margin-left: 0;
        margin-top: var(--spacing-xs);
    }
    
    .vocabulary-header h4::after {
        display: none;
    }
    
    .text-selection-toolbar {
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
        max-width: 90vw;
    }
    
    .toolbar-btn {
        font-size: 0.8rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .toolbar-btn svg {
        width: 14px;
        height: 14px;
    }
    
    /* 翻译结果移动端优化 */
    .toolbar-translation-result {
        min-width: 200px;
        max-width: 100%;
        max-height: calc(60vh - 40px);
    }
    
    .translation-original {
        font-size: 0.85rem;
    }
    
    .translation-text {
        font-size: 0.9rem;
    }
    
    .text-selection-toolbar {
        max-width: 95vw;
        max-height: 60vh;
    }
    
    /* 关键词工具栏移动端优化 */
    .keyword-highlight-toolbar {
        min-width: 240px;
        max-width: 90vw;
        padding: var(--spacing-sm);
    }
    
    .keyword-toolbar-word {
        font-size: 1rem;
    }
    
    .keyword-toolbar-phonetic {
        font-size: 0.85rem;
    }
    
    .keyword-toolbar-meaning {
        font-size: 0.8rem;
    }
    
    .keyword-toolbar-sound-btn {
        width: 36px;
        height: 36px;
    }
    
    .keyword-toolbar-sound-btn svg {
        width: 18px;
        height: 18px;
    }
    
    /* 移动端优化高亮删除按钮 */
    .text-highlight::after {
        width: 18px;
        height: 18px;
        font-size: 0.9rem;
        right: -16px;
    }
}

/* 动画效果 */
@keyframes vocabularyItemEnter {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.text-highlight::after {
    content: '×';
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    font-weight: bold;
    background: var(--error);
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.text-highlight:hover::after {
    display: flex;
}

/* 暗黑模式删除按钮优化 */
[data-theme="dark"] .text-highlight::after {
    background: #DC2626;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* 空状态提示 */
.vocabulary-list:empty::before {
    content: '暂无单词';
    display: block;
    text-align: center;
    color: var(--text-tertiary);
    padding: var(--spacing-xl);
    grid-column: 1 / -1;
}

/* ============================================
   打印样式
   ============================================ */
@media print {
    .header,
    .sidebar,
    .stats-panel,
    .loading-overlay,
    .modal {
        display: none;
    }
}

/* ============================================
   缓存设置样式
   ============================================ */

/* 统计数据摘要 */
.stats-cache-summary {
    background: var(--surface-hover);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
}

.cache-stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.cache-stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.cache-stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
}

/* 缓存操作按钮 */
.cache-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-sm);
}

.btn-cache-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-cache-action svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.btn-cache-action:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.btn-cache-action:active {
    transform: translateY(0);
}

/* 历史统计列表 */
.stats-history-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-hover);
}

.stats-history-empty {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

.stats-history-item {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--transition-fast);
}

.stats-history-item:last-child {
    border-bottom: none;
}

.stats-history-item:hover {
    background: var(--surface);
}

.stats-history-date {
    font-weight: 600;
    color: var(--text);
    font-size: 0.875rem;
}

.stats-history-data {
    display: flex;
    gap: var(--spacing-lg);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.stats-history-data span {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.stats-history-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.btn-history-action {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-history-action:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

/* 危险操作按钮 */
.btn-danger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: 1px solid var(--error);
    border-radius: var(--radius-md);
    color: var(--error);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-danger svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.btn-danger:hover {
    background: var(--error);
    color: white;
}

.btn-danger:active {
    transform: scale(0.98);
}

/* 移动端响应式 */
@media (max-width: 768px) {
    .stats-cache-summary {
        grid-template-columns: 1fr;
    }
    
    .cache-actions {
        grid-template-columns: 1fr;
    }
    
    .stats-history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .stats-history-data {
        flex-wrap: wrap;
    }
}

/* ============================================
   统计图表按钮样式
   ============================================ */
.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.btn-stats-chart {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-primary);
}

.btn-stats-chart svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.btn-stats-chart:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-stats-chart:active {
    transform: translateY(0);
}

/* ============================================
   历史统计图表页面样式
   ============================================ */
.stats-chart-screen {
    padding: var(--spacing-xl);
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeIn 0.3s ease;
}

.stats-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
}

.stats-chart-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
}

.stats-chart-title svg {
    width: 32px;
    height: 32px;
    color: var(--primary);
}

.btn-close-chart {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-close-chart svg {
    width: 18px;
    height: 18px;
}

.btn-close-chart:hover {
    background: var(--error);
    border-color: var(--error);
    color: white;
    transform: translateX(2px);
}

/* 时间范围控制 */
.stats-chart-controls {
    margin-bottom: var(--spacing-xl);
    display: flex;
    justify-content: center;
}

.time-range-buttons {
    display: flex;
    gap: var(--spacing-sm);
    background: var(--surface-hover);
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
}

.time-range-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.time-range-btn:hover {
    color: var(--text);
    background: var(--surface);
}

.time-range-btn.active {
    background: var(--primary);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* 图表容器 */
.stats-charts-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.chart-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all var(--transition-fast);
}

.chart-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.chart-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
}

.chart-icon {
    font-size: 1.5rem;
}

.chart-unit {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.chart-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
}

.chart-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* 统计摘要卡片 */
.stats-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.summary-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--surface) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-fast);
}

.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
}

.summary-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.summary-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.summary-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.summary-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* 移动端响应式 */
@media (max-width: 768px) {
    .stats-chart-screen {
        padding: var(--spacing-md);
    }

    .stats-chart-title {
        font-size: 1.5rem;
    }

    .stats-chart-title svg {
        width: 24px;
        height: 24px;
    }

    .btn-close-chart {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: 0.875rem;
    }

    .time-range-buttons {
        flex-wrap: wrap;
    }

    .time-range-btn {
        font-size: 0.875rem;
        padding: var(--spacing-xs) var(--spacing-md);
    }

    .chart-wrapper {
        height: 220px;
    }

    .stats-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .summary-icon {
        font-size: 2rem;
    }

    .summary-value {
        font-size: 1.5rem;
    }
}

/* A1词汇过滤对话框 */
.basic-words-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.basic-words-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.basic-words-content {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-2xl);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.basic-words-content h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.basic-words-hint {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

.basic-words-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.basic-words-list {
    flex: 1;
    overflow-y: auto;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    background: var(--background);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-sm);
    max-height: 400px;
}

.basic-word-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.basic-word-item:hover {
    background-color: var(--border-color);
}

.basic-word-checkbox {
    cursor: pointer;
}

.basic-word-text {
    font-family: 'Courier New', monospace;
    color: var(--text-primary);
    font-weight: 500;
}

.basic-words-buttons {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .basic-words-content {
        width: 95%;
        padding: var(--spacing-lg);
    }
    
    .basic-words-list {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        max-height: 300px;
    }
    
    .basic-words-buttons {
        flex-direction: column-reverse;
    }
    
    .basic-words-buttons button {
        width: 100%;
    }
}

.upload-area:hover .upload-icon,
.upload-area:hover .upload-text,
.upload-area:hover .upload-hint,
.upload-area.dragover .upload-icon,
.upload-area.dragover .upload-text,
.upload-area.dragover .upload-hint {
    opacity: 0;
    transition: opacity 0.3s;
}