/* ============================================
   YOMI博客主样式文件
   使用元素级变量系统
   ============================================ */

/* 导入变量定义 */
@import url('./element-specific-variables.css');

/* ============================================
   通用样式重置
   ============================================ */
html {
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background-color: var(--index-main-background);
    color: var(--color-text-primary);
    min-height: var(--body-min-height);
    display: var(--body-display);
    flex-direction: var(--body-flex-direction);
    margin: 0;
    padding: 0;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

#root,
#__next {
    isolation: isolate;
}

/* ============================================
   首页样式
   ============================================ */

/* 主容器 */
.main {
    background: var(--index-main-background);
    padding: var(--index-main-padding);
    min-height: var(--index-main-min-height);
    flex: var(--index-main-flex);
}

/* 文章区块 */
.articles {
    background: var(--index-articles-background);
    padding: var(--index-articles-padding);
    margin: var(--index-articles-margin);
}

/* 搜索状态 */
#searchStatus {
    background: var(--index-search-status-background);
    border: var(--index-search-status-border);
    border-radius: var(--index-search-status-border-radius);
    padding: var(--index-search-status-padding);
    margin-bottom: var(--index-search-status-margin-bottom);
    display: var(--index-search-status-display);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-title {
    font-family: var(--index-search-status-title-font-family);
    font-size: var(--index-search-status-title-font-size);
    font-weight: var(--index-search-status-title-font-weight);
    color: var(--index-search-status-title-color);
    margin: var(--index-search-status-title-margin);
}

.section-actions {
    margin-left: var(--index-search-actions-margin-left);
}

.btn {
    background: var(--index-clear-search-background);
    border: var(--index-clear-search-border);
    border-radius: var(--index-clear-search-border-radius);
    color: var(--index-clear-search-color);
    font-size: var(--index-clear-search-font-size);
    font-weight: var(--index-clear-search-font-weight);
    padding: var(--index-clear-search-padding);
    cursor: var(--index-clear-search-cursor);
    transition: var(--index-clear-search-transition);
}

.btn:hover {
    background: var(--index-clear-search-hover-background);
    color: var(--index-clear-search-hover-color);
    border-color: var(--index-clear-search-hover-border-color);
}

/* 文章网格 */
.articles-grid {
    display: var(--index-articles-grid-display);
    grid-template-columns: var(--index-articles-grid-template-columns);
    gap: var(--index-articles-grid-gap);
    padding: var(--index-articles-grid-padding);
    margin: var(--index-articles-grid-margin);
}

.loading {
    text-align: var(--index-loading-text-align);
    font-size: var(--index-loading-font-size);
    color: var(--index-loading-color);
    padding: var(--index-loading-padding);
}

/* 文章网格布局 */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--index-articles-grid-gap);
    margin-bottom: var(--index-articles-grid-margin);
}

/* 文章卡片 */
.article-card {
    background: var(--index-article-card-background);
    border: var(--index-article-card-border);
    border-radius: var(--index-article-card-border-radius);
    box-shadow: var(--index-article-card-shadow);
    padding: var(--index-article-card-padding);
    margin-bottom: var(--index-article-card-margin-bottom);
    cursor: var(--index-article-card-cursor);
    transition: var(--index-article-card-transition);
    overflow: var(--index-article-card-overflow);
    opacity: var(--index-article-card-initial-opacity);
    transform: var(--index-article-card-initial-transform);
}

.article-card.loaded {
    opacity: var(--index-article-card-loaded-opacity);
    transform: var(--index-article-card-loaded-transform);
}

.article-card:hover {
    box-shadow: var(--index-article-card-hover-shadow);
    transform: var(--index-article-card-hover-transform);
    border-color: var(--index-article-card-hover-border-color);
}

/* 图片区域 */
.article-image-wrapper {
    position: var(--index-article-image-wrapper-position);
    width: var(--index-article-image-wrapper-width);
    height: var(--index-article-image-wrapper-height);
    overflow: var(--index-article-image-wrapper-overflow);
    background: var(--index-article-image-wrapper-background);
}

.article-image-container {
    width: var(--index-article-image-container-width);
    height: var(--index-article-image-container-height);
    position: var(--index-article-image-container-position);
}

.article-image {
    width: var(--index-article-image-width);
    height: var(--index-article-image-height);
    object-fit: var(--index-article-image-object-fit);
    transition: var(--index-article-image-transition);
    opacity: var(--index-article-image-opacity);
}

.article-image.loaded {
    opacity: var(--index-article-image-loaded-opacity);
}

.article-card:hover .article-image {
    transform: var(--index-article-image-hover-transform);
}

.article-image-placeholder {
    display: var(--index-article-image-placeholder-display);
    align-items: var(--index-article-image-placeholder-align-items);
    justify-content: var(--index-article-image-placeholder-justify-content);
    height: var(--index-article-image-placeholder-height);
    background: var(--index-article-image-placeholder-background);
    color: var(--index-article-image-placeholder-color);
    font-size: var(--index-article-image-placeholder-font-size);
}

.article-image-overlay {
    position: var(--index-article-image-overlay-position);
    top: var(--index-article-image-overlay-top);
    right: var(--index-article-image-overlay-right);
    padding: var(--index-article-image-overlay-padding);
    gap: var(--index-article-image-overlay-gap);
    display: var(--index-article-image-overlay-display);
    flex-direction: var(--index-article-image-overlay-flex-direction);
    align-items: var(--index-article-image-overlay-align-items);
}

/* 文章标签 */
.article-tags {
    display: var(--index-article-tags-display);
    gap: var(--index-article-tags-gap);
}

.article-tag {
    font-size: var(--index-article-tag-font-size);
    font-weight: var(--index-article-tag-font-weight);
    padding: var(--index-article-tag-padding);
    border-radius: var(--index-article-tag-border-radius);
    text-transform: var(--index-article-tag-text-transform);
    letter-spacing: var(--index-article-tag-letter-spacing);
}

.sticky-tag {
    background: var(--index-article-sticky-tag-background);
    color: var(--index-article-sticky-tag-color);
}

.featured-tag {
    background: var(--index-article-featured-tag-background);
    color: var(--index-article-featured-tag-color);
}

.external-link-tag {
    background: var(--index-article-external-link-tag-background);
    color: var(--index-article-external-link-tag-color);
}

/* 文章内容 */
.article-content {
    padding: var(--index-article-content-padding);
}

.article-title {
    font-family: var(--index-article-title-font-family);
    font-size: var(--index-article-title-font-size);
    font-weight: var(--index-article-title-font-weight);
    line-height: var(--index-article-title-line-height);
    color: var(--index-article-title-color);
    margin: var(--index-article-title-margin);
    display: var(--index-article-title-display);
    overflow: var(--index-article-title-overflow);
    text-overflow: var(--index-article-title-text-overflow);
    white-space: var(--index-article-title-white-space);
    text-decoration: var(--index-article-title-text-decoration);
}

