/* =================================================================
   style.css (v3.1 - 轻度优化版)
================================================================= */

/* =================================================================
   1. 全局与基础样式
================================================================= */
:root {
    --background-color: #f0f2f5;
    --card-background: #FFFFFF;
    --primary-text: #1d2129;
    --secondary-text: #86909c;
    --accent-color: #F03965;
    --divider-color: #e5e6eb;
    --danger-color: #f53f3f;
    --success-color: #00b42a;
    --warning-color: #ff7d00;
    --coin-color: #ffc107;
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--primary-text);
    padding-top: 52px;
    padding-bottom: calc(65px + var(--safe-area-inset-bottom) + 60px); /* 增加了60px的额外空间 */
}

.container {
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

a {
    text-decoration: none;
    color: inherit;
}

.page { display: none; }
.page.active { display: block; }

.empty-state {
    text-align: center;
    color: var(--secondary-text);
    padding: 50px 20px;
}
.empty-state a {
    color: var(--accent-color);
    font-weight: 500;
}

.notice {
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid transparent;
    text-align: center;
}
.notice.error { background-color: #fff7f7; border-color: #ffd9d9; color: #f53f3f; }
.notice.success { background-color: #e8ffea; border-color: #cce5d4; color: #00642a; }
.notice.warning { background-color: #fff7e8; border-color: #ffe4ba; color: #d97706; }

/* =================================================================
   2. 顶部与底部导航
================================================================= */
.top-header, .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    z-index: 1000;
}

.top-header {
    top: 0;
    height: 52px;
    border-bottom: 1px solid var(--divider-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

.header-title {
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bottom-nav {
    bottom: 0;
    height: calc(65px + var(--safe-area-inset-bottom));
    padding-bottom: var(--safe-area-inset-bottom);
    border-top: 1px solid var(--divider-color);
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--secondary-text);
    cursor: pointer;
    transition: color 0.2s;
}
.nav-item svg { width: 24px; height: 24px; margin-bottom: 4px; stroke-width: 1.5; }
.nav-item span { font-size: 10px; }
.nav-item.active { color: var(--accent-color); }

/* =================================================================
   3. 通用组件 (卡片, 表单, 按钮等)
================================================================= */

/* --- 卡片 --- */
.card {
    background: var(--card-background);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* --- 表单 --- */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 500; margin-bottom: 8px; font-size: 0.9rem; }
.form-group input[type="text"], 
.form-group input[type="tel"], 
.form-group input[type="password"], 
.form-group input[type="number"], 
.form-group input[type="search"],
.form-group textarea, 
.form-group select {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #fdfdfd;
    padding: 12px 15px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, 
.form-group textarea:focus, 
.form-group select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(46, 107, 255, 0.2);
}
.form-group textarea { height: 100px; resize: vertical; }
.form-group .form-text { font-size: 0.8rem; color: var(--secondary-text); margin-top: 5px; display: block; }

/* --- 按钮 --- */
.submit-btn {
    width: 100%;
    padding: 12px;
    border: none;
    background-color: var(--accent-color);
    color: white; /* 移除 !important */
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
}
.submit-btn:hover { background-color: #CF2452; }

/* 【修复】通过提高特异性来解决 a 标签按钮的颜色和下划线问题 */
a.submit-btn,
.empty-state a.submit-btn {
    color: white;
    text-decoration: none;
}

.secondary-btn {
    padding: 8px 15px;
    border: 1px solid var(--divider-color);
    background-color: var(--card-background);
    color: var(--primary-text);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s, border-color 0.2s;
}
.secondary-btn:hover { background-color: #f0f2f5; }

.delete-btn {
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    background: #fff1f0;
    color: var(--danger-color);
    font-weight: 500;
}
.delete-btn:hover { background: #ffd9d9; }

/* --- 带文字的分割线 --- */
.divider-with-text {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 25px 0 20px 0;
    color: var(--secondary-text);
    font-size: 0.9rem;
    font-weight: 500;
}
.divider-with-text::before,
.divider-with-text::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--divider-color);
}
.divider-with-text span { padding: 0 15px; }

/* =================================================================
   4. 市场与发现页 (瀑布流, 排行榜等)
================================================================= */

/* --- 瀑布流与主题卡片 --- */
.grid-waterfall { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 16px; }

.theme-card {
    background-color: var(--card-background);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    break-inside: avoid;
    display: flex;
    flex-direction: column;
    position: relative;
}
.theme-card-image-container {
    width: 100%;
    background-color: #f0f2f5;
    position: relative;
    padding-top: 222.22%; /* 1080x2400 宽高比 */
}
.theme-card-image-container img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform 0.3s ease;
}
.theme-card:hover img { transform: scale(1.05); }

.card-info { padding: 12px; }
.card-title { font-size: 0.9rem; font-weight: 500; margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { display: flex; align-items: center; justify-content: space-between; }
.card-author-name { font-size: 0.75rem; color: var(--secondary-text); }
.card-price { font-size: 0.8rem; font-weight: bold; color: var(--coin-color); }
.card-price.free { color: var(--success-color); }

.theme-card.featured::before {
    content: '推荐'; position: absolute; top: 10px; left: 10px;
    background-color: var(--danger-color); color: white;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: bold; z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* --- 骨架屏 --- */
@keyframes skeleton-loading { 0% { background-color: #e9ecef; } 50% { background-color: #f8f9fa; } 100% { background-color: #e9ecef; } }
.skeleton { animation: skeleton-loading 1.5s infinite ease-in-out; background-color: #e9ecef; border-radius: 8px; }
.skeleton-card .skeleton-img { padding-top: 222.22%; border-radius: 0; }
.skeleton-card .card-info { padding: 12px; }
.skeleton-card .skeleton-text { height: 1em; border-radius: 4px; }

/* --- 首页 Banner --- */
.home-banner { display: block; margin-bottom: 20px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.home-banner img { width: 100%; display: block; transition: transform 0.3s ease; }
.home-banner:hover img { transform: scale(1.03); }

/* --- 横向滚动专题 --- */
.horizontal-scroll-container { margin-bottom: 30px; }
.horizontal-scroll-container h2 { font-size: 1.2rem; margin-bottom: 15px; }
.horizontal-scroll { display: flex; overflow-x: auto; gap: 15px; padding-bottom: 15px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.horizontal-scroll::-webkit-scrollbar { display: none; }
.horizontal-scroll .theme-card { flex: 0 0 45%; max-width: 180px; width: 180px; }

.topic-card {
    position: relative; display: block; flex: 0 0 45%;
    max-width: 220px; aspect-ratio: 1 / 1.2; border-radius: 16px;
    overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: white; transition: transform 0.2s ease-in-out;
}
.topic-card:hover { transform: translateY(-4px); }
.topic-card-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.topic-card:hover .topic-card-bg { transform: scale(1.05); }
.topic-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); z-index: 1; border-radius: 0 0 16px 16px; }
.topic-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; z-index: 2; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); }
.topic-card-content p { margin: 0 0 4px 0; font-size: 0.85rem; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topic-card-content h3 { margin: 0; font-size: 1.2rem; font-weight: bold; line-height: 1.2; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* --- 发现页 --- */
.search-bar { position: relative; margin-bottom: 30px; }
.search-bar svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--secondary-text); stroke-width: 2; }
.search-bar input { width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--divider-color); background-color: var(--card-background); padding: 0 20px 0 45px; font-size: 1rem; box-sizing: border-box; }

.ranking-list h2 { font-size: 1.2rem; margin-bottom: 15px; display: flex; align-items: center; }
.ranking-list h2 svg { width: 24px; height: 24px; margin-right: 8px; color: #FFBF00; }
.ranking-item { display: flex; align-items: center; margin-bottom: 12px; padding: 10px; border-radius: 12px; transition: background-color 0.2s; }
.ranking-item:hover { background-color: #fff; }
.rank-number { font-size: 1.1rem; font-weight: 700; color: var(--secondary-text); width: 40px; text-align: center; flex-shrink: 0; }
.rank-thumb { width: 50px; height: 75px; object-fit: cover; border-radius: 8px; margin-right: 15px; background-color: #eee; }
.rank-info { flex-grow: 1; overflow: hidden; }
.rank-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-downloads { font-size: 0.8rem; color: var(--secondary-text); margin-top: 4px; }

/* =================================================================
   5. 主题详情页 (v8.0 - 最终简化布局版)
================================================================= */

.theme-detail-wrapper { 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
}

.theme-swiper {
    position: relative; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto;
    border-radius: 16px; 
    margin-bottom: 20px; 
    background-color: #000;
    overflow: hidden; 
    min-height: 200px;
}
.theme-swiper .swiper-wrapper, .theme-swiper .swiper-slide { 
    width: 100%; 
    height: 100%; 
}
.theme-swiper .swiper-slide { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
}
.theme-swiper .swiper-slide img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
}
.theme-swiper .swiper-slide::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 30%; 
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent); 
    z-index: 1; 
    pointer-events: none; 
}
.theme-swiper .swiper-pagination { 
    position: absolute; 
    bottom: 10px !important; 
    left: 0; 
    width: 100%; 
    z-index: 10; 
}
.swiper-pagination-bullet { 
    background: rgba(255, 255, 255, 0.5); 
    opacity: 1; 
}
.swiper-pagination-bullet-active { 
    background: #fff !important; 
}

.theme-detail-page .card h1 { 
    margin-top: 0; 
    margin-bottom: 20px; 
    padding-bottom: 20px; 
    border-bottom: 1px solid var(--divider-color); 
}

/* --- 全新仪表盘CSS (极其简洁) --- */
.meta-grid-v2 {
    display: flex;
    flex-direction: column;
    gap: 15px; /* 行间距 */
    margin-bottom: 25px; /* 与下方元素的间距 */
    padding: 15px;
    background-color: #f7f8fa;
    border-radius: 12px;
}

.meta-row {
    display: flex;
    align-items: center;
}

/* 第一行：左右对齐 */
.meta-row-endpoints {
    justify-content: space-between;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 15px;
}

/* 第二行：三等分 */
.meta-row-core-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* 仪表盘项目内部样式 */
.meta-item { 
    display: flex; 
    align-items: center;
    gap: 10px; 
}
.meta-item svg { 
    width: 20px; 
    height: 20px; 
    color: var(--secondary-text); 
    stroke-width: 1.5; 
    flex-shrink: 0; 
}
.meta-item div {
    /* 无需额外样式 */
}
.meta-item .meta-label { 
    font-size: 0.8rem; 
    color: var(--secondary-text); 
    display: block; 
}
.meta-item .meta-value { 
    font-size: 0.95rem; 
    font-weight: 600; 
    color: var(--primary-text); 
    word-break: break-all; 
}
.meta-value.coin { color: var(--coin-color); }
.meta-value.free { color: var(--success-color); }


/* --- 主题来源、作者信息等样式 --- */
.theme-source-info {
    display: flex; 
    align-items: center; 
    gap: 8px; 
    padding: 15px; 
    margin-top: 25px; 
    border: 1px solid var(--divider-color); 
    border-radius: 12px;
    font-size: 0.9rem; 
    color: var(--secondary-text);
    background-color: #f7f8fa;
}
.theme-source-info svg { 
    width: 18px; 
    height: 18px; 
    flex-shrink: 0; 
}

.author-promo-box {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    background-color: #f7f8fa; 
    padding: 12px 15px; 
    border-radius: 12px;
    margin-top: 15px; /* 与上方来源信息的间距 */
    border: 1px solid #e5e6eb;
}
.author-promo-box .author-info { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    text-decoration: none; 
}
.author-promo-box .author-avatar-small { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    object-fit: cover; 
    background-color: #eee; 
}
.author-promo-box .author-name { 
    font-weight: 600; 
    color: var(--primary-text); 
}
.author-promo-box .promo-link { 
    display: flex; 
    align-items: center; 
    font-size: 0.9rem; 
    color: var(--secondary-text); 
    text-decoration: none; 
    transition: color 0.2s; 
}
.author-promo-box .promo-link:hover { 
    color: var(--accent-color); 
}
.author-promo-box .promo-link svg { 
    width: 18px; 
    height: 18px; 
}

.theme-description-content { 
    padding: 0 5px; 
    line-height: 1.7; 
    color: #4E5969; 
}
/* =================================================================
   6. 评论区
================================================================= */
.comments-section { margin-top: 20px; }

.comment { display: flex; margin-bottom: 20px; }
.comment-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 15px; background-color: #eee; object-fit: cover; flex-shrink: 0; }
.comment-body { flex: 1; }
.comment-header { font-size: 0.9rem; font-weight: 500; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; }
.comment-header .reply-to-text { color: var(--secondary-text); font-weight: normal; margin-left: 8px; }
.comment-content { font-size: 0.95rem; line-height: 1.6; word-break: break-word; }
.comment-author-link { color: var(--primary-text); font-weight: 500; text-decoration: none; }
.comment-author-link:hover { color: var(--accent-color); }

.comment-footer { display: flex; align-items: center; gap: 15px; margin-top: 10px; }
.toggle-replies-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; font-size: 0.8rem; color: var(--secondary-text); }
.toggle-replies-btn svg { width: 16px; height: 16px; transition: transform 0.2s ease-in-out; }
.replies-container { display: none; padding-top: 15px; border-left: 2px solid var(--divider-color); margin-left: 20px; }

#reply_to_hint { display: flex; align-items: center; }

.submit-btn .spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes highlight-fade { from { background-color: #fffbe6; } to { background-color: transparent; } }
.new-comment-highlight { animation: highlight-fade 2s ease-out; }

/* =================================================================
   7. 用户中心 (我的, 编辑资料, 作者主页等)
================================================================= */

/* --- “我的”页面 --- */
.login-prompt-card { text-align: center; padding: 40px 20px; background: var(--card-background); border-radius: 16px; margin-top: 20px; box-shadow: 0 8px 24px rgba(29, 33, 41, 0.06); }
.login-prompt-card .prompt-image { width: 100%; max-width: 250px; border-radius: 12px; margin-bottom: 25px; }
.login-prompt-card h2 { margin: 0 0 10px; }
.login-prompt-card p { color: var(--secondary-text); margin: 0 0 25px; }

.profile-header { display: flex; align-items: center; position: relative; }
.profile-header img { width: 64px; height: 64px; border-radius: 50%; margin-right: 20px; background-color: #eee; object-fit: cover; flex-shrink: 0; }
.profile-info { flex-grow: 1; padding-right: 110px; }
.profile-info h2 { margin: 0 0 8px; font-size: 1.4rem; }
.profile-info p { margin: 0; color: var(--secondary-text); font-size: 0.9rem; }

.profile-coins { display: inline-flex; align-items: center; gap: 6px; background-color: #fffbe6; color: #d97706; padding: 4px 10px; border-radius: 20px; font-weight: 600; margin-top: 10px; }
.profile-coins svg { width: 16px; height: 16px; stroke: currentColor; }

.profile-header-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.header-action-btn { display: flex; align-items: center; justify-content: center; padding: 6px 12px; background-color: #f0f2f5; border: 1px solid #e5e6eb; border-radius: 20px; cursor: pointer; color: var(--primary-text); font-size: 0.8rem; font-weight: 500; transition: background-color 0.2s, color 0.2s; white-space: nowrap; }
.header-action-btn:hover { background-color: #e5e6eb; }
.header-action-btn svg { width: 16px; height: 16px; stroke-width: 2; margin-right: 6px; }

.profile-actions { margin-top: 10px; }
.profile-actions .action-item { display: flex; align-items: center; padding: 18px 20px; background-color: var(--card-background); border-radius: 12px; margin-bottom: 10px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
.action-item:hover { background-color: #f5f5f5; }
.action-item svg { width: 22px; height: 22px; margin-right: 15px; stroke-width: 1.5; }

/* --- 作者个人主页 --- */
#page-author-profile.container { padding: 0; }

.author-header-wrapper {
    position: relative;
    height: 300px;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 16px 20px 16px;
    box-sizing: border-box;
}
.author-header-wrapper .header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%);
}
.author-info-card {
    position: relative;
    z-index: 2;
    text-align: center;
    transform: translateY(50%);
    width: calc(100% - 32px);
    background-color: var(--card-background);
    color: var(--primary-text);
    border-radius: 16px;
    padding: 20px;
    padding-top: 60px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    margin-bottom: -50px;
}
.author-info-card .author-avatar {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background-color: #eee;
}
.author-info-card .author-nickname { margin: 0 0 8px 0; font-size: 1.5rem; }
.author-info-card .author-signature { margin: 0 0 20px 0; font-size: 0.9rem; color: var(--secondary-text); }

.author-stats { display: flex; justify-content: center; gap: 30px; padding-top: 15px; border-top: 1px solid var(--divider-color); }
.author-stats .stat-item { text-align: center; }
.author-stats .stat-value { display: block; font-size: 1.2rem; font-weight: 700; color: var(--primary-text); }
.author-stats .stat-label { font-size: 0.8rem; color: var(--secondary-text); }

.author-themes-section { padding: 150px 16px 16px 16px; background-color: var(--background-color); }
.author-themes-section .section-title { font-size: 1.2rem; margin-bottom: 20px; text-align: center; }

/* --- 发布/编辑主题页 --- */
#preview-list .preview-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
#preview-list .preview-item input[type="text"] { flex-grow: 1; min-width: 150px; }
.cover-radio-label { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; white-space: nowrap; cursor: pointer; }
.drag-handle { cursor: grab; color: var(--secondary-text); }
.upload-status { font-size: 0.8rem; margin-left: 5px; height: 15px; white-space: nowrap; }

/* --- 管理我的主题页 --- */
.manage-list-item { display: flex; align-items: center; background: #fff; padding: 15px; border-radius: 12px; margin-bottom: 10px; }
.manage-thumb { width: 50px; height: 75px; object-fit: cover; border-radius: 8px; margin-right: 15px; background-color: #eee; flex-shrink: 0; }
.manage-list-info { flex-grow: 1; min-width: 0; }
.manage-list-info strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manage-list-meta { font-size: 0.8rem; color: var(--secondary-text); display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.manage-list-actions { display: flex; gap: 10px; flex-shrink: 0; }
.manage-list-actions .edit-btn { padding: 8px 12px; border-radius: 8px; border: none; cursor: pointer; font-size: 0.85rem; background: #e8f3ff; color: var(--accent-color); font-weight: 500; }

.status-tag {
    font-size: 0.75rem; font-weight: bold; padding: 3px 8px;
    border-radius: 20px; color: white; align-self: flex-start;
}
.status-tag.status-approved { background-color: var(--success-color); }
.status-tag.status-pending { background-color: var(--warning-color); }
.status-tag.status-rejected { background-color: var(--danger-color); }

/* --- 金币流水页 --- */
.transaction-list { margin-top: 20px; display: flex; flex-direction: column; gap: 1px; background-color: var(--divider-color); border: 1px solid var(--divider-color); border-radius: 12px; overflow: hidden; }
.transaction-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; background-color: var(--card-background); }
.transaction-info { display: flex; flex-direction: column; gap: 4px; }
.transaction-description { font-size: 0.95rem; font-weight: 500; color: var(--primary-text); }
.transaction-time { font-size: 0.8rem; color: var(--secondary-text); }
.transaction-amount { font-size: 1.1rem; font-weight: bold; flex-shrink: 0; margin-left: 15px; }
.coin-in { color: var(--success-color); }
.coin-out { color: var(--danger-color); }

/* =================================================================
   8. 专题详情页 (卡片上浮风格)
================================================================= */
#page-topic-detail.container { padding: 0; }

.topic-header-float-wrapper { position: relative; padding: 16px; padding-top: 52px; box-sizing: border-box; }
.topic-header-bg-extension { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: -1; }
.topic-header-bg-extension::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

.topic-info-card {
    position: relative; height: 250px; border-radius: 16px; overflow: hidden;
    background-size: cover; background-position: center; color: #fff;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 20px; box-sizing: border-box; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.topic-info-card .header-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0) 100%); }
.topic-info-card .topic-header-content { position: relative; z-index: 2; }
.topic-info-card h1 { font-size: 1.8rem; font-weight: 700; margin: 0 0 10px 0; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.topic-info-card p { font-size: 0.9rem; line-height: 1.5; opacity: 0.9; margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,0.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.content-section { padding: 16px; background-color: var(--background-color); }

/* =================================================================
   9. 弹窗 (Modal)
================================================================= */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); display: none;
    justify-content: center; align-items: center; z-index: 2000;
}
.modal-content {
    background: var(--card-background); padding: 20px 30px 30px 30px; border-radius: 16px;
    width: 90%; max-width: 400px; position: relative; box-sizing: border-box;
}
.close-modal { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 1.8rem; color: var(--secondary-text); cursor: pointer; line-height: 1; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--divider-color); margin-bottom: 20px; }
.auth-tab-btn { flex: 1; padding: 15px 5px; border: none; background: none; cursor: pointer; font-size: 1rem; color: var(--secondary-text); border-bottom: 2px solid transparent; transition: all 0.2s; }
.auth-tab-btn.active { color: var(--accent-color); border-bottom-color: var(--accent-color); font-weight: 600; }
.auth-form { display: none; }
.auth-form.active { display: block; }

/* =================================================================
   10. 后台管理
================================================================= */
#page-admin .container { padding: 0; }
.admin-page { display: none; padding: 16px; }
.admin-page.active { display: block; }

.dashboard-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-card { background: var(--card-background); padding: 16px; border-radius: 12px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.stat-card .stat-number { font-size: 2rem; font-weight: bold; color: var(--accent-color); }
.stat-card .stat-label { margin-top: 5px; color: var(--secondary-text); font-size: 0.85rem; }

.admin-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.admin-menu-item { background-color: var(--card-background); border-radius: 12px; padding: 20px 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; font-size: 0.9rem; font-weight: 500; color: var(--primary-text); box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: transform 0.2s, box-shadow 0.2s; }
.admin-menu-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.admin-menu-item svg { width: 28px; height: 28px; color: var(--accent-color); stroke-width: 1.5; }

.admin-back-btn { display: inline-flex; align-items: center; font-size: 1rem; font-weight: 500; color: var(--accent-color); margin-bottom: 20px; padding: 8px 0; }
.admin-back-btn svg { width: 20px; height: 20px; margin-right: 4px; }

.admin-search-form { display: flex; gap: 10px; margin-bottom: 20px; }
.admin-search-form .search-input-group { flex-grow: 1; position: relative; }
.admin-search-form .search-input-group svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--secondary-text); }
.admin-search-form input[type="search"] { width: 100%; height: 44px; box-sizing: border-box; padding-left: 40px; border: 1px solid var(--divider-color); border-radius: 8px; }
.admin-search-form .secondary-btn { height: 44px; flex-shrink: 0; }

.admin-card-list { display: flex; flex-direction: column; gap: 12px; }
.admin-card { background: var(--card-background); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.admin-card.banned .admin-card-info { opacity: 0.6; }
.admin-card.banned .admin-card-title { text-decoration: line-through; }
.admin-card-info { display: flex; gap: 12px; align-items: flex-start; }
.admin-card-thumb { width: 45px; height: 67.5px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.admin-card-main-info { flex-grow: 1; min-width: 0; }
.admin-card-title { font-weight: 600; font-size: 1rem; margin-bottom: 4px; word-break: break-all; }
.admin-card-title a { color: var(--primary-text); }
.admin-card-subtitle { font-size: 0.8rem; color: var(--secondary-text); }
.admin-card-meta { font-size: 0.85rem; color: var(--secondary-text); display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.admin-card-comment-content { font-style: italic; color: #555; width: 100%; word-break: break-word; background-color: #f8f9fa; padding: 10px; border-radius: 8px; }
.admin-card-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--divider-color); padding-top: 12px; margin-top: 8px; }
.admin-card-actions .action-btn { padding: 6px 12px; font-size: 0.8rem; }
.admin-card-actions .action-btn.delete-btn { background: #fff1f0; color: var(--danger-color); } /* 合并选择器 */
.admin-card-actions .action-btn.delete-btn:hover { background: #ffd9d9; }

.admin-page .card { padding: 16px; }
.admin-page h3 { margin-top: 0; margin-bottom: 20px; }
.form-group select[multiple] { height: 200px; padding: 10px; }

.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 10px; background-color: var(--card-background); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.pagination .page-link { padding: 8px 16px; background-color: var(--accent-color); color: white; border-radius: 6px; font-weight: 500; font-size: 0.9rem; }
.pagination .page-info { color: var(--secondary-text); font-size: 0.9rem; font-weight: 500; }

.admin-transaction-item { background-color: var(--card-background); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.transaction-user { display: block; font-size: 0.8rem; color: var(--secondary-text); margin-top: 4px; }

.audit-list { display: flex; flex-direction: column; gap: 10px; }
.audit-item { display: flex; align-items: center; background: var(--card-background); padding: 12px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); gap: 12px; }
.audit-thumb { width: 45px; height: 67.5px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.audit-info { flex-grow: 1; min-width: 0; }
.audit-title { font-weight: 600; color: var(--primary-text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.audit-meta { font-size: 0.8rem; color: var(--secondary-text); display: flex; gap: 10px; }
.audit-actions { display: flex; gap: 8px; flex-shrink: 0; }
.audit-btn { padding: 8px 14px; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
.audit-btn:hover { opacity: 0.8; }
.audit-btn.approve { background-color: var(--success-color); color: white; }
.audit-btn.reject { background-color: #fff1f0; color: var(--danger-color); }
/* =================================================================
   后台主页/仪表盘 v2.0 专业样式
================================================================= */

/* --- 区域划分 --- */
.admin-section {
    margin-bottom: 30px;
}

.admin-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-text);
    margin: 0 0 15px 0;
    padding-left: 10px;
    border-left: 3px solid var(--accent-color);
}

/* --- 常用操作区 --- */
.admin-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.quick-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 25px 15px;
    background-color: var(--card-background);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    color: var(--primary-text);
    font-weight: 500;
}

.quick-action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.quick-action-card svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.5;
    color: var(--secondary-text);
}

/* 主操作使用强调色 */
.quick-action-card.primary {
    background-color: var(--accent-color);
    color: white;
}
.quick-action-card.primary svg {
    color: white;
}

/* --- 列表菜单样式 --- */
.admin-menu-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-menu-item-v2 {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: var(--card-background);
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: background-color 0.2s, transform 0.2s;
}

.admin-menu-item-v2:hover {
    background-color: #f8f9fa;
    transform: translateX(4px);
}

.menu-item-icon {
    flex-shrink: 0;
    background-color: #f0f2f5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-item-icon svg {
    width: 24px;
    height: 24px;
    color: var(--accent-color);
    stroke-width: 1.5;
}

.menu-item-text {
    flex-grow: 1;
    min-width: 0;
}

.menu-item-text strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-text);
    margin-bottom: 2px;
}

.menu-item-text span {
    font-size: 0.85rem;
    color: var(--secondary-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.menu-item-arrow {
    flex-shrink: 0;
    color: var(--secondary-text);
    opacity: 0.5;
}

/* =================================================================
   12. 评论区登录引导按钮优化
================================================================= */
.comment-login-prompt {
    text-align: center;
    padding: 20px 0 10px 0;
    border-top: 1px solid var(--divider-color);
    margin-top: 30px;
}
.comment-login-prompt .submit-btn {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* =================================================================
   13. 公告栏样式 (补全)
================================================================= */
.announcement-bar {
    background-color: #fffbe6;
    color: #8a6d3b;
    padding: 12px 16px;
    text-align: center;
    font-size: 0.9rem;
    border-bottom: 1px solid #f2e7c3;
    position: fixed;
    top: 52px; /* 顶部导航栏的高度 */
    left: 0;
    right: 0;
    z-index: 999;
}

/* =================================================================
   14. “我的已购”页面美化版
================================================================= */
.purchased-header-card {
    background: var(--card-background);
    border-radius: 16px;
    padding: 20px 25px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.purchased-header-card .card-main-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--divider-color);
}
.purchased-header-card .stats-grid { display: flex; justify-content: space-around; }
.purchased-header-card .stat-item { text-align: center; }
.purchased-header-card .stat-value { display: block; font-size: 1.6rem; font-weight: 700; color: var(--accent-color); margin-bottom: 4px; }
.purchased-header-card .stat-label { font-size: 0.8rem; color: var(--secondary-text); }

.purchased-list-card {
    background: var(--card-background);
    border-radius: 16px;
    padding: 10px 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.purchased-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    gap: 15px;
}
.purchased-item:not(:last-child) { border-bottom: 1px solid var(--divider-color); }
.purchased-info { display: flex; align-items: center; gap: 16px; flex-grow: 1; min-width: 0; }
.purchased-thumb { width: 48px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background-color: #eee; }
.purchased-meta { display: flex; flex-direction: column; gap: 6px; }
.purchased-title { font-size: 1.05rem; font-weight: 600; color: var(--primary-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.purchased-author { font-size: 0.85rem; color: var(--secondary-text); }

.download-capsule-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background-color: #e8f3ff; color: var(--accent-color);
    border-radius: 20px; padding: 8px 16px;
    font-size: 0.9rem; font-weight: 600; text-decoration: none;
    transition: background-color 0.2s, color 0.2s; flex-shrink: 0;
}
.download-capsule-btn:hover { background-color: var(--accent-color); color: #fff; }
.download-capsule-btn svg { width: 16px; height: 16px; }

.pagination-v2 { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.pagination-v2 .page-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 16px; background-color: var(--card-background);
    color: var(--primary-text); border: 1px solid var(--divider-color);
    border-radius: 8px; font-weight: 500; font-size: 0.9rem;
    text-decoration: none; transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.pagination-v2 .page-link:hover { background-color: #f0f2f5; border-color: #ccc; }
.pagination-v2 .page-link[disabled] { color: var(--secondary-text); background-color: #f8f9fa; border-color: #f1f2f3; pointer-events: none; opacity: 0.6; }
.pagination-v2 .page-link svg { width: 18px; height: 18px; }
.pagination-v2 .page-info { color: var(--secondary-text); font-size: 0.9rem; font-weight: 500; }

/* =================================================================
   15. 消息通知系统样式
================================================================= */
#page-profile .action-item .nav-icon-wrapper { gap: 15px; }
#page-profile .notification-dot-large {
    min-width: 18px; height: 18px; line-height: 18px;
    padding: 0 5px; background-color: var(--danger-color);
    color: white; border-radius: 10px; font-size: 11px;
    font-weight: bold; text-align: center; position: static; transform: none;
}

.bottom-nav .nav-icon-wrapper { position: relative; }
.bottom-nav .notification-dot {
    position: absolute; top: -2px; right: -4px;
    width: 8px; height: 8px; background-color: var(--danger-color);
    border-radius: 50%; border: 1px solid var(--card-background);
}

.notification-header-card { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; }
.notification-header-card h3 { margin: 0; font-size: 1.4rem; font-weight: 600; }

.mark-all-read-btn {
    background: none; border: 1px solid var(--divider-color);
    color: var(--secondary-text); padding: 6px 12px;
    border-radius: 8px; font-size: 0.85rem; cursor: pointer;
    transition: all 0.2s; white-space: nowrap;
}
.mark-all-read-btn:hover { background-color: #f0f2f5; color: var(--primary-text); }
.all-read-tip { font-size: 0.85rem; color: var(--success-color); white-space: nowrap; }

.notification-list-card { background: var(--card-background); border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); padding: 0; margin-top: 16px; }
.notification-item-v2 { padding: 20px 25px; }
.notification-item-v2:not(:last-child) { border-bottom: 1px solid var(--divider-color); }
.noti-sender-info { display: flex; align-items: center; gap: 16px; }
.noti-left { position: relative; flex-shrink: 0; }
.noti-avatar { width: 48px; height: 48px; border-radius: 50%; }
.unread-dot { position: absolute; top: 0; right: 0; width: 10px; height: 10px; background-color: var(--accent-color); border-radius: 50%; border: 2px solid var(--card-background); }
.noti-content { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; }
.noti-text { margin: 0; font-size: 0.95rem; color: var(--primary-text); line-height: 1.5; }
.noti-text .sender-name { font-weight: 600; }
.noti-time { font-size: 0.8rem; color: var(--secondary-text); }

.noti-comment-preview {
    margin-top: 15px; padding: 12px 15px; background-color: #f7f8fa;
    border-radius: 8px; font-size: 0.9rem; color: #4E5969;
    line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; word-break: break-all;
}

.noti-actions { margin-top: 15px; display: flex; justify-content: flex-end; }
.view-detail-btn {
    background-color: var(--accent-color); color: white;
    padding: 8px 20px; border-radius: 8px; font-size: 0.9rem;
    font-weight: 500; text-decoration: none; transition: background-color 0.2s;
}
.view-detail-btn:hover { background-color: #0045d8; }

.notification-badge-profile {
    background-color: var(--danger-color); color: white;
    height: 22px; line-height: 22px; padding: 0 10px;
    border-radius: 11px; font-size: 12px; font-weight: bold;
    white-space: nowrap; box-sizing: border-box;
}

.header-actions-group { display: flex; gap: 10px; }
.mark-all-read-btn.clear-btn { color: var(--danger-color); border-color: #ffd9d9; }
.mark-all-read-btn.clear-btn:hover { background-color: #fff1f0; }

/* =================================================================
   16. 发现页 v2.0 - 榜单中心样式
================================================================= */
#page-discover.container { padding: 0; }

.discover-search-hero {
    padding: 40px 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    text-align: center;
    margin-bottom: 30px;
    padding-top: calc(52px + 40px);
    margin-top: -52px;
}
body:has(.announcement-bar) .discover-search-hero { padding-top: calc(52px + 45px + 40px); }
.discover-search-hero .hero-content { max-width: 600px; margin: 0 auto; }
.discover-search-hero .hero-title { font-size: 2.2rem; font-weight: 700; margin: 0 0 10px 0; color: #1d2129; }
.discover-search-hero .hero-subtitle { font-size: 1rem; color: #4E5969; margin: 0 0 30px 0; }

.hero-search-bar form { position: relative; display: flex; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); border-radius: 12px; overflow: hidden; }
.hero-search-bar svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--secondary-text); }
.hero-search-bar input[type="search"] { flex-grow: 1; height: 56px; border: none; padding: 0 20px 0 50px; font-size: 1rem; background-color: #fff; }
.hero-search-bar input[type="search"]:focus { outline: none; }
.hero-search-bar .hero-search-btn { height: 56px; border: none; background-color: var(--accent-color); color: white; padding: 0 25px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.hero-search-bar .hero-search-btn:hover { background-color: #0045d8; }

.search-results-section, .ranking-center { padding: 0 16px; }

.search-results-section h3 { font-size: 1.5rem; margin-bottom: 20px; }

.section-divider { border: none; border-top: 1px solid var(--divider-color); margin: 40px 16px; }

.ranking-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--divider-color);
}
.ranking-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    background: none;
    font-size: 1rem;
    font-weight: 500;
    color: var(--secondary-text);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    margin-bottom: -1px;
}
.ranking-tab-btn.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}
.ranking-tab-btn svg { width: 20px; height: 20px; }

.ranking-chart { display: none; }
.ranking-chart.active { display: block; }

.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4%;
    padding: 40px 0;
    position: relative;
}
.podium-item {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 28%;
    max-width: 140px;
    background: none;
    box-shadow: none;
    padding: 0;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.podium-item.silver { order: 1; transform: translateY(15px); }
.podium-item.gold   { order: 2; transform: translateY(0px); }
.podium-item.bronze { order: 3; transform: translateY(25px); }

.podium-item.silver:hover { transform: translateY(5px); }
.podium-item.gold:hover   { transform: translateY(-10px); }
.podium-item.bronze:hover { transform: translateY(15px); }

.podium-cover {
    width: 100%;
    aspect-ratio: 1080 / 2400;
    object-fit: cover;
    border-radius: 14px;
    margin: 0 auto 10px auto;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.12));
}

.podium-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -10px;
    left: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    border: 2px solid white;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    z-index: 2;
}
.podium-item.gold .podium-rank { background: linear-gradient(135deg, #FFDF00, #FBB034); }
.podium-item.silver .podium-rank { background: linear-gradient(135deg, #E0E0E0, #BDBDBD); }
.podium-item.bronze .podium-rank { background: linear-gradient(135deg, #D29968, #A06B43); }

.podium-item::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 10%;
    right: 10%;
    height: 10px;
    background: #A3A3A3;
    border-radius: 50%;
    filter: blur(5px);
    opacity: 0.7;
    z-index: -1;
    transition: all 0.3s;
}
.podium-item:hover::after {
    transform: scale(1.15);
    opacity: 0.8;
}

.podium-title {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.podium-metric {
    font-size: 0.75rem;
    color: var(--secondary-text);
}

.ranking-toggle-wrapper {
    text-align: center;
    margin: 20px 0;
}
.ranking-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0f2f5;
    border: 1px solid var(--divider-color);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    color: var(--secondary-text);
    font-weight: 500;
}
.ranking-toggle-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s;
}
.ranking-toggle-btn.expanded svg {
    transform: rotate(180deg);
}

.ranking-full-list {
    display: none; /* 默认隐藏 */
    padding-top: 20px;
}
/* =================================================================
   18. 主题编辑器UI重构 (v2.0 - 移动端优化)
================================================================= */

/* 移除旧版 #preview-list 的样式，以防冲突 */
#preview-list .preview-item {
    /* 如果旧版有特定样式，可以在这里覆盖或移除，但我们新版使用新类名，冲突较小 */
}

/* 新版预览项卡片 */
.preview-item-v2 {
    background-color: #f7f8fa;
    border: 1px solid var(--divider-color);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

/* 拖拽时的占位符样式 */
.preview-item-v2.dragging {
    opacity: 0.5;
    background-color: #e8f3ff;
    border-style: dashed;
}

/* 卡片上半部分：拖动把手和内容区 */
.preview-item-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* 拖动把手 */
.preview-drag-handle {
    cursor: grab;
    color: var(--secondary-text);
    padding-top: 10px; /* 垂直居中对齐输入框 */
}
.preview-drag-handle:active {
    cursor: grabbing;
}

/* 内容区（输入框和状态） */
.preview-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 输入框和上传按钮的组合 */
.preview-input-group {
    display: flex;
    gap: 10px;
}
.preview-input-group input[type="text"] {
    flex-grow: 1;
    min-width: 0; /* 允许输入框在flex布局中收缩 */
}
.preview-input-group .upload-trigger-btn {
    flex-shrink: 0; /* 防止上传按钮被压缩 */
}

/* 上传状态文字 */
.upload-status {
    font-size: 0.8rem;
    min-height: 1.2em; /* 保证有高度，防止布局跳动 */
    padding-left: 2px;
}

/* 卡片下半部分：操作区 */
.preview-item-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--divider-color);
}

/* “设为封面”标签 */
.preview-item-actions .cover-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--primary-text);
}
.preview-item-actions .cover-radio-label input[type="radio"] {
    /* 美化单选框 */
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--secondary-text);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s;
}
.preview-item-actions .cover-radio-label input[type="radio"]:checked {
    border-color: var(--accent-color);
}
.preview-item-actions .cover-radio-label input[type="radio"]:checked::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: var(--accent-color);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 删除按钮 */
.preview-item-actions .delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.9rem;
    background-color: transparent;
    color: var(--danger-color);
    border: 1px solid transparent;
}
.preview-item-actions .delete-btn:hover {
    background-color: #fff1f0;
    border-color: #ffd9d9;
}
/* =================================================================
   18. 全局页脚 (Global Footer)
================================================================= */

.global-footer {
    /* 布局与间距 */
    padding: 20px 16px;
    margin-top: 35px; /* 与上方内容的间距 */
    text-align: center;
    
    /* 字体样式 */
    font-size: 13px; /* 关键：使用较小的字号 */
    line-height: 1.6; /* 保持良好的阅读行距 */
    color: var(--secondary-text); /* 使用次要文字颜色，不刺眼 */
}

.global-footer .footer-power-by {
    font-weight: 600; /* 略微加粗 */
    color: var(--primary-text); /* 使用主要文字颜色，突出品牌 */
    margin-bottom: 12px; /* 与下方声明的间距 */
    display: block; /* 确保独占一行 */
}

.global-footer .footer-disclaimer {
    font-size: 11px; /* 可以比驱动声明更小一点 */
    opacity: 0.8; /* 略微降低不透明度，使其更低调 */
}
/* =================================================================
   后台用户管理卡片 v4.0 样式 (最终版)
================================================================= */

/* 1. 卡片本身是一个简单的块级容器 */
.admin-card {
    background: var(--card-background);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 如果用户被封禁，给整个卡片一个视觉提示 */
.admin-card.banned {
    opacity: 0.7;
}
.admin-card.banned .admin-card-title {
    text-decoration: line-through;
}

/* 2. 【核心】让信息区成为 Flex 容器，容纳主信息和操作区 */
.admin-card-info {
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: flex-start;       /* 顶部对齐 */
    gap: 16px;                     /* 两者之间的间距 */
}

/* 3. 主信息区自动伸展，并垂直排列其内部的标题和元数据 */
.admin-card-main-info {
    flex-grow: 1;
    min-width: 0; /* 防止内容溢出 */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-card-title {
    font-weight: 600;
    font-size: 1rem;
    word-break: break-all;
}

.admin-card-subtitle {
    font-size: 0.8rem;
    color: var(--secondary-text);
}

.admin-card-meta {
    font-size: 0.85rem;
    color: var(--secondary-text);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 4. 垂直排列的操作区 */
.admin-card-actions-vertical {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0; /* 防止被压缩 */
    width: 90px;    /* 给一个合适的固定宽度 */
}

/* 5. 统一操作区内的按钮和表单样式 */
.admin-card-actions-vertical form,
.admin-card-actions-vertical .action-btn {
    width: 100%;
    margin: 0;
}

.admin-card-actions-vertical .action-btn {
    display: block;
    text-align: center;
    box-sizing: border-box;
    padding: 6px 12px; /* 统一内边距 */
    font-size: 0.8rem; /* 统一字体大小 */
}

/* 6. （自己）标签的样式 */
.admin-card-actions-vertical .self-tag {
    font-size: 0.8rem;
    color: var(--secondary-text);
    text-align: center;
    padding: 8px 0;
}
/* =================================================================
   全局公告弹窗 v2.0 美化样式
================================================================= */

/* 弹窗动画 */
.announcement-modal {
    animation: fadeIn 0.3s ease-out;
}

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

.announcement-modal .modal-content {
    animation: slideInUp 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

/* 弹窗头部 */
.announcement-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--divider-color);
}

.announcement-header svg {
    width: 28px;
    height: 28px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.announcement-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-text);
}

/* 弹窗内容区 */
.announcement-content-body {
    font-size: 0.95rem;
    color: #4E5969; /* 使用一个更柔和的灰色，易于阅读 */
    line-height: 1.7;
    margin-bottom: 30px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px; /* 为滚动条留出空间 */
}

/* “我知道了”按钮 */
.announcement-close-btn {
    width: 100%;
    margin-top: 0; /* 移除可能存在的上边距 */
}
/* =================================================================
   19. 全新顶部导航栏 (v2.1 - 无缝集成版)
================================================================= */

/* 让 top-header 支持 flex 布局 */
.top-header {
    display: flex;
    justify-content: space-between; /* 左右两端对齐 */
    align-items: center;
    height: 60px; /* 增加一点高度 */
    padding: 0 16px;
}

/* 隐藏旧的居中标题 */
.top-header .header-title {
    display: none;
}

/* 左侧容器 */
.header-left-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-logo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-text);
}

.header-main-nav {
    display: flex;
    gap: 20px;
}

.header-main-nav .nav-link {
    font-size: 1rem;
    font-weight: 500;
    color: var(--secondary-text);
    transition: color 0.2s;
}
.header-main-nav .nav-link:hover {
    color: var(--primary-text);
}
.header-main-nav .nav-link.active {
    color: var(--accent-color);
    font-weight: 600;
}

/* 右侧容器 */
.header-right-group {
    display: flex;
    align-items: center;
}

.header-search-form {
    position: relative;
}

.header-search-form input {
    height: 36px;
    width: 200px;
    border-radius: 18px;
    border: 1px solid var(--divider-color);
    background-color: #f0f2f5;
    padding: 0 15px 0 40px;
    transition: width 0.3s ease;
}
.header-search-form input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.header-search-form svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--secondary-text);
    stroke-width: 2;
}

/* 适配移动端 */
@media (max-width: 768px) {
    .header-main-nav { gap: 15px; }
    .header-search-form input { width: 120px; }
}


/* =================================================================
   20. 新页面专属样式 (专题页 & 设计师页)
================================================================= */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.designer-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.designer-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--card-background);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}
.designer-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.designer-rank {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary-text);
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}
.designer-card.rank-1 .designer-rank { color: #FFD700; }
.designer-card.rank-2 .designer-rank { color: #C0C0C0; }
.designer-card.rank-3 .designer-rank { color: #CD7F32; }

.designer-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.designer-info {
    flex-grow: 1;
    min-width: 0;
}

.designer-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.designer-stats {
    font-size: 0.8rem;
    color: var(--secondary-text);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.designer-stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.designer-stats svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.5;
}
/* =================================================================
   21. 全屏专题页 (topics_all.php) v2.2 固定高度最终版
================================================================= */

/* 专题页面的容器，保持不变 */
.topics-page-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 【核心修正】大图专题卡片样式 */
.topic-showcase-card {
    position: relative;
    display: block;
    width: 100%;
    height: 380px; /* 【关键】设置一个固定的、足够大的高度 */
    border-radius: 16px;
    overflow: hidden;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.topic-showcase-card:hover {
    transform: translateY(-5px);
}

/* 【核心修正】img 标签样式 */
.topic-showcase-card .background-image-tag {
    display: block;
    width: 100%;
    height: 100%; /* 【关键】让图片高度充满整个卡片容器 */
    object-fit: cover; /* 【关键】保持比例、填满容器、允许裁剪 */
    transition: transform 0.4s ease-out;
}

.topic-showcase-card:hover .background-image-tag {
    transform: scale(1.05);
}

/* 渐变遮罩层，保持不变 */
.topic-showcase-card .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    z-index: 1;
}

/* 文字内容及其他样式，保持不变 */
.topic-showcase-card .content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    z-index: 2;
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}
.topic-showcase-card .subtitle {
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0 0 4px 0;
    opacity: 0.9;
}
.topic-showcase-card .main-title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 8px 0;
}
.topic-showcase-card .description {
    font-size: 0.95rem;
    opacity: 0.85;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* =================================================================
   23. 导航栏 v2.4 (Logo分离与指示符)
================================================================= */

/* 1. 左侧容器的对齐方式调整 */
.header-left-group {
    display: flex;
    align-items: center; /* 确保Logo和导航菜单垂直居中 */
    gap: 15px;
}

/* 2. 独立Logo链接的样式 */
.header-logo-link {
    display: flex; /* 让图片在链接内也垂直居中 */
    align-items: center;
}
.header-logo-link img {
    height: 36px; /* 可以稍微调大一点，因为它现在是独立的 */
    width: auto;
}

/* 3. 主导航容器的样式 */
.header-main-nav {
    display: flex;
    align-items: center;
    gap: 10px; /* 加大按钮之间的间距 */
}

/* 4. 【核心】导航链接和指示符样式 */
.header-main-nav .nav-link {
    position: relative; /* 为指示符的绝对定位做准备 */
    padding: 8px 4px; /* 增加一点垂直内边距，方便点击 */
    font-size: 1rem;
    font-weight: 500;
    color: var(--secondary-text);
    text-decoration: none;
    transition: color 0.2s;
}
.header-main-nav .nav-link:hover {
    color: var(--primary-text);
}

/* 激活状态的文字颜色 */
.header-main-nav .nav-link.active {
    color: var(--primary-text);
    font-weight: 600;
}

/* 激活状态的指示符横条 */
.header-main-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0; /* 定位到链接底部 */
    left: 0;
    width: 100%; /* 宽度与文字相同 */
    height: 3px; /* 横条高度 */
    background-color: var(--accent-color); /* 使用您网站的主题色 */
    border-radius: 1.5px;
    
    /* 添加一个漂亮的动画效果 */
    animation: slide-in-indicator 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes slide-in-indicator {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}
/* =================================================================
   27. 首页快捷入口 v2.1 (彩色背景最终版)
================================================================= */

/* 容器布局保持不变 */
.simple-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 8px 0;
    margin-bottom: 10px;
}

.simple-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

/* 【核心修改】图标容器样式 */
.simple-action-item .icon-wrapper {
    width: 64px;
    height: 64px;
    /* 移除固定的 background-color，改由内联样式提供 */
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 加一点默认阴影 */
}

.simple-action-item:hover .icon-wrapper {
    transform: scale(1.1);
    /* 悬浮时阴影颜色与背景色关联，更具质感 */
    box-shadow: 0 8px 20px -5px var(--action-color, rgba(0,0,0,0.3));
}

/* 【核心修改】SVG图标样式 */
.simple-action-item .icon-wrapper svg {
    width: 32px;
    height: 32px;
    color: #ffffff; /* 【关键】将图标颜色设置为纯白 */
    stroke-width: 2; /* 确保所有图标线条粗细一致 */
}

/* 文字标签样式保持不变 */
.simple-action-item .label {
    font-size: 13px;
    font-weight: 500;
    color: var(--secondary-text);
}
/* =================================================================
   28. 登录提示卡片图片全宽优化 (最终版)
================================================================= */

/* 1. 修改卡片本身，移除顶部内边距，并为负外边距做准备 */
.login-prompt-card {
    padding-top: 0;    /* 移除顶部的 40px 内边距 */
    overflow: hidden;  /* 【关键】防止图片的负外边距导致页面出现横向滚动条 */
}

/* 2. 对图片应用负外边距和圆角 */
.login-prompt-card .prompt-image {
    /* --- 核心代码开始 --- */
    
    /* 使用负外边距向左右和顶部“拉伸”图片 */
    margin-left: -20px;   /* 抵消卡片 20px 的左内边距 */
    margin-right: -20px;  /* 抵消卡片 20px 的右内边距 */
    margin-top: 0;        /* 因为我们已经移除了卡片的上内边距，这里设为0 */

    /* 重新计算图片宽度，让它填满被拉伸的空间 */
    /* 宽度 = 100% (卡片内部宽度) + 20px (左边) + 20px (右边) */
    width: calc(100% + 40px); 
    
    /* --- 核心代码结束 --- */

    
    /* --- 保持和优化现有样式 --- */
    height: auto;             /* 高度自适应 */
    max-width: none;          /* 【重要】覆盖您之前设置的 max-width: 250px，否则无法撑满 */
    object-fit: cover;        /* 如果图片比例不合适，确保它能不变形地覆盖区域 */
    display: block;           /* 消除图片下方的幽灵间距 */
    
    /* 让图片的顶部圆角与卡片一致 (您的卡片 border-radius 是 16px) */
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0;  /* 确保底部是直角 */
    border-bottom-right-radius: 0; /* 确保底部是直角 */

    /* 保持图片和下方文字的间距 */
    margin-bottom: 25px; 
}