/* ai-tool-template.css */

:root {
    --tool-textarea-height: 599px;
    --citation-topbar-bg: #eef1f5;
    --citation-topbar-divider: rgba(148, 163, 184, 0.34);
    --citation-topbar-height: 58px;
    --citation-topbar-radius: 20px;
    --citation-topbar-hover-bg: #f8fafc;
    --citation-topbar-active-bg: #fff1a8;
}

/* ==========================================
   按钮兼容层 - 映射旧类到标准按钮系统
   旧类将逐步被替换为 tailwind.css 中的标准 .btn 类
   ==========================================
   映射关系:
   .icon-btn        -> .btn .btn-icon .btn-ghost
   .option-btn      -> .btn .btn-secondary (with .active)
   .convert-btn     -> .btn .btn-lg (页面特定样式)
   .config-btn      -> .btn
   .output-tab-btn  -> .btn .btn-ghost .btn-sm
   .model-btn       -> .btn .btn-secondary .btn-sm
   ========================================== */

/* 面包屑导航容器 */
.breadcrumb-navigation {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
}

/* 面包屑链接样式 */
.breadcrumb-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 400;
    white-space: nowrap;
    padding: 0.125rem 0;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}

.breadcrumb-link:link,
.breadcrumb-link:visited,
.breadcrumb-link:hover,
.breadcrumb-link:active,
.breadcrumb-link:focus,
.breadcrumb-link:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.breadcrumb-link:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.breadcrumb-link:focus,
.breadcrumb-link:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.breadcrumb-link:active {
    color: var(--color-primary);
    text-decoration: none;
}

.breadcrumb-link:visited {
    color: var(--color-text-secondary);
}

/* 面包屑分隔符 */
.breadcrumb-separator {
    color: var(--color-text-muted);
    font-weight: 400;
    margin: 0 0.375rem;
    user-select: none;
    font-size: 0.875rem;
}

/* 当前页面名称 */
.current-page {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
}


/* 选项卡片样式 - 自适应高度 */
.ai-tool-options-card {
    background: var(--color-background-primary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.ai-tool-options-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 主工作区样式 */
.ai-tool-workspace {
    margin-bottom: var(--spacing-md);
}

/* 两栏布局 */
.ai-tool-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    align-items: start; /* 确保两栏顶部对齐 */
}

.ai-tool-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* 确保内容对齐 */
}

/* 确保reduce_ai页面的左右两栏顶部对齐 */
.ai-tool-workspace .ai-tool-columns {
    align-items: stretch; /* 让两栏高度相同 */
}

.ai-tool-workspace .ai-tool-column {
    position: relative;
}

/* 确保输入和输出区域的顶部对齐 */
.ai-tool-workspace .ai-tool-input-section,
.ai-tool-workspace .ai-tool-output-section {
    padding-top: 0;
    margin-top: 0;
}

/* 确保选项卡容器的顶部对齐 */
.ai-tool-workspace .input-header,
.ai-tool-workspace .output-tabs-container {
    position: relative;
    top: 0;
    margin-top: 0;
    padding-top: 0;
}

/* 输入输出区域样式 */
.ai-tool-input-section,
.ai-tool-output-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: stretch; /* 确保子元素对齐 */
}

.input-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0; /* 移除间距，因为input-tabs-container已有间距 */
    margin-top: 0; /* 确保顶部对齐 */
    padding-top: 0; /* 确保顶部对齐 */
}

.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    margin-top: 0; /* 确保顶部对齐 */
    padding-top: 0; /* 确保顶部对齐 */
}

.input-actions,
.output-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.ai-tool-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

/* 文本框样式 */
.ai-tool-textarea {
    padding: 1rem;
    border: 2px solid var(--color-border);
    border-radius: 20px;
    font-family: var(--font-family-base);
    font-size: 0.9rem;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    min-height: var(--tool-textarea-height);
    height: var(--tool-textarea-height);
    font-family: var(--font-family-base);
    width: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral-300) var(--color-slate-100);
    background: linear-gradient(135deg, var(--color-background-primary) 0%, var(--color-background-secondary) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 统一滚动条样式 - 使用 CSS 变量，暗色模式自动切换 */
.ai-tool-textarea::-webkit-scrollbar,
.ai-tool-output-display::-webkit-scrollbar,
.comet-solver-output::-webkit-scrollbar {
    width: 10px;
}

.ai-tool-textarea::-webkit-scrollbar-track,
.ai-tool-output-display::-webkit-scrollbar-track,
.comet-solver-output::-webkit-scrollbar-track {
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

.ai-tool-textarea::-webkit-scrollbar-track {
    background: var(--color-slate-100);
}

.ai-tool-output-display::-webkit-scrollbar-track,
.comet-solver-output::-webkit-scrollbar-track {
    background: var(--color-background-secondary);
}

.ai-tool-textarea::-webkit-scrollbar-thumb,
.ai-tool-output-display::-webkit-scrollbar-thumb,
.comet-solver-output::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--color-neutral-300) 0%, var(--color-neutral-400) 100%);
    border-radius: 6px;
    border: 1px solid var(--color-neutral-400);
    transition: all var(--transition-fast) ease;
}

.ai-tool-textarea::-webkit-scrollbar-thumb:hover,
.ai-tool-output-display::-webkit-scrollbar-thumb:hover,
.comet-solver-output::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--color-neutral-400) 0%, var(--color-neutral-500) 100%);
    border-color: var(--color-neutral-500);
}

.ai-tool-textarea::-webkit-scrollbar-thumb:active,
.ai-tool-output-display::-webkit-scrollbar-thumb:active,
.comet-solver-output::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, var(--color-neutral-500) 0%, var(--color-neutral-600) 100%);
}

.ai-tool-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-background-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ai-tool-textarea:hover:not(:focus) {
    border-color: var(--color-neutral-300);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ai-tool-textarea::placeholder {
    color: var(--text-muted);
}

/* 输出显示区域样式 */
.ai-tool-output-display {
    background-color: var(--color-background-secondary);
    color: var(--text-muted);
    cursor: text;
    white-space: pre-wrap;
    overflow-y: auto;
    text-align: left;
    display: block;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.6;
    font-family: var(--font-family-base);
    font-size: 0.9rem;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral-300) var(--color-slate-100);
    min-height: var(--tool-textarea-height);
    max-height: var(--tool-textarea-height);
    height: var(--tool-textarea-height);
}

/* 确保输出区域的占位符文本与textarea一致 */
.ai-tool-output-display:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.6;
    font-family: var(--font-family-base);
}

/* 当有内容时隐藏占位符 */
.ai-tool-output-display:not(:empty) {
    color: var(--text-primary);
}

/* 集智解答专用输出样式 */
.comet-solver-output {
    background-color: var(--color-background-primary) !important;
    color: var(--text-primary) !important;
    cursor: default !important;
    white-space: normal !important;
    overflow-y: auto;
    text-align: left;
    display: block;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    font-family: var(--font-family-base);
    font-size: 0.85rem;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral-300) var(--color-slate-100);
    min-height: 469px;
    max-height: 625px;
    height: auto;
    padding: 1.2rem;
    border: 2px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* 集智解答输出内容结构样式 */
.comet-solver-output .process-section {
    margin-bottom: 2rem;
}

.comet-solver-output .process-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.8rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.comet-solver-output .step-item {
    margin-bottom: 0.6rem;
    padding: 0.5rem 0.7rem;
    background: var(--color-background-primary);
    border-radius: var(--border-radius-md);
    border: 1px solid #e3f2fd;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comet-solver-output .step-header {
    font-weight: 600;
    font-size: 0.75rem;
    background: var(--color-primary);
    color: #ffffff;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    min-width: 45px;
    text-align: center;
    flex-shrink: 0;
}

.comet-solver-output .step-content {
    color: var(--text-primary);
    line-height: 1.4;
    flex: 1;
    font-size: 0.8rem;
}

.comet-solver-output .solution-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    position: relative;
    overflow: hidden;
}

.comet-solver-output .solution-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.1) 100%);
    border-radius: inherit;
    pointer-events: none;
}

.comet-solver-output .solution-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1rem;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.comet-solver-output .solution-title::before {
    content: '✨';
    width: 24px;
    height: 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    flex-shrink: 0;
}

.comet-solver-output .solution-content {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 1;
    line-height: 1.6;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* LaTeX公式样式支持 */
.comet-solver-output .math-formula {
    display: block;
    text-align: center;
    margin: 0.8rem 0;
    padding: 0.4rem;
    background: transparent;
    border-radius: var(--border-radius-sm);
    font-family: 'Times New Roman', serif;
    font-size: 0.95rem;
}

.comet-solver-output .inline-math {
    background: transparent;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Times New Roman', serif;
}

/* 确保集智解答输出区域的占位符样式 */
.comet-solver-output:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    font-family: var(--font-family-base);
    font-style: italic;
}

/* 集智解答输出区域有内容时的样式 */
.comet-solver-output:not(:empty) {
    color: var(--text-primary) !important;
}


/* 图标按钮样式 - 继承 .btn .btn-icon .btn-ghost，添加页面特定效果 */
.icon-btn {
    /* 尺寸覆盖 */
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    /* 页面特定样式 */
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 15px;
    transition: all 0.12s ease;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #1f2937;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    transform: none;
}

.icon-btn:active {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.icon-btn i {
    transition: all 0.12s ease;
}

/* 操作按钮样式（复制、重置、粘贴、下载）已统一迁移至 tailwind.css 的 .action-btn-* 系列 */

/* 字数统计样式 - .word-count-section, .word-count-info, .word-count 已在 tailwind.css 定义 */

.daily-remaining-count {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.daily-remaining-count strong {
    color: var(--color-primary);
}

/* 消耗信息样式 */
.consumption-info {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-left: 0.5rem;
    font-weight: normal;
}

.estimated-cost-info {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-left: 0.6rem;
    white-space: nowrap;
}

/* 模型选择器样式 */
.model-selection-row {
    margin-top: var(--spacing-sm);
}

.model-button-group {
    margin-top: var(--spacing-xs);
}


.model-btn .btn-text {
    font-size: 0.875rem;
}

/* 模型选择器响应式 */
@media (max-width: 768px) {
    .model-button-group {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .model-btn {
        width: 100%;
        justify-content: center;
    }
}

/* .register-prompt, .button-group, .register-btn 已在 tailwind.css 定义 */

/* 帮助文本样式 */
.ai-tool-help-text {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
    line-height: 1.4;
}

/* 帮助文本行样式 */
.help-text-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xs);
}

.help-text-left,
.help-text-right {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

/* 示例文本样式 */
.ai-tool-examples {
    background: transparent;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-md);
    border: 1px solid #dee2e6;
    height: 124px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.examples-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.examples-header i,
.examples-header svg {
    color: var(--color-warning);
}

.examples-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
    flex: 1;
    overflow-y: auto;
}

.example-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.4rem;
    background: transparent;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    border: 1px solid #dee2e6;
    min-width: 0;
    max-width: 100%;
    height: 24px;
}