.article-title a {
    color: var(--index-article-title-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-title a:hover {
    color: #666666;
}

.article-excerpt {
    font-family: var(--index-article-excerpt-font-family);
    font-size: var(--index-article-excerpt-font-size);
    font-weight: var(--index-article-excerpt-font-weight);
    line-height: var(--index-article-excerpt-line-height);
    color: var(--index-article-excerpt-color);
    margin: var(--index-article-excerpt-margin);
    display: var(--index-article-excerpt-display);
    -webkit-line-clamp: var(--index-article-excerpt--webkit-line-clamp);
    -webkit-box-orient: var(--index-article-excerpt--webkit-box-orient);
    overflow: var(--index-article-excerpt-overflow);
}

/* 文章元信息 */
.article-meta {
    display: var(--index-article-meta-display);
    align-items: var(--index-article-meta-align-items);
    justify-content: var(--index-article-meta-justify-content);
    gap: var(--index-article-meta-gap);
    font-size: var(--index-article-meta-font-size);
    color: var(--index-article-meta-color);
    margin-top: var(--index-article-meta-margin-top);
}

.article-category-meta {
    display: var(--index-article-category-meta-display);
    align-items: var(--index-article-category-meta-align-items);
}

.category-badge {
    font-family: var(--index-category-badge-font-family);
    font-size: var(--index-category-badge-font-size);
    font-weight: var(--index-category-badge-font-weight);
    color: var(--index-category-badge-color);
    background: var(--index-category-badge-background);
    padding: var(--index-category-badge-padding);
    margin: var(--index-category-badge-margin);
    text-decoration: var(--index-category-badge-text-decoration);
}

.category-badge:hover {
    color: var(--index-category-badge-hover-color);
    text-decoration: var(--index-category-badge-hover-text-decoration);
}

.article-stats {
    display: var(--index-article-stats-display);
    align-items: var(--index-article-stats-align-items);
    gap: var(--index-article-stats-gap);
}

.article-stats span {
    display: flex;
    align-items: center;
    gap: var(--index-article-stat-gap);
    color: var(--index-article-stat-color);
}

.article-stats svg {
    width: var(--index-article-stat-icon-width);
    height: var(--index-article-stat-icon-height);
    stroke: var(--index-article-stat-icon-stroke);
    flex-shrink: 0;
    opacity: 0.7;
}

/* 空状态 */
.empty-state {
    text-align: var(--index-empty-state-text-align);
    padding: var(--index-empty-state-padding);
}

.empty-state-title {
    font-family: var(--index-empty-state-title-font-family);
    font-size: var(--index-empty-state-title-font-size);
    font-weight: var(--index-empty-state-title-font-weight);
    color: var(--index-empty-state-title-color);
    margin: var(--index-empty-state-title-margin);
}

.empty-state-text {
    font-family: var(--index-empty-state-text-font-family);
    font-size: var(--index-empty-state-text-font-size);
    font-weight: var(--index-empty-state-text-font-weight);
    color: var(--index-empty-state-text-color);
    margin: var(--index-empty-state-text-margin);
}

/* 加载更多 */
.load-more-container {
    margin-top: var(--index-load-more-container-margin-top);
    text-align: var(--index-load-more-container-text-align);
}

.load-more-btn {
    background: var(--index-load-more-btn-background);
    border: var(--index-load-more-btn-border);
    border-radius: var(--index-load-more-btn-border-radius);
    color: var(--index-load-more-btn-color);
    font-family: var(--index-load-more-btn-font-family);
    font-size: var(--index-load-more-btn-font-size);
    font-weight: var(--index-load-more-btn-font-weight);
    padding: var(--index-load-more-btn-padding);
    cursor: var(--index-load-more-btn-cursor);
    transition: var(--index-load-more-btn-transition);
    display: var(--index-load-more-btn-display);
    align-items: var(--index-load-more-btn-align-items);
    justify-content: var(--index-load-more-btn-justify-content);
    gap: var(--index-load-more-btn-gap);
    min-width: var(--index-load-more-btn-min-width);
}

.load-more-btn:hover {
    background: var(--index-load-more-btn-hover-background);
    border-color: var(--index-load-more-btn-hover-border-color);
    transform: var(--index-load-more-btn-hover-transform);
}

.load-more-btn.loading {
    opacity: var(--index-load-more-btn-loading-opacity);
    cursor: var(--index-load-more-btn-loading-cursor);
}

.btn-text {
    transition: var(--index-load-more-btn-text-transition);
}

.load-more-btn.loading .btn-text {
    opacity: var(--index-load-more-btn-loading--index-load-more-btn-text-opacity);
}

.loading-spinner {
    width: var(--index-loading-spinner-width);
    height: var(--index-loading-spinner-height);
    border: var(--index-loading-spinner-border);
    border-top: var(--index-loading-spinner-border-top);
    border-radius: var(--index-loading-spinner-border-radius);
    display: var(--index-loading-spinner-display);
    animation: var(--index-loading-spinner-animation);
}

.load-more-btn.loading .loading-spinner {
    display: var(--index-load-more-btn-loading--index-loading-spinner-display);
}

/* ============================================
   文章详情页样式
   ============================================ */

.main-content {
    background: var(--article-main-content-background);
    padding: var(--article-main-content-padding);
    flex: var(--article-main-content-flex);
    min-height: var(--article-main-content-min-height);
}

/* 文章详情容器 */
.article-detail {
    background: var(--article-detail-background);
    padding: var(--article-detail-container-padding);
    max-width: var(--article-detail-max-width);
    margin: var(--article-detail-margin);
}

/* 文章头部 */
.article-header {
    padding: var(--article-detail-header-padding);
    border-bottom: var(--article-detail-header-border-bottom);
    margin-bottom: var(--article-detail-header-margin-bottom);
    text-align: var(--article-detail-header-text-align);
}

/* 文章标题包装器 */
.article-title-wrapper {
    display: var(--article-detail-title-wrapper-display);
    align-items: var(--article-detail-title-wrapper-align-items);
    justify-content: var(--article-detail-title-wrapper-justify-content);
    gap: var(--article-detail-title-wrapper-gap);
    padding: var(--article-detail-title-wrapper-padding);
    margin: var(--article-detail-title-wrapper-margin);
    text-align: var(--article-detail-title-wrapper-text-align);
}

/* 文章标题 */
.article-detail-title {
    font-size: var(--article-detail-title-font-size);
    font-weight: var(--article-detail-title-font-weight);
    line-height: var(--article-detail-title-line-height);
    color: var(--article-detail-title-color);
    margin: var(--article-detail-title-margin);
    font-family: var(--article-detail-title-font-family);
    letter-spacing: var(--article-detail-title-letter-spacing);
    flex: 1; /* 让标题占据剩余空间 */
}

/* 文章编辑按钮 */
.edit-article-btn {
    display: var(--article-detail-edit-btn-display);
    align-items: var(--article-detail-edit-btn-align-items);
    justify-content: var(--article-detail-edit-btn-justify-content);
    flex-shrink: var(--article-detail-edit-btn-flex-shrink);
    width: var(--article-detail-edit-btn-width);
    height: var(--article-detail-edit-btn-height);
    background: var(--article-detail-edit-btn-background);
    border: var(--article-detail-edit-btn-border);
    color: var(--article-detail-edit-btn-color);
    padding: var(--article-detail-edit-btn-padding);
    border-radius: var(--article-detail-edit-btn-border-radius);
    cursor: var(--article-detail-edit-btn-cursor);
    transition: var(--article-detail-edit-btn-transition);
}

.edit-article-btn:hover {
    background: var(--article-detail-edit-btn-hover-background);
    color: var(--article-detail-edit-btn-hover-color);
}

.edit-article-btn svg {
    width: var(--article-detail-edit-btn-icon-width);
    height: var(--article-detail-edit-btn-icon-height);
}

/* 文章详情页元信息 */
.article-detail .article-meta {
    padding: var(--article-detail-meta-padding);
    display: var(--article-detail-meta-display);
    align-items: var(--article-detail-meta-align-items);
    justify-content: var(--article-detail-meta-justify-content);
    gap: var(--article-detail-meta-gap);
    font-size: var(--article-detail-meta-font-size);
    color: var(--article-detail-meta-color);
    font-weight: var(--article-detail-meta-font-weight);
    flex-wrap: wrap;
}

/* 文章详情页分类标签 */
.article-detail .article-category {
    display: var(--article-detail-category-display);
    padding: var(--article-detail-category-padding);
    background: var(--article-detail-category-background);
    color: var(--article-detail-category-color);
    border-radius: var(--article-detail-category-border-radius);
    font-size: var(--article-detail-category-font-size);
    font-weight: var(--article-detail-category-font-weight);
    margin: var(--article-detail-category-margin);
    text-decoration: none;
}

/* 强制移除文章分类背景色 */
.article-detail .article-category,
.article-category {
    background-color: transparent !important;
    background: none !important;
}

/* 文章发布日期 */
.article-date {
    color: var(--article-detail-date-color);
    font-size: var(--article-detail-date-font-size);
    font-weight: var(--article-detail-date-font-weight);
}

/* 文章作者信息 */
.article-author {
    display: var(--article-detail-author-display);
    align-items: var(--article-detail-author-align-items);
    gap: var(--article-detail-author-gap);
    color: var(--article-detail-author-color);
    font-size: var(--article-detail-author-font-size);
}

/* 文章作者头像 */
.article-author-avatar {
    width: var(--article-detail-avatar-width);
    height: var(--article-detail-avatar-height);
    border-radius: var(--article-detail-avatar-border-radius);
    background: var(--article-detail-avatar-background);
    border: var(--article-detail-avatar-border);
    margin: var(--article-detail-avatar-margin);
}

/* 文章详情页的内容区域样式 */
.main-content .article-content {
    padding: var(--article-detail-content-padding);
    margin: var(--article-detail-content-margin);
    background: var(--article-detail-content-background);
    border-radius: var(--article-detail-content-border-radius);
}

/* 文章正文文字 */
.main-content .article-content {
    font-size: var(--article-detail-content-font-size);
    line-height: var(--article-detail-content-line-height);
    color: var(--article-detail-content-color);
    font-family: var(--article-detail-content-font-family);
    font-weight: var(--article-detail-content-font-weight);
}

/* 文章段落 - 仅应用于文章详情页 */
.main-content .article-content p {
    margin: var(--article-detail-paragraph-margin);
    text-align: var(--article-detail-paragraph-text-align);
    word-break: var(--article-detail-paragraph-word-break);
}

/* 文章标题（H2-H6） - 仅应用于文章详情页 */
.main-content .article-content h2,
.main-content .article-content h3,
.main-content .article-content h4,
.main-content .article-content h5,
.main-content .article-content h6 {
    font-weight: var(--article-detail-heading-font-weight);
    line-height: var(--article-detail-heading-line-height);
    color: var(--article-detail-heading-color);
    margin: var(--article-detail-heading-margin);
}

.main-content .article-content h2 {
    font-size: var(--article-detail-h2-font-size);
    margin: var(--article-detail-h2-margin);
}

.main-content .article-content h3 {
    font-size: var(--article-detail-h3-font-size);
    margin: var(--article-detail-h3-margin);
}

.main-content .article-content h4 {
    font-size: var(--article-detail-h4-font-size);
    margin: var(--article-detail-h4-margin);
}

.main-content .article-content h5 {
    font-size: var(--article-detail-h5-font-size);
    margin: var(--article-detail-h5-margin);
}

.main-content .article-content h6 {
    font-size: var(--article-detail-h6-font-size);
    margin: var(--article-detail-h6-margin);
}

/* 文章链接 - 仅应用于文章详情页 */
.main-content .article-content a {
    color: var(--article-detail-link-color);
    text-decoration: var(--article-detail-link-text-decoration);
    transition: var(--article-detail-link-transition);
}

.main-content .article-content a:hover {
    color: var(--article-detail-link-hover-color);
    text-decoration: var(--article-detail-link-hover-text-decoration);
}

/* 文章引用 - 仅应用于文章详情页 */
.main-content .article-content blockquote {
    padding: var(--article-detail-quote-padding);
    margin: var(--article-detail-quote-margin);
    background: var(--article-detail-quote-background);
    border-left: var(--article-detail-quote-border-left);
    border-radius: var(--article-detail-quote-border-radius);
    font-style: var(--article-detail-quote-font-style);
    color: var(--article-detail-quote-color);
}

/* 文章列表 - 仅应用于文章详情页 */
.main-content .article-content ul,
.main-content .article-content ol {
    padding: var(--article-detail-list-padding);
    margin: var(--article-detail-list-margin);
    list-style: var(--article-detail-list-style);
    padding-left: var(--article-detail-list-padding-left);
}

.main-content .article-content li {
    padding: var(--article-detail-list-item-padding);
    margin: var(--article-detail-list-item-margin);
    position: var(--article-detail-list-item-position);
    color: var(--article-detail-list-item-color);
}

/* 文章代码块 - 仅应用于文章详情页 */
.main-content .article-content pre {
    margin: var(--article-detail-code-block-margin);
    padding: var(--article-detail-code-block-padding);
    background: var(--article-detail-code-block-background);
    border: var(--article-detail-code-block-border);
    border-radius: var(--article-detail-code-block-border-radius);
    font-family: var(--article-detail-code-block-font-family);
    font-size: var(--article-detail-code-block-font-size);
    line-height: var(--article-detail-code-block-line-height);
    overflow-x: var(--article-detail-code-block-overflow-x);
}

/* 文章内联代码 - 仅应用于文章详情页 */
.main-content .article-content code {
    padding: var(--article-detail-inline-code-padding);
    background: var(--article-detail-inline-code-background);
    color: var(--article-detail-inline-code-color);
    border: var(--article-detail-inline-code-border);
    border-radius: var(--article-detail-inline-code-border-radius);
    font-family: var(--article-detail-inline-code-font-family);
    font-size: var(--article-detail-inline-code-font-size);
}

/* 文章图片 - 仅应用于文章详情页 */
.main-content .article-content img {
    max-width: var(--article-detail-image-max-width);
    height: var(--article-detail-image-height);
    margin: var(--article-detail-image-margin);
    border-radius: var(--article-detail-image-border-radius);
    display: var(--article-detail-image-display);
    box-shadow: var(--article-detail-image-box-shadow);
    vertical-align: middle;
}

/* 图片居中对齐 - wangeditor 使用 text-align: center 包裹图片，这些图片显示为块级 */
.main-content .article-content p[style*="text-align: center"] img,
.main-content .article-content p[style*="text-align:center"] img,
.main-content .article-body p[style*="text-align: center"] img,
.main-content .article-body p[style*="text-align:center"] img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* 图片左对齐 */
.main-content .article-content p[style*="text-align: left"] img,
.main-content .article-content p[style*="text-align:left"] img,
.main-content .article-body p[style*="text-align: left"] img,
.main-content .article-body p[style*="text-align:left"] img {
    display: block;
    margin-left: 0;
    margin-right: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* 图片右对齐 */
.main-content .article-content p[style*="text-align: right"] img,
.main-content .article-content p[style*="text-align:right"] img,
.main-content .article-body p[style*="text-align: right"] img,
.main-content .article-body p[style*="text-align:right"] img {
    display: block;
    margin-left: auto;
    margin-right: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* 单独一段只有一张图片时，显示为块级 */
.main-content .article-content p:only-child img,
.main-content .article-body p:only-child img {
    display: block;
    margin: 1rem auto;
}

/* 文章表格 - 仅应用于文章详情页 */
.main-content .article-content table,
.main-content .article-body table {
    width: var(--article-detail-table-width);
    margin: var(--article-detail-table-margin);
    border-collapse: var(--article-detail-table-border-collapse);
    background: var(--article-detail-table-background);
}

.main-content .article-content thead,
.main-content .article-body thead {
    background: var(--article-detail-thead-background);
    color: var(--article-detail-thead-color);
}

.main-content .article-content th,
.main-content .article-body th {
    padding: var(--article-detail-th-padding);
    text-align: var(--article-detail-th-text-align);
    font-weight: var(--article-detail-th-font-weight);
    border-bottom: var(--article-detail-th-border-bottom);
}

.main-content .article-content td,
.main-content .article-body td {
    padding: var(--article-detail-td-padding);
    border-bottom: var(--article-detail-td-border-bottom);
}

/* 文章分隔线 - 仅应用于文章详情页 */
.main-content .article-content hr {
    height: var(--article-detail-hr-height);
    background: var(--article-detail-hr-background);
    margin: var(--article-detail-hr-margin);
    border: var(--article-detail-hr-border);
}

/* ============================================
   文章操作按钮样式
   ============================================ */

/* 文章底部 */
.article-footer {
    padding: var(--article-actions-padding);
    margin: var(--article-actions-margin);
    border-top: var(--article-actions-border-top);
    border-bottom: var(--article-actions-border-bottom);
}

/* 文章操作按钮组 */
.article-actions {
    display: var(--article-actions-display);
    gap: var(--article-actions-gap);
    align-items: var(--article-actions-align-items);
    justify-content: var(--article-actions-justify-content);
    margin-bottom: var(--article-actions-margin-bottom);
}

/* 文章操作按钮 - 通用样式 */
.article-actions .btn,
.article-actions .btn.btn-outline {
    display: var(--article-action-btn-display);
    align-items: var(--article-action-btn-align-items);
    justify-content: var(--article-action-btn-justify-content);
    gap: var(--article-action-btn-gap);
    min-width: var(--article-action-btn-min-width);
    height: var(--article-action-btn-height);
    padding: var(--article-action-btn-padding);
    font-size: var(--article-action-btn-font-size);
    font-weight: var(--article-action-btn-font-weight);
    font-family: var(--article-action-btn-font-family);
    line-height: var(--article-action-btn-line-height);
    text-align: var(--article-action-btn-text-align);
    text-decoration: var(--article-action-btn-text-decoration);
    cursor: var(--article-action-btn-cursor);
    transition: var(--article-action-btn-transition);
    border-radius: var(--article-action-btn-border-radius);
    border: var(--article-action-btn-border);
    background: var(--article-action-btn-background);
    color: var(--article-action-btn-color);
}

/* 文章操作按钮 - 悬停状态 */
.article-actions .btn:hover,
.article-actions .btn.btn-outline:hover {
    background: var(--article-action-btn-hover-background);
    color: var(--article-action-btn-hover-color);
    border-color: var(--article-action-btn-hover-border-color);
}

/* 文章操作按钮图标 */
.article-actions .btn .like-icon,
.article-actions .btn .share-icon,
.article-actions .btn .comment-icon {
    display: var(--article-action-icon-display);
    align-items: var(--article-action-icon-align-items);
    justify-content: var(--article-action-icon-justify-content);
    font-size: var(--article-action-icon-font-size);
    margin-right: var(--article-action-icon-margin-right);
}

/* 文章操作按钮数字 */
.article-actions .btn .like-count,
.article-actions .btn .share-count,
.article-actions .btn .comment-count {
    font-size: var(--article-action-btn-font-size);
    font-weight: 500;
}

/* 文章标签 */
.article-tags {
    display: var(--article-tags-display);
    gap: var(--article-tags-gap);
    flex-wrap: var(--article-tags-flex-wrap);
    margin-top: var(--article-tags-margin-top);
    padding: var(--article-tags-padding);
    align-items: var(--article-tags-align-items);
}

/* 文章标签项 */
.article-tags .tag {
    display: var(--article-tag-display);
    padding: var(--article-tag-padding);
    background: var(--article-tag-background);
    color: var(--article-tag-color);
    font-size: var(--article-tag-font-size);
    font-weight: var(--article-tag-font-weight);
    font-family: var(--article-tag-font-family);
    border-radius: var(--article-tag-border-radius);
    text-decoration: var(--article-tag-text-decoration);
    transition: var(--article-tag-transition);
}

/* 文章标签项 - 悬停状态 */
.article-tags .tag:hover {
    background: var(--article-tag-hover-background);
    color: var(--article-tag-hover-color);
}

/* ============================================
   评论系统样式
   ============================================ */

/* 评论输入区域 */
.comment-input-area-inline {
    display: var(--comment-input-area-display);
    padding: var(--comment-input-area-padding);
    margin: var(--comment-input-area-margin);
    background: var(--comment-input-area-background);
    border: var(--comment-input-area-border);
    border-radius: var(--comment-input-area-border-radius);
}

.comment-form-inline {
    padding: var(--comment-form-padding);
    margin: var(--comment-form-margin);
}

/* 评论文本框 */
#commentContent {
    width: var(--comment-content-width);
    min-height: var(--comment-content-min-height);
    max-height: var(--comment-content-max-height);
    padding: var(--comment-content-padding);
    margin: var(--comment-content-margin);
    background: var(--comment-content-background);
    border: var(--comment-content-border);
    border-radius: var(--comment-content-border-radius);
    color: var(--comment-content-color);
    font-size: var(--comment-content-font-size);
    font-family: var(--comment-content-font-family);
    line-height: var(--comment-content-line-height);
    resize: var(--comment-content-resize);
    transition: var(--comment-content-transition);
}

#commentContent::placeholder {
    color: var(--comment-content-placeholder);
}

#commentContent:focus {
    border-color: var(--comment-content-focus-border-color);
    outline: var(--comment-content-focus-outline);
    box-shadow: var(--comment-content-focus-box-shadow);
}

/* 评论操作按钮组 */
.comment-actions {
    display: var(--comment-actions-display);
    align-items: var(--comment-actions-align-items);
    justify-content: var(--comment-actions-justify-content);
    gap: var(--comment-actions-gap);
}

/* 评论主按钮 */
.btn-primary {
    padding: var(--comment-primary-btn-padding);
    background: var(--comment-primary-btn-background);
    color: var(--comment-primary-btn-color);
    border: var(--comment-primary-btn-border);
    border-radius: var(--comment-primary-btn-border-radius);
    font-size: var(--comment-primary-btn-font-size);
    font-weight: var(--comment-primary-btn-font-weight);
    cursor: var(--comment-primary-btn-cursor);
    transition: var(--comment-primary-btn-transition);
}

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

/* 评论次要按钮 */
.btn-outline {
    padding: var(--comment-outline-btn-padding);
    background: var(--comment-outline-btn-background);
    color: var(--comment-outline-btn-color);
    border: var(--comment-outline-btn-border);
    border-radius: var(--comment-outline-btn-border-radius);
    font-size: var(--comment-outline-btn-font-size);
    font-weight: var(--comment-outline-btn-font-weight);
    cursor: var(--comment-outline-btn-cursor);
    transition: var(--comment-outline-btn-transition);
}

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

/* 评论列表 */
.comments-list {
    padding: var(--comments-list-padding);
    margin: var(--comments-list-margin);
}

/* 评论项 */
html body #commentsList .comment,
html body .comments-section .comment {
    padding: var(--comment-padding);
    margin: var(--comment-margin);
    background: var(--comment-background);
    border-radius: var(--comment-border-radius);
    border-bottom: var(--comment-border-bottom);
    box-shadow: var(--comment-box-shadow);
}

html body #commentsList .comment:last-child,
html body .comments-section .comment:last-child {
    border-bottom: var(--comment-last-border);
}

/* 评论头部 */
.comment-header {
    display: var(--comment-header-display);
    align-items: var(--comment-header-align-items);
    justify-content: var(--comment-header-justify-content);
    margin: var(--comment-header-margin);
}

/* 评论用户信息 */
.comment-user-info {
    display: var(--comment-user-info-display);
    align-items: var(--comment-user-info-align-items);
    gap: var(--comment-user-info-gap);
    flex-direction: var(--comment-user-info-flex-direction);
    justify-content: var(--comment-user-info-justify-content);
}

/* 评论作者信息 - 使用更高权重确保样式生效 */
html body #commentsList .comment-author,
html body .comments-section .comment-author {
    display: var(--comment-user-info-display);
    align-items: var(--comment-user-info-align-items);
    gap: var(--comment-user-info-gap);
    flex-direction: var(--comment-user-info-flex-direction);
    justify-content: var(--comment-user-info-justify-content);
}

/* 评论用户名和时间应该在同一行 */
html body #commentsList .comment-author .comment-author-name,
html body #commentsList .comment-author .comment-date,
html body .comments-section .comment-author .comment-author-name,
html body .comments-section .comment-author .comment-date {
    display: inline-flex;
    align-items: center;
}

html body #commentsList .comment-author .comment-date,
html body .comments-section .comment-author .comment-date {
    margin-left: auto;
    font-size: 0.75rem;
    color: #999999;
}

/* 评论元信息（位置和浏览器） */
.comment-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #999999;
    margin-top: 0.25rem;
}

