/* roulang page: index */
:root{
  --m1:#1d5fd6;
  --m2:#0e2f66;
  --bg:#f5f8fd;
  --panel:#ffffff;
  --tx:#16233a;
  --tx2:#5d6c88;
  --line:#e2eaf7;
  --rr:14px;
  --sh:0 10px 26px rgba(20,44,90,.09);
  --sp:44px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;padding-bottom:72px;
  font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px;line-height:1.72;color:var(--tx);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0;}
ul,ol{list-style:none;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
input{font:inherit;}
:focus-visible{outline:2px solid var(--m1);outline-offset:2px;}
.kcbikka-wrap{width:min(1180px,calc(100% - 40px));margin:0 auto;}

/* 顶栏 */
.kcbikka-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.kcbikka-head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;}
.kcbikka-brand{display:flex;align-items:center;gap:10px;font-weight:700;white-space:nowrap;}
.kcbikka-logo{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(140deg,var(--m1),var(--m2));color:#fff;font-size:17px;}
.kcbikka-brand-t{font-size:17px;letter-spacing:.02em;}
.kcbikka-nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;}
.kcbikka-nav::-webkit-scrollbar{display:none;}
.kcbikka-nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;color:var(--tx2);font-size:14.5px;white-space:nowrap;transition:color .2s,background .2s;}
.kcbikka-nav a:hover{color:var(--m1);background:#eef4ff;}

/* 首屏 */
.kcbikka-hero{
  padding:46px 0 42px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(246,249,255,.95),rgba(236,243,255,.93)),url("/assets/images/backpic/back-1.webp") center/cover no-repeat;
}
.kcbikka-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center;}
.kcbikka-eyebrow{display:inline-block;padding:5px 12px;border-radius:999px;background:#e6efff;color:var(--m1);font-size:13px;font-weight:600;}
.kcbikka-hero h1{font-size:clamp(28px,4vw,44px);line-height:1.24;margin-top:14px;letter-spacing:.01em;}
.kcbikka-hero h1 span{color:var(--m1);}
.kcbikka-lead{margin-top:14px;color:var(--tx2);font-size:15.5px;max-width:56ch;}
.kcbikka-hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.kcbikka-hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.kcbikka-hero-tags li{padding:5px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--tx2);}

