/* ===== 全站设计令牌 ===== */
:root{
    --token-bg-base:#f0fdf4;
    --token-bg-card:rgba(255,255,255,.72);
    --token-bg-container:#ffffff;
    --token-text-primary:#1c2530;
    --token-text-secondary:#516070;
    --token-text-muted:#8b97a5;
    --token-border-light:#e4ecf2;
    --token-shadow-soft:0 8px 30px rgba(40,80,60,.07);
    --token-shadow-hover:0 16px 40px rgba(40,80,60,.11);
    --token-gradient-brand:linear-gradient(135deg,#a7f3d0,#c7d2fe);
    --token-gradient-accent:linear-gradient(135deg,#10b981,#7c5cff);
    --token-radius-card:24px;
    --token-radius-pill:999px;
    --token-transition:.3s cubic-bezier(.25,.46,.45,.94);
    --token-font-body:'Segoe UI',Roboto,'Noto Sans',system-ui,sans-serif;
    --token-max-width:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--token-bg-base);font-family:var(--token-font-body);color:var(--token-text-primary);padding:0 16px;line-height:1.8}
.container{max-width:var(--token-max-width);margin:0 auto;background:var(--token-bg-container);border-radius:var(--token-radius-card);box-shadow:var(--token-shadow-soft);padding:24px 28px 12px}
h1{display:none!important;visibility:hidden!important;opacity:0!important;width:0!important;height:0!important;overflow:hidden!important;position:absolute!important;z-index:-9999!important;pointer-events:none!important}

/* 导航 */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0 16px;border-bottom:1px solid var(--token-border-light);flex-wrap:wrap;gap:12px 20px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--token-text-primary);font-weight:700;font-size:1.3rem}
.logo-icon{width:42px;height:42px;background:var(--token-gradient-accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;box-shadow:0 2px 8px rgba(16,185,129,.25)}
.nav-links{display:flex;gap:20px;font-size:.95rem}
.nav-links a{text-decoration:none;color:var(--token-text-secondary);transition:var(--token-transition);border-bottom:2px solid transparent;padding-bottom:4px}
.nav-links a:hover{color:var(--token-text-primary);border-bottom-color:#10b981}
@media(max-width:700px){.navbar{flex-direction:column;align-items:flex-start}.nav-links{flex-wrap:wrap;gap:10px 16px}}

/* Banner */
#section-banner{background:var(--token-gradient-brand);border-radius:var(--token-radius-card);padding:48px 32px;margin:28px 0 32px;text-align:center;color:#1c2530;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.45) 0%,transparent 60%)}
#section-banner h2{font-size:2.4rem;font-weight:800;letter-spacing:-.5px;background:var(--token-gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#section-banner p{font-size:1.1rem;color:var(--token-text-secondary);margin:12px auto 24px;max-width:640px}
.search-wrap{display:flex;max-width:500px;margin:0 auto 20px;border-radius:var(--token-radius-pill);background:#fff;border:1px solid var(--token-border-light);overflow:hidden}
.search-wrap input{flex:1;border:none;padding:12px 20px;font-size:.95rem;outline:none;background:transparent;color:var(--token-text-primary)}
.search-wrap input::placeholder{color:var(--token-text-muted)}
.search-wrap button{background:var(--token-gradient-accent);border:none;padding:0 24px;font-weight:600;color:#fff;cursor:pointer;transition:var(--token-transition)}
.search-wrap button:hover{opacity:.85}
.topic-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px}
.topic-tags span{background:rgba(255,255,255,.7);backdrop-filter:blur(4px);padding:6px 18px;border-radius:var(--token-radius-pill);border:1px solid rgba(255,255,255,.4);font-size:.85rem;color:var(--token-text-secondary)}
@media(max-width:600px){#section-banner{padding:32px 20px}#section-banner h2{font-size:1.8rem}}

/* 分类 */
#section-category{margin:40px 0 32px;padding:28px 24px;background:var(--token-bg-card);border-radius:var(--token-radius-card);border:1px solid var(--token-border-light)}
.category-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.category-header h2{font-size:1.6rem;font-weight:700;background:var(--token-gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.category-header .sub{color:var(--token-text-muted);font-size:.9rem}
.category-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:16px;margin-top:12px}
.category-item{text-align:center;padding:12px 4px;border-radius:var(--token-radius-card);background:#fff;border:1px solid var(--token-border-light);transition:var(--token-transition)}
.category-item:hover{transform:translateY(-4px);box-shadow:var(--token-shadow-hover);border-color:#10b981}
.category-item .icon{font-size:2rem;display:block;margin-bottom:4px}
.category-item span{font-size:.8rem;color:var(--token-text-secondary)}
@media(max-width:900px){.category-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:550px){.category-grid{grid-template-columns:repeat(3,1fr)}}

/* 推荐 */
#section-recommend{margin:40px 0 32px}
.recommend-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.recommend-header h2{font-size:1.6rem;font-weight:700;background:var(--token-gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.recommend-header .more{background:var(--token-gradient-accent);color:#fff;border:none;padding:8px 20px;border-radius:var(--token-radius-pill);font-weight:600;cursor:pointer;transition:var(--token-transition)}
.recommend-header .more:hover{opacity:.85}
.recommend-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.rec-card{background:var(--token-bg-card);border-radius:var(--token-radius-card);overflow:hidden;border:1px solid var(--token-border-light);transition:var(--token-transition)}
.rec-card:hover{transform:translateY(-6px);box-shadow:var(--token-shadow-hover);border-color:#10b981}
.rec-cover{height:180px;display:flex;align-items:center;justify-content:center;position:relative}
.play-btn{width:48px;height:48px;background:rgba(255,255,255,.85);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#1c2530;transition:var(--token-transition);cursor:pointer}
.play-btn:hover{transform:scale(1.08)}
.rec-tag{position:absolute;top:10px;left:10px;background:rgba(16,185,129,.9);color:#fff;padding:2px 12px;border-radius:20px;font-size:.7rem;font-weight:600}
.rec-status{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;padding:2px 12px;border-radius:20px;font-size:.7rem}
.rec-info{padding:14px 16px}
.rec-info h3{font-weight:700;font-size:1rem;margin-bottom:4px}
.rec-info .meta{display:flex;gap:12px;color:var(--token-text-muted);font-size:.8rem}
@media(max-width:900px){.recommend-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:550px){.recommend-grid{grid-template-columns:1fr}}

/* 简介 */
#section-intro{margin:40px 0 32px;padding:32px 28px;background:var(--token-bg-card);border-radius:var(--token-radius-card);border:1px solid var(--token-border-light)}
.section-header{text-align:center;margin-bottom:28px}
.section-header h2{font-size:2rem;font-weight:700}
.section-header h2 span{background:var(--token-gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-header .sub{color:var(--token-text-muted);font-size:.95rem;margin-top:4px}
.intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.intro-item{background:#fff;padding:20px 18px;border-radius:var(--token-radius-card);border:1px solid var(--token-border-light);transition:var(--token-transition)}
.intro-item:hover{transform:translateY(-4px);box-shadow:var(--token-shadow-hover)}
.intro-item .icon{font-size:2rem;display:block;margin-bottom:8px}
.intro-item h3{font-size:1.1rem;margin-bottom:6px}
.intro-item p{color:var(--token-text-secondary);font-size:.95rem}
@media(max-width:900px){.intro-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:550px){.intro-grid{grid-template-columns:1fr}}

/* 视频 */
#section-video{margin:40px 0 32px}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.video-card{background:var(--token-bg-card);border-radius:var(--token-radius-card);overflow:hidden;border:1px solid var(--token-border-light);transition:var(--token-transition)}
.video-card:hover{transform:translateY(-6px);box-shadow:var(--token-shadow-hover);border-color:#10b981}
.video-thumbnail{height:160px;display:flex;align-items:center;justify-content:center;position:relative;color:#fff;font-weight:600}
.vc-cat{position:absolute;top:10px;left:12px;background:rgba(0,0,0,.45);padding:2px 12px;border-radius:20px;font-size:.72rem}
.video-duration{position:absolute;bottom:10px;right:12px;background:rgba(0,0,0,.6);color:#fff;padding:2px 12px;border-radius:20px;font-size:.75rem}
.video-info{padding:16px 16px 14px}
.video-title{font-weight:700;font-size:1rem;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-meta{display:flex;gap:16px;color:var(--token-text-muted);font-size:.8rem}
.video-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.video-tags span{background:var(--token-border-light);padding:2px 12px;border-radius:20px;font-size:.7rem}
.video-tags .tag-main{background:var(--token-gradient-accent);color:#fff}
@media(max-width:900px){.video-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:550px){.video-grid{grid-template-columns:1fr}}

/* 资讯 */
#section-news{margin:40px 0 32px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.news-card{background:var(--token-bg-card);border-radius:var(--token-radius-card);padding:20px 18px;border:1px solid var(--token-border-light);transition:var(--token-transition)}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--token-shadow-hover);border-color:#10b981}
.news-date{color:#10b981;font-size:.8rem;font-weight:600}
.news-card h3{font-weight:700;font-size:1rem;margin:8px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.news-card p{color:var(--token-text-secondary);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-link{color:var(--token-text-muted);font-size:.85rem;display:inline-block;margin-top:10px;text-decoration:none}
.news-link:hover{color:#10b981}
@media(max-width:900px){.news-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:550px){.news-grid{grid-template-columns:1fr}}

/* 评论 */
#section-comment{margin:40px 0 32px;padding:28px 24px;background:var(--token-bg-card);border-radius:var(--token-radius-card);border:1px solid var(--token-border-light)}
.comment-form{background:#fff;padding:20px;border-radius:var(--token-radius-card);margin-bottom:28px}
.comment-form input,.comment-form textarea{width:100%;padding:12px 16px;border:1px solid var(--token-border-light);border-radius:var(--token-radius-pill);margin-bottom:12px;font-family:inherit;font-size:.95rem;background:var(--token-bg-base)}
.comment-form textarea{min-height:80px;border-radius:var(--token-radius-card);resize:vertical}
.comment-form button{background:var(--token-gradient-accent);border:none;padding:10px 28px;border-radius:var(--token-radius-pill);color:#fff;font-weight:600;cursor:pointer;transition:var(--token-transition)}
.comment-form button:hover{opacity:.85}
.comment-list{max-height:600px;overflow-y:auto;padding-right:6px}
.comment-item{background:#fff;padding:16px 18px;border-radius:var(--token-radius-card);margin-bottom:12px;border:1px solid var(--token-border-light);transition:var(--token-transition)}
.comment-item:hover{border-color:#10b981}
.comment-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-bottom:6px}
.comment-user{font-weight:700;color:var(--token-text-primary)}
.comment-time{color:var(--token-text-muted);font-size:.8rem}
.comment-tags{display:flex;flex-wrap:wrap;gap:4px 8px;margin:6px 0 8px}
.comment-tags span{background:var(--token-border-light);padding:0 12px;border-radius:20px;font-size:.7rem}
.comment-body{color:var(--token-text-secondary);font-size:.95rem}
.comment-actions{display:flex;gap:20px;margin-top:8px;font-size:.85rem;color:var(--token-text-muted)}

/* Footer */
#section-footer{margin-top:40px;padding:24px 0 12px;border-top:1px solid var(--token-border-light);text-align:center;color:var(--token-text-secondary);font-size:.9rem}
#section-footer small{display:block;margin-top:6px;opacity:.7;font-size:.75rem}
@media(max-width:700px){.container{padding:16px 14px}.section-header h2{font-size:1.6rem}}