/* 评论用户信息（备用） */
.comment-user-info {
    display: var(--comment-user-info-display);
    align-items: var(--comment-user-info-align-items);
    gap: var(--comment-user-info-gap);
    flex-direction: var(--comment-user-info-flex-direction);
    justify-content: var(--comment-user-info-justify-content);
}

/* 评论用户名和时间应该在同一行 */
.comment-user-info .comment-username,
.comment-user-info .comment-time {
    display: inline-flex;
    align-items: center;
}

.comment-user-info .comment-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: #999999;
}

/* 评论用户头像 */
.comment-avatar {
    width: var(--comment-avatar-width);
    height: var(--comment-avatar-height);
    border-radius: var(--comment-avatar-border-radius);
    background: var(--comment-avatar-background);
    border: var(--comment-avatar-border);
    margin: var(--comment-avatar-margin);
}

/* 评论用户名 */
.comment-username {
    font-size: var(--comment-username-font-size);
    font-weight: var(--comment-username-font-weight);
    color: var(--comment-username-color);
    margin: var(--comment-username-margin);
}

/* 评论时间 */
.comment-time {
    font-size: var(--comment-time-font-size);
    color: var(--comment-time-color);
    font-weight: var(--comment-time-font-weight);
    margin: var(--comment-time-margin);
}