.example-item:hover {
    border-color: var(--color-primary);
    background: rgba(0, 0, 0, 0.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.example-icon {
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.example-text {
    font-size: 0.65rem;
    color: var(--text-secondary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* 全宽文件上传区域样式 */
.file-upload-full-width-section {
    background: linear-gradient(135deg, #F8F8F7 0%, #e9ecef 100%);
    border-radius: 16px;
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    border: 1px solid #dee2e6;
    width: 100%;
    box-sizing: border-box;
}

.file-upload-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.file-upload-header i {
    color: var(--color-text-secondary);
}

/* 文件上传内容区域 - 默认单列，有文件时变为两列 */
.file-upload-content {
    display: flex;
    gap: var(--spacing-md);
    align-items: stretch;
}

/* 当有文件时，拖拽区域变为50%宽度 */
.file-upload-content.has-files .file-drop-zone {
    flex: 0 0 50%;
}

.file-count {
    margin-left: auto;
    background: var(--color-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.uploaded-files-label {
    background: #6c757d;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 0.5rem;
}

.clear-all-btn {
    background: #dc3545;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: all var(--transition-fast) ease;
}

.clear-all-btn:hover {
    background: #c82333;
    transform: translateY(-1px);
}

.clear-all-btn i {
    margin-right: 0.25rem;
}

.file-drop-zone {
    flex: 1;
    border: 2px dashed #cbd5e1;
    border-radius: var(--border-radius-md);
    padding: 1rem;
    text-align: center;
    background: var(--color-background-primary);
    cursor: pointer;
    transition: all var(--transition-normal) ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}

/* 当有文件时，拖拽区域高度跟随文件容器 */
.file-upload-content.has-files .file-drop-zone {
    min-height: auto;
    height: 100%;
}

.file-drop-zone:hover,
.file-drop-zone.drag-over {
    border-color: var(--color-primary);
    background: rgba(0, 0, 0, 0.02);
}

.drop-zone-content i {
    font-size: 1.5rem;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.drop-zone-text {
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.upload-link {
    color: var(--color-primary);
    font-weight: 600;
}

.drop-zone-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* 已上传文件样式 */
.uploaded-files-container {
    flex: 0 0 50%;
    background: var(--color-background-primary);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    max-height: 400px;
    overflow-y: auto;
}

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

.uploaded-files-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.file-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 0.75rem;
    background: var(--color-background-secondary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
    width: 100%;
    box-sizing: border-box;
    min-height: 32px;
}

.file-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.file-icon {
    width: 20px;
    height: 20px;
    background: var(--color-background-tertiary);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    font-size: 0.75rem;
}

.file-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}

.file-name {
    font-weight: 400;
    color: var(--text-primary);
    font-size: 0.75rem;
    word-break: break-word;
    line-height: 1.3;
    flex: 1;
    white-space: normal;
    overflow-wrap: break-word;
}

.file-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.file-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.file-status.loading {
    color: var(--color-info);
}

.file-status.success {
    color: var(--color-success);
}

.file-status.error {
    color: var(--color-danger);
}

.file-actions {
    display: flex;
    gap: 0.25rem;
    align-items: flex-start;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.file-preview-btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    height: 24px;
    line-height: 1;
}

.file-preview-btn:hover {
    background: var(--color-primary);
    color: white;
}

.file-remove-btn {
    width: 20px;
    height: 20px;
    background: transparent;
    color: var(--color-danger);
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast) ease;
    font-size: 0.7rem;
}

.file-remove-btn:hover {
    background: var(--color-danger-light);
}

/* 选项和提交按钮样式 */
.format-selection-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    min-height: 40px;
    width: 100%;
}

.format-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
    height: 36px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    min-width: 80px;
}

/* 现代化按钮组选择器样式 */
.modern-button-group {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    width: 100%;
    overflow: visible;
}

/* 现代化按钮组内的按钮样式 - 覆盖默认样式 */
.modern-button-group .btn.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid #dee2e6;
}

.modern-button-group .btn.btn-secondary:hover:not(.active) {
    background: #FEF3C7;
    border-color: #FEF3C7;
    color: #000000;
}

.modern-button-group .btn.btn-secondary.active {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}

/* 按钮点击瞬间的状态 - 鼠标按下时立即显示黑色填充 */
.modern-button-group .btn.btn-secondary:active {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
    transform: scale(0.98);
}

/* 选项按钮 - 继承 .btn .btn-secondary，添加页面特定效果 */
.option-btn {
    /* 页面特定尺寸 */
    padding: 0.5rem 1rem;
    height: 36px;
    min-width: 90px;
    max-width: 160px;
    font-size: 0.8rem;
    border-radius: 0.5rem;
    /* 页面特定样式 */
    background: transparent;
    color: var(--text-primary);
    border: 1px solid #dee2e6;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option-btn:hover:not(.active) {
    background: #FEF3C7;
    border-color: #FEF3C7;
    color: #000000;
    box-shadow: 0 2px 4px rgba(254, 243, 199, 0.4);
}

.option-btn.active {
    background: #000000;
    color: white;
    border-color: #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.option-btn.active:hover {
    background: #000000;
    border-color: #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.btn-text {
    /* 简化文本样式，移除动态调整 */
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: inherit;
}


/* 移除所有响应式样式，保持按钮尺寸和字体大小固定 */
/* 按钮在所有情况下都保持相同的外观 */

/* 重要：覆盖 sidebar-zero-flicker.css 中的全局 .btn-text 规则 */
/* 确保格式选择按钮的文本在 sidebar 收缩时仍然可见且位置不变 */
[data-sidebar-collapsed="true"] .option-btn .btn-text,
[data-sidebar-collapsed="true"] .modern-button-group .btn-text {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* 提交按钮样式 - 继承 .btn .btn-lg，页面特定黄色样式 */
.convert-btn {
    /* 页面特定尺寸 */
    padding: 0.75rem 1.5rem;
    min-width: 120px;
    height: 44px;
    border-radius: 20px;
    /* 页面特定样式 - 黄色主题 */
    background-color: #FCF4C5;
    border: 2px solid #FCF4C5;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.convert-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.convert-btn:hover {
    background-color: #FAF0B8;
    border-color: #FAF0B8;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(252, 244, 197, 0.4);
}

.convert-btn:hover::before {
    left: 100%;
}

.convert-btn:hover i {
    transform: rotate(180deg);
}

.convert-btn i {
    transition: transform 0.3s ease;
}

.convert-btn:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.convert-btn:disabled {
    background: #cccccc;
    border-color: #cccccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.convert-btn:disabled::before {
    display: none;
}

/* 字数控制样式 */
.word-control-section {
    margin-top: var(--spacing-xs);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.word-control-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.word-control-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* 内联字数控制样式 - 续 */
.word-control-section-inline {
   display: flex;
   align-items: center;
   margin: 0;
}

.word-control-info-inline {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.word-control-label-inline {
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--text-primary);
   white-space: nowrap;
}

/* 现代化输入框样式 */
.modern-input-container {
   position: relative;
   display: inline-flex;
   align-items: center;
   width: 140px;
}

.modern-input {
   width: 100%;
   padding: 0.75rem 2rem 0.75rem 0.75rem;
   border: 2px solid var(--color-border);
   border-radius: 16px;
   font-size: 0.875rem;
   font-weight: 500;
   background: linear-gradient(135deg, var(--color-background-primary) 0%, var(--color-background-secondary) 100%);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none;
   color: var(--text-primary);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 内联现代化输入框样式 */
.modern-input-container-inline {
   position: relative;
   display: inline-flex;
   align-items: center;
   width: 100px;
}

.modern-input-inline {
   width: 100%;
   padding: 0.4rem 1.5rem 0.4rem 0.5rem;
   border: 1px solid var(--color-border);
   border-radius: 8px;
   font-size: 0.75rem;
   font-weight: 500;
   background: linear-gradient(135deg, var(--color-background-primary) 0%, var(--color-background-secondary) 100%);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none;
   color: var(--text-primary);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   height: 32px;
}

.modern-input:focus {
   border-color: var(--color-primary);
   background: var(--color-background-primary);
   box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1);
   transform: translateY(-1px);
}

.modern-input:hover:not(:focus) {
   border-color: var(--color-neutral-300);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.input-highlight {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 12px;
   background: linear-gradient(135deg, var(--color-primary) 0%, #333333 100%);
   opacity: 0;
   transition: opacity 0.3s ease;
   pointer-events: none;
   z-index: -1;
}

.modern-input:focus + .input-highlight {
   opacity: 0.1;
}

.input-suffix {
   position: absolute;
   right: 0.75rem;
   top: 50%;
   transform: translateY(-50%);
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--color-text-secondary);
   pointer-events: none;
   transition: all var(--transition-normal) ease;
}

.modern-input:focus ~ .input-suffix {
   color: var(--color-primary);
   transform: translateY(-50%) scale(1.1);
}

/* 内联输入框后缀样式 */
.input-suffix-inline {
   position: absolute;
   right: 0.5rem;
   top: 50%;
   transform: translateY(-50%);
   font-size: 0.65rem;
   font-weight: 600;
   color: var(--color-text-secondary);
   pointer-events: none;
   transition: all var(--transition-normal) ease;
}

.modern-input-inline:focus ~ .input-suffix-inline {
   color: var(--color-primary);
   transform: translateY(-50%) scale(1.1);
}

/* 内联输入框高亮样式 */
.input-highlight-inline {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 8px;
   background: linear-gradient(135deg, var(--color-primary) 0%, #333333 100%);
   opacity: 0;
   transition: opacity 0.3s ease;
   pointer-events: none;
   z-index: -1;
}

.modern-input-inline:focus + .input-highlight-inline {
   opacity: 0.1;
}

.modern-input-inline:focus {
   border-color: var(--color-primary);
   background: var(--color-background-primary);
   box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.1);
   transform: translateY(-1px);
}

.modern-input-inline:hover:not(:focus) {
   border-color: var(--color-neutral-300);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.modern-input-inline[type="number"] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
}

.modern-input-inline[type="number"]::-webkit-outer-spin-button,
.modern-input-inline[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.modern-input-inline::placeholder {
   color: var(--color-text-muted);
   font-weight: 400;
   transition: all var(--transition-normal) ease;
}

.modern-input-inline:focus::placeholder {
   color: #d1d5db;
   transform: translateX(2px);
}

/* 输入框数字样式优化 */
.modern-input[type="number"] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
}

.modern-input[type="number"]::-webkit-outer-spin-button,
.modern-input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

/* 输入框占位符样式 */
.modern-input::placeholder {
   color: var(--color-text-muted);
   font-weight: 400;
   transition: all var(--transition-normal) ease;
}

.modern-input:focus::placeholder {
   color: #d1d5db;
   transform: translateX(4px);
}

/* 输入框错误状态 */
.modern-input.error {
   border-color: var(--color-danger);
   background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
}

.modern-input.error:focus {
   box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1), 0 4px 12px rgba(239, 68, 68, 0.1);
}

/* 输入框成功状态 */
.modern-input.success {
   border-color: var(--color-success);
   background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.modern-input.success:focus {
   box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1), 0 4px 12px rgba(16, 185, 129, 0.1);
}

/* Tips卡片样式 */
.output-tips-section {
   background: #FCF4C5;
   border: 1px solid #F4E19F;
   border-radius: var(--border-radius-md);
   padding: var(--spacing-md);
   margin-top: var(--spacing-md);
   height: 124px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   position: relative;
}

.output-tips-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-weight: 600;
   color: var(--color-primary);
   margin-bottom: var(--spacing-sm);
   font-size: 0.8rem;
}

.output-tips-content {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   flex: 1;
   overflow-y: auto;
}

.output-tip-item {
   display: flex;
   align-items: flex-start;
   gap: 0.5rem;
   font-size: 0.75rem;
   color: var(--color-text-body);
   line-height: 1.2;
}

.output-tip-item i,
.output-tip-item svg {
   color: var(--color-success);
   margin-top: 0.125rem;
   flex-shrink: 0;
}

.tips-guide-hover {
   position: absolute;
   right: 18px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 5;
}

.tips-guide-trigger {
   width: 34px;
   height: 34px;
   aspect-ratio: 1 / 1;
   border-radius: 999px;
   border: 1px solid rgba(15, 23, 42, 0.16);
   background: rgba(255, 255, 255, 0.8);
   color: #334155;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
   transition: all var(--transition-fast) ease;
   cursor: pointer;
}

.tips-guide-trigger:hover,
.tips-guide-hover:focus-within .tips-guide-trigger {
   background: rgba(255, 255, 255, 0.94);
   color: #0f172a;
   border-color: rgba(15, 23, 42, 0.28);
}

.tips-guide-popover {
   position: absolute;
   right: 44px;
   top: 50%;
   transform: translateY(-50%) translateX(8px);
   width: min(360px, calc(100vw - 64px));
   padding: 12px 14px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.58);
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.88) 0%, rgba(246, 248, 251, 0.82) 100%);
   backdrop-filter: blur(14px) saturate(125%);
   -webkit-backdrop-filter: blur(14px) saturate(125%);
   box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity 0.2s ease, transform 0.2s ease;
   z-index: 6;
}

.tips-guide-hover:hover .tips-guide-popover,
.tips-guide-hover:focus-within .tips-guide-popover {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transform: translateY(-50%) translateX(0);
}

.tips-guide-popover-title {
   font-size: 0.84rem;
   font-weight: 700;
   color: #0f172a;
}

.tips-guide-popover-subtitle {
   margin-top: 2px;
   margin-bottom: 8px;
   font-size: 0.78rem;
   color: #475569;
   font-weight: 600;
}

.tips-guide-popover-steps {
   display: flex;
   flex-direction: column;
   gap: 7px;
}

.tips-guide-popover-step {
   display: flex;
   align-items: flex-start;
   gap: 8px;
}

.tips-guide-step-number {
   width: 20px;
   height: 20px;
   border-radius: 6px;
   background: var(--color-text-primary);
   color: #ffffff;
   font-size: 0.72rem;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.tips-guide-step-body {
   display: flex;
   flex-direction: column;
   min-width: 0;
}

.tips-guide-step-title {
   font-size: 0.76rem;
   font-weight: 700;
   color: var(--color-text-primary);
   line-height: 1.3;
   overflow-wrap: anywhere;
   word-break: break-word;
}

.tips-guide-step-desc {
   margin-top: 1px;
   font-size: 0.73rem;
   color: #475569;
   line-height: 1.35;
   overflow-wrap: anywhere;
   word-break: break-word;
}

/* 功能特色样式 - 使用更具体的选择器避免与 pages.css 冲突 */
.features-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 1.5rem;
}

.features-grid .new-feature-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: var(--spacing-xs);
   transition: all var(--transition-normal) ease;
   border-radius: var(--border-radius-md);
   cursor: pointer;
}

.features-grid .new-feature-item:hover {
   transform: translateY(-2px);
}

.features-grid .new-feature-item:hover .new-feature-title {
   color: var(--color-primary);
}

.features-grid .new-feature-icon {
   width: 48px;
   height: 48px;
   background: linear-gradient(135deg, var(--background-tertiary) 0%, #f0f0f0 100%);
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-secondary);
   font-size: var(--font-size-lg);
   margin-bottom: var(--spacing-sm);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.features-grid .new-feature-icon::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
   transition: left 0.6s ease;
}

.features-grid .new-feature-item:hover .new-feature-icon {
   background: #111111;
   color: #ffffff;
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.features-grid .new-feature-item:hover .new-feature-icon::before {
   left: 100%;
}

.features-grid .new-feature-item:hover .new-feature-icon i {
   transform: scale(1.1) rotate(5deg);
}

.features-grid .new-feature-icon i {
   transition: transform 0.3s ease;
}

.features-grid .new-feature-item:hover .new-feature-icon svg {
   transform: scale(1.1) rotate(5deg);
}

.features-grid .new-feature-icon svg {
   width: 24px;
   height: 24px;
   stroke: currentColor;
   fill: none;
   transition: transform 0.3s ease;
}

.features-grid .new-feature-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   min-width: 0;
}

.features-grid .new-feature-title {
   font-size: var(--font-size-xs);
   font-weight: 600;
   color: var(--text-primary);
   margin-bottom: var(--spacing-xxxs);
}

.features-grid .new-feature-text {
   font-size: 0.7rem;
   color: var(--text-secondary);
   line-height: 1.3;
}

/* 6列网格 */
.new-grid-cols-6 {
   grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* 快速操作指南样式 */
.quick-guide-header-simple {
   font-weight: 600;
   color: var(--text-primary);
   margin-bottom: var(--spacing-md);
}

.quick-guide-steps-simple {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: var(--spacing-md);
}

.quick-step-simple {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-sm);
   min-width: 0;
}

.step-number {
   width: 32px;
   height: 32px;
   background: linear-gradient(135deg, var(--color-primary) 0%, #333333 100%);
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 0.875rem;
   flex-shrink: 0;
}

.step-content {
   flex: 1;
   min-width: 0;
}

.step-title {
   font-weight: 600;
   color: var(--text-primary);
   display: block;
   margin-bottom: 0.25rem;
   overflow-wrap: anywhere;
   word-break: break-word;
}

.step-desc {
   font-size: 0.875rem;
   color: var(--text-secondary);
   line-height: 1.5;
   overflow-wrap: anywhere;
   word-break: break-word;
}

/* Compact and understated style: make "功能特色" and "使用提示" visually consistent */
.features-card,
.usage-tips-card {
   padding: var(--spacing-md) !important;
}

.features-card .new-card-header,
.usage-tips-card .new-card-header {
   margin-bottom: var(--spacing-sm) !important;
   padding-bottom: var(--spacing-sm) !important;
   border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
   background: transparent !important;
}

.features-card .new-card-title,
.usage-tips-card .new-card-title {
   display: flex;
   align-items: center;
   gap: 0.38rem;
   margin: 0;
   font-size: 0.95rem !important;
   font-weight: 600 !important;
   color: var(--text-primary) !important;
   letter-spacing: 0;
}

.features-card .new-card-title i,
.features-card .new-card-title svg,
.usage-tips-card .new-card-title i,
.usage-tips-card .new-card-title svg {
   font-size: 0.82rem;
   color: var(--text-secondary) !important;
}

.usage-tips-card {
   background: var(--color-background-tertiary);
   border: 1px solid var(--color-border);
   box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.usage-tips-card .new-card-content {
   padding-top: 0.1rem;
}

.usage-tips-card .quick-guide-header-simple {
   margin-bottom: 0.45rem;
   font-size: 0.82rem;
   font-weight: 500;
   color: var(--text-secondary);
   overflow-wrap: anywhere;
   word-break: break-word;
}

.usage-tips-card .quick-guide-steps-simple {
   gap: 0.45rem;
}

.usage-tips-card .quick-step-simple {
   padding: 0.58rem 0.68rem;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.7);
   border: 1px solid rgba(148, 163, 184, 0.2);
   box-shadow: none;
   transform: none;
}

.usage-tips-card .quick-step-simple:hover {
   transform: none;
   box-shadow: none;
   border-color: rgba(148, 163, 184, 0.25);
}

.usage-tips-card .step-number {
   width: 26px;
   height: 26px;
   border-radius: 7px;
   font-size: 0.72rem;
   box-shadow: none;
}

.usage-tips-card .step-title {
   margin-bottom: 0.12rem;
   font-size: 0.82rem;
   font-weight: 600;
}

.usage-tips-card .step-desc {
   font-size: 0.78rem;
   line-height: 1.35;
}

/* 骨架屏加载样式 */
/* 骨架屏样式已统一迁移至 tailwind.css，此处不再重复定义 */

/* 响应式设计 */
@media (max-width: 1200px) {
   /* 保持6列布局，让所有功能特色在一行显示 */
   .features-grid {
       grid-template-columns: repeat(6, minmax(0, 1fr));
   }

   .new-grid-cols-6 {
       grid-template-columns: repeat(6, minmax(0, 1fr));
   }
}

@media (max-width: 768px) {
   /* 头部卡片 */
   .ai-tool-header-card {
       padding: var(--spacing-sm);
       margin-bottom: var(--spacing-sm);
   }
   
   .ai-tool-header-icon {
       width: 40px;
       height: 40px;
       font-size: 1rem;
   }
   
   .ai-tool-header-title {
       font-size: 0.95rem;
   }
   
   .ai-tool-header-description {
       font-size: 0.8rem;
   }
   
   /* 两栏变单栏 */
   .ai-tool-columns {
       grid-template-columns: 1fr;
       gap: var(--spacing-sm);
   }
   
   /* 文本框高度 */
   .ai-tool-textarea {
       min-height: 250px;
       height: auto !important;
   }

   .ai-tool-output-display {
       min-height: 250px;
       height: auto !important;
   }

   /* 修复移动端卡片高度问题 */
   .ai-tool-workspace .new-card {
       height: auto !important;
       min-height: auto !important;
   }
   
   /* 示例列表 */
   .examples-list {
       grid-template-columns: 1fr;
   }
   
   /* 选项行 */
   .format-selection-row {
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-sm);
       padding: var(--spacing-sm);
   }
   
   .ai-tool-options-card {
       height: auto;
       min-height: auto;
       padding: var(--spacing-sm);
   }
   
   .modern-button-group {
       width: 100%;
       justify-content: center;
       gap: 0.4rem;
       flex-wrap: wrap;
   }
   
   .option-btn {
       min-width: 80px;
       max-width: 140px;
       font-size: 0.7rem;
       padding: 0.5rem 0.7rem;
       height: 36px;
       margin-bottom: 0.3rem;
       flex: 0 0 auto;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   
   .convert-btn {
       width: 100%;
       margin-top: var(--spacing-xs);
   }
   
   /* 功能特色 */
   .features-grid {
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: var(--spacing-xs);
   }

   .new-grid-cols-6 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: var(--spacing-xs);
   }

   .features-grid .new-feature-icon {
       width: 36px;
       height: 36px;
       font-size: 0.9rem;
       margin-bottom: 0.5rem;
       flex-shrink: 0;
   }

   .features-grid .new-feature-title {
       font-size: 0.75rem;
   }

   .features-grid .new-feature-text {
       font-size: 0.65rem;
   }

   .features-grid .new-feature-item {
       min-height: 100px;
   }

   /* 使用提示 */
    .quick-guide-steps-simple {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .usage-tips-card .quick-guide-steps-simple,
    .usage-tips-card .quick-step-simple {
        width: 100%;
        min-width: 0;
    }

   .usage-tips-card .quick-step-simple {
       padding: 0.85rem 0.9rem;
       border-radius: 12px;
   }

   .features-card .new-card-title,
   .usage-tips-card .new-card-title {
       font-size: 0.9rem !important;
   }

    .usage-tips-card .quick-step-simple {
        padding: 0.5rem 0.56rem;
    }

    .tips-guide-hover {
        right: 12px;
        transform: none;
        top: 50%;
        margin-top: -16px;
    }

    .tips-guide-trigger {
        width: 32px;
        height: 32px;
    }

    /* 移动端原始弹窗隐藏，改由 JS portal 接管 */
    .tips-guide-popover {
        display: none !important;
    }

    /* portal 挂载到 body，fixed 定位不受祖先 transform 影响 */
    .tips-guide-portal {
        position: fixed;
        left: 12px;
        right: 12px;
        top: auto;
        bottom: calc(max(12px, env(safe-area-inset-bottom)) + 4px);
        transform: translateY(8px);
        width: auto;
        max-width: none;
        min-width: 0;
        max-height: min(56vh, 420px);
        overflow-y: auto;
        padding: 10px 12px;
        border-radius: 12px;
        z-index: 10010;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
        /* 继承弹窗原有视觉样式 */
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid rgba(15, 23, 42, 0.1);
        box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .tips-guide-popover-title {
        font-size: 0.82rem;
    }

    .tips-guide-popover-subtitle {
        font-size: 0.75rem;
    }

    .tips-guide-step-title {
        font-size: 0.74rem;
    }

    .tips-guide-step-desc {
        font-size: 0.71rem;
    }
   
   /* 字数统计 */
   .word-count-section {
       flex-direction: column;
       align-items: stretch;
       gap: var(--spacing-xs);
   }
   
   .word-count-info {
       flex-direction: column;
       align-items: flex-start;
       gap: var(--spacing-xs);
   }
   
   .register-prompt {
       flex-direction: column;
       align-items: flex-start;
   }
   
   .button-group {
       width: 100%;
       flex-direction: row;
       gap: 0.5rem;
       justify-content: flex-start;
   }
   
   .register-btn {
       width: auto;
       min-width: 90px;
       justify-content: center;
       flex: 0 0 auto;
   }
   
   /* 文件上传移动端优化 */
   .uploaded-files-list {
       gap: 0.5rem;
   }
   
   .file-item {
       min-width: 160px;
       max-width: 180px;
       padding: 0.5rem;
   }
   
   .file-name {
       font-size: 0.8rem;
       word-break: break-word;
       line-height: 1.2;
   }
   
   .file-meta {
       font-size: 0.7rem;
   }
   
   .file-actions {
       gap: 0.25rem;
   }
   
   .file-preview-btn {
       font-size: 0.7rem;
       padding: 0.2rem 0.4rem;
   }
   
   .file-remove-btn {
       width: 20px;
       height: 20px;
       font-size: 0.7rem;
   }
}

@media (max-width: 480px) {
   /* 超小屏幕优化 */
   .ai-tool-header-card {
       padding: 0.5rem;
   }

   .ai-tool-header-icon {
       width: 36px;
       height: 36px;
       font-size: 0.9rem;
   }

   .ai-tool-header-title {
       font-size: 0.9rem;
   }

   .ai-tool-header-description {
       font-size: 0.75rem;
   }

   /* 功能特色2列布局 */
   .features-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 0.75rem;
   }

   .new-grid-cols-6 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 0.75rem;
   }

   .features-grid .new-feature-icon {
       width: 32px;
       height: 32px;
       font-size: 0.8rem;
       margin-bottom: 0.4rem;
       flex-shrink: 0;
   }

   .features-grid .new-feature-title {
       font-size: 0.7rem;
   }

   .features-grid .new-feature-text {
       font-size: 0.6rem;
       line-height: 1.3;
   }

   .features-grid .new-feature-item {
       min-height: 90px;
       padding: 0.5rem;
   }

   .features-grid .new-feature-content {
       flex: 1;
       display: flex;
       flex-direction: column;
   }

   /* 超小屏幕文件上传优化 */
   .file-item {
       min-width: 140px;
       max-width: 160px;
       padding: 0.4rem;
   }

   /* 超小屏幕按钮组优化 */
   .modern-button-group {
       gap: 0.25rem;
       justify-content: center;
       flex-wrap: wrap;
   }
   
   .option-btn {
       min-width: 70px;
       max-width: 110px;
       font-size: 0.6rem;
       padding: 0.4rem 0.5rem;
       height: 32px;
       flex: 0 0 auto;
       line-height: 1.1;
   }
   
   .format-label {
       font-size: 0.8rem;
       min-width: auto;
       text-align: center;
   }
   
   .convert-btn {
       font-size: 0.8rem;
       padding: 0.6rem 1rem;
       height: 40px;
   }
   
   .file-icon {
       width: 24px;
       height: 24px;
       font-size: 0.8rem;
   }
   
   .file-name {
       font-size: 0.75rem;
   }
   
   .file-meta {
       font-size: 0.65rem;
   }
   
   .file-preview-btn {
       font-size: 0.65rem;
       padding: 0.15rem 0.3rem;
   }
   
    .file-remove-btn {
        width: 18px;
        height: 18px;
        font-size: 0.65rem;
    }

    .tips-guide-portal {
        left: 8px;
        right: 8px;
        bottom: calc(max(8px, env(safe-area-inset-bottom)) + 2px);
        max-height: min(58vh, 380px);
        padding: 9px 10px;
        border-radius: 10px;
    }
}

/* 极小屏幕优化 (360px以下) */
@media (max-width: 360px) {
   .modern-button-group {
       gap: 0.2rem;
       justify-content: center;
       flex-wrap: wrap;
   }

   .option-btn {
       min-width: 60px;
       max-width: 90px;
       font-size: 0.55rem;
       padding: 0.35rem 0.4rem;
       height: 30px;
       flex: 0 0 auto;
       line-height: 1.1;
   }

   .btn-text {
       font-size: 0.55rem;
       line-height: 1.1;
   }

   .format-selection-row {
       padding: 0.4rem;
       gap: 0.4rem;
   }

   .ai-tool-options-card {
       padding: 0.4rem;
   }

   /* 极小屏幕功能特色优化 */
   .features-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 0.5rem;
   }

   .new-grid-cols-6 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 0.5rem;
   }

   .features-grid .new-feature-icon {
       width: 28px;
       height: 28px;
       font-size: 0.75rem;
       border-radius: 12px;
       margin-bottom: 0.35rem;
       flex-shrink: 0;
   }

   .features-grid .new-feature-title {
       font-size: 0.65rem;
       margin-bottom: 0.15rem;
   }

   .features-grid .new-feature-text {
       font-size: 0.55rem;
       line-height: 1.2;
   }

   .features-grid .new-feature-item {
       padding: 0.35rem;
       min-height: 85px;
   }

   .features-grid .new-feature-content {
       flex: 1;
       display: flex;
       flex-direction: column;
   }
}




