.topic-group { flex: 0 1 420px; min-width: 240px; max-width: 420px; }
.topic-group .form-input { width: 100%; }

/* 默认隐藏字数信息，待用户输入后由脚本显示 */
.word-count { display: none; }

/* 文鉴 - 主样式文件 */

/* 基础重置和变量 */
:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --accent-color: #e74c3c;
    --success-color: #27ae60;
    --warning-color: #f39c12;
    --background-color: #f8f9fa;
    --surface-color: #ffffff;
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --border-color: #ddd;
    --shadow-light: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-medium: 0 4px 20px rgba(0,0,0,0.15);
    --border-radius: 8px;
    --transition: all 0.3s ease;
    --page-padding: 2rem; /* 统一的页面左右内边距 */
}

/* 深色主题覆盖 */
.theme-dark {
    /* 更柔和且对比清晰的暗色方案 */
    --background-color: #0f1420;   /* 页面背景 */
    --surface-color: #1b2432;      /* 卡片/容器背景 */
    --text-primary: #e6edf3;       /* 主要文字 */
    --text-secondary: #a8b3bf;     /* 次要文字 */
    --border-color: #29384a;       /* 边框/分割线 */
    --secondary-color: #4ea1ff;    /* 主题高亮（按钮/焦点）*/
    --accent-color: #ff6b6b;       /* 告警强调 */
    --shadow-light: 0 2px 10px rgba(0,0,0,0.6);
    --shadow-medium: 0 6px 24px rgba(0,0,0,0.55);
}

/* 根据主题变量自动适配常见组件背景/文字 */
body.theme-dark {
    background-color: var(--background-color);
    color: var(--text-primary);
}