/* 评论内容包装器 */
html body #commentsList .comment-content-wrapper,
html body .comments-section .comment-content-wrapper {
    padding: var(--comment-content-wrapper-padding);
    margin: var(--comment-content-wrapper-margin);
}

/* 评论内容 */
html body #commentsList .comment-body,
html body .comments-section .comment-body {
    color: var(--comment-content-wrapper-color);
    font-size: var(--comment-content-wrapper-font-size);
    line-height: var(--comment-content-wrapper-line-height);
    word-break: var(--comment-content-wrapper-word-break);
}

/* 评论操作栏 */
.comment-footer {
    display: var(--comment-footer-display);
    align-items: var(--comment-footer-align-items);
    justify-content: var(--comment-footer-justify-content);
    gap: var(--comment-footer-gap);
    margin: var(--comment-footer-margin);
}

/* 评论操作按钮 */
.comment-action {
    padding: var(--comment-action-padding);
    background: var(--comment-action-background);
    color: var(--comment-action-color);
    border: var(--comment-action-border);
    border-radius: var(--comment-action-border-radius);
    font-size: var(--comment-action-font-size);
    font-weight: var(--comment-action-font-weight);
    cursor: var(--comment-action-cursor);
    transition: var(--comment-action-transition);
}

.comment-action:hover {
    background: var(--comment-action-hover-background);
    color: var(--comment-action-hover-color);
}

/* 评论回复区域 */
.comment-replies {
    margin: var(--comment-replies-margin);
    padding: var(--comment-replies-padding);
    background: var(--comment-replies-background);
    border-radius: var(--comment-replies-border-radius);
}

/* 评论回复项 */
.comment-reply {
    padding: var(--comment-reply-item-padding);
    margin: var(--comment-reply-item-margin);
    border-left: var(--comment-reply-item-border-left);
}

.comment-reply:last-child {
    border-left: var(--comment-reply-item-last-border);
}

/* 评论加载状态 */
.loading,
.comment-loading,
.comment-empty {
    text-align: var(--comment-loading-text-align);
    color: var(--comment-loading-color);
    font-size: var(--comment-loading-font-size);
    padding: var(--comment-loading-padding);
}

#commentContent {
    width: var(--article-comment-content-width);
    min-height: var(--article-comment-content-min-height);
    background: var(--article-comment-content-background);
    border: var(--article-comment-content-border);
    border-radius: var(--article-comment-content-border-radius);
    padding: var(--article-comment-content-padding);
    font-family: var(--article-comment-content-font-family);
    font-size: var(--article-comment-content-font-size);
    line-height: var(--article-comment-content-line-height);
    color: var(--article-comment-content-color);
    resize: var(--article-comment-content-resize);
    transition: var(--article-comment-content-transition);
}

#commentContent:focus {
    border-color: var(--article-comment-content-focus-border-color);
    outline: var(--article-comment-content-focus-outline);
    box-shadow: var(--article-comment-content-focus-ring);
}

.comment-actions {
    display: var(--article-comment-actions-display);
    gap: var(--article-comment-actions-gap);
    justify-content: var(--article-comment-actions-justify-content);
    margin-top: var(--article-comment-actions-margin-top);
}

#submitCommentBtn {
    background: var(--article-submit-comment-background);
    border: var(--article-submit-comment-border);
    border-radius: var(--article-submit-comment-border-radius);
    color: var(--article-submit-comment-color);
    font-family: var(--article-submit-comment-font-family);
    font-size: var(--article-submit-comment-font-size);
    font-weight: var(--article-submit-comment-font-weight);
    padding: var(--article-submit-comment-padding);
    cursor: var(--article-submit-comment-cursor);
    transition: var(--article-submit-comment-transition);
}

#submitCommentBtn:hover {
    background: var(--article-submit-comment-hover-background);
    border-color: var(--article-submit-comment-hover-border-color);
}

#cancelCommentBtn {
    background: var(--article-cancel-comment-background);
    border: var(--article-cancel-comment-border);
    border-radius: var(--article-cancel-comment-border-radius);
    color: var(--article-cancel-comment-color);
    font-family: var(--article-cancel-comment-font-family);
    font-size: var(--article-cancel-comment-font-size);
    font-weight: var(--article-cancel-comment-font-weight);
    padding: var(--article-cancel-comment-padding);
    cursor: var(--article-cancel-comment-cursor);
    transition: var(--article-cancel-comment-transition);
}

#cancelCommentBtn:hover {
    background: var(--article-cancel-comment-hover-background);
    color: var(--article-cancel-comment-hover-color);
}

.comments-list {
    background: var(--article-comments-list-background);
    padding: var(--article-comments-list-padding);
    margin: var(--article-comments-list-margin);
}

.comments-list .loading {
    text-align: var(--article-comments-loading-text-align);
    font-size: var(--article-comments-loading-font-size);
    color: var(--article-comments-loading-color);
    padding: var(--article-comments-loading-padding);
}

/* ============================================
   登录页样式
   ============================================ */

.login-page {
    background: var(--login-page-background);
    display: var(--login-page-display);
    align-items: var(--login-page-align-items);
    justify-content: var(--login-page-justify-content);
    min-height: var(--login-page-min-height);
    padding: var(--login-page-padding);
    margin: var(--login-page-margin);
}

.login-container {
    background: var(--login-container-background);
    border-radius: var(--login-container-border-radius);
    box-shadow: var(--login-container-box-shadow);
    padding: var(--login-container-padding);
    width: var(--login-container-width);
    max-width: var(--login-container-max-width);
}

.login-form-container {
    display: var(--login-form-container-display);
    flex-direction: var(--login-form-container-flex-direction);
    justify-content: var(--login-form-container-justify-content);
    align-items: var(--login-form-container-align-items);
    padding: var(--login-form-container-padding);
    animation: var(--login-form-container-animation);
}

.login-header {
    text-align: var(--login-header-text-align);
    margin-bottom: var(--login-header-margin-bottom);
}

.login-header h1 {
    font-family: var(--login-header-title-font-family);
    font-size: var(--login-header-title-font-size);
    font-weight: var(--login-header-title-font-weight);
    color: var(--login-header-title-color);
    margin: var(--login-header-title-margin);
}

.login-header p {
    font-family: var(--login-header-description-font-family);
    font-size: var(--login-header-description-font-size);
    font-weight: var(--login-header-description-font-weight);
    color: var(--login-header-description-color);
    margin: var(--login-header-description-margin);
}

.login-form {
    background: var(--login-form-background);
    margin: var(--login-form-margin);
    width: var(--login-form-width);
    max-width: var(--login-form-max-width);
}

.login-form .form-group {
    margin-bottom: var(--login-form-group-margin-bottom);
}

.login-form label {
    display: var(--login-form-label-display);
    font-family: var(--login-form-label-font-family);
    font-size: var(--login-form-label-font-size);
    font-weight: var(--login-form-label-font-weight);
    color: var(--login-form-label-color);
    margin-bottom: var(--login-form-label-margin-bottom);
    text-align: var(--login-form-label-text-align);
    width: var(--login-form-label-width);
}

.form-input {
    width: var(--login-form-input-width);
    background: var(--login-form-input-background);
    border: var(--login-form-input-border);
    border-radius: var(--login-form-input-border-radius);
    padding: var(--login-form-input-padding);
    font-family: var(--login-form-input-font-family);
    font-size: var(--login-form-input-font-size);
    color: var(--login-form-input-color);
    transition: var(--login-form-input-transition);
}

.form-input:focus {
    border-color: var(--login-form-input-focus-border-color);
    outline: var(--login-form-input-focus-outline);
    box-shadow: var(--login-form-input-focus-ring);
}

.btn-primary {
    background: var(--login-submit-btn-background);
    border: var(--login-submit-btn-border);
    border-radius: var(--login-submit-btn-border-radius);
    color: var(--login-submit-btn-color);
    font-family: var(--login-submit-btn-font-family);
    font-size: var(--login-submit-btn-font-size);
    font-weight: var(--login-submit-btn-font-weight);
    padding: var(--login-submit-btn-padding);
    cursor: var(--login-submit-btn-cursor);
    transition: var(--login-submit-btn-transition);
}

.btn-primary:hover {
    background: var(--login-submit-btn-hover-background);
    border-color: var(--login-submit-btn-hover-border-color);
    transform: var(--login-submit-btn-hover-transform);
}

.btn-block {
    width: var(--login-submit-btn-width);
}

.btn-lg {
    font-size: var(--login-submit-btn-font-size);
    padding: var(--login-submit-btn-padding);
}

.register-link {
    text-align: var(--register-link-text-align);
    margin: var(--register-link-margin);
    font-size: var(--register-link-font-size);
    color: var(--register-link-color);
}