/* 自定义配置按钮样式 */
.format-selection-container {
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

.custom-config-btn {
   width: 40px;
   height: 40px;
   border: none;
   background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 16px;
   transition: all var(--transition-normal) ease;
   box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
   position: relative;
   overflow: hidden;
}

.custom-config-btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
   transition: left 0.6s ease;
}

.custom-config-btn:hover {
   background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
   transform: translateY(-1px) scale(1.05);
   box-shadow: 0 4px 16px rgba(220, 53, 69, 0.4);
}

.custom-config-btn:hover::before {
   left: 100%;
}

.custom-config-btn:active {
   transform: translateY(0) scale(1);
   box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.custom-config-btn i {
   transition: transform 0.3s ease;
}

.custom-config-btn:hover i {
   transform: rotate(90deg);
}

/* 直接提交版字数控制样式 */
.direct-submission-word-count {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   padding: 0.25rem 0.5rem;
   background: rgba(var(--primary-rgb, 37, 99, 235), 0.08);
   border-radius: 0.5rem;
   border: 1px solid rgba(var(--primary-rgb, 37, 99, 235), 0.2);
   transition: all var(--transition-fast) ease;
}

html.dark .direct-submission-word-count {
   background: rgba(255, 255, 255, 0.05);
   border-color: rgba(255, 255, 255, 0.1);
}

.direct-submission-word-count:focus-within {
   border-color: var(--color-primary, #2563eb);
   box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 37, 99, 235), 0.15);
}

