/* 糖心vlog - 全站样式 */
:root{--primary:#e91e8c;--secondary:#ff6b9d;--dark:#1a1a2e;--light:#f8f9fa;--text:#333;--gray:#666}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--text);line-height:1.6;background:var(--light)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* 头部 */
.header{background:var(--dark);padding:15px 0;position:sticky;top:0;z-index:1000}
.header .container{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:bold;font-size:18px}
.logo img{height:40px;width:auto}
.main-nav ul{display:flex;list-style:none;gap:30px}
.main-nav a{color:#fff;padding:8px 0;transition:color .3s}
.main-nav a:hover,.main-nav a.active{color:var(--primary)}
.header-right{display:flex;gap:15px}
.btn-login,.btn-register{padding:8px 20px;border-radius:20px;font-size:14px}
.btn-login{color:#fff;border:1px solid #fff}
.btn-register{background:var(--primary);color:#fff}

/* 搜索栏 */
.search-bar{background:#fff;padding:20px 0;border-bottom:1px solid #eee}
.search-form{display:flex;max-width:600px;margin:0 auto}
.search-input{flex:1;padding:12px 20px;border:2px solid #eee;border-radius:25px 0 0 25px;font-size:14px}
.search-btn{padding:12px 30px;background:var(--primary);color:#fff;border:none;border-radius:0 25px 25px 0;cursor:pointer}
.hot-tags{text-align:center;margin-top:10px;font-size:13px;color:var(--gray)}
.hot-tags a{color:var(--primary);margin:0 8px}

/* 面包屑 */
.breadcrumb{padding:15px 0;font-size:14px;color:var(--gray);background:#fff}
.breadcrumb a{color:var(--primary)}

/* 页面标题 */
.page-header{padding:40px 0;background:linear-gradient(135deg,var(--dark) 0%,#16213e 100%);color:#fff}
.page-header.center{text-align:center}
.page-header h1{font-size:32px;margin-bottom:10px}
.page-header p{opacity:.8}

/* Hero区域 */
.hero{padding:60px 0;background:linear-gradient(135deg,var(--dark) 0%,#16213e 100%);color:#fff}
.hero .container{display:flex;align-items:center;gap:50px}
.hero-content{flex:1}
.hero h1{font-size:36px;margin-bottom:15px}
.hero-subtitle{font-size:18px;color:var(--secondary);margin-bottom:15px}
.hero-desc{opacity:.8;margin-bottom:25px}
.hero-btns{display:flex;gap:15px;margin-bottom:30px}
.btn-primary{background:var(--primary);color:#fff;padding:12px 30px;border-radius:25px;font-weight:bold}
.btn-secondary{border:2px solid #fff;color:#fff;padding:12px 30px;border-radius:25px}
.hero-stats{display:flex;gap:40px}
.stat-item{text-align:center}
.stat-num{display:block;font-size:24px;font-weight:bold;color:var(--secondary)}
.stat-label{font-size:13px;opacity:.7}
.hero-image{flex:1}
.hero-image img{border-radius:15px}

/* 通用区块 */
section{padding:60px 0}
.section-header{text-align:center;margin-bottom:40px}
.section-header h2{font-size:28px;margin-bottom:10px}
.section-header p{color:var(--gray)}

/* 视频网格 */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:25px}
.video-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 15px rgba(0,0,0,.08);transition:transform .3s}
.video-card:hover{transform:translateY(-5px)}
.video-thumb{position:relative;padding-top:56.25%;overflow:hidden}
.video-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;background:rgba(233,30,140,.9);border-radius:50%;opacity:0;transition:opacity .3s;cursor:pointer}
.play-btn::after{content:"";position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);border:8px solid transparent;border-left:12px solid #fff}
.video-thumb:hover .play-btn{opacity:1}
.video-duration{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.7);color:#fff;padding:3px 8px;border-radius:4px;font-size:12px}
.video-tag{position:absolute;top:10px;left:10px;background:var(--primary);color:#fff;padding:3px 10px;border-radius:4px;font-size:12px}
.video-info{padding:15px}
.video-info h3{font-size:15px;margin-bottom:8px;line-height:1.4}
.video-meta{font-size:13px;color:var(--gray);display:flex;gap:15px;margin-bottom:5px}
.video-author{font-size:13px;color:var(--primary)}

/* 分类网格 */
.category-grid,.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:25px}
.category-card,.tool-card,.feature-card{background:#fff;padding:30px;border-radius:12px;text-align:center;box-shadow:0 2px 15px rgba(0,0,0,.08);transition:transform .3s}
.category-card:hover,.tool-card:hover{transform:translateY(-5px)}
.category-icon,.tool-icon,.feature-icon{font-size:40px;margin-bottom:15px}
.category-card h3,.tool-card h3{font-size:18px;margin-bottom:10px}
.category-card p,.tool-card p{color:var(--gray);font-size:14px;margin-bottom:15px}
.category-count{color:var(--primary);font-size:13px;font-weight:bold}
.tool-btn,.feature-link{display:inline-block;padding:8px 20px;background:var(--primary);color:#fff;border-radius:20px;font-size:13px;margin-top:10px}
.tool-features{list-style:none;text-align:left;font-size:13px;color:var(--gray);margin:15px 0}
.tool-features li{padding:5px 0;border-bottom:1px dashed #eee}

/* 专家区域 */
.expert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:30px}
.expert-card{display:flex;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 15px rgba(0,0,0,.08)}
.expert-card img{width:150px;height:200px;object-fit:cover}
.expert-info{padding:20px;flex:1}
.expert-info h3{font-size:18px;margin-bottom:5px}
.expert-title{color:var(--primary);font-size:13px;margin-bottom:10px}
.expert-desc{font-size:13px;color:var(--gray);margin-bottom:10px}
.expert-tags{display:flex;gap:8px;flex-wrap:wrap}
.expert-tags span{background:var(--light);padding:4px 10px;border-radius:15px;font-size:12px}

/* AI工具区域 */
.ai-tools{background:var(--dark);color:#fff}
.ai-content{display:flex;align-items:center;gap:50px}
.ai-text{flex:1}
.ai-text h2{font-size:28px;margin-bottom:15px}
.ai-features{list-style:none;margin:20px 0}
.ai-features li{padding:8px 0;padding-left:25px;position:relative}
.ai-features li::before{content:"✓";position:absolute;left:0;color:var(--secondary)}
.ai-image{flex:1}
.ai-image img{border-radius:15px}

/* 评价区域 */
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:25px}
.testimonial-card{background:#fff;padding:25px;border-radius:12px;box-shadow:0 2px 15px rgba(0,0,0,.08)}
.testimonial-content{font-style:italic;margin-bottom:15px;color:var(--gray)}
.testimonial-author{border-top:1px solid #eee;padding-top:15px}
.author-name{font-weight:bold;display:block}
.author-role{font-size:13px;color:var(--gray)}
.rating{color:#ffc107;margin-top:5px}

/* 步骤区域 */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:25px}
.step-card{text-align:center;padding:30px 20px}
.step-num{font-size:36px;font-weight:bold;color:var(--primary);margin-bottom:15px}
.step-card h3{font-size:16px;margin-bottom:10px}
.step-card p{font-size:13px;color:var(--gray)}

/* 工具Hero */
.tools-hero{display:flex;align-items:center;gap:50px;background:#fff;padding:40px;border-radius:15px}
.tools-hero-content{flex:1}
.tools-hero-content h2{font-size:28px;margin-bottom:15px}
.tools-highlights{list-style:none;margin:20px 0}
.tools-highlights li{padding:8px 0;padding-left:25px;position:relative}
.tools-highlights li::before{content:"✓";position:absolute;left:0;color:var(--primary)}
.tools-hero-image{flex:1}
.tools-hero-image img{border-radius:15px}
.btn-large{padding:15px 40px;font-size:16px}

/* 筛选栏 */
.filter-section{padding:20px 0;background:#fff}
.filter-bar{display:flex;gap:15px;flex-wrap:wrap;justify-content:center}
.filter-btn{padding:8px 20px;border:1px solid #eee;border-radius:20px;background:#fff;cursor:pointer;transition:all .3s}
.filter-btn:hover,.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* 页脚 */
.footer{background:var(--dark);color:#fff;padding:50px 0 20px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:30px}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.footer-logo img{height:33px}
.footer-desc{font-size:13px;opacity:.7;margin-bottom:15px}
.footer-contact{font-size:13px;opacity:.7}
.footer-contact p{margin-bottom:5px}
.footer-col h4{margin-bottom:20px;font-size:16px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px}
.footer-col a{font-size:14px;opacity:.7;transition:opacity .3s}
.footer-col a:hover{opacity:1}
.qrcode-grid{display:flex;gap:15px}
.qrcode-item{text-align:center}
.qrcode-item img{width:80px;height:80px;border-radius:8px;margin-bottom:5px}
.qrcode-item span{font-size:12px;opacity:.7}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;opacity:.7}
.update-time{margin-top:5px}

/* 响应式 */
@media(max-width:768px){
.header .container{flex-wrap:wrap}
.main-nav{order:3;width:100%;margin-top:15px}
.main-nav ul{justify-content:center;gap:15px;flex-wrap:wrap}
.hero .container,.ai-content,.tools-hero{flex-direction:column}
.hero-image,.ai-image,.tools-hero-image{order:-1}
.footer-grid{grid-template-columns:1fr}
.expert-card{flex-direction:column}
.expert-card img{width:100%;height:200px}
}