.register-link a {
    color: var(--register-link-a-color);
    text-decoration: var(--register-link-a-text-decoration);
    font-weight: var(--register-link-a-font-weight);
    margin-left: var(--register-link-a-margin-left);
    transition: var(--register-link-a-transition);
}

.register-link a:hover {
    color: var(--register-link-a-hover-color);
    text-decoration: var(--register-link-a-hover-text-decoration);
}

.back-link {
    text-align: var(--back-link-text-align);
    margin-top: var(--back-link-margin-top);
}

.back-link a {
    color: var(--back-link-a-color);
    text-decoration: var(--back-link-a-text-decoration);
    font-size: var(--back-link-a-font-size);
    transition: var(--back-link-a-transition);
}

.back-link a:hover {
    color: var(--back-link-a-hover-color);
}

.register-hint {
    font-size: var(--register-hint-font-size);
    color: var(--register-hint-color);
    margin-top: var(--register-hint-margin-top);
    line-height: var(--register-hint-line-height);
    text-align: var(--register-hint-text-align);
}

/* ============================================
   Header样式
   ============================================ */

/* 导航栏 */
.navbar {
    background: var(--header-navbar-background);
    border-bottom: var(--header-navbar-border-bottom);
    position: var(--header-navbar-position);
    top: var(--header-navbar-top);
    left: var(--header-navbar-left);
    right: var(--header-navbar-right);
    width: var(--header-navbar-width);
    height: var(--header-navbar-height);
    box-shadow: var(--header-navbar-shadow);
    z-index: var(--header-navbar-z-index);
    display: var(--header-navbar-display);
}

/* 导航栏容器 */
.navbar .container {
    display: var(--header-navbar-container-display);
    align-items: var(--header-navbar-container-align-items);
    height: var(--header-navbar-container-height);
    padding: 0 24px;
}

/* 全局容器样式 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* 主页面容器 */
.main .container {
    background: var(--index-container-background);
    padding: 30px 0 24px 0;
}

/* Logo */
.nav-brand .logo {
    font-family: var(--header-logo-font-family);
    font-size: var(--header-logo-font-size);
    font-weight: var(--header-logo-font-weight);
    color: var(--header-logo-color);
    text-decoration: var(--header-logo-text-decoration);
    transition: var(--header-logo-transition);
    letter-spacing: var(--header-logo-letter-spacing);
}

.nav-brand .logo:hover {
    color: var(--header-logo-hover-color);
}

/* 移动端Logo */
.mobile-logo {
    display: var(--header-mobile-logo-display);
}

/* 导航菜单 */
.nav-menu {
    display: var(--header-nav-display) !important;
    gap: var(--header-nav-gap) !important;
    margin-right: auto !important;
    align-items: var(--header-nav-align-items) !important;
    position: var(--header-nav-position) !important;
}


.nav-link {
    font-family: var(--header-nav-link-font-family);
    font-size: var(--header-nav-link-font-size);
    font-weight: var(--header-nav-link-font-weight);
    color: var(--header-nav-link-color);
    text-decoration: var(--header-nav-link-text-decoration);
    padding: var(--header-nav-link-padding);
    transition: var(--header-nav-link-transition);
}

.nav-link:hover {
    color: var(--header-nav-link-hover-color);
}

/* 导航操作区域 */
.nav-actions {
    display: var(--header-nav-display) !important;
    align-items: var(--header-nav-align-items) !important;
    gap: var(--header-nav-gap) !important;
    position: var(--header-nav-position) !important;
}

/* 搜索按钮 */
.search-toggle {
    width: var(--header-search-toggle-width);
    height: var(--header-search-toggle-height);
    background: var(--header-search-toggle-background);
    border: var(--header-search-toggle-border);
    border-radius: var(--header-search-toggle-border-radius);
    display: var(--header-search-toggle-display);
    align-items: var(--header-search-toggle-align-items);
    justify-content: var(--header-search-toggle-justify-content);
    cursor: var(--header-search-toggle-cursor);
    transition: var(--header-search-toggle-transition);
}

.search-toggle:hover {
    background: var(--header-search-toggle-hover-background);
    color: var(--header-search-toggle-hover-color);
}

.search-toggle svg {
    width: var(--header-search-icon-width);
    height: var(--header-search-icon-height);
    color: var(--header-search-icon-color);
}

/* 主题切换按钮 */
.theme-switcher {
    position: relative;
}

.theme-toggle-btn {
    width: var(--header-theme-switcher-width);
    height: var(--header-theme-switcher-height);
    background: var(--header-theme-switcher-background);
    border: var(--header-theme-switcher-border);
    border-radius: var(--header-theme-switcher-border-radius);
    display: var(--header-theme-switcher-display);
    align-items: var(--header-theme-switcher-align-items);
    justify-content: var(--header-theme-switcher-justify-content);
    cursor: var(--header-theme-switcher-cursor);
    transition: var(--header-theme-switcher-transition);
    color: var(--header-theme-switcher-color);
    padding: var(--header-theme-switcher-padding);
}

.theme-toggle-btn:hover {
    color: var(--header-theme-switcher-color-hover);
}

.theme-toggle-btn svg {
    width: var(--header-theme-switcher-icon-width);
    height: var(--header-theme-switcher-icon-height);
}

/* 搜索遮罩层 - 从按钮位置滑出 */
.search-overlay {
    position: var(--header-search-overlay-position);
    top: var(--header-search-overlay-top);
    right: var(--header-search-overlay-right);
    transform: var(--header-search-overlay-transform);
    z-index: var(--header-search-overlay-z-index);
    display: var(--header-search-overlay-display);
    opacity: var(--header-search-overlay-opacity);
    transition: var(--header-search-overlay-transition);
}

.search-overlay.show {
    display: block;
    opacity: 1;
}

/* 搜索容器 - 可展开的搜索框 */
.search-container {
    position: var(--header-search-container-position);
    top: var(--header-search-container-top);
    right: var(--header-search-container-right);
    transform: var(--header-search-container-transform);
    background: var(--header-search-container-background);
    border: var(--header-search-container-border);
    border-radius: var(--header-search-container-border-radius);
    box-shadow: var(--header-search-container-box-shadow);
    width: var(--header-search-container-width-collapsed);
    height: var(--header-search-container-height-collapsed);
    transition: var(--header-search-container-transition);
    display: var(--header-search-container-display);
    flex-direction: var(--header-search-container-flex-direction);
    align-items: var(--header-search-container-align-items);
    justify-content: var(--header-search-container-justify-content);
    overflow: var(--header-search-container-overflow);
}

.search-overlay.show .search-container {
    width: var(--header-search-container-width-expanded);
    height: var(--header-search-container-height-expanded);
}

/* 搜索输入框 */
.search-input-wrapper {
    display: var(--header-search-input-wrapper-display);
    align-items: var(--header-search-input-wrapper-align-items);
    width: var(--header-search-input-wrapper-width);
    height: var(--header-search-input-wrapper-height);
    padding: var(--header-search-input-wrapper-padding);
    opacity: var(--header-search-input-wrapper-opacity);
    transition: var(--header-search-input-wrapper-transition);
}

.search-overlay.show .search-input-wrapper {
    opacity: var(--header-search-input-wrapper-opacity-show);
}

.search-input-wrapper svg {
    color: var(--header-search-input-svg-color);
    margin-right: var(--header-search-input-svg-margin-right);
    font-size: var(--header-search-input-svg-font-size);
    flex-shrink: var(--header-search-input-svg-flex-shrink);
}

.search-input {
    flex: var(--header-search-input-flex);
    border: var(--header-search-input-border);
    outline: var(--header-search-input-outline);
    font-family: var(--header-search-input-font-family);
    font-size: var(--header-search-input-font-size);
    color: var(--header-search-input-color);
    background: var(--header-search-input-background);
    width: var(--header-search-input-width);
}

.search-input::placeholder {
    color: var(--header-search-input-placeholder);
}

/* 搜索图标 */
.search-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--header-search-icon-color);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-overlay.show .search-icon {
    opacity: 0;
    pointer-events: none;
}

/* 用户菜单 */
.user-menu {
    position: var(--header-user-menu-position);
    display: var(--header-user-menu-display);
}

.user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--header-user-avatar-width);
    height: var(--header-user-avatar-height);
    border: var(--header-user-avatar-border);
    background: var(--header-user-avatar-background);
    color: var(--header-user-avatar-color);
    cursor: var(--header-user-avatar-cursor);
    transition: var(--header-user-avatar-transition);
}

.user-icon:hover {
    color: var(--header-user-avatar-hover-color);
}

/* 用户下拉菜单 */
.dropdown-menu {
    position: var(--header-user-dropdown-position);
    top: var(--header-user-dropdown-top);
    right: var(--header-user-dropdown-right);
    margin-top: var(--header-user-dropdown-margin-top);
    min-width: var(--header-user-dropdown-min-width);
    background: var(--header-user-dropdown-background);
    border: var(--header-user-dropdown-border);
    border-radius: var(--header-user-dropdown-border-radius);
    box-shadow: var(--header-user-dropdown-box-shadow);
    z-index: var(--header-user-dropdown-z-index);
    display: var(--header-user-dropdown-display);
    padding: 0; /* 添加padding: 0以匹配生产环境 */
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.dropdown-item:first-child {
    border-radius: 6px 6px 0 0;
    background-color: #f8f9fa;
    font-weight: 500;
}

.dropdown-item:first-child:hover {
    background-color: #f0f0f0;
}

.dropdown-item:last-child {
    border-bottom: none;
    border-radius: 0 0 6px 6px;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
}

.dropdown-item svg {
    flex-shrink: 0;
}



.user-avatar {
    width: var(--header-user-avatar-width);
    height: var(--header-user-avatar-height);
    border-radius: var(--header-user-avatar-border-radius);
    border: var(--header-user-avatar-border);
}

/* 移动端菜单 */
.mobile-menu {
    position: var(--header-mobile-menu-position);
    top: var(--header-mobile-menu-top);
    left: var(--header-mobile-menu-left);
    width: var(--header-mobile-menu-width);
    height: var(--header-mobile-menu-height);
    background: var(--header-mobile-menu-background);
    box-shadow: var(--header-mobile-menu-box-shadow);
    transform: var(--header-mobile-menu-transform);
    transition: var(--header-mobile-menu-transition);
    z-index: var(--header-mobile-menu-z-index);
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--header-mobile-menu-overlay-background);
    z-index: var(--header-mobile-menu-overlay-z-index);
    opacity: 0;
    visibility: hidden;
    transition: var(--header-mobile-menu-overlay-transition);
}