html.dark .direct-submission-word-count:focus-within {
   border-color: var(--color-primary, #2563eb);
   box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 37, 99, 235), 0.25);
}

.solver-word-input {
   width: 60px;
   padding: 0.35rem 0.5rem;
   border: none;
   background: transparent;
   font-size: 0.875rem;
   color: var(--text-color, #1f2937);
   text-align: center;
   outline: none;
   appearance: textfield;
   -moz-appearance: textfield;
}

html.dark .solver-word-input {
   color: #e5e5e5;
}

.solver-word-input::-webkit-outer-spin-button,
.solver-word-input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.solver-word-input::placeholder {
   color: var(--color-text-muted);
   font-size: 0.8rem;
}

.direct-submission-word-count .word-suffix {
   font-size: 0.8rem;
   color: var(--color-text-secondary);
   font-weight: 500;
}

html.dark .direct-submission-word-count .word-suffix {
   color: #a3a3a3;
}

/* 响应式设计 */
@media (max-width: 768px) {
   .format-selection-container {
       flex-direction: column;
       align-items: stretch;
       gap: 0.5rem;
   }
   
   .custom-config-btn {
       width: 100%;
       height: 44px;
       border-radius: 0.5rem;
       justify-content: center;
   }
}

/* 选项卡样式 */
.output-tabs-container,
.input-tabs-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--spacing-sm);
   padding-bottom: 0;
   min-height: 60px; /* 确保左右两侧标签容器高度一致 */
   padding-top: 0; /* 确保顶部对齐 */
   margin-top: 0; /* 确保顶部对齐 */
}

/* 确保reduce_ai页面的选项卡容器对齐 */
.ai-tool-input-section .input-tabs-container {
   margin-bottom: var(--spacing-sm); /* 与output-tabs-container保持一致 */
}

.output-tabs,
.input-tabs {
   display: flex;
   gap: 0;
   align-items: center;
   flex: 1;
}

/* 左侧输入标签页 - 圆角胶囊风格 */
.input-tabs {
   gap: 6px;
}

.input-tabs .output-tab-btn {
   border-bottom: none;
   border-radius: 10px;
   margin-bottom: 0;
   padding: 0.6rem 1.1rem;
   font-size: 0.84rem;
   color: #64748b;
   background: transparent;
   transition: color 0.25s ease, background 0.25s ease;
}

.input-tabs .output-tab-btn:hover {
   color: var(--color-primary);
   background: rgba(0, 0, 0, 0.06);
   border-bottom-color: transparent;
}

.input-tabs .output-tab-btn.active {
   color: var(--color-primary);
   background: rgba(0, 0, 0, 0.03);
   border-bottom-color: transparent;
}

.input-tabs .output-tab-btn:hover i,
.input-tabs .output-tab-btn.active i {
   transform: none;
}

.output-tab-btn {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem 1.25rem;
   background: transparent;
   border: none;
   border-bottom: 3px solid transparent;
   color: var(--color-text-secondary);
   font-size: 0.875rem;
   font-weight: 600; /* 统一使用粗体，避免切换时宽度变化 */
   cursor: pointer;
   transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-bottom-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 只过渡颜色相关属性 */
   position: relative;
   white-space: nowrap;
   border-radius: 0;
   margin-bottom: -2px;
}

/* 针对Grammar功能的特殊样式调整 */
.ai-tool-options-card .modern-button-group {
    min-height: 34px; /* 确保有足够高度 */
}

