/* ============================================================
   kaoshi-time.html · 深色窄带题头 + D3环形循环图 +
   C2工业窗格 + F3标签页 + G2订阅表单
   ============================================================ */

/* ---------- 题头：深色窄带 + 右侧图 ---------- */
.kt-hero{
  background:var(--green-900);
  padding-top:calc(var(--header-h) + 60px);
}
.kt-hero-inner{
  display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;
  padding-bottom:50px;
}
.kt-hero h1{
  font-size:clamp(34px,4.6vw,54px);color:var(--cream-50);margin:16px 0 12px;letter-spacing:.04em;
}
.kt-hero-text > p{color:var(--cream-200);font-size:16px;line-height:1.9;max-width:520px}
.kt-hero .crumb a{color:var(--brass-light)}
.kt-hero-media img{width:100%;height:220px;object-fit:cover;border-radius:var(--r-sm);border:2px solid var(--brass)}

/* ---------- D3 环形循环图 ---------- */
.kt-cycle{background:var(--cream-50)}
.cycle-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;
  max-width:1000px;margin:0 auto;
}
.cycle-ring{
  position:relative;width:340px;height:340px;margin:0 auto;
  border-radius:50%;border:2px dashed var(--brass);
}
.cycle-item{
  position:absolute;width:96px;padding:8px 10px;text-align:center;
  background:var(--brown-800);color:var(--brass-light);
  font-size:13px;font-weight:600;border-radius:var(--r-xs);
  border:1.5px solid var(--brass);
}
.c1{top:-14px;left:50%;transform:translateX(-50%)}
.c2{right:-30px;top:20%;transform:translateY(-50%)}
.c3{right:-24px;bottom:18%;transform:translateY(50%)}
.c4{bottom:-14px;left:50%;transform:translateX(-50%)}
.c5{left:-30px;bottom:18%;transform:translateY(50%)}
.c6{left:-30px;top:20%;transform:translateY(-50%)}
.cycle-legend p{color:var(--ink-soft);line-height:1.9;margin-bottom:12px}

/* ---------- C2 节点窗格 ---------- */
.kt-nodes{border-top:1px solid var(--line)}
.nodes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.node-cell{
  background:var(--cream-50);border:1.5px solid var(--brown-700);
  padding:26px 22px;position:relative;
}
.node-cell::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--brass);
}
.node-stage{
  display:inline-block;font-size:12px;letter-spacing:.18em;color:var(--brass);
  border:1px solid var(--brass);padding:3px 10px;margin-bottom:12px;
}
.node-cell h3{font-size:19px;margin-bottom:8px;color:var(--brown-800)}
.node-cell p{font-size:14px;color:var(--ink-soft);line-height:1.8}

/* ---------- F3 标签页 ---------- */
.kt-tab{background:var(--cream-50)}
.kt-tab-btns{display:flex;gap:0;border-bottom:2px solid var(--brown-700);margin-bottom:24px;flex-wrap:wrap}
.js-tab-btn{
  padding:12px 22px;font-size:15px;font-weight:600;color:var(--muted);
  border:1.5px solid transparent;border-bottom:none;background:transparent;
}
.js-tab-btn.active{background:var(--brown-800);color:var(--brass-light);border-color:var(--brown-700)}
.js-tab-panel{display:none}
.js-tab-panel.active{display:block;animation:ktFade .3s ease;max-width:760px}
@keyframes ktFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.js-tab-panel p{color:var(--ink-soft);line-height:1.9;margin-bottom:12px;font-size:15px}

/* ---------- G2 订阅表单 ---------- */
.kt-sub{
  background:
    repeating-linear-gradient(90deg,rgba(210,176,120,.05) 0 1px,transparent 1px 56px),
    var(--green-900);
}
.kt-sub-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.kt-sub-text h2{color:var(--cream-50);font-size:clamp(24px,3vw,34px);margin:6px 0 14px}
.kt-sub-text p{color:var(--cream-200);line-height:1.9}
.btn-block-sub{width:100%}

/* ---------- CTA ---------- */
.kt-cta{border-top:4px solid var(--brass);text-align:center}
.kt-cta-inner{padding:20px 0}
.kt-cta-inner h2{color:var(--cream-50);font-size:clamp(24px,3vw,32px);margin-bottom:8px}
.kt-cta-inner p{color:var(--cream-200);margin-bottom:20px}
.kt-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .kt-hero-inner,.cycle-wrap,.kt-sub-inner{grid-template-columns:1fr}
  .nodes-grid{grid-template-columns:1fr}
  .cycle-ring{width:280px;height:280px}
}

/* ---------- 扩充：适合订阅人群 ---------- */
.kt-who{background:var(--cream-50)}
.kt-who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kt-who-card{
  background:var(--cream-100);border:1.5px solid var(--brown-700);
  padding:26px 22px;border-top:4px solid var(--brass);
}
.kt-who-card h3{font-size:17px;color:var(--brown-800);margin-bottom:8px}
.kt-who-card p{font-size:14px;color:var(--ink-soft);line-height:1.85}

/* ---------- 扩充：时间误区 ---------- */
.kt-myth{border-top:1px solid var(--line)}
.kt-myth-list{max-width:880px}
.kt-myth-row{
  display:grid;grid-template-columns:1fr 1.3fr;gap:0;
  border:1.5px solid var(--brown-700);margin-bottom:14px;
}
.kt-myth-q{
  background:var(--brown-800);color:var(--brass-light);
  padding:18px 20px;font-size:14.5px;line-height:1.7;
  border-right:1.5px solid var(--brass);
}
.kt-myth-a{
  background:var(--cream-100);padding:18px 20px;
  font-size:14.5px;color:var(--ink-soft);line-height:1.85;
}

/* ---------- 扩充：关联服务 ---------- */
.kt-relate{background:var(--cream-50)}
.kt-relate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kt-relate-cell{
  display:block;background:var(--cream-100);border:1.5px solid var(--brown-700);
  padding:24px 22px;transition:all .25s ease;
}
.kt-relate-cell:hover{background:var(--brown-800);transform:translateY(-4px)}
.kt-relate-cell:hover h3{color:var(--brass-light)}
.kt-relate-cell:hover p{color:var(--cream-200)}
.kt-relate-cell h3{font-size:17px;color:var(--brown-800);margin-bottom:8px}
.kt-relate-cell p{font-size:14px;color:var(--muted);line-height:1.8}

@media (max-width:900px){
  .kt-who-grid,.kt-relate-grid{grid-template-columns:1fr}
  .kt-myth-row{grid-template-columns:1fr}
  .kt-myth-q{border-right:none;border-bottom:1.5px solid var(--brass)}
}

/* ---------- 扩充：说明段 ---------- */
.lc-note,.cl-note,.fy-note,.xx-note,.jz-note,.kt-note,.kd-note,.tx-note{background:var(--cream-50)}
.lc-note .narrow,.cl-note .narrow,.fy-note .narrow,.xx-note .narrow,.jz-note .narrow,.kt-note .narrow,.kd-note .narrow,.tx-note .narrow{max-width:820px}
.note-body p{color:var(--ink-soft);line-height:2;margin-bottom:14px;font-size:15.5px}