/* 糖心vlog 全新原创样式 - 深紫渐变主题 */
:root{--primary:#9B59B6;--secondary:#E74C3C;--accent:#F39C12;--dark:#2C3E50;--light:#ECF0F1;--gradient:linear-gradient(135deg,#9B59B6 0%,#E74C3C 100%)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Microsoft YaHei',sans-serif;background:#FAFAFA;color:#333;line-height:1.6}
a{text-decoration:none;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 15px}

/* 头部导航 */
.hd{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08);position:sticky;top:0;z-index:100}
.hd-in{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:8px}
.logo img{width:40px;height:40px;border-radius:10px}
.logo span{font-size:1.3rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav{display:flex;gap:25px}
.nav a{font-size:.95rem;color:#555;transition:.3s}
.nav a:hover,.nav a.on{color:var(--primary);font-weight:600}
.menu-btn{display:none;flex-direction:column;gap:5px;cursor:pointer}
.menu-btn span{width:25px;height:3px;background:#333;border-radius:2px}

/* 面包屑 */
.crumb{background:#F8F9FA;padding:10px 0;font-size:.85rem}
.crumb-list{display:flex;gap:8px;list-style:none}
.crumb-list a{color:#666}
.crumb-list a:hover{color:var(--primary)}
.crumb-list .cur{color:var(--primary)}

/* 横幅区域 */
.banner{background:var(--gradient);padding:60px 0;color:#fff;text-align:center}
.banner h1{font-size:2.5rem;margin-bottom:15px}
.banner p{font-size:1.1rem;opacity:.9;max-width:600px;margin:0 auto 25px}
.banner .btn{display:inline-block;background:#fff;color:var(--primary);padding:12px 30px;border-radius:25px;font-weight:600;transition:.3s}
.banner .btn:hover{transform:translateY(-3px);box-shadow:0 5px 20px rgba(0,0,0,.2)}

/* 视频卡片 */
.vcard{position:relative;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 3px 15px rgba(0,0,0,.08);transition:.3s}
.vcard:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,.12)}
.vcard-img{position:relative;padding-top:56.25%;overflow:hidden}
.vcard-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.vcard-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background:rgba(155,89,182,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:.3s}
.vcard:hover .vcard-play{opacity:1}
.vcard-play::after{content:'';border:12px solid transparent;border-left:18px solid #fff;margin-left:5px}
.vcard-info{padding:15px}
.vcard-info h3{font-size:1rem;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcard-info p{font-size:.85rem;color:#888}
.vcard-tag{position:absolute;top:10px;left:10px;background:var(--secondary);color:#fff;padding:3px 10px;border-radius:15px;font-size:.75rem}

/* 栏目区块 */
.sec{padding:50px 0}
.sec-hd{text-align:center;margin-bottom:35px}
.sec-tag{display:inline-block;background:var(--gradient);color:#fff;padding:5px 15px;border-radius:15px;font-size:.8rem;margin-bottom:10px}
.sec-hd h2{font-size:1.8rem;color:var(--dark);margin-bottom:8px}
.sec-hd p{color:#777;font-size:.95rem}

/* 视频网格 */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* 特色卡片 */
.fcard{background:#fff;border-radius:15px;padding:25px;text-align:center;box-shadow:0 3px 15px rgba(0,0,0,.06);transition:.3s}
.fcard:hover{transform:translateY(-5px)}
.fcard-icon{font-size:2.5rem;margin-bottom:15px}
.fcard h3{font-size:1.1rem;margin-bottom:10px;color:var(--dark)}
.fcard p{font-size:.9rem;color:#777}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* 专家卡片 */
.expert{background:#fff;border-radius:15px;padding:20px;text-align:center;box-shadow:0 3px 15px rgba(0,0,0,.06)}
.expert img{width:100px;height:100px;border-radius:50%;object-fit:cover;margin-bottom:15px;border:3px solid var(--primary)}
.expert h4{font-size:1rem;margin-bottom:5px}
.expert span{font-size:.85rem;color:var(--primary)}
.expert p{font-size:.85rem;color:#777;margin-top:8px}
.egrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* 统计数据 */
.stats{background:var(--gradient);padding:40px 0;color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat-item h3{font-size:2.5rem;font-weight:700}
.stat-item p{font-size:.9rem;opacity:.9}

/* 页脚 */
.ft{background:var(--dark);color:#fff;padding:40px 0 20px}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:30px}
.ft-col h4{font-size:1.1rem;margin-bottom:15px}
.ft-col p,.ft-col a{font-size:.9rem;color:#aaa;display:block;margin-bottom:8px}
.ft-col a:hover{color:#fff}
.ft-logo{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.ft-logo img{width:35px;height:35px;border-radius:8px}
.ft-logo span{font-size:1.2rem;font-weight:700}
.ft-btm{border-top:1px solid #444;padding-top:20px;text-align:center;font-size:.85rem;color:#888}

/* 页面头部 */
.page-hd{background:var(--gradient);padding:50px 0;color:#fff;text-align:center}
.page-hd h1{font-size:2rem;margin-bottom:10px}
.page-hd p{opacity:.9}

/* 社区卡片 */
.ccard{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 3px 15px rgba(0,0,0,.06)}
.ccard img{width:100%;height:180px;object-fit:cover}
.ccard-info{padding:20px}
.ccard-info h3{font-size:1.1rem;margin-bottom:10px}
.ccard-info p{font-size:.9rem;color:#777;margin-bottom:15px}
.ccard .btn{display:inline-block;background:var(--gradient);color:#fff;padding:8px 20px;border-radius:20px;font-size:.85rem}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* 工具卡片 */
.tcard{background:#fff;border-radius:12px;padding:20px;text-align:center;box-shadow:0 3px 15px rgba(0,0,0,.06);transition:.3s}
.tcard:hover{transform:translateY(-3px)}
.tcard-icon{font-size:2rem;margin-bottom:12px}
.tcard h3{font-size:1rem;margin-bottom:8px}
.tcard p{font-size:.85rem;color:#777}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}

/* 联系信息 */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.contact-info h3{font-size:1.3rem;margin-bottom:20px}
.contact-item{display:flex;gap:15px;margin-bottom:20px}
.contact-icon{font-size:1.5rem}
.contact-item h4{font-size:1rem;margin-bottom:3px}
.contact-item p{font-size:.9rem;color:#777}
.contact-img img{width:100%;border-radius:15px}

/* 响应式 */
@media(max-width:992px){
.vgrid,.egrid{grid-template-columns:repeat(2,1fr)}
.fgrid,.cgrid{grid-template-columns:repeat(2,1fr)}
.tgrid{grid-template-columns:repeat(2,1fr)}
.ft-grid{grid-template-columns:1fr 1fr}
.stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
.nav{display:none}
.menu-btn{display:flex}
.banner h1{font-size:1.8rem}
.vgrid,.fgrid,.egrid,.cgrid{grid-template-columns:1fr}
.tgrid{grid-template-columns:repeat(2,1fr)}
.contact-grid{grid-template-columns:1fr}
.ft-grid{grid-template-columns:1fr}
.stats-grid{grid-template-columns:1fr}
}