body.theme-dark .section-header,
body.theme-dark .input-section,
body.theme-dark .analysis-section,
body.theme-dark .analysis-container,
body.theme-dark .input-container,
body.theme-dark .modal-content,
body.theme-dark .form-select,
body.theme-dark .form-input {
    background: var(--surface-color);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* 深色模式下的标题区渐变，提升图标对比度 */
body.theme-dark .app-header {
    background-image: linear-gradient(120deg, #0b1020, #182131, #0a3b6b, #182131);
    background-size: 300% 300%;
}

/* 表单控件与占位符颜色 */
body.theme-dark .form-select,
body.theme-dark .form-input,
body.theme-dark .essay-textarea {
    background: #141b26;
    color: var(--text-primary);
    border-color: var(--border-color);
}
body.theme-dark .form-input::placeholder,
body.theme-dark .essay-textarea::placeholder {
    color: #7f8a96;
}

/* 分区与卡片阴影 */
body.theme-dark .input-section,
body.theme-dark .analysis-section,
body.theme-dark .analysis-section-item,
body.theme-dark .feature-item {
    box-shadow: var(--shadow-light);
}

/* 按钮在暗色下的可读性 */
body.theme-dark .btn-primary {
    background: var(--secondary-color);
    color: #0b1220;
}
body.theme-dark .btn-secondary {
    background: #141b26;
    color: var(--text-primary);
    border-color: var(--border-color);
}
body.theme-dark .btn-outline {
    background: transparent;
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* 模态框与遮罩 */
body.theme-dark .modal-content {
    background: #182131;
}
body.theme-dark .modal {
    background: rgba(0,0,0,0.55);
}

/* 进度条与提示色 */
body.theme-dark .progress-fill {
    background: linear-gradient(90deg, #4ea1ff, #70d6ff);
}
body.theme-dark .word-limit-note {
    background: #0f1420;
    border-left-color: #3b8eea;
}

/* 工具提示在暗色下的可读性 */
body.theme-dark .tooltip::after {
    background: rgba(255,255,255,0.95);
    color: #0f1420;
}

/* 暗色模式下的标题与欢迎文案可读性增强 */
body.theme-dark .section-header h2 {
    color: var(--text-primary);
}
body.theme-dark .section-header .word-count {
    color: var(--text-secondary);
}
body.theme-dark .welcome-message {
    color: var(--text-secondary);
}
body.theme-dark .welcome-message h3 {
    color: var(--text-primary);
}
body.theme-dark .welcome-message p,
body.theme-dark .features-preview .feature-item span {
    color: var(--text-secondary);
}

/* 暗色模式下：字数限制设置模态框可读性 */
body.theme-dark .modal-header h3 {
    color: var(--text-primary);
    font-weight: 700;
}
body.theme-dark .word-limit-note p {
    color: var(--text-primary);
}
body.theme-dark .word-limit-note ul {
    color: var(--text-primary);
}

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

body {
    /* 多语言优雅回退字体栈：优先系统无衬线，其次常见西文与中日韩字体 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
                 'Noto Sans', 'Noto Sans CJK SC', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB',
                 'Microsoft YaHei', 'Source Han Sans SC', 'WenQuanYi Micro Hei', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--background-color);
    overflow-x: hidden;
}

/* 应用容器 */
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 头部样式 */
.app-header {
    /* 流动渐变背景，提升图标对比度 */
    background-image: linear-gradient(120deg, #14203a, #2c3e50, #0e74c6, #2c3e50);
    background-size: 300% 300%;
    animation: headerGradientFlow 10s linear infinite;
    will-change: background-position;
    color: white;
    padding: 1rem 0;
    box-shadow: var(--shadow-medium);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--page-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
}

.logo-icon {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    box-shadow: var(--shadow-small);
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

/* 小屏幕适配：避免与标题拥挤 */
@media (max-width: 480px) {
    .logo-icon {
        width: 28px;
        height: 28px;
    }
}

.app-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    background: linear-gradient(45deg, #fff, #ecf0f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.app-subtitle {
    font-size: 0.9rem;
    opacity: 0.9;
    font-weight: 300;
}

.header-actions {
    display: flex;
    gap: 1rem;
}

/* 主内容区域 */
.main-content {
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem var(--page-padding); /* 轻量收紧上下留白 */
    display: flex;
    flex-direction: column; /* 统一上下布局 */
    gap: 1.5rem;
    width: 100%;
}

/* 区段样式 */
.input-section,
.analysis-section {
    background: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.section-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 0.75rem 1rem; /* 再次收紧标题高度 */
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-header h2 {
    font-size: 1.35rem; /* 略微减小标题字号 */
    font-weight: 600;
    color: var(--primary-color);
}

.word-count {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
    display: inline-flex; /* 与清空图标同行显示 */
    align-items: center;
    gap: 8px;
}

/* 输入容器 */
.input-container {
    padding: 1.25rem; /* 收紧内边距 */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.essay-type-selector,
.model-selector {
    display: flex;
    align-items: center;
    gap: 5rem; /* 显著增大组间距，清晰区分不同组 */
    flex-wrap: nowrap; /* 桌面端不换行，三项保持同一行 */
    width: 100%;
}

.form-group {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* 标签与控件靠得更近 */
    white-space: nowrap;
}

.form-group label {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    font-size: 0.85rem;
    margin: 0;
    flex-shrink: 0;
}

.form-group .form-select {
    width: 150px; /* 缩小以便三项能并排 */
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}

.model-selector .form-select {
    width: 250px;
    min-width: 200px;
}

/* 将分析按钮推到这一行最右侧 */
.model-selector #analyzeBtn {
    margin-left: auto;
}

.essay-type-selector label,
.model-selector label {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    font-size: 0.9rem;
    min-width: auto; /* 去除固定最小宽度，防止标签推远控件 */
    margin-right: 0.25rem; /* 标签与自身控件更紧凑 */
}

.essay-topic-input {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.essay-topic-input label {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.essay-topic-input .form-input {
    flex: 1;
    min-width: 200px;
}

/* 表单元素 */
.form-select,
.form-input {
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    transition: var(--transition);
    background: white;
}

.form-select:focus,
.form-input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-select {
    cursor: pointer;
    width: 90px;
    flex-shrink: 0;
    font-size: 0.85rem;
}

/* 文本域 */
.essay-textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    line-height: 1.8;
    resize: vertical;
    min-height: 122px; /* 再次在146px基础上减1/6 */
    font-family: inherit;
    transition: var(--transition);
}

.essay-textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.essay-textarea::placeholder {
    color: var(--text-secondary);
    font-style: italic;
}

/* 输入操作区域 */
.input-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* 按钮样式 */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #2980b9 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

.btn-secondary {
    background: var(--surface-color);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--secondary-color);
    background: #f8f9fa;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
}

.btn-outline:hover {
    background: var(--secondary-color);
    color: white;
}

/* 无边框纯图标按钮（用于 清空/删除 等场景） */
.btn-ghost {
    background: transparent;
    border: none;
    box-shadow: none;
}
.btn-ghost:hover, .btn-ghost:active {
    background: transparent;
    border: none;
    box-shadow: none;
}
.btn-ghost:focus { outline: none; }
.btn-ghost:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 2px; }

/* 欢迎说明工具栏中的文字按钮在深色模式下保持高对比度 */
.welcome-toolbar .btn-ghost { color: var(--text-primary); font-weight: 500; }
body.theme-dark .welcome-toolbar .btn-ghost { color: var(--text-primary); }
.welcome-toolbar .btn-ghost:hover { color: var(--secondary-color); }

.btn-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

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

/* 确保在任何情况下图标按钮不被拉伸 */
.btn.btn-icon {
    min-width: 48px;
}

.btn-icon.btn-primary {
    background: var(--secondary-color);
    color: white;
    border: none;
}

.btn .icon {
    font-size: 1.1em;
}

/* 分析容器 */
.analysis-container {
    padding: 1.25rem; /* 收紧分析区内边距 */
}

/* 分析结果清空按钮默认隐藏，生成结果后再显示 */
#clearAnalysisBtn { display: none; }

/* 统一分析结果区块的排版风格（字体、字号、行高一致） */
.analysis-section-item,
.analysis-section-item .content,
.error-item,
.error-item .content {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-primary);
}

/* 统一AI返回HTML片段的文字样式（确保不被嵌入样式干扰） */
.analysis-section-item .analysis-content,
.analysis-section-item .analysis-content p,
.analysis-section-item .analysis-content li,
.analysis-section-item .analysis-content span,
.analysis-section-item .analysis-content strong,
.analysis-section-item .analysis-content em {
    font-size: 1rem;
    line-height: 1.8;
    font-family: inherit;
}

.analysis-section-item .content p,
.analysis-section-item .content li,
.error-item .content p,
.error-item .content li {
    font-size: 1rem;
    line-height: 1.8;
}

.analysis-section-item .content ul,
.error-item .content ul {
    padding-left: 1.25rem;
    margin: 0.25rem 0 0.5rem 0;
}

/* 规范化内容区内的标题层级（analyzer.js 会注入 h4+ 标签） */
.analysis-section-item .content h4,
.error-item .content h4 { font-size: 1.15rem; margin: 0.6rem 0 0.4rem; color: var(--text-primary); }
.analysis-section-item .content h5,
.error-item .content h5 { font-size: 1.08rem; margin: 0.5rem 0 0.35rem; color: var(--text-primary); }
.analysis-section-item .content h6,
.error-item .content h6 { font-size: 1.02rem; margin: 0.45rem 0 0.3rem; color: var(--text-primary); }

/* 模型信息行统一弱化显示 */
.analysis-section-item .content .model-info { margin: 0 0 0.5rem; color: var(--text-secondary); }
.analysis-section-item .content .model-info small { font-size: 0.9rem; }

/* 统计卡片内文字也保持一致 */
.stats-category,
.stats-category li { font-size: 1rem; line-height: 1.8; }

/* 欢迎消息 */
.welcome-message {
    text-align: center;
    padding: 2rem 1.5rem; /* 收紧欢迎占用空间 */
    color: var(--text-secondary);
}

.welcome-icon {
    font-size: 3rem; /* 更紧凑的欢迎图标 */
    margin-bottom: 0.75rem;
}

.welcome-message h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-message p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* 功能预览（桌面端强制单行） */
.features-preview {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.75rem;
    max-width: none;
    margin: 0 auto;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem; /* 更紧凑以容纳 5 张卡片 */
    background: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    width: 120px; /* 固定卡片宽度，保证一行排满 */
}

.feature-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.feature-icon {
    font-size: 2rem;
}

/* 进度条（桌面端：文案在上、进度条在下） */
.analysis-progress {
    width: 340px; /* 桌面端适中宽度 */
    display: grid;
    grid-template-columns: auto 1fr auto; /* 图标 | 文案 | 清空图标 */
    grid-template-rows: auto auto;        /* 第一行文案，第二行进度条 */
    align-items: center;
    column-gap: 6px;
    row-gap: 6px;
}

.progress-text {
    grid-column: 2;
    grid-row: 1;
    display: inline-block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-icon {
    grid-column: 1;
    grid-row: 1;
    width: 16px;
    text-align: center;
}

/* 进度状态配色 */
.analysis-progress.progress--running .progress-text,
.analysis-progress.progress--running .progress-icon { color: var(--secondary-color); }
.analysis-progress.progress--success .progress-text,
.analysis-progress.progress--success .progress-icon { color: var(--success-color); }
.analysis-progress.progress--error .progress-text,
.analysis-progress.progress--error .progress-icon { color: var(--accent-color); }

.analysis-progress.progress--running .progress-fill {
    background: linear-gradient(90deg, var(--secondary-color), #70d6ff);
}
.analysis-progress.progress--success .progress-fill {
    background: linear-gradient(90deg, var(--success-color), #6fe3a9);
}
.analysis-progress.progress--error .progress-fill {
    background: linear-gradient(90deg, var(--accent-color), #ff9b9b);
}

.progress-bar {
    grid-column: 1 / span 3; /* 进度条占满整行 */
    grid-row: 2;
    width: 100%;
    height: 4px;
    background: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
    display: none;
}

/* 清空按钮放在第一行右侧 */
.analysis-progress #clearAnalysisBtn,
.analysis-progress .btn.btn-icon {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary-color), var(--success-color));
    width: 0%;
    transition: width 0.3s ease;
    animation: progressAnimation 2s ease-in-out infinite;
}

@keyframes progressAnimation {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes headerGradientFlow {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 0%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 100%; }
    100% { background-position: 0% 50%; }
}

/* 分析结果样式 */
.analysis-results {
    animation: fadeInUp 0.6s ease-out;
}

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

.analysis-section-item {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* 标题行与复制按钮 */
.analysis-section-item h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.analysis-section-item h3 .title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* 范文与输入标题的字数徽标样式 */
.word-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--surface-color);
    line-height: 1;
}
body.theme-dark .word-count-badge {
    background: #141b26;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* 默认隐藏“作文输入”标题内的字数徽标，避免初始状态显示 */
.input-section .section-header .word-count-badge { display: none; }

.copy-btn {
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition);
}
.copy-btn:hover { background: var(--hover-bg); }
.copy-btn .icon { font-size: 1rem; }

/* 纵向滚动容器（限制高度，出现上下滚动条） */
.analysis-section-item .content {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 6px; /* 预留滚动条空间 */
}

@media (max-width: 768px) {
    .analysis-section-item .content { max-height: 360px; }
}

/* 错误和建议样式 */
.error-item {
    background: #fff5f5;
    border-left-color: var(--accent-color);
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius);
}

/* 深色模式下：错误提示卡片提高对比度，确保内容可见 */
body.theme-dark .error-item {
    background: #2b1f1f; /* 深色背景下的低亮红棕底色 */
    border-left-color: #ff6b6b; /* 更醒目的左侧强调条 */
    color: var(--text-primary);
}
body.theme-dark .error-item .content,
body.theme-dark .error-item .content p,
body.theme-dark .error-item .content li,
body.theme-dark .error-item .content strong,
body.theme-dark .error-item .content em,
body.theme-dark .error-item .content small {
    color: var(--text-primary);
}
/* 如果失败/限流信息以普通段落形式出现，也强制在深色下可见 */
body.theme-dark .analysis-section-item .content .api-error,
body.theme-dark .analysis-section-item .content .rate-limit,
body.theme-dark .analysis-section-item .content .warning,
body.theme-dark .analysis-section-item .content .error,
body.theme-dark .analysis-section-item .content .fail {
    color: var(--text-primary) !important;
}

.suggestion-item {
    background: #f0f9ff;
    border-left-color: var(--secondary-color);
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius);
}

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.modal-content {
    background: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    max-width: 600px; /* 设置模态最大宽度为设置面板更友好 */
    width: 95%;
    max-height: 80vh;
    display: flex;
    flex-direction: column; /* 让body区域滚动 */
    animation: slideIn 0.3s ease-out;
}

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

.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky; /* 标题固定在顶部 */
    top: 0;
    background: inherit;
    z-index: 2;
}

.modal-header h3 {
    color: var(--primary-color);
    font-size: 1.3rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
}

.modal-close:hover {
    background: #f8f9fa;
    color: var(--text-primary);
}

.modal-body {
    padding: 1rem 1.5rem;
    overflow-y: auto; /* 只滚动主体，标题永远可见 */
}

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

/* 设置/历史 模态底部图标组改为居中对齐（不影响导出模态） */
#settingsModal .modal-footer,
#historyModal .modal-footer {
    justify-content: center;
}

/* 设置样式 */
.settings-section h4 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    font-weight: 600;
}

/* 深色模式下提升设置分区标题可读性 */
body.theme-dark .settings-section h4 {
    color: var(--text-primary);
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.api-config {
    margin-bottom: 1.5rem;
}

.api-config label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.api-config .form-input {
    width: 100%;
}

/* 字数设置样式 */
.word-limit-settings {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.word-limit-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.word-limit-input label {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    min-width: 60px;
    font-size: 0.9rem;
}

.word-limit-input .form-input {
    flex: 1;
    max-width: 120px;
    min-width: 80px;
}

.input-suffix {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.word-limit-note {
    background: #f8f9fa;
    padding: 0.8rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--secondary-color);
}

.word-limit-note p {
    margin-bottom: 0.4rem;
    color: var(--primary-color);
    font-size: 0.9rem;
}

.word-limit-note ul {
    margin: 0;
    padding-left: 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.word-limit-note li {
    margin-bottom: 0.2rem;
}

/* 导出选项 */
/* 导出按钮：统一改为横向一行的图标按钮组 */
.export-options {
    display: flex;
    gap: 1.25rem; /* 加大图标间距，避免拥挤 */
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center; /* 居中对齐三个导出图标 */
    width: 100%;
}

/* 导出按钮采用图标按钮，尺寸与头部图标一致 */
.export-btn {
    padding: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 64px; /* 固定占位，便于 space-between 计算 */
}

.export-btn .icon { font-size: 1.8rem; }

/* 导出模态：收紧整体宽度，提升聚焦度（不影响其他模态）*/
#exportModal .modal-content { max-width: 460px; }

/* 更小屏幕仍保持良好显示（已由全局规则控制宽度为95-98%）*/
@media (max-width: 480px) {
  #exportModal .modal-content { max-width: 98%; }
  .export-options { gap: 0.75rem; justify-content: space-around; }
}

/* 历史记录样式 */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.history-empty {
    text-align: center;
    color: var(--text-secondary);
}

.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-color);
}

.history-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.history-title {
    font-weight: 600;
    color: var(--primary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 56vw;
}

.history-sub {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.history-actions {
    display: inline-flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-small {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    height: auto;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .history-title { max-width: 48vw; }
    .history-item { flex-direction: column; align-items: stretch; }
    .history-actions { justify-content: flex-end; }
}

/* 加载覆盖层 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0; /* 不占满高度，避免形成遮罩 */
    background: transparent; /* 移除半透明遮罩层 */
    display: none;
    align-items: flex-start;
    justify-content: center; /* 顶部居中提示 */
    padding-top: 16px;
    pointer-events: none; /* 不拦截页面交互 */
    z-index: 2000;
}

.loading-overlay.active { display: flex; }

.loading-spinner {
    text-align: center;
    color: var(--text-primary);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 12px 16px;
    pointer-events: auto; /* 允许选中文本 */
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--secondary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner p {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
    
    .input-section {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    
    .analysis-section {
        width: 100%;
    }
    
    .input-container {
        padding: 1rem;
    }
    
    .analysis-container {
        padding: 1rem;
    }
    
    .essay-textarea {
        min-height: 82px; /* 在98px基础上再减小约 1/6 */
    }
    
    .export-options {
        grid-template-columns: 1fr;
    }
    
    .essay-type-selector {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .form-group {
        justify-content: space-between;
        gap: 0.5rem;
    }
    
    .form-group label {
        min-width: 60px;
        font-size: 0.9rem;
    }
    
    .form-group .form-select {
        min-width: 150px;
        width: 200px;
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
}

/* 工具提示 */
.tooltip {
    position: relative;
    cursor: help;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 1000;
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 选择文本样式 */
::selection {
    background: rgba(52, 152, 219, 0.2);
    color: var(--text-primary);
}

/* 焦点可见性 */
.btn:focus-visible,
.form-select:focus-visible,
.form-input:focus-visible,
.essay-textarea:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}