.mobile-menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   通用表单容器样式
   ============================================ */

/* 通用表单容器 */
.form-container {
    background: var(--form-container-background);
    border: var(--form-container-border);
    border-radius: var(--form-container-border-radius);
    box-shadow: var(--form-container-box-shadow);
    padding: var(--form-container-padding);
    margin: var(--form-container-margin);
    width: var(--form-container-width);
    max-width: var(--form-container-max-width);
    display: var(--form-container-display);
    flex-direction: var(--form-container-flex-direction);
    justify-content: var(--form-container-justify-content);
    align-items: var(--form-container-align-items);
}

/* 通用表单标题 - 使用更高优先级覆盖JS动态样式 */
html body div#formContainer.form-container h3.form-title {
    font-family: var(--form-title-font-family);
    font-size: var(--form-title-font-size);
    font-weight: var(--form-title-font-weight);
    color: var(--form-title-color);
    margin: var(--form-title-margin);
    text-align: center;
    display: block;
}

/* 确保标题内的span也居中 */
html body div#formContainer.form-container h3.form-title span#formTitleText {
    text-align: center;
    display: block;
}

/* 通用表单描述 */
.form-description {
    font-family: var(--form-description-font-family);
    font-size: var(--form-description-font-size);
    font-weight: var(--form-description-font-weight);
    color: var(--form-description-color);
    margin: var(--form-description-margin);
    text-align: var(--form-description-text-align);
}

/* 通用表单组 */
.form-container .form-group {
    margin-bottom: var(--form-group-margin-bottom);
    width: 100%;
}

/* 通用表单标签 */
.form-container label {
    display: var(--form-label-display);
    font-family: var(--form-label-font-family);
    font-size: var(--form-label-font-size);
    font-weight: var(--form-label-font-weight);
    color: var(--form-label-color);
    margin-bottom: var(--form-label-margin-bottom);
    text-align: var(--form-label-text-align);
    width: var(--form-label-width);
}

/* 通用表单输入框 */
.form-container .form-input {
    width: var(--form-input-width);
    background: var(--form-input-background);
    border: var(--form-input-border);
    border-radius: var(--form-input-border-radius);
    padding: var(--form-input-padding);
    font-family: var(--form-input-font-family);
    font-size: var(--form-input-font-size);
    color: var(--form-input-color);
    transition: var(--form-input-transition);
}

.form-container .form-input:focus {
    outline: var(--form-input-focus-outline);
    border-color: var(--form-input-focus-border-color);
    box-shadow: var(--form-input-focus-box-shadow);
}

/* 表单文本域样式 */
.form-container .form-textarea {
    width: var(--form-textarea-width);
    background: var(--form-textarea-background);
    border: var(--form-textarea-border);
    border-radius: var(--form-textarea-border-radius);
    padding: var(--form-textarea-padding);
    font-family: var(--form-textarea-font-family);
    font-size: var(--form-textarea-font-size);
    color: var(--form-textarea-color);
    transition: var(--form-textarea-transition);
    min-height: var(--form-textarea-min-height);
    resize: var(--form-textarea-resize);
}

.form-container .form-textarea:focus {
    outline: var(--form-textarea-focus-outline);
    border-color: var(--form-textarea-focus-border-color);
    box-shadow: var(--form-textarea-focus-box-shadow);
}

/* 表单placeholder样式 */
.form-container .form-input::placeholder {
    color: var(--form-input-placeholder);
    font-family: var(--form-input-placeholder-font-family);
    font-size: var(--form-input-placeholder-font-size);
    font-weight: var(--form-input-placeholder-font-weight);
}

.form-container .form-textarea::placeholder {
    color: var(--form-textarea-placeholder);
    font-family: var(--form-textarea-placeholder-font-family);
    font-size: var(--form-textarea-placeholder-font-size);
    font-weight: var(--form-textarea-placeholder-font-weight);
}

/* 通用表单按钮 */
.form-container .form-button {
    width: var(--form-button-width);
    background: var(--form-button-background);
    border: var(--form-button-border);
    border-radius: var(--form-button-border-radius);
    color: var(--form-button-color);
    font-family: var(--form-button-font-family);
    font-size: var(--form-button-font-size);
    font-weight: var(--form-button-font-weight);
    padding: var(--form-button-padding);
    cursor: var(--form-button-cursor);
    transition: var(--form-button-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
}

/* 确保按钮在表单组中也居中 */
.form-container .form-group {
    text-align: center;
}

.form-container .form-group button,
.form-container .form-group input[type="submit"],
.form-container .form-group input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 覆盖JS动态添加的.form-actions样式，确保按钮居中 */
html body div#formContainer.form-container .form-actions {
    display: block;
    text-align: center;
    padding-top: var(--form-actions-padding-top);
    margin-top: var(--form-actions-margin-top);
    border-top: var(--form-actions-border-top);
}

html body div#formContainer.form-container .form-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 覆盖form-container内btn-primary的样式，使用form-button变量 */
html body div#formContainer.form-container .form-actions .btn-primary {
    background: var(--form-button-background);
    border: var(--form-button-border);
    color: var(--form-button-color);
    border-radius: var(--form-button-border-radius);
    font-family: var(--form-button-font-family);
    font-size: var(--form-button-font-size);
    font-weight: var(--form-button-font-weight);
    padding: var(--form-button-padding);
    cursor: var(--form-button-cursor);
    transition: var(--form-button-transition);
}

/* 覆盖form-container内btn-primary的hover样式 */
html body div#formContainer.form-container .form-actions .btn-primary:hover {
    background: var(--form-button-hover-background);
    border-color: var(--form-button-hover-border-color);
    transform: var(--form-button-hover-transform);
}

.form-container .form-button:hover {
    background: var(--form-button-hover-background);
    border-color: var(--form-button-hover-border-color);
    transform: var(--form-button-hover-transform);
}

/* 通用表单提示 */
.form-container .form-hint {
    font-size: var(--form-hint-font-size);
    color: var(--form-hint-color);
    margin-top: var(--form-hint-margin-top);
    line-height: var(--form-hint-line-height);
    text-align: var(--form-hint-text-align);
}

/* 表单字段容器和内联标签 */
.form-container .form-field-with-label {
    margin-bottom: var(--form-field-with-label-margin-bottom);
}

.form-container .field-label-inline {
    display: var(--form-field-label-inline-display);
    margin-bottom: var(--form-field-label-inline-margin-bottom);
    font-size: var(--form-field-label-inline-font-size);
    font-weight: var(--form-field-label-inline-font-weight);
    color: var(--form-field-label-inline-color);
}

/* 单选框组样式 */
.form-container .radio-group {
    display: var(--form-radio-group-display);
    flex-direction: var(--form-radio-group-flex-direction);
    gap: var(--form-radio-group-gap);
    flex-wrap: var(--form-radio-group-flex-wrap);
    align-items: var(--form-radio-group-align-items);
}

.form-container .radio-option {
    display: var(--form-radio-option-display);
    align-items: var(--form-radio-option-align-items);
    gap: var(--form-radio-option-gap);
}

.form-container .radio-option input[type="radio"] {
    width: var(--form-radio-checkbox-width);
    height: var(--form-radio-checkbox-height);
    margin: var(--form-radio-checkbox-margin);
    cursor: var(--form-radio-checkbox-cursor);
}

.form-container .radio-option .radio-label {
    display: var(--form-radio-label-display);
    font-size: var(--form-radio-label-font-size);
    color: var(--form-radio-label-color);
    cursor: var(--form-radio-label-cursor);
    user-select: var(--form-radio-label-user-select);
}

/* 多选框组样式 */
.form-container .checkbox-group {
    display: var(--form-checkbox-group-display);
    flex-direction: var(--form-checkbox-group-flex-direction);
    gap: var(--form-checkbox-group-gap);
    flex-wrap: var(--form-checkbox-group-flex-wrap);
    align-items: var(--form-checkbox-group-align-items);
}

.form-container .checkbox-option {
    display: var(--form-checkbox-option-display);
    align-items: var(--form-checkbox-option-align-items);
    gap: var(--form-checkbox-option-gap);
}

.form-container .checkbox-option input[type="checkbox"] {
    width: var(--form-radio-checkbox-width);
    height: var(--form-radio-checkbox-height);
    margin: var(--form-radio-checkbox-margin);
    cursor: var(--form-radio-checkbox-cursor);
}

.form-container .checkbox-option .checkbox-label {
    display: var(--form-checkbox-label-display);
    font-size: var(--form-checkbox-label-font-size);
    color: var(--form-checkbox-label-color);
    cursor: var(--form-checkbox-label-cursor);
    user-select: var(--form-checkbox-label-user-select);
}

/* 下拉选择框样式 */
.form-container .form-select {
    width: var(--form-select-width);
    background: var(--form-select-background);
    border: var(--form-select-border);
    border-radius: var(--form-select-border-radius);
    padding: var(--form-select-padding);
    font-family: var(--form-select-font-family);
    font-size: var(--form-select-font-size);
    color: var(--form-select-color);
    cursor: var(--form-select-cursor);
    transition: var(--form-select-transition);
}

.form-container .form-select:focus {
    outline: var(--form-select-focus-outline);
    border-color: var(--form-select-focus-border-color);
    box-shadow: var(--form-select-focus-box-shadow);
}

.form-container .form-select option {
    padding: var(--form-select-option-padding);
    color: var(--form-select-option-color);
    background: var(--form-select-option-background);
}

/* 表单字段描述 */
.form-container .form-field-description {
    font-size: var(--form-field-description-font-size);
    color: var(--form-field-description-color);
    margin-top: var(--form-field-description-margin-top);
    line-height: var(--form-field-description-line-height);
}

/* ============================================
   Footer样式
   ============================================ */

/* Footer占位符 - 确保footer始终在底部 */
#footer-placeholder {
    margin-top: auto;
    flex-shrink: 0;
}

.footer-bottom {
    background: var(--footer-background);
    border-top: var(--footer-border-top);
    padding: var(--footer-padding);
    margin-top: var(--footer-margin-top);
}

.footer-container {
    max-width: var(--footer-container-max-width);
    padding: var(--footer-container-padding);
    margin: var(--footer-container-margin);
}

.bottom-content {
    display: var(--footer-bottom-content-display);
    align-items: var(--footer-bottom-content-align-items);
    justify-content: var(--footer-bottom-content-justify-content);
    gap: var(--footer-bottom-content-gap);
}