.kcbikka-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;
  border-radius:12px;background:var(--m1);color:#fff;font-weight:600;font-size:15px;
  box-shadow:0 6px 16px rgba(29,95,214,.24);transition:background .2s,transform .2s,box-shadow .2s;
}
.kcbikka-btn:hover{background:var(--m2);transform:translateY(-1px);}
.kcbikka-btn--ghost{background:#fff;color:var(--m1);border:1px solid #cddcf6;box-shadow:none;}
.kcbikka-btn--ghost:hover{background:#eef4ff;color:var(--m2);}
.kcbikka-btn--wide{width:100%;}

/* 自测面板 */
.kcbikka-quiz{background:var(--panel);border:1px solid var(--line);border-radius:var(--rr);box-shadow:var(--sh);padding:20px;}
.kcbikka-quiz-t{font-weight:700;font-size:15.5px;}
.kcbikka-qset{border:0;margin:14px 0 0;padding:0;}
.kcbikka-qset legend{font-size:13px;color:var(--tx2);margin-bottom:6px;padding:0;}
.kcbikka-qset label{
  position:relative;display:inline-flex;align-items:center;min-height:44px;margin:4px 6px 0 0;
  padding:0 14px;border-radius:10px;border:1px solid var(--line);background:#f7faff;
  font-size:14px;cursor:pointer;transition:border-color .2s,background .2s;
}
.kcbikka-qset input{position:absolute;width:1px;height:1px;opacity:0;}
.kcbikka-qset input:checked + span{color:var(--m1);font-weight:600;}
.kcbikka-qset label:has(input:checked){border-color:var(--m1);background:#eaf1ff;}
.kcbikka-qset input:focus-visible + span{outline:2px solid var(--m1);outline-offset:2px;border-radius:4px;}
.kcbikka-preview{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);}
.kcbikka-preview-t{font-size:13px;color:var(--tx2);}
.kcbikka-preview-card{display:flex;gap:12px;margin-top:10px;padding:10px;border-radius:12px;background:#f5f8ff;border:1px solid #e6eefc;}
.kcbikka-preview-card img{width:64px;height:86px;object-fit:cover;border-radius:8px;flex:none;}
.kcbikka-preview-card strong{display:block;font-size:15px;}
.kcbikka-preview-card p{font-size:13px;color:var(--tx2);line-height:1.58;}
.kcbikka-preview .kcbikka-btn--wide{margin-top:12px;}

/* 通用板块 */
.kcbikka-sec{padding:var(--sp) 0;border-bottom:1px solid var(--line);}
.kcbikka-sec--alt{background:#eef3fc;}
.kcbikka-sec-h{max-width:780px;margin-bottom:24px;}
.kcbikka-sec-h h2{font-size:clamp(20px,2.6vw,26px);line-height:1.32;}
.kcbikka-sec-h p{margin-top:8px;color:var(--tx2);font-size:14.5px;}

/* 卡片 */
.kcbikka-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
.kcbikka-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rr);overflow:hidden;box-shadow:0 2px 10px rgba(20,44,90,.05);transition:transform .22s,box-shadow .22s,border-color .22s;}
.kcbikka-card:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:#cbdaf5;}
.kcbikka-thumb{position:relative;aspect-ratio:3/4;background:#dde6f6;overflow:hidden;}
.kcbikka-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.kcbikka-card:hover .kcbikka-thumb img{transform:scale(1.04);}
.kcbikka-badge{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:6px;background:rgba(12,30,64,.72);color:#fff;font-size:12px;}
.kcbikka-score{position:absolute;right:8px;bottom:8px;padding:2px 8px;border-radius:999px;background:#fff;color:#d97706;font-size:12.5px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.12);}
.kcbikka-card-b{padding:12px 13px 14px;}
.kcbikka-card-b h3{font-size:15px;line-height:1.36;}
.kcbikka-card-b p{margin-top:6px;font-size:13px;color:var(--tx2);line-height:1.62;}

/* 分类频道 */
.kcbikka-cats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.kcbikka-cats li{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--m1);border-radius:12px;padding:16px 18px;box-shadow:0 2px 8px rgba(20,44,90,.04);}
.kcbikka-cats h3{font-size:16px;}
.kcbikka-cats p{margin-top:6px;font-size:13.5px;color:var(--tx2);}

/* 排行榜 */
.kcbikka-rank{display:grid;gap:10px;}
.kcbikka-rank li{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;}
.kcbikka-rank .kcbikka-no{font-size:18px;font-weight:800;color:#b9c9e6;font-variant-numeric:tabular-nums;}
.kcbikka-rank li:nth-child(-n+3) .kcbikka-no{color:var(--m1);}
.kcbikka-rank h3{font-size:15px;line-height:1.4;}
.kcbikka-rank .kcbikka-meta{font-size:12.5px;color:var(--tx2);}
.kcbikka-heat{font-size:12.5px;color:var(--m1);background:#eaf1ff;padding:4px 10px;border-radius:999px;white-space:nowrap;}

/* 高分好评 */
.kcbikka-glist{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
.kcbikka-glist li{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.kcbikka-glist h3{font-size:15px;}
.kcbikka-glist p{margin-top:5px;font-size:13px;color:var(--tx2);line-height:1.6;}
.kcbikka-mark{flex:none;font-size:15px;font-weight:800;color:#d97706;background:#fff7ea;border-radius:8px;padding:2px 9px;}

/* 资讯 */
.kcbikka-news li{display:flex;gap:16px;justify-content:space-between;align-items:baseline;padding:14px 2px;border-bottom:1px dashed var(--line);}
.kcbikka-news li:last-child{border-bottom:0;}
.kcbikka-news h3{font-size:15px;font-weight:600;line-height:1.5;}
.kcbikka-news .kcbikka-meta{font-size:12.5px;color:var(--tx2);flex:none;padding:3px 10px;border-radius:999px;background:#eaf1ff;}

/* 观点 */
.kcbikka-view{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.kcbikka-view blockquote{margin:0;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--m2);border-radius:12px;padding:16px 18px;}
.kcbikka-view h3{font-size:15px;margin-bottom:6px;}
.kcbikka-view p{font-size:13.5px;color:var(--tx2);line-height:1.68;}

/* 问答 */
.kcbikka-faq{display:grid;gap:14px;}
.kcbikka-faq > div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;}
.kcbikka-faq dt{font-weight:700;font-size:15px;}
.kcbikka-faq dd{margin:8px 0 0;font-size:14px;color:var(--tx2);}

/* 保障 & 多端 */
.kcbikka-safe,.kcbikka-entry{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.kcbikka-safe li{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;}
.kcbikka-safe i{display:block;width:28px;height:28px;border-radius:8px;background:linear-gradient(140deg,var(--m1),var(--m2));margin-bottom:10px;}
.kcbikka-safe h3{font-size:15px;}
.kcbikka-safe p{margin-top:6px;font-size:13.5px;color:var(--tx2);line-height:1.65;}

.kcbikka-entry a{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;transition:transform .2s,box-shadow .2s,border-color .2s;}
.kcbikka-entry a:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:var(--m1);}
.kcbikka-entry strong{font-size:16px;color:var(--m1);}
.kcbikka-entry span{font-size:13.5px;color:var(--tx2);line-height:1.6;}

/* 收口 */
.kcbikka-cta{
  padding:50px 0;text-align:center;color:#fff;
  background:linear-gradient(120deg,rgba(10,32,78,.93),rgba(29,95,214,.85)),url("/assets/images/backpic/back-3.webp") center/cover no-repeat;
}
.kcbikka-cta h2{font-size:clamp(21px,2.9vw,28px);line-height:1.35;}
.kcbikka-cta p{max-width:640px;margin:12px auto 0;color:rgba(255,255,255,.87);font-size:14.5px;}
.kcbikka-cta .kcbikka-btn{background:#fff;color:var(--m2);box-shadow:none;margin-top:22px;}
.kcbikka-cta .kcbikka-btn:hover{background:#eaf1ff;color:var(--m2);}

/* 页脚 */
.kcbikka-foot{background:#0f2344;color:#c8d6ee;padding:44px 0 0;}
.kcbikka-foot-grid{display:grid;gap:28px;grid-template-columns:1.4fr 1fr 1fr 1fr;}
.kcbikka-foot h3{color:#fff;font-size:14.5px;margin-bottom:10px;}
.kcbikka-foot p,.kcbikka-foot a{font-size:13.5px;line-height:1.9;color:#a9bcdb;}
.kcbikka-foot a{display:inline-flex;align-items:center;min-height:32px;}
.kcbikka-foot a:hover{color:#fff;}
.kcbikka-copy{margin-top:26px;border-top:1px solid rgba(255,255,255,.13);padding:14px 0 20px;font-size:13px;color:#93a8cc;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}

/* 吸底条 */
.kcbikka-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:9px 0;}
.kcbikka-bar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.kcbikka-bar p{font-size:13.5px;color:var(--tx2);}

@media (max-width:1024px){
  .kcbikka-hero-in{grid-template-columns:1fr;gap:26px;}
  .kcbikka-lead{max-width:none;}
  .kcbikka-foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  :root{--sp:34px;}
  .kcbikka-head-in{flex-direction:column;align-items:flex-start;padding:10px 0;gap:6px;}
  .kcbikka-nav{width:100%;}
  .kcbikka-hero{padding:34px 0 30px;}
  .kcbikka-rank li{grid-template-columns:36px 1fr;gap:8px 10px;}
  .kcbikka-heat{grid-column:2;justify-self:start;}
  .kcbikka-news li{flex-direction:column;gap:6px;}
  .kcbikka-foot-grid{grid-template-columns:1fr;}
  .kcbikka-copy{flex-direction:column;}
}
@media (max-width:520px){
  body{font-size:14.5px;}
  .kcbikka-wrap{width:calc(100% - 28px);}
  .kcbikka-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .kcbikka-cats{grid-template-columns:1fr;}
  .kcbikka-card-b p,.kcbikka-cats p,.kcbikka-glist p,.kcbikka-safe p,.kcbikka-view p,.kcbikka-entry span,.kcbikka-news .kcbikka-meta{font-size:14px;}
  .kcbikka-bar p{display:none;}
  .kcbikka-bar .kcbikka-btn{width:100%;}
  .kcbikka-preview-card img{width:56px;height:76px;}
}