/* 防止按钮文字被其他样式影响 */
.option-btn .btn-text {
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    display: block !important; /* 使用block，让父元素的flex处理居中 */
    width: 100% !important; /* 占满按钮宽度 */
    text-align: center !important; /* 文字水平居中 */
    padding: 0 !important; /* 移除内边距 */
    margin: 0 !important; /* 移除外边距 */
}

/* 激活状态下的文字颜色 */
.option-btn.active .btn-text {
    color: white !important;
}

/* 移除所有 sidebar 相关的动态样式，保持按钮样式一致 */

.output-tab-btn i {
   font-size: 1rem;
   transition: transform 0.3s ease, color 0.3s ease; /* 只过渡 transform 和 color，避免影响布局 */
   display: inline-block; /* 确保 transform 生效 */
}

.output-tab-btn span {
   transition: color 0.3s ease; /* 只过渡颜色，不过渡字体粗细 */
   /* 防止字体粗细变化导致宽度变化 - 统一使用相同字体粗细 */
   display: inline-block;
   font-weight: 600; /* 统一使用粗体，避免切换时宽度变化 */
}

.output-tab-btn:hover {
   color: var(--color-primary);
   background: rgba(0, 0, 0, 0.06);
   border-bottom-color: rgba(0, 0, 0, 0.1);
}

.output-tab-btn:hover i {
   /* 使用 translateY 替代 scale，避免宽度变化导致晃动 */
   transform: translateY(-1px);
}

.output-tab-btn.active {
    color: var(--color-primary);
    background: rgba(0, 0, 0, 0.03);
    border-bottom-color: var(--color-primary);
    /* font-weight 已在默认状态统一设置为 600，无需重复 */
}

/* comet_solver 输出标签：选中态与 Problem Content 保持一致的浅灰背景 */
.ai-tool-workspace[data-tool-type="comet_solver"] .ai-tool-output-section .output-tabs .output-tab-btn.active {
    background: rgba(0, 0, 0, 0.03) !important;
    border-bottom: none !important;
    border-bottom-color: transparent !important;
}

.output-tab-btn.active i {
    /* 移除 transform: scale(1.1) 避免图标缩放导致按钮宽度变化 */
    color: var(--color-primary);
}

/* 单个选项卡的特殊样式 */
.single-tab .output-tab-btn,
.single-tab .output-tab-btn.active {
    border-bottom-color: transparent !important;
    cursor: default;
    background: transparent;
}

.single-tab .output-tab-btn:hover {
    color: var(--color-text-secondary);
    background: transparent;
    border-bottom-color: transparent !important;
}

/* 输入/输出选项卡的 tooltip 样式修复 - 使用 !important 确保覆盖全局样式 */
.output-tab-btn[data-tooltip]::before {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    padding: 10px 16px !important;
    background: rgba(0, 0, 0, 0.92) !important;
    color: white !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    max-width: none !important;
    text-align: center !important;
}

.output-tab-btn[data-tooltip]::after {
    content: "" !important;
    position: absolute !important;
    bottom: calc(100% + 5px) !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    border: 6px solid transparent !important;
    border-top-color: rgba(0, 0, 0, 0.92) !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

.output-tab-btn[data-tooltip]:hover::before,
.output-tab-btn[data-tooltip]:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
}

.single-tab .output-tab-btn:hover i {
    transform: none;
}

/* 输入区域的单个选项卡样式 */
.single-tab-input .output-tab-btn,
.single-tab-input .output-tab-btn.active {
    border-bottom-color: transparent !important;
    cursor: default;
    background: transparent;
}

.single-tab-input .output-tab-btn:hover {
    color: var(--color-text-secondary);
    background: transparent;
    border-bottom-color: transparent !important;
}

.single-tab-input .output-tab-btn:hover i {
    transform: none;
}

/* 选项卡内容区域 */
.output-tab-content {
   display: none;
   animation: fadeInUp 0.3s ease-in-out;
}

.input-tab-content {
   display: none;
   animation: fadeIn 0.2s ease-in-out;
}

.output-tab-content.active,
.input-tab-content.active {
   display: block;
}

/* fadeIn, fadeInUp → 已集中到 tailwind.css */
/* 原 fadeInSimple 已用通用 fadeIn 替代 */

/* 选项卡内容的输出区域样式调整 */
.output-tab-content .output-header {
   margin-bottom: var(--spacing-sm);
}

.output-tab-content .ai-tool-textarea {
   min-height: 400px;
}

/* 响应式设计 - 移动端选项卡优化 */
@media (max-width: 768px) {
   .output-tabs-container,
   .input-tabs-container {
       flex-direction: row;
       gap: 0.25rem;
       align-items: center;
       min-height: 48px;
   }

   .output-tabs,
   .input-tabs {
       order: 1;
       justify-content: flex-start;
       flex-wrap: nowrap;
       gap: 0.15rem;
   }

   .output-actions,
   .input-actions {
       order: 2;
       justify-content: flex-end;
   }

   .output-tab-btn {
       padding: 0.4rem 0.6rem;
       font-size: 0.75rem;
       flex: 0 0 auto;
       min-width: 0;
       justify-content: center;
       color: #333 !important;
   }

   .output-tab-btn.active {
       color: #000 !important;
       border-bottom-color: #000 !important;
   }

   html.dark .output-tab-btn {
       color: #a3a3a3 !important;
   }

   html.dark .output-tab-btn.active {
       color: #f5f5f5 !important;
       border-bottom-color: rgba(255, 255, 255, 0.24) !important;
   }

   .output-tab-btn i {
       font-size: 0.8rem;
   }

   .output-tab-btn span {
       font-size: 0.75rem;
   }
}

@media (max-width: 480px) {
   .output-tabs,
   .input-tabs {
       gap: 0.1rem;
   }

   .output-tab-btn {
       padding: 0.3rem 0.4rem;
       min-width: 0;
       color: #333 !important;
   }

   .output-tab-btn.active {
       color: #000 !important;
       border-bottom-color: #000 !important;
   }

   html.dark .output-tab-btn {
       color: #a3a3a3 !important;
   }

   html.dark .output-tab-btn.active {
       color: #f5f5f5 !important;
       border-bottom-color: rgba(255, 255, 255, 0.24) !important;
   }

   .output-tab-btn i {
       display: none;
   }

   .output-tab-btn span {
       font-size: 0.65rem;
   }
}

/* 选项卡容器相对定位 */
.output-tabs-container {
   position: relative;
}

/* 多模型标签页样式 */
.multi-model-container {
   display: flex;
   flex-direction: column;
   height: 100%;
}

.model-selector-buttons {
   display: flex;
   gap: clamp(0.2rem, 1vw, 0.5rem);
   margin-bottom: var(--spacing-md);
   padding: clamp(0.25rem, 1vw, var(--spacing-sm));
   background: linear-gradient(135deg, #F8F8F7 0%, #e9ecef 100%);
   border-radius: 20px;
   border: 1px solid #dee2e6;
   flex-wrap: nowrap;
   justify-content: center;
}

.model-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.35rem, 1.5vw, 0.75rem);
   background: linear-gradient(135deg, var(--color-background-primary) 0%, var(--color-background-secondary) 100%);
   border: 1px solid #dee2e6;
   border-radius: 0.5rem;
   color: var(--color-text-secondary);
   font-size: clamp(0.5rem, 2.5vw, 0.75rem);
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   white-space: nowrap;
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.model-btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, var(--color-primary) 0%, #333333 100%);
   opacity: 0;
   transition: opacity 0.3s ease;
   border-radius: 1rem;
   z-index: -1;
}