/* 版权信息 */
.copyright {
    font-family: var(--footer-copyright-font-family);
    font-size: var(--footer-copyright-font-size);
    color: var(--footer-copyright-color);
    display: flex;
    align-items: center;
    gap: var(--footer-copyright-gap);
}

.copyright a {
    color: var(--footer-copyright-link-color);
    text-decoration: var(--footer-copyright-link-text-decoration);
    transition: var(--footer-copyright-link-transition);
}

.copyright a:hover {
    color: var(--footer-copyright-link-hover-color);
}

/* 法律链接 */
.legal-links {
    display: var(--footer-legal-links-display);
    gap: var(--footer-legal-links-gap);
}

.legal-links a {
    font-family: var(--footer-legal-link-font-family);
    font-size: var(--footer-legal-link-font-size);
    color: var(--footer-legal-link-color);
    text-decoration: var(--footer-legal-link-text-decoration);
    transition: var(--footer-legal-link-transition);
}

.legal-links a:hover {
    color: var(--footer-legal-link-hover-color);
}

/* ============================================
   错误提示样式
   ============================================ */
.error {
    color: #dc3545;
    text-align: center;
    padding: 2rem;
    font-size: 1rem;
}

/* ============================================
   动画关键帧
   ============================================ */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

@keyframes cardEntrance {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 所有响应式设计已移除 - 仅支持PC端布局 */

/* ============================================
   AI页面样式
   ============================================ */

/* AI页面样式 - 只在AI页面生效 */
.ai-page-body {
    background: var(--ai-gray-light) !important;
    min-height: 100vh !important;
}

/* AI页面容器样式 */
.ai-page-body #ai-page {
    width: 100% !important;
    height: calc(100vh - 60px) !important; /* 减去header高度 */
    background: var(--ai-gray-light) !important;
    padding: 20px 0 0 0 !important;
}

/* AI页面内部元素重置 - 更精确的选择器 */
#ai-page .app-layout,
#ai-page .top-bar,
#ai-page .sidebar,
#ai-page .main-content,
#ai-page .chat-container,
#ai-page .input-container {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#ai-page .app-layout *,
#ai-page .top-bar *,
#ai-page .sidebar *,
#ai-page .main-content *,
#ai-page .chat-container *,
#ai-page .input-container * {
    box-sizing: border-box;
}

/* 主容器 - AI页面使用 */
.ai-page-body #ai-page .container {
    width: var(--ai-container-width);
    min-width: var(--ai-container-min-width);
    max-width: var(--ai-container-max-width);
    height: var(--ai-container-height); /* 使用固定高度 */
    min-height: var(--ai-container-min-height);
    display: flex;
    flex-direction: column;
    background: var(--ai-white);
    border-radius: var(--ai-radius-lg);
    box-shadow: var(--ai-shadow-xl);
    overflow: hidden;
    resize: both;
    /* 定位 - 固定在屏幕中心 */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 100 !important;
    /* 确保容器可见 */
    visibility: visible !important;
    opacity: 1 !important;
    /* 覆盖父元素的padding影响 */
    margin: 0 !important;
    padding: 0 !important;
}

/* 顶部栏 */
#ai-page .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--ai-top-bar-height);
    padding: var(--ai-top-bar-padding);
    border-bottom: var(--ai-top-bar-border);
    background: var(--ai-top-bar-bg);
    flex-shrink: 0;
    user-select: none;
}

#ai-page .top-bar-left {
    display: flex;
    align-items: center;
    gap: var(--ai-spacing-lg);
}

#ai-page .app-title {
    font-size: var(--ai-app-title-font-size);
    font-weight: var(--ai-app-title-font-weight);
    color: var(--ai-app-title-color);
    margin: 0;
}

#ai-page .home-link {
    color: var(--ai-home-link-color);
    text-decoration: none;
    font-size: var(--ai-home-link-font-size);
    transition: var(--ai-transition-base);
}

#ai-page .home-link:hover {
    color: var(--ai-black);
}

/* 主题编辑器按钮 */
#ai-page .theme-editor-btn {
    color: var(--ai-home-link-color);
    background: none;
    border: none;
    font-size: var(--ai-home-link-font-size);
    transition: var(--ai-transition-base);
    margin-left: var(--ai-spacing-lg);
    cursor: pointer;
    padding: 0;
}

#ai-page .theme-editor-btn:hover {
    color: var(--ai-black);
}

#ai-page .top-bar-right {
    display: flex;
    align-items: center;
    gap: var(--ai-spacing-lg);
}

/* 状态灯 */
#ai-page .status-light {
    width: var(--ai-status-light-size);
    height: var(--ai-status-light-size);
    border-radius: 50%;
    background: var(--ai-gray-darker);
    transition: var(--ai-transition-slow);
    cursor: pointer;
}

#ai-page .status-light.available {
    background: var(--ai-success);
    box-shadow: var(--ai-status-light-shadow);
}

#ai-page .status-light.unavailable {
    background: var(--ai-gray-darker);
}

/* 状态灯 - 增加优先级 */
#ai-page #statusLight {
    width: var(--ai-status-light-size);
    height: var(--ai-status-light-size);
    border-radius: 50%;
    background: var(--ai-gray-darker);
    transition: var(--ai-transition-slow);
    cursor: pointer;
}

#ai-page #statusLight.available {
    background: var(--ai-success) !important;
    box-shadow: var(--ai-status-light-shadow) !important;
}

#ai-page #statusLight.unavailable {
    background: var(--ai-gray-darker) !important;
}

/* 设置按钮 */
    padding: var(--ai-settings-btn-padding);
    background: var(--ai-white);
    color: var(--ai-gray-darker);
    border: var(--ai-settings-btn-border);
    border-radius: var(--ai-settings-btn-border-radius);
    font-size: var(--ai-font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: var(--ai-transition-base);
}

#ai-page .settings-btn:hover {
    background: var(--ai-gray-light);
    border-color: var(--ai-gray-darker);
}

/* 应用布局 */
#ai-page .app-layout {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* 侧边栏 */
#ai-page .sidebar {
    width: var(--ai-sidebar-width);
    background: var(--ai-sidebar-bg);
    border-right: var(--ai-sidebar-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

#ai-page .sidebar-header {
    padding: var(--ai-sidebar-header-padding);
    border-bottom: var(--ai-sidebar-header-border);
}

#ai-page .new-chat-btn {
    width: 100%;
    padding: var(--ai-new-chat-btn-padding);
    background: var(--ai-black);
    color: var(--ai-white);
    border: none;
    border-radius: var(--ai-new-chat-btn-border-radius);
    font-size: var(--ai-new-chat-btn-font-size);
    font-weight: var(--ai-new-chat-btn-font-weight);
    cursor: pointer;
    transition: background-color var(--ai-transition-base);
}

#ai-page .new-chat-btn:hover {
    background: #343a40;
}

#ai-page .chat-history {
    flex: 1;
    overflow-y: auto;
    padding: var(--ai-chat-history-padding);
}

#ai-page .chat-history-item {
    padding: var(--ai-chat-item-padding);
    margin: var(--ai-chat-item-margin);
    background: var(--ai-white);
    border: var(--ai-chat-item-border);
    border-radius: var(--ai-chat-item-border-radius);
    cursor: pointer;
    transition: var(--ai-transition-base);
    position: relative;
}

#ai-page .chat-history-item:hover {
    background: var(--ai-gray-light);
    border-color: var(--ai-gray-dark);
}

#ai-page .chat-history-item.active {
    background: var(--ai-gray);
    border-color: var(--ai-gray-darker);
}

#ai-page .chat-history-item-title {
    font-size: var(--ai-chat-item-title-font-size);
    font-weight: 500;
    color: var(--ai-black);
    margin-bottom: var(--ai-spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#ai-page .chat-history-item-date {
    font-size: var(--ai-chat-item-date-font-size);
    color: var(--ai-gray-darker);
}

#ai-page .chat-history-item-delete {
    position: absolute;
    top: var(--ai-spacing-lg);
    right: var(--ai-spacing-lg);
    background: none;
    border: none;
    color: var(--ai-gray-darker);
    cursor: pointer;
    padding: var(--ai-spacing-xs);
    border-radius: var(--ai-radius-sm);
    font-size: var(--ai-chat-item-date-font-size);
    opacity: 0;
    transition: var(--ai-transition-base);
}

#ai-page .chat-history-item:hover .chat-history-item-delete {
    opacity: 1;
}

#ai-page .chat-history-item-delete:hover {
    color: var(--ai-danger);
    background: var(--ai-gray-light);
}

/* 主内容区 */
#ai-page .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* 聊天容器 */
#ai-page .chat-container {
    flex: 1;
    min-height: 0;
    padding: var(--ai-chat-container-padding);
    overflow-y: auto;
    background: var(--ai-white);
    display: flex;
    flex-direction: column;
}

/* 欢迎消息 */
#ai-page .welcome-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: var(--ai-welcome-message-padding);
    color: var(--ai-gray-darker);
}

#ai-page .welcome-message h2 {
    font-size: var(--ai-welcome-title-font-size);
    font-weight: 600;
    margin: var(--ai-welcome-title-margin);
    color: #343a40;
}

#ai-page .welcome-message p {
    font-size: var(--ai-welcome-text-font-size);
    margin: var(--ai-welcome-text-margin);
}

/* 消息样式 */
#ai-page .message {
    margin: var(--ai-message-margin);
    animation: fadeIn var(--ai-transition-slow);
}

#ai-page .message.user {
    display: flex;
    justify-content: flex-end;
}

#ai-page .message.assistant {
    display: flex;
    justify-content: flex-start;
}

#ai-page .message-content {
    max-width: var(--ai-message-max-width);
    padding: var(--ai-message-padding);
    border-radius: var(--ai-message-radius);
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: var(--ai-message-line-height);
    font-size: var(--ai-message-font-size);
}

#ai-page .message.user .message-content {
    background: var(--ai-black);
    color: var(--ai-white);
    border-bottom-right-radius: var(--ai-radius-sm);
}

#ai-page .message.assistant .message-content {
    background: var(--ai-gray-light);
    color: var(--ai-black);
    border: 1px solid var(--ai-gray);
    border-bottom-left-radius: var(--ai-radius-sm);
}

#ai-page .message-time {
    font-size: var(--ai-message-time-font-size);
    color: var(--ai-gray-darker);
    margin-top: var(--ai-spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--ai-message-time-gap);
}

