/* 困困兔 - 汽车改装视频社区 原创样式表 */
/* 配色：深邃夜蓝 #1A1F35 | 赛车红 #E84545 | 琥珀金 #F5A623 | 碳纤维黑 #0D1117 */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;background:#0D1117;color:#E8ECF1;line-height:1.7}
a{color:#E84545;text-decoration:none;transition:color .3s}
a:hover{color:#F5A623}
img{max-width:100%;height:auto;display:block}
.d-none{display:none!important}
/* 容器 */
.kkt-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
/* 头部导航 */
.kkt-header{position:fixed;top:0;left:0;width:100%;z-index:1000;background:rgba(13,17,23,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(232,69,69,.15);transition:all .3s}
.kkt-header .kkt-wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.kkt-logo{display:flex;align-items:center;gap:10px}
.kkt-logo img{height:42px;width:auto}
.kkt-logo span{font-size:22px;font-weight:700;color:#E8ECF1;letter-spacing:1px}
.kkt-nav{display:flex;align-items:center;gap:28px}
.kkt-nav a{color:#8B95A5;font-size:15px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent;transition:all .3s}
.kkt-nav a:hover,.kkt-nav a.active{color:#E84545;border-bottom-color:#E84545}
.kkt-mobile-btn{display:none;background:none;border:none;color:#E8ECF1;font-size:24px;cursor:pointer}
/* 搜索框 */
.kkt-search-bar{background:linear-gradient(135deg,#1A1F35,#161B2E);padding:16px 0;margin-top:68px;border-bottom:1px solid rgba(245,166,35,.1)}
.kkt-search-wrap{max-width:680px;margin:0 auto;position:relative}
.kkt-search-wrap input{width:100%;padding:14px 50px 14px 22px;border-radius:40px;border:2px solid rgba(232,69,69,.3);background:rgba(13,17,23,.8);color:#E8ECF1;font-size:15px;outline:none;transition:border-color .3s}
.kkt-search-wrap input:focus{border-color:#E84545}
.kkt-search-wrap input::placeholder{color:#8B95A5}
.kkt-search-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:#E84545;border:none;color:#fff;font-size:16px;cursor:pointer;transition:background .3s}
.kkt-search-btn:hover{background:#F5A623}
.kkt-search-suggest{position:absolute;top:100%;left:0;right:0;background:#161B2E;border-radius:0 0 16px 16px;border:1px solid rgba(232,69,69,.2);border-top:none;display:none;z-index:99}
.kkt-search-suggest a{display:block;padding:10px 22px;color:#8B95A5;font-size:14px;transition:all .2s}
.kkt-search-suggest a:hover{background:rgba(232,69,69,.1);color:#E84545}
/* 英雄Banner */
.kkt-hero{position:relative;height:520px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.kkt-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.5)}
.kkt-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,17,23,.3) 0%,rgba(13,17,23,.85) 100%)}
.kkt-hero-content{position:relative;z-index:2;text-align:center;padding:0 20px}
.kkt-hero h1{font-size:48px;font-weight:800;margin-bottom:16px;background:linear-gradient(135deg,#E84545,#F5A623);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.kkt-hero h2{font-size:22px;color:#8B95A5;font-weight:400;margin-bottom:28px}
.kkt-hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.kkt-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 32px;border-radius:30px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s;border:none}
.kkt-btn-primary{background:linear-gradient(135deg,#E84545,#c73636);color:#fff}
.kkt-btn-primary:hover{background:linear-gradient(135deg,#F5A623,#d4901a);color:#fff;transform:translateY(-2px);box-shadow:0 8px 25px rgba(232,69,69,.3)}
.kkt-btn-outline{background:transparent;color:#E8ECF1;border:2px solid rgba(232,69,69,.5)}
.kkt-btn-outline:hover{border-color:#E84545;color:#E84545}
/* 区块通用 */
.kkt-section{padding:70px 0}
.kkt-section-alt{background:#0f1520}
.kkt-section-title{text-align:center;margin-bottom:48px}
.kkt-section-title h2{font-size:32px;font-weight:700;margin-bottom:10px}
.kkt-section-title h2 span{color:#E84545}
.kkt-section-title p{color:#8B95A5;font-size:16px}
/* 视频卡片网格 */
.kkt-grid{display:grid;gap:24px}
.kkt-grid-3{grid-template-columns:repeat(3,1fr)}
.kkt-grid-4{grid-template-columns:repeat(4,1fr)}
.kkt-grid-2{grid-template-columns:repeat(2,1fr)}
/* 视频卡片 */
.kkt-vcard{background:#161B2E;border-radius:14px;overflow:hidden;transition:transform .3s,box-shadow .3s;cursor:pointer;border:1px solid rgba(232,69,69,.08)}
.kkt-vcard:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(232,69,69,.15)}
.kkt-vcard-thumb{position:relative;padding-top:56.25%;overflow:hidden}
.kkt-vcard-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kkt-vcard:hover .kkt-vcard-thumb img{transform:scale(1.08)}
.kkt-vcard-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;background:rgba(13,17,23,.4)}
.kkt-vcard:hover .kkt-vcard-play{opacity:1}
.kkt-vcard-play span{width:56px;height:56px;border-radius:50%;background:rgba(232,69,69,.9);display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;box-shadow:0 4px 20px rgba(232,69,69,.4)}
.kkt-vcard-info{padding:16px}
.kkt-vcard-info h3{font-size:16px;font-weight:600;margin-bottom:6px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kkt-vcard-meta{display:flex;gap:14px;color:#8B95A5;font-size:13px}
.kkt-vcard-meta span{display:flex;align-items:center;gap:4px}
.kkt-vcard-tag{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;background:rgba(232,69,69,.12);color:#E84545;margin-top:8px}
/* 短视频竖版卡片 */
.kkt-short-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.kkt-short-card{border-radius:14px;overflow:hidden;position:relative;padding-top:177%;background:#161B2E;border:1px solid rgba(232,69,69,.08)}
.kkt-short-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kkt-short-card .kkt-short-overlay{position:absolute;bottom:0;left:0;right:0;padding:14px;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.kkt-short-card h4{font-size:14px;color:#fff;margin-bottom:4px}
.kkt-short-card .kkt-short-views{font-size:12px;color:rgba(255,255,255,.7)}
/* AI赋能模块 */
.kkt-ai-card{background:linear-gradient(145deg,#161B2E,#1A1F35);border-radius:16px;padding:36px;text-align:center;border:1px solid rgba(245,166,35,.12);transition:all .3s}
.kkt-ai-card:hover{border-color:#F5A623;box-shadow:0 12px 35px rgba(245,166,35,.1)}
.kkt-ai-card .kkt-ai-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#E84545,#F5A623);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:30px}
.kkt-ai-card h3{font-size:20px;margin-bottom:12px;color:#F5A623}
.kkt-ai-card p{color:#8B95A5;font-size:14px;line-height:1.8}
/* 社区分类标签 */
.kkt-cat-tabs{display:flex;gap:12px;justify-content:center;margin-bottom:36px;flex-wrap:wrap}
.kkt-cat-tab{padding:8px 24px;border-radius:24px;background:#161B2E;color:#8B95A5;font-size:14px;cursor:pointer;transition:all .3s;border:1px solid rgba(232,69,69,.1)}
.kkt-cat-tab:hover,.kkt-cat-tab.active{background:#E84545;color:#fff;border-color:#E84545}
/* 专家卡片 */
.kkt-expert-card{background:#161B2E;border-radius:16px;padding:30px;text-align:center;border:1px solid rgba(232,69,69,.08);transition:all .3s}
.kkt-expert-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(232,69,69,.12)}
.kkt-expert-card img{width:100px;height:100px;border-radius:50%;object-fit:cover;margin:0 auto 16px;border:3px solid #E84545}
.kkt-expert-card h3{font-size:18px;margin-bottom:4px}
.kkt-expert-card .kkt-expert-role{color:#F5A623;font-size:14px;margin-bottom:10px}
.kkt-expert-card p{color:#8B95A5;font-size:13px;line-height:1.6;margin-bottom:14px}
.kkt-expert-card .kkt-expert-btns{display:flex;gap:8px;justify-content:center}
.kkt-expert-card .kkt-expert-btns a{padding:6px 16px;border-radius:20px;font-size:13px;border:1px solid #E84545;color:#E84545;transition:all .3s}
.kkt-expert-card .kkt-expert-btns a:hover{background:#E84545;color:#fff}
/* 合作品牌墙 */
.kkt-brand-wall{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:center}
.kkt-brand-item{width:140px;height:70px;background:#161B2E;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:#8B95A5;border:1px solid rgba(232,69,69,.08);transition:all .3s}
.kkt-brand-item:hover{border-color:#E84545;color:#E84545}
/* FAQ */
.kkt-faq-item{background:#161B2E;border-radius:12px;margin-bottom:12px;border:1px solid rgba(232,69,69,.08);overflow:hidden}
.kkt-faq-q{padding:18px 24px;font-size:16px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .3s}
.kkt-faq-q:hover{background:rgba(232,69,69,.05)}
.kkt-faq-q .kkt-faq-arrow{transition:transform .3s;color:#E84545;font-size:18px}
.kkt-faq-a{padding:0 24px;max-height:0;overflow:hidden;transition:all .4s;color:#8B95A5;font-size:14px;line-height:1.8}
.kkt-faq-item.open .kkt-faq-a{padding:0 24px 18px;max-height:300px}
.kkt-faq-item.open .kkt-faq-arrow{transform:rotate(180deg)}
/* 用户评论 */
.kkt-review{background:#161B2E;border-radius:14px;padding:28px;border:1px solid rgba(232,69,69,.08)}
.kkt-review-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.kkt-review-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#E84545,#F5A623);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;font-weight:700}
.kkt-review-name{font-size:16px;font-weight:600}
.kkt-review-date{font-size:12px;color:#8B95A5}
.kkt-review-stars{color:#F5A623;font-size:14px;margin-bottom:10px}
.kkt-review p{color:#8B95A5;font-size:14px;line-height:1.8}
/* 联系我们 */
.kkt-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.kkt-contact-info h3{font-size:22px;margin-bottom:20px;color:#F5A623}
.kkt-contact-info .kkt-contact-item{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.kkt-contact-info .kkt-contact-icon{width:42px;height:42px;border-radius:10px;background:rgba(232,69,69,.12);display:flex;align-items:center;justify-content:center;color:#E84545;font-size:18px;flex-shrink:0}
.kkt-contact-info .kkt-contact-text h4{font-size:15px;margin-bottom:2px}
.kkt-contact-info .kkt-contact-text p{color:#8B95A5;font-size:14px}
.kkt-contact-qr{display:flex;gap:24px;justify-content:center}
.kkt-contact-qr div{text-align:center}
.kkt-contact-qr img{width:160px;height:160px;border-radius:12px;border:2px solid rgba(232,69,69,.15);margin-bottom:8px}
.kkt-contact-qr .kkt-qr-label{font-size:14px;color:#8B95A5}
/* 底部 */
.kkt-footer{background:#0a0e16;padding:48px 0 0;border-top:1px solid rgba(232,69,69,.1)}
.kkt-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
.kkt-footer h4{font-size:16px;font-weight:600;margin-bottom:16px;color:#E8ECF1}
.kkt-footer p,.kkt-footer a{color:#8B95A5;font-size:14px;line-height:2}
.kkt-footer a:hover{color:#E84545}
.kkt-footer-bottom{border-top:1px solid rgba(232,69,69,.08);padding:20px 0;text-align:center;color:#8B95A5;font-size:13px}
/* 社交分享 */
.kkt-share{display:flex;gap:12px;justify-content:center;margin-top:24px}
.kkt-share a{width:40px;height:40px;border-radius:50%;background:#161B2E;display:flex;align-items:center;justify-content:center;color:#8B95A5;font-size:16px;transition:all .3s;border:1px solid rgba(232,69,69,.1)}
.kkt-share a:hover{background:#E84545;color:#fff;border-color:#E84545}
/* How-To指南 */
.kkt-howto-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}
.kkt-howto-step{background:#161B2E;border-radius:14px;padding:28px;text-align:center;position:relative;border:1px solid rgba(232,69,69,.08)}
.kkt-howto-step::before{counter-increment:step;content:counter(step);width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#E84545,#F5A623);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:18px;font-weight:700;color:#fff}
.kkt-howto-step h4{font-size:16px;margin-bottom:8px}
.kkt-howto-step p{color:#8B95A5;font-size:14px}
/* 返回顶部 */
.kkt-backtop{position:fixed;bottom:30px;right:30px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#E84545,#F5A623);color:#fff;display:none;align-items:center;justify-content:center;font-size:20px;cursor:pointer;z-index:999;border:none;box-shadow:0 4px 15px rgba(232,69,69,.3);transition:all .3s}
.kkt-backtop:hover{transform:translateY(-3px)}
/* 面包屑 */
.kkt-breadcrumb{padding:16px 0;font-size:14px;color:#8B95A5}
.kkt-breadcrumb a{color:#8B95A5}
.kkt-breadcrumb a:hover{color:#E84545}
.kkt-breadcrumb span{margin:0 8px;color:#555}
/* 内页通用 */
.kkt-page-hero{padding:100px 0 40px;text-align:center;background:linear-gradient(180deg,#1A1F35,#0D1117)}
.kkt-page-hero h1{font-size:36px;font-weight:700;margin-bottom:12px}
.kkt-page-hero p{color:#8B95A5;font-size:16px}
/* 视频播放覆盖层 */
.kkt-video-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9999;display:none;align-items:center;justify-content:center}
.kkt-video-overlay .kkt-video-close{position:absolute;top:20px;right:30px;font-size:36px;color:#fff;cursor:pointer;z-index:10}
.kkt-video-overlay .kkt-video-player{width:80%;max-width:900px;aspect-ratio:16/9;background:#000;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#8B95A5;font-size:18px}
/* 响应式 */
@media(max-width:1024px){
.kkt-grid-3{grid-template-columns:repeat(2,1fr)}
.kkt-grid-4{grid-template-columns:repeat(2,1fr)}
.kkt-short-grid{grid-template-columns:repeat(3,1fr)}
.kkt-footer-grid{grid-template-columns:1fr 1fr}
.kkt-howto-steps{grid-template-columns:repeat(2,1fr)}
.kkt-contact-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
.kkt-nav{position:fixed;top:68px;left:0;right:0;background:#0D1117;flex-direction:column;padding:20px;gap:16px;transform:translateY(-120%);transition:transform .3s;border-bottom:1px solid rgba(232,69,69,.15)}
.kkt-nav.open{transform:translateY(0)}
.kkt-mobile-btn{display:block}
.kkt-hero h1{font-size:30px}
.kkt-hero h2{font-size:16px}
.kkt-grid-3,.kkt-grid-4,.kkt-grid-2{grid-template-columns:1fr}
.kkt-short-grid{grid-template-columns:repeat(2,1fr)}
.kkt-section{padding:40px 0}
.kkt-section-title h2{font-size:24px}
.kkt-footer-grid{grid-template-columns:1fr}
.kkt-howto-steps{grid-template-columns:1fr}
.kkt-hero{height:400px}
.kkt-contact-qr{flex-direction:column;align-items:center}
.kkt-expert-card{padding:20px}
}

/* 数据统计响应式 */
@media(max-width:768px){
.kkt-stats-grid{grid-template-columns:repeat(2,1fr)!important}
.kkt-stats-grid .kkt-stat-item div:first-child{font-size:28px!important}
}
@media(max-width:480px){
.kkt-stats-grid{grid-template-columns:1fr!important}
}