.model-btn:hover {
   border-color: var(--color-primary);
   color: var(--color-primary);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.model-btn:hover::before {
   opacity: 0.05;
}

.model-btn.active {
   background: #000000;
   color: white;
   border-color: #000000;
   transform: translateY(-1px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.model-btn.active::before {
   opacity: 0;
}

.model-btn span {
   transition: all var(--transition-normal) ease;
}

.model-btn:hover span {
   transform: scale(1.05);
}

.model-btn.active span {
   transform: scale(1.05);
}

.multi-model-outputs {
   flex: 1;
   position: relative;
}

.model-output {
   display: none;
   height: 100%;
}

.model-output.active {
   display: block;
}

.model-output .ai-tool-textarea {
   height: var(--tool-textarea-height);
   min-height: var(--tool-textarea-height);
}

/* 最优共识解答输出区域 - 与多模型高度一致 */
.consensus-output {
   height: var(--tool-textarea-height);
   min-height: var(--tool-textarea-height);
}

/* 响应式设计 - 多模型按钮 */
@media (max-width: 768px) {
   .model-selector-buttons {
       gap: 0.3rem;
       padding: var(--spacing-xs);
   }

   .model-btn {
       padding: 0.35rem 0.5rem;
       font-size: 0.65rem;
       flex: 1 1 auto;
       min-width: 0;
   }

   .model-btn .model-status-icon {
       margin-right: 0.25rem;
       font-size: 0.55rem;
   }
}

@media (max-width: 480px) {
   .model-selector-buttons {
       gap: 0.2rem;
       padding: 0.25rem;
   }

   .model-btn {
       flex: 1 1 auto;
       min-width: 0;
       padding: 0.25rem 0.35rem;
       font-size: 0.55rem;
   }

   .model-btn .model-status-icon {
       margin-right: 0.2rem;
       font-size: 0.5rem;
   }
}

@media (max-width: 360px) {
   .model-selector-buttons {
       gap: 0.15rem;
       padding: 0.2rem;
   }

   .model-btn {
       padding: 0.2rem 0.25rem;
       font-size: 0.5rem;
   }

   .model-btn .model-status-icon {
       margin-right: 0.15rem;
       font-size: 0.45rem;
   }
}

/* 模型状态图标样式 */
.model-status-icon {
   margin-right: 0.5rem;
   font-size: 0.75rem;
   transition: all var(--transition-normal) ease;
   color: #cbd5e1; /* 默认为空心圆，灰色 */
}

/* 模型完成状态 - 填充的圆 */
.model-status-icon.completed {
   color: var(--color-success); /* 绿色填充圆 */
}

/* 模型失败状态 - 红色填充圆 */
.model-status-icon.failed {
   color: var(--color-danger); /* 红色填充圆 */
}

/* 模型处理中状态 - 旋转的圆 */
.model-status-icon.processing {
   color: var(--color-info); /* 蓝色 */
   animation: spin 1s linear infinite;
}

/* @keyframes spin 已在 tailwind.css 定义 */

.model-btn .model-status-icon {
   flex-shrink: 0;
   font-size: clamp(0.45rem, 2vw, 0.75rem);
}

.model-btn span {
   flex: 1;
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: inherit;
}

/* 步骤解答加载状态样式 */
.step-analysis-loading {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2rem;
   font-size: 1rem;
   color: var(--color-primary);
   font-weight: 500;
   background: linear-gradient(135deg, #F8F8F7 0%, #e9ecef 100%);
   border-radius: var(--border-radius-md);
   border: 2px dashed var(--color-primary);
   animation: pulse-loading 2s ease-in-out infinite;
}

html.dark .step-analysis-loading {
    color: #e5e5e5;
    background: linear-gradient(135deg, #1e1e1e 0%, #171717 100%);
    border-color: #404040;
}

@keyframes pulse-loading {
   0%, 100% {
       opacity: 0.7;
       transform: scale(1);
   }
   50% {
       opacity: 1;
       transform: scale(1.02);
   }
}

/* 未登录用户限制模态框样式 */
/* 已迁移至 tailwind.css，此处不再重复定义 */

/* ==================== 防止移动端文本框缩放 ==================== */
/* 所有输入框和文本域 */
.ai-tool-textarea,
.modern-input-inline,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
#wordControlInput,
#aiToolInput {
    font-size: 16px !important; /* 防止iOS自动缩放（不小于16px） */
    -webkit-text-size-adjust: 100%; /* 防止文本大小自动调整 */
    text-size-adjust: 100%;
}

/* 移动端特定样式 */
@media (max-width: 768px) {
    .ai-tool-textarea,
    .modern-input-inline,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea,
    #wordControlInput,
    #aiToolInput {
        font-size: 16px !important; /* 确保移动端字体大小不小于16px */
        zoom: 1 !important; /* 防止缩放 */
        -webkit-appearance: none; /* 移除默认样式 */
        -moz-appearance: none;
        appearance: none;
    }
}

/* ================================
   紧凑型文件上传组件
   参考 Google/Apple/Notion 设计
   ================================ */

.compact-file-upload {
    margin-bottom: var(--spacing-md);
    border-radius: 20px;
    background: linear-gradient(135deg, #F8F8F7 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    padding: clamp(0.25rem, 1vw, var(--spacing-sm));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 无文件时的上传区域 */
.file-upload-empty {
    width: 100%;
}

.upload-drop-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.2rem, 1vw, 0.75rem);
    padding: clamp(0.2rem, 0.8vw, 0.375rem) clamp(0.3rem, 1.5vw, 1rem);
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    background: var(--color-background-primary);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    min-height: clamp(28px, 7vw, 36px);
    flex-wrap: nowrap;
    overflow: hidden;
}

.upload-drop-area:hover {
    border-color: var(--color-primary);
    background: rgba(0, 0, 0, 0.01);
}

.upload-drop-area.drag-over {
    border-color: var(--color-primary);
    background: rgba(0, 0, 0, 0.02);
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.upload-drop-area i {
    font-size: clamp(0.7rem, 2.5vw, 1.25rem);
    color: var(--color-text-muted);
    transition: all var(--transition-fast) ease;
    flex-shrink: 0;
}

.upload-drop-area:hover i {
    color: var(--color-primary);
    transform: translateY(-2px);
}

.upload-text {
    font-size: clamp(0.5rem, 2.5vw, 0.875rem);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-link {
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
}

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

.upload-hint {
    font-size: clamp(0.45rem, 2vw, 0.75rem);
    color: var(--color-text-muted);
    margin-left: clamp(0.15rem, 0.8vw, 0.5rem);
    padding-left: clamp(0.15rem, 0.8vw, 0.5rem);
    border-left: 1px solid var(--color-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 有文件时的显示区域 */
.file-upload-filled {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.uploaded-files-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
}

/* 文件标签样式 - 类似 Notion/Linear 的 tag 风格 */
.file-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--color-text-primary);
    transition: all var(--transition-fast) ease;
    max-width: 180px;
}

.file-tag:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.file-tag .file-icon {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.file-tag .file-icon.pdf { color: var(--color-danger); }
.file-tag .file-icon.doc { color: var(--color-info); }
.file-tag .file-icon.txt { color: var(--color-text-secondary); }
.file-tag .file-icon.img { color: var(--color-success); }

.file-tag .file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

.file-tag .file-status {
    font-size: 0.75rem;
}

.file-tag .file-status.loading { color: var(--color-info); }
.file-tag .file-status.success { color: var(--color-success); }
.file-tag .file-status.error { color: var(--color-danger); }

.file-tag .remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all var(--transition-fast) ease;
    font-size: 0.75rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.file-tag .remove-btn:hover {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

/* 添加更多文件按钮 */
.add-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    background: var(--color-background-primary);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
}

.add-more-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* 全局拖拽覆盖层 */
.global-drop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast) ease;
}

.global-drop-overlay.active {
    opacity: 1;
    visibility: visible;
}

.global-drop-content {
    background: var(--color-background-primary);
    border-radius: 24px;
    padding: 3rem 4rem;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.global-drop-overlay.active .global-drop-content {
    transform: scale(1);
}

.global-drop-content i {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.global-drop-content p {
    font-size: 1.25rem;
    color: var(--color-text-primary);
    font-weight: 500;
}

.global-drop-content span {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .compact-file-upload {
        padding: 0.5rem;
    }

    .upload-drop-area {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.75rem;
    }

    .upload-hint {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
        margin-top: 0.25rem;
    }

    .file-tag {
        max-width: 150px;
    }

    .file-tag .file-name {
        max-width: 80px;
    }
}

/* ================================
   左右两侧控件高度同步
   确保上传区域和模型选择区域高度一致
   ================================ */
.compact-file-upload,
.model-selector-buttons {
    min-height: clamp(46px, 10vw, 68px);
    display: flex;
    align-items: center;
}

.compact-file-upload .file-upload-empty,
.compact-file-upload .file-upload-filled {
    width: 100%;
    display: flex;
    align-items: center;
}

.compact-file-upload .upload-drop-area {
    flex: 1;
}

/* ===== 登录要求模态框样式 ===== */
.login-required-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

.login-required-modal-container {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.login-required-modal-card {
    position: relative;
    background: var(--color-background-primary);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* slideUp → 已集中到 tailwind.css */

.login-required-modal-header {
    text-align: center;
    padding: 2rem 1.5rem 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.login-required-modal-header .modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff;
}

.login-required-modal-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}

.login-required-modal-content {
    padding: 1.5rem;
    text-align: center;
}

.login-required-modal-content p {
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.6;
    margin: 0.5rem 0;
}

.login-required-modal-footer {
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.modal-btn-secondary {
    background: #e2e8f0;
    color: #4a5568;
}

.modal-btn-secondary:hover {
    background: #cbd5e0;
    transform: translateY(-2px);
}

.modal-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
}

.modal-btn-primary:hover {
    background: linear-gradient(135deg, #5568d3 0%, #64397d 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* ===== 访客限制模态框样式 ===== */
.guest-limit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

.guest-limit-modal-container {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.guest-limit-modal-card {
    position: relative;
    background: var(--color-background-primary);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.guest-limit-modal-header {
    text-align: center;
    padding: 2rem 1.5rem 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.guest-limit-modal-header .modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff;
}

.guest-limit-modal-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 0.5rem 0;
}

.guest-limit-modal-header p {
    font-size: 1rem;
    color: #718096;
    margin: 0;
}

.guest-limit-modal-header strong {
    color: #f39c12;
    font-weight: 700;
}

.guest-limit-modal-content {
    padding: 1.5rem;
}

.guest-limit-modal-content > p {
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.benefits-list {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
}

.benefits-list h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 0.75rem 0;
}

.benefits-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    color: #4a5568;
}

.benefits-list li i {
    color: #48bb78;
    font-size: 1rem;
}

.guest-limit-modal-footer {
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* 响应式设计 */
@media (max-width: 640px) {
    .login-required-modal-container,
    .guest-limit-modal-container {
        max-width: 100%;
    }

    .login-required-modal-header h2,
    .guest-limit-modal-header h2 {
        font-size: 1.25rem;
    }

    .modal-btn {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }
}


/* /citation option row visual refresh */
.ai-tool-workspace .citation-options-card {
    position: relative;
    overflow: visible;
    padding: 1rem;
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(150deg, #f7f7f5 0%, #ececeb 100%);
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.ai-tool-workspace .citation-options-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.65), transparent 36%),
        radial-gradient(circle at 82% 12%, rgba(245, 158, 11, 0.18), transparent 28%);
    border-radius: inherit;
}

.ai-tool-workspace .output-tips-section {
    position: relative;
    overflow: visible;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(
        140deg,
        #ffffff 0%,
        #ffffff 38%,
        #fdfcf7 64%,
        #faf6e8 84%,
        #f6f1df 100%
    );
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.ai-tool-workspace .output-tips-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 84% 14%, rgba(245, 158, 11, 0.1), transparent 34%);
    border-radius: inherit;
}

.ai-tool-workspace .output-tips-section .output-tips-header,
.ai-tool-workspace .output-tips-section .output-tips-content {
    position: relative;
    z-index: 1;
}

.ai-tool-workspace .citation-format-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.08rem;
}

.ai-tool-workspace .citation-format-row .format-label {
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 0.92rem;
    font-weight: 700;
    box-shadow: none;
}

.ai-tool-workspace .citation-format-row .format-selection-container {
    width: fit-content;
    max-width: 100%;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 0.42rem;
}

.ai-tool-workspace .citation-format-group {
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
    justify-content: flex-start;
    gap: 0.45rem;
}

.ai-tool-workspace .citation-format-group .btn.btn-secondary {
    position: relative;
    min-height: 36px;
    padding: 0.34rem 0.74rem;
    border-radius: 10px;
    border: 1px solid #d3d8df;
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-text-primary);
    overflow: visible;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(15, 23, 42, 0.04);
    transition:
        box-shadow 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

.ai-tool-workspace .citation-format-group .btn.btn-secondary .btn-text {
    font-weight: 600;
    font-size: 0.79rem;
    letter-spacing: 0.01em;
}

.ai-tool-workspace .citation-format-group .btn.btn-secondary:hover:not(.active) {
    border-color: #c2c9d3;
    background: var(--color-background-primary);
    box-shadow:
        0 8px 14px rgba(15, 23, 42, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.78);
}

.ai-tool-workspace .citation-format-group .btn.btn-secondary.active {
    border: 1px solid transparent;
    background-color: var(--color-text-primary);
    background:
        linear-gradient(150deg, #111827 0%, #0f172a 100%) padding-box,
        linear-gradient(
            115deg,
            #5b5b5b 0%,
            #e8dab0 18%,
            #7a7a7a 36%,
            #fff1cc 50%,
            #7a7a7a 64%,
            #e8dab0 82%,
            #5b5b5b 100%
        ) border-box;
    background-size: 100% 100%, 230% 100%;
    background-position: center, 0 50%;
    color: #f9fafb;
    opacity: 1;
    box-shadow:
        0 12px 24px rgba(2, 6, 23, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    animation: citation-metal-border-flow 2.1s linear infinite;
    z-index: 2;
}

/* 覆盖通用 :active 和 :hover 的 transform，彻底禁止位移 */
.ai-tool-workspace .citation-format-group .btn.btn-secondary:active,
.ai-tool-workspace .citation-format-group .btn.btn-secondary.active:hover {
    transform: none;
}

.ai-tool-workspace .citation-format-group .btn.btn-secondary:focus-visible {
    outline: none;
    border-color: var(--color-text-primary);
    box-shadow:
        0 0 0 3px rgba(15, 23, 42, 0.15),
        0 10px 18px rgba(15, 23, 42, 0.1);
}

.ai-tool-workspace .citation-format-group .btn.btn-secondary.pulse {
    animation: none;
}

.ai-tool-workspace .citation-format-group .btn.btn-secondary.active.pulse {
    animation: citation-metal-border-flow 2.1s linear infinite;
}

/* /citation 格式按钮 tooltip：固定显示在按钮上方，并提升层级避免被相邻 active 按钮遮挡 */
.ai-tool-workspace .citation-format-group .btn.btn-secondary[data-tooltip] {
    position: relative;
}

.ai-tool-workspace .citation-format-group .btn.btn-secondary[data-tooltip]:hover,
.ai-tool-workspace .citation-format-group .btn.btn-secondary[data-tooltip][data-tooltip-show="true"] {
    z-index: 40;
}

.ai-tool-workspace .citation-format-group .btn.btn-secondary[data-tooltip]::before {
    bottom: calc(100% + 10px);
    top: auto;
}

.ai-tool-workspace .citation-format-group .btn.btn-secondary[data-tooltip]::after {
    bottom: calc(100% + 4px);
    top: auto;
}


/* 开始转换按钮 - 玻璃拟态风格 */
.ai-tool-workspace .citation-submit-btn#submitBtn {
    min-height: 40px;
    padding: 0 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    background: rgba(255, 255, 255, 0.22) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    color: var(--color-text-primary) !important;
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.01em;
    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        inset 0 -1px 0 rgba(15, 23, 42, 0.05);
    transition:
        box-shadow 220ms ease,
        background 220ms ease,
        border-color 220ms ease,
        transform 220ms ease;
}

.ai-tool-workspace .citation-submit-btn#submitBtn:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.62) !important;
    background: rgba(255, 255, 255, 0.3) !important;
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 -1px 0 rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.ai-tool-workspace .citation-submit-btn#submitBtn:active:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.52) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(0);
}

.ai-tool-workspace .citation-submit-btn#submitBtn:disabled {
    background: rgba(229, 231, 235, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: var(--color-text-muted) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    transform: none;
}

.ai-tool-workspace .citation-submit-btn#submitBtn i {
    font-size: 1rem;
    transition: transform 220ms ease;
}

.ai-tool-workspace .citation-submit-btn#submitBtn:hover:not(:disabled) i {
    transform: translateX(2px);
}

.ai-tool-workspace .citation-format-row .custom-config-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(145deg, #111827 0%, #1f2937 100%);
    box-shadow: 0 8px 14px rgba(15, 23, 42, 0.22);
}

.ai-tool-workspace .citation-format-row .custom-config-btn:hover {
    transform: translateY(-1px) rotate(4deg);
    box-shadow: 0 12px 20px rgba(15, 23, 42, 0.28);
}

/* paper_toolbox: option row can contain 4+ blocks (label, options, word control, submit). */
.ai-tool-workspace[data-is-paper-toolbox="true"] .citation-format-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.ai-tool-workspace[data-is-paper-toolbox="true"] .citation-format-row .format-label {
    flex: 0 0 auto;
}

.ai-tool-workspace[data-is-paper-toolbox="true"] .citation-format-row .format-selection-container {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
}

.ai-tool-workspace[data-is-paper-toolbox="true"] .citation-format-row .word-control-section-inline {
    flex: 0 0 auto;
}

.ai-tool-workspace[data-is-paper-toolbox="true"] .citation-submit-btn#submitBtn {
    margin-left: auto;
}

/* comet_solver: row contains mode buttons + language switch + submit button */
.ai-tool-workspace[data-tool-type="comet_solver"] .citation-format-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    /* Ensure language dropdown stays above right-panel skeleton loader (z-index: 10). */
    z-index: 20;
}

.ai-tool-workspace[data-tool-type="comet_solver"] .citation-format-row .format-label {
    flex: 0 0 auto;
}

.ai-tool-workspace[data-tool-type="comet_solver"] .citation-format-row .format-selection-container {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
}

.ai-tool-workspace[data-tool-type="comet_solver"] .citation-submit-btn#submitBtn {
    margin-left: auto;
}

.ai-tool-workspace[data-tool-type="comet_solver"] .language-switch-container {
    position: relative;
    z-index: 21;
}

.ai-tool-workspace[data-tool-type="comet_solver"] .solver-language-dropdown {
    z-index: 30;
}

/* comet_solver: longer mode tooltip text needs a wider bubble */
body[data-tool-type="comet_solver"] .tooltip {
    max-width: min(560px, calc(100vw - 24px)) !important;
    white-space: normal !important;
    line-height: 1.35;
}

@media (max-width: 1100px) {
    .ai-tool-workspace .citation-format-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .ai-tool-workspace .citation-format-row .format-label {
        width: fit-content;
        min-width: 0;
    }

    .ai-tool-workspace .citation-submit-btn#submitBtn {
        width: 100%;
    }

    .ai-tool-workspace[data-tool-type="comet_solver"] .citation-format-row {
        display: flex;
        align-items: stretch;
    }

    .ai-tool-workspace[data-tool-type="comet_solver"] .citation-submit-btn#submitBtn {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 680px) {
    .ai-tool-workspace .citation-options-card {
        padding: 0.75rem;
        border-radius: 18px;
    }

    .ai-tool-workspace .citation-format-row .format-selection-container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .ai-tool-workspace .citation-format-group {
        justify-content: flex-start;
        gap: 0.38rem;
    }

    .ai-tool-workspace .citation-format-group .btn.btn-secondary {
        min-height: 34px;
        padding: 0.3rem 0.62rem;
        border-radius: 10px;
    }

    .ai-tool-workspace .citation-format-group .btn.btn-secondary .btn-text {
        font-size: 0.76rem;
    }

    .ai-tool-workspace .citation-format-row .custom-config-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
}



@keyframes citation-metal-border-flow {
    0% {
        background-position: center, 0% 50%;
    }
    100% {
        background-position: center, 230% 50%;
    }
}

/* ========================================
   论文百宝箱工具快速导航栏 → 已迁移到 tailwind.css
   ======================================== */

/* ===========================================
   暗色模式
   =========================================== */

/* --- 选项卡片 --- */
html.dark .ai-tool-options-card {
    background: #171717;
    border-color: #2a2a2a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

html.dark .ai-tool-options-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* --- 文本框 --- */
html.dark .ai-tool-textarea {
    background: linear-gradient(135deg, #1e1e1e 0%, #171717 100%);
    border-color: #404040;
    color: #d4d4d4;
    scrollbar-color: #525252 #1e1e1e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html.dark .ai-tool-textarea:focus {
    background: #1e1e1e;
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

html.dark .ai-tool-textarea:hover:not(:focus) {
    border-color: #525252;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* --- 输出显示区域 --- */
html.dark .ai-tool-output-display {
    background-color: #171717;
    scrollbar-color: #525252 #171717;
}

html.dark .ai-tool-output-display:not(:empty) {
    color: #d4d4d4;
}

/* --- 集智解答输出 --- */
html.dark .comet-solver-output {
    background-color: #1e1e1e !important;
    border-color: #2a2a2a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    scrollbar-color: #525252 #1e1e1e;
}

html.dark .comet-solver-output .step-item {
    background: #262626;
    border-color: #2a2a2a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

html.dark .comet-solver-output .solution-section {
    background: rgba(30, 30, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        0 4px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.dark .comet-solver-output .solution-section::before {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.01) 50%,
        rgba(255, 255, 255, 0.03) 100%);
}

html.dark .comet-solver-output .solution-content {
    background: rgba(38, 38, 38, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

html.dark .comet-solver-output .section-title,
html.dark .comet-solver-output .subsection-title {
    color: #e5e5e5 !important;
}

html.dark .comet-solver-output .comparison-content {
    background: #1f1f1f !important;
    color: #d4d4d4 !important;
}

html.dark .comet-solver-output .key-answer-content {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #86efac !important;
}

html.dark .comet-solver-output .step-header {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #f5f5f5 !important;
}

html.dark .comet-solver-output .step-content {
    color: #e5e5e5 !important;
}




/* --- 图标按钮 --- */
html.dark .icon-btn {
    color: #737373;
}

html.dark .icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #d4d4d4;
}

/* --- 字数统计 --- */
html.dark .daily-remaining-count strong {
    color: #e5e5e5;
}

html.dark .register-prompt {
    color: #a3a3a3;
}

html.dark .register-btn {
    color: #d4d4d4;
}

/* --- 集智解答容器 --- */
html.dark .solver-textarea-container {
    background: linear-gradient(135deg, #1e1e1e 0%, #171717 100%);
    border-color: #404040;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html.dark .solver-textarea-container:focus-within {
    border-color: #e8cc73;
    box-shadow: 0 0 0 3px rgba(232, 204, 115, 0.15);
}

html.dark .solver-inline-bar {
    background: #262626;
    border-bottom-color: #333333;
}

html.dark .solver-output-container {
    background: linear-gradient(135deg, #1e1e1e 0%, #171717 100%);
    border-color: #404040;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html.dark .solver-output-inline-bar {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* --- 模型按钮 active 状态 --- */
html.dark .model-btn.active {
    background: #f5f5f5;
    color: #0f0f0f;
    border-color: #f5f5f5;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
}

html.dark .model-btn:hover:not(.active) {
    border-color: #525252;
    color: #f5f5f5;
}

/* --- 文件上传区域 --- */
html.dark .solver-upload-area {
    border-color: #404040;
    background: rgba(30, 30, 30, 0.7);
}

html.dark .solver-upload-area:hover {
    border-color: #525252;
    background: rgba(38, 38, 38, 0.8);
}

html.dark .solver-upload-area i {
    color: #737373;
}

html.dark .solver-upload-text {
    color: #a3a3a3;
}

html.dark .solver-upload-link {
    color: #e5e5e5;
}

html.dark .solver-upload-hint {
    color: #737373;
    border-left-color: #404040;
}

/* --- 紧凑文件上传 --- */
html.dark .compact-file-upload {
    background: linear-gradient(135deg, #171717 0%, #1e1e1e 100%);
    border-color: #2a2a2a;
}

html.dark .upload-drop-area,
html.dark .file-drop-zone {
    border-color: #404040;
    background: #1e1e1e;
}

html.dark .upload-drop-area i,
html.dark .drop-zone-content i {
    color: #737373;
}

html.dark .upload-text {
    color: #a3a3a3;
}

html.dark .upload-hint {
    color: #737373;
    border-left-color: #2a2a2a;
}

html.dark .file-tag {
    background: #262626;
    border-color: #404040;
    color: #d4d4d4;
}

html.dark .file-tag:hover {
    border-color: #525252;
}

html.dark .file-tag .file-icon {
    color: #a3a3a3;
}

html.dark .add-more-btn {
    background: #262626;
    border-color: #404040;
    color: #737373;
}

/* --- 全局拖放覆盖层 --- */
html.dark .global-drop-overlay {
    background: rgba(0, 0, 0, 0.7);
}

html.dark .global-drop-content {
    background: #1e1e1e;
}

html.dark .global-drop-content p {
    color: #d4d4d4;
}

html.dark .global-drop-content span {
    color: #a3a3a3;
}

/* --- 文件上传完整区域 --- */
html.dark .file-upload-full-width-section {
    background: linear-gradient(135deg, #171717 0%, #1e1e1e 100%);
    border-color: #2a2a2a;
}

html.dark .file-upload-header i {
    color: #a3a3a3;
}

html.dark .uploaded-files-label {
    background: #525252;
}

html.dark .uploaded-files-container {
    background: #1e1e1e;
    border-color: #2a2a2a;
}

html.dark .file-item {
    background: #262626;
    border-color: #2a2a2a;
}

html.dark .file-icon {
    background: #333333;
    color: #a3a3a3;
}

html.dark .file-remove-btn:hover {
    background: rgba(220, 38, 38, 0.15);
}

/* --- 模式选择标签 --- */
html.dark .format-label,
body.dark .format-label,
html[data-theme="dark"] .format-label,
body[data-theme="dark"] .format-label {
    color: #e5e5e5 !important;
}

@media (prefers-color-scheme: dark) {
    html:not(.light):not([data-theme="light"]) .format-label {
        color: #e5e5e5 !important;
    }
}

/* --- 现代按钮组 --- */
html.dark .modern-button-group .btn.btn-secondary {
    border-color: #404040;
}

html.dark .modern-button-group .btn.btn-secondary:hover:not(.active) {
    background: #3a3520;
    border-color: #5a4a20;
    color: #f5f5f5;
}

html.dark .modern-button-group .btn.btn-secondary.active {
    background: #f5f5f5;
    color: #0f0f0f;
    border-color: #f5f5f5;
}

html.dark .option-btn {
    border-color: #404040;
    color: #d4d4d4;
}

html.dark .option-btn:hover:not(.active) {
    background: #3a3520;
    border-color: #5a4a20;
    color: #f5f5f5;
}

html.dark .option-btn.active {
    background: #f5f5f5;
    color: #0f0f0f;
    border-color: #f5f5f5;
}

/* --- 字数控制 --- */
html.dark .word-control-label,
html.dark .word-control-label-inline {
    color: #e5e5e5;
}

/* --- 输入框 --- */
html.dark .modern-input,
html.dark .modern-input-inline {
    border-color: #404040;
    background: linear-gradient(135deg, #1e1e1e 0%, #171717 100%);
    color: #d4d4d4;
}

html.dark .modern-input:hover:not(:focus),
html.dark .modern-input-inline:hover:not(:focus) {
    border-color: #525252;
}

html.dark .modern-input:focus,
html.dark .modern-input-inline:focus {
    border-color: var(--color-primary);
}

html.dark .input-suffix,
html.dark .input-suffix-inline {
    color: #a3a3a3;
}

html.dark .modern-input::placeholder,
html.dark .modern-input-inline::placeholder {
    color: #525252;
}

/* --- Output Tips --- */
html.dark .output-tips-section {
    background: rgba(60, 50, 20, 0.3);
    border-color: rgba(80, 70, 30, 0.4);
}

/* --- Tips Guide --- */
html.dark .tips-guide-trigger {
    background: rgba(38, 38, 38, 0.8);
    color: #d4d4d4;
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark .tips-guide-popover,
html.dark .tips-guide-portal {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(23, 23, 23, 0.92) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

html.dark .tips-guide-popover-title {
    color: #f5f5f5;
}

html.dark .tips-guide-popover-subtitle {
    color: #a3a3a3;
}

html.dark .tips-guide-step-number {
    background: #f5f5f5;
    color: #171717;
}

html.dark .tips-guide-step-title {
    color: #e5e5e5;
}

html.dark .tips-guide-step-desc {
    color: #a3a3a3;
}

/* --- 功能特色卡片 --- */
html.dark .features-card .new-card-title {
    color: #f5f5f5 !important;
}

html.dark .features-card .new-card-title i,
html.dark .features-card .new-card-title svg {
    color: #a3a3a3 !important;
}

html.dark .features-card .new-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- 功能特色网格 --- */
html.dark .features-grid .new-feature-icon {
    background: linear-gradient(135deg, #2a2a2a 0%, #222222 100%);
    color: #d4d4d4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html.dark .features-grid .new-feature-item:hover .new-feature-icon {
    background: #f5f5f5;
    color: #171717;
}

html.dark .features-grid .new-feature-title {
    color: #e5e5e5;
}

html.dark .features-grid .new-feature-text {
    color: #a3a3a3;
}

/* --- 使用提示卡片 --- */
html.dark .usage-tips-card {
    background: linear-gradient(135deg, #1e1e1e 0%, #171717 50%, #1a1a1a 100%);
    border-color: #2a2a2a;
}

html.dark .usage-tips-card::before {
    background: linear-gradient(135deg, #525252 0%, #404040 100%);
}

html.dark .usage-tips-card .new-card-title {
    color: #e5e5e5;
}

html.dark .usage-tips-card .new-card-title i {
    color: #a3a3a3;
}

html.dark .usage-tips-card .quick-guide-header-simple {
    color: #d4d4d4;
}

html.dark .usage-tips-card .step-number {
    background: linear-gradient(135deg, #a3a3a3 0%, #d4d4d4 100%);
    color: #171717;
}

html.dark .usage-tips-card .step-title {
    color: #e5e5e5;
}

html.dark .usage-tips-card .step-desc {
    color: #a3a3a3;
}

/* --- 示例区域 --- */
html.dark .example-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

html.dark .example-icon {
    color: #737373;
}

/* --- 选项卡按钮 --- */
html.dark .output-tab-btn {
    color: #737373;
}

html.dark .output-tab-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark .output-tab-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: #f5f5f5;
    border-bottom-color: rgba(255, 255, 255, 0.24);
}

html.dark .output-tab-btn.active i {
    color: #f5f5f5;
}

html.dark .input-tabs .output-tab-btn {
    color: #737373;
}

html.dark .input-tabs .output-tab-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: #f5f5f5;
    border-bottom-color: transparent;
}

/* --- 模型选择器 --- */
html.dark .model-selector-buttons {
    background: linear-gradient(135deg, #1e1e1e 0%, #171717 100%);
    border-color: #2a2a2a;
}

html.dark .model-btn {
    background: linear-gradient(135deg, #262626 0%, #1e1e1e 100%);
    border-color: #2a2a2a;
    color: #a3a3a3;
}

/* Keep inline solver model buttons free of dark fill in dark mode */
html.dark .solver-inline-models .model-btn {
    background: transparent;
    box-shadow: none;
}

html.dark .solver-inline-models .model-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06);
    color: #f5f5f5;
    border-color: rgba(255, 255, 255, 0.25);
}

body.dark .solver-output-inline-bar,
html[data-theme="dark"] .solver-output-inline-bar,
body[data-theme="dark"] .solver-output-inline-bar {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark .solver-inline-models .model-btn,
html[data-theme="dark"] .solver-inline-models .model-btn,
body[data-theme="dark"] .solver-inline-models .model-btn {
    background: transparent;
    box-shadow: none;
}

body.dark .solver-inline-models .model-btn:hover:not(.active),
html[data-theme="dark"] .solver-inline-models .model-btn:hover:not(.active),
body[data-theme="dark"] .solver-inline-models .model-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06);
    color: #f5f5f5;
    border-color: rgba(255, 255, 255, 0.25);
}

body.dark .solver-inline-models .model-btn.active,
html[data-theme="dark"] .solver-inline-models .model-btn.active,
body[data-theme="dark"] .solver-inline-models .model-btn.active {
    background: #f5f5f5;
    color: #0f0f0f;
    border-color: #f5f5f5;
}

html.dark .model-status-icon {
    color: #404040;
}

/* --- 选项卡片样式（引用工具） --- */
html.dark .ai-tool-workspace .citation-options-card {
    background: linear-gradient(135deg, #1e1e1e 0%, #171717 100%);
    border-color: #2a2a2a;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.dark .ai-tool-workspace .citation-options-card::before {
    background:
        radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.03), transparent 36%),
        radial-gradient(circle at 82% 12%, rgba(245, 158, 11, 0.06), transparent 28%);
}

html.dark .ai-tool-workspace .citation-format-group .btn.btn-secondary {
    background: rgba(38, 38, 38, 0.85);
    border-color: #404040;
    color: #d4d4d4;
}

html.dark .ai-tool-workspace .citation-format-group .btn.btn-secondary:hover:not(.active) {
    border-color: #525252;
    background: #333333;
}

html.dark .ai-tool-workspace .citation-format-group .btn.btn-secondary.active {
    background-color: #e5e5e5;
    background:
        linear-gradient(150deg, #e5e5e5 0%, #d4d4d4 100%) padding-box,
        linear-gradient(
            115deg,
            #5b5b5b 0%,
            #e8dab0 18%,
            #7a7a7a 36%,
            #fff1cc 50%,
            #7a7a7a 64%,
            #e8dab0 82%,
            #5b5b5b 100%
        ) border-box;
    background-size: 100% 100%, 230% 100%;
    background-position: center, 0 50%;
    color: #0f0f0f;
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

html.dark .ai-tool-workspace .citation-format-group .btn.btn-secondary:focus-visible {
    border-color: #f5f5f5;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.12),
        0 10px 18px rgba(0, 0, 0, 0.2);
}

html.dark .ai-tool-workspace .citation-submit-btn#submitBtn {
    background: rgba(38, 38, 38, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f5f5f5 !important;
}

html.dark .ai-tool-workspace .citation-submit-btn#submitBtn:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(55, 55, 55, 0.6) !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.dark .ai-tool-workspace .citation-submit-btn#submitBtn:active:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(30, 30, 30, 0.6) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.dark .ai-tool-workspace .citation-submit-btn#submitBtn:disabled {
    background: rgba(38, 38, 38, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #525252 !important;
}

/* --- 登录/注册/访客限制弹窗 --- */
html.dark .login-required-modal-card,
html.dark .guest-limit-modal-card {
    background: #1e1e1e;
}

html.dark .login-required-modal-header,
html.dark .guest-limit-modal-header {
    border-bottom-color: #2a2a2a;
}

html.dark .login-required-modal-header h2,
html.dark .guest-limit-modal-header h2 {
    color: #f5f5f5;
}

html.dark .login-required-modal-content p,
html.dark .guest-limit-modal-content > p {
    color: #a3a3a3;
}

html.dark .modal-btn-secondary {
    background: #333333;
    color: #d4d4d4;
}

html.dark .modal-btn-secondary:hover {
    background: #404040;
}

html.dark .benefits-list {
    background: #262626;
    border-color: #2a2a2a;
}

html.dark .benefits-list h4 {
    color: #e5e5e5;
}

html.dark .benefits-list li {
    color: #a3a3a3;
}


/* --- Solver语言选择 --- */
html.dark .solver-language-selector-btn {
    background: #262626;
    border-color: #404040;
}

html.dark .solver-language-dropdown {
    background: #1e1e1e;
    border-color: #404040;
}

html.dark .solver-language-dropdown .language-item:hover {
    background: #2a2a2a;
}

/* --- 直接提交字数控制 --- */
html.dark .solver-word-input {
    background: #262626;
    border-color: #404040;
    color: #d4d4d4;
}

html.dark .word-suffix {
    color: #a3a3a3;
}

/* --- 工具导航栏 → 已迁移到 tailwind.css --- */

/* --- Output Tips深色调整 --- */
html.dark .ai-tool-workspace .output-tips-section {
    background: linear-gradient(135deg, rgba(60, 50, 20, 0.2) 0%, rgba(50, 45, 15, 0.25) 50%, rgba(40, 35, 10, 0.3) 100%);
    border-color: rgba(80, 70, 30, 0.3);
}

/* --- Toast格式提示深色 --- */
html.dark .citation-format-toast.success .toast-title {
    color: #34d399;
}

html.dark .citation-format-toast.success .toast-preview {
    color: #6ee7b7;
}

html.dark .citation-format-toast.error .toast-title {
    color: #f87171;
}

html.dark .citation-format-toast.error .toast-preview {
    color: #fca5a5;
}