#ai-page .message.user .message-time {
    justify-content: flex-end;
}

#ai-page .message.assistant .message-time {
    justify-content: flex-start;
}

/* 复制按钮 */
#ai-page .message-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ai-message-copy-btn-size);
    height: var(--ai-message-copy-btn-size);
    background: none;
    border: none;
    color: var(--ai-gray-darker);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--ai-transition-base), color var(--ai-transition-base);
    padding: 0;
    border-radius: 2px;
    flex-shrink: 0;
    margin-left: var(--ai-spacing-sm);
}

#ai-page .message:hover .message-copy-btn {
    opacity: 0.8;
}

#ai-page .message-copy-btn:hover {
    opacity: 1 !important;
    color: var(--ai-black);
}

#ai-page .message-copy-btn.copied {
    color: var(--ai-success);
}

#ai-page .message-copy-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
}

/* 打字动画 */
#ai-page .typing-indicator {
    display: inline-block;
    padding: var(--ai-typing-indicator-padding);
    background: var(--ai-gray-light);
    border: var(--ai-typing-indicator-border);
    border-radius: var(--ai-message-radius);
    border-bottom-left-radius: var(--ai-radius-sm);
    color: var(--ai-gray-darker);
}

#ai-page .typing-indicator span {
    display: inline-block;
    width: var(--ai-typing-dot-size);
    height: var(--ai-typing-dot-size);
    border-radius: 50%;
    background: var(--ai-gray-darker);
    margin: var(--ai-typing-dot-margin);
    animation: typing var(--ai-transition-typing);
}

#ai-page .typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

#ai-page .typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
}

/* 输入区域 */
#ai-page .input-container {
    padding: var(--ai-input-container-padding);
    border-top: var(--ai-input-container-border);
    background: var(--ai-white);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

#ai-page #messageInput {
    width: 100%;
    padding: var(--ai-input-padding);
    background: var(--ai-input-bg);
    border: var(--ai-input-border);
    border-radius: var(--ai-input-radius);
    font-size: var(--ai-message-font-size);
    color: var(--ai-input-color);
    font-family: inherit;
    line-height: var(--ai-message-line-height);
    resize: vertical;
    min-height: var(--ai-input-min-height);
    max-height: var(--ai-input-max-height);
    transition: border-color var(--ai-transition-base);
}

#ai-page #messageInput:focus {
    outline: none;
    border-color: var(--ai-input-border-focus);
}

#ai-page .input-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--ai-input-actions-gap);
    margin-top: var(--ai-input-actions-margin-top);
}

#ai-page .send-btn,
#ai-page .clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ai-action-btn-gap);
    padding: var(--ai-action-btn-padding);
    border: none;
    border-radius: var(--ai-action-btn-border-radius);
    font-size: var(--ai-action-btn-font-size);
    font-weight: var(--ai-action-btn-font-weight);
    cursor: pointer;
    transition: var(--ai-transition-base);
    text-decoration: none;
}

#ai-page .send-btn {
    background: var(--ai-black);
    color: var(--ai-white);
}

#ai-page .send-btn:hover:not(:disabled) {
    background: #343a40;
}

#ai-page .send-btn:disabled {
    background: var(--ai-gray-darker);
    cursor: not-allowed;
}

#ai-page .clear-btn {
    background: var(--ai-white);
    color: var(--ai-gray-darker);
    border: 1px solid var(--ai-gray-dark);
}

#ai-page .clear-btn:hover {
    background: var(--ai-gray-light);
    color: #495057;
    border-color: var(--ai-gray-darker);
}

/* 模态框 - AI页面通用modal样式 */
.ai-page-body .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ai-modal-background);
    z-index: var(--ai-z-modal);
    overflow: auto;
}

.ai-page-body .modal.show {
    display: block;
}

.ai-page-body .modal-content {
    background: var(--ai-white);
    margin: 10% auto;
    padding: 0;
    border-radius: var(--ai-modal-content-border-radius);
    width: var(--ai-modal-content-width);
    max-width: var(--ai-modal-content-max-width);
    box-shadow: var(--ai-modal-content-shadow);
}

.ai-page-body .modal-header {
    padding: var(--ai-modal-header-padding);
    border-bottom: var(--ai-modal-header-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-page-body .modal-header h2 {
    font-size: var(--ai-modal-title-font-size);
    font-weight: 600;
    color: var(--ai-black);
    margin: 0;
}

.ai-page-body .modal-link {
    color: var(--ai-black);
    text-decoration: none;
    font-size: var(--ai-font-size-base);
    margin-left: var(--ai-spacing-lg);
}

.ai-page-body .modal-link:hover {
    text-decoration: underline;
}

#ai-page .close-btn {
    font-size: 28px;
    color: var(--ai-gray-darker);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#ai-page .close-btn:hover {
    color: var(--ai-black);
}

.ai-page-body .modal-body {
    padding: var(--ai-modal-body-padding);
    color: var(--ai-black);
}

.ai-page-body .modal-footer {
    padding: var(--ai-modal-footer-padding);
    border-top: var(--ai-modal-footer-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--ai-modal-footer-gap);
}

/* 表单样式 */
#ai-page .form-group {
    margin-bottom: var(--ai-form-group-margin);
}

#ai-page .form-group label {
    display: block;
    margin-bottom: var(--ai-form-label-margin);
    font-weight: 500;
    color: var(--ai-black);
    font-size: var(--ai-form-label-font-size);
}

#ai-page .form-input,
#ai-page .form-select {
    width: 100%;
    padding: var(--ai-form-input-padding);
    background: var(--ai-input-bg);
    border: var(--ai-form-input-border);
    border-radius: var(--ai-form-input-border-radius);
    font-size: var(--ai-form-input-font-size);
    color: var(--ai-input-color);
    transition: border-color var(--ai-transition-base);
}

#ai-page .form-input:focus,
#ai-page .form-select:focus {
    outline: none;
    border-color: var(--ai-input-border-focus);
}

#ai-page .form-hint {
    font-size: var(--ai-form-hint-font-size);
    color: var(--ai-gray-darker);
    margin-top: var(--ai-form-hint-margin-top);
    display: block;
}

#ai-page .form-select {
    cursor: pointer;
    padding: var(--ai-form-select-padding);
    border-radius: var(--ai-form-select-border-radius);
}

#ai-page .form-range {
    width: 100%;
    margin: var(--ai-spacing-sm) 0;
}

/* 按钮样式 */
#ai-page .btn-primary,
#ai-page .btn-secondary,
#ai-page .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ai-modal-btn-padding);
    border: none;
    border-radius: var(--ai-modal-btn-border-radius);
    font-size: var(--ai-modal-btn-font-size);
    font-weight: 500;
    cursor: pointer;
    transition: var(--ai-transition-base);
    text-decoration: none;
}

#ai-page .btn-primary {
    background: var(--ai-black);
    color: var(--ai-white);
}

#ai-page .btn-primary:hover {
    background: #343a40;
}

#ai-page .btn-secondary {
    background: var(--ai-white);
    color: var(--ai-black);
    border: 1px solid var(--ai-gray-dark);
}

#ai-page .btn-secondary:hover {
    background: var(--ai-gray-light);
    color: #495057;
    border-color: var(--ai-gray-darker);
}

#ai-page .btn-danger {
    background: var(--ai-danger);
    color: var(--ai-white);
}

#ai-page .btn-danger:hover {
    background: #c82333;
}

/* 设置部分 */
#ai-page .settings-section {
    margin-bottom: var(--ai-form-section-margin);
}

#ai-page .settings-section h3 {
    font-size: var(--ai-font-size-lg);
    font-weight: 600;
    color: var(--ai-black);
    margin-bottom: var(--ai-spacing-lg);
}

/* AI页面响应式设计 */
@media (max-width: 768px) {
    #ai-page .container {
        width: 100%;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        resize: none;
    }

    #ai-page .sidebar {
        display: none;
    }

    #ai-page .chat-container {
        padding: var(--ai-chat-container-padding);
    }

    #ai-page .input-container {
        padding: var(--ai-input-container-padding);
    }

    #ai-page .message-content {
        max-width: var(--ai-message-max-width);
    }

    .ai-page-body .modal-content {
        width: 95%;
        margin: 5% auto;
    }
}

/* AI页面工具类 */
#ai-page .d-none { display: none !important; }
#ai-page .d-flex { display: flex !important; }
#ai-page .d-block { display: block !important; }

#ai-page .text-center { text-align: center !important; }
#ai-page .text-left { text-align: left !important; }
#ai-page .text-right { text-align: right !important; }

#ai-page .w-100 { width: 100% !important; }
#ai-page .h-100 { height: 100% !important; }

#ai-page .mb-0 { margin-bottom: 0 !important; }
#ai-page .mb-1 { margin-bottom: var(--ai-spacing-xs) !important; }
#ai-page .mb-2 { margin-bottom: var(--ai-spacing-sm) !important; }
#ai-page .mb-3 { margin-bottom: var(--ai-spacing-md) !important; }
#ai-page .mb-4 { margin-bottom: var(--ai-spacing-lg) !important; }
#ai-page .mb-5 { margin-bottom: var(--ai-spacing-xl) !important; }




/* ============================================
   回到顶部按钮
   ============================================ */
.back-to-top {
    position: fixed !important;
    bottom: 40px !important;
    right: 40px !important;
    width: 48px !important;
    height: 48px !important;
    background: #1a1a1a !important;
    border: none !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) !important;
    transition: all 0.3s ease !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.back-to-top .arrow-up {
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.back-to-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.back-to-top:hover {
    background: #333333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.back-to-top:active {
    transform: translateY(0) !important;
}

/* 响应式 - 移动端 */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 24px !important;
        right: 24px !important;
        width: 44px !important;
        height: 44px !important;
    }

    .back-to-top .arrow-up {
        font-size: 20px !important;
    }
}



/* ============================================
   图片灯箱样式
   ============================================ */
.image-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.image-lightbox.show {
    opacity: 1;
    visibility: visible;
}

.lightbox-image {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.image-lightbox.show .lightbox-image {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    font-size: 32px;
    line-height: 46px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* 响应式 - 移动端 */
@media (max-width: 768px) {
    .lightbox-close {
        top: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
        font-size: 28px;
        line-height: 40px;
    }

    .lightbox-image {
        max-width: 95%;
        max-height: 85vh;
    }
}