/* ===========================================================
   Layout C — 极速目录 | 亮白 · 钴蓝 · 琥珀
   =========================================================== */
:root{
  --brand:#1d4ed8; --brand-2:#1e40af; --accent:#f59e0b;
  --bg:#ffffff; --bg-2:#f2f6ff; --card:#ffffff; --card-2:#eef3fd;
  --line:#dbe4f5; --text:#101828; --muted:#5b6b85; --radius:12px;
  --f-head:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Manrope","Segoe UI",system-ui,sans-serif;
}
body{background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:15.5px;line-height:1.7}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;letter-spacing:-.02em}

/* header */
.gx-header{background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.gx-header .wrap{height:64px}
.brand{font-family:var(--f-head);font-weight:800;color:var(--text)}
.brand-mark{border-radius:9px;background:linear-gradient(135deg,var(--brand),#3b82f6);color:#fff;font-weight:800}
.nav{font-size:.88rem;color:var(--muted)}
.nav a{color:#33415c}.nav a::after{background:var(--brand);height:2px}
.search input[type=search]{background:var(--bg-2);border:1px solid var(--line);border-radius:999px;color:var(--text)}

.cv > *{width:min(1260px,94vw);margin-inline:auto}

/* 大标题 + 搜索 */
.cv-mast{padding:34px 0 8px}
.cv-mast__in{text-align:center}
.cv-mast h1{margin:0 0 6px;font-size:clamp(1.7rem,4vw,2.7rem);letter-spacing:-.03em}
.cv-mast__t{margin:0 0 18px;color:var(--muted);font-size:.95rem}
.cv-mast__s{display:flex;max-width:560px;margin:0 auto;background:var(--bg-2);border:1.5px solid var(--line);
  border-radius:999px;padding:5px 5px 5px 20px;transition:border-color .2s,box-shadow .2s}
.cv-mast__s:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(29,78,216,.12)}
.cv-mast__s input[type=search]{flex:1;border:0;background:transparent;outline:0;font:inherit;color:var(--text)}
.cv-mast__s button{border:0;background:var(--brand);color:#fff;font-weight:700;font-family:var(--f-head);
  border-radius:999px;padding:10px 26px;cursor:pointer}
.cv-mast__s button:hover{background:var(--brand-2)}

/* 通用区块头 */
.cv-hot__head{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 14px}
.cv-hot__head h2{margin:0;font-size:1.3rem}
.cv-hot__head h2::before{content:"";display:inline-block;width:26px;height:4px;border-radius:2px;
  background:var(--accent);margin-right:10px;vertical-align:middle}
.cv-hot__head a{font-size:.82rem;color:var(--brand);font-weight:600}

/* 热门 1+6 */
.cv-hot__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cv-hot__c{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--card-2);display:block;
  box-shadow:0 1px 2px rgba(16,24,40,.06);transition:transform .25s,box-shadow .25s}
.cv-hot__c:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(29,78,216,.14)}
.cv-hot__c--big{grid-column:span 2;grid-row:span 2}
.cv-hot__img{width:100%;height:100%;min-height:120px;aspect-ratio:4/3;object-fit:cover;display:block}
.cv-hot__c--big .cv-hot__img{aspect-ratio:auto;height:100%}
.cv-hot__b{position:absolute;inset:auto 0 0 0;padding:34px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(10,16,32,.82))}
.cv-hot__b b{display:block;color:#fff;font-family:var(--f-head);font-size:.92rem;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-hot__c--big .cv-hot__b b{font-size:1.3rem}
.cv-hot__b i{font-style:normal;color:#c8d6f5;font-size:.74rem}
.cv-hot__n{position:absolute;top:10px;left:10px;background:var(--accent);color:#1c1400;font-weight:800;
  font-family:var(--f-head);font-size:.72rem;border-radius:7px;padding:3px 8px}

/* 分类圆章 */
.cv-bubble{display:grid;grid-template-columns:repeat(10,1fr);gap:10px;margin:28px 0 6px}
.cv-bub{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border:1px solid var(--line);
  border-radius:14px;background:var(--card);transition:border-color .2s,transform .2s}
.cv-bub:hover{border-color:var(--brand);transform:translateY(-2px)}
.cv-bub em{font-style:normal;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:800;font-family:var(--f-head);font-size:.8rem;
  background:linear-gradient(135deg,hsl(var(--h),72%,52%),hsl(calc(var(--h) + 40),72%,42%))}
.cv-bub b{font-size:.78rem;font-weight:600;line-height:1.2;text-align:center;color:#25334d}
.cv-bub i{font-style:normal;font-size:.68rem;color:var(--muted)}

/* 24 格全目录 */
.cv-all__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.cv-g{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);display:block;
  transition:box-shadow .25s,transform .25s}
.cv-g:hover{box-shadow:0 8px 20px rgba(16,24,40,.12);transform:translateY(-2px)}
.cv-g__img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.cv-g__b{display:block;padding:8px 10px 9px}
.cv-g__b b{display:block;font-size:.83rem;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-g__b i{font-style:normal;font-size:.7rem;color:var(--muted)}
.cv-g__n{position:absolute;top:8px;right:8px;font-style:normal;font-family:var(--f-head);font-weight:800;
  font-size:.68rem;color:var(--brand);background:rgba(255,255,255,.92);border-radius:6px;padding:2px 7px;
  box-shadow:0 1px 3px rgba(16,24,40,.18)}

/* 三列分类精选 */
.cv-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:30px 0;padding:26px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cv-col__h{margin:0 0 10px;font-size:1.08rem}
.cv-col__h a{color:var(--text)}
.cv-col__h a:hover{color:var(--brand)}
.cv-mini{display:grid;grid-template-columns:96px 1fr;gap:11px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line)}
.cv-mini:last-child{border-bottom:0}
.cv-mini__img{width:96px;height:68px;object-fit:cover;border-radius:8px;background:var(--card-2)}
.cv-mini span{min-width:0;display:flex;flex-direction:column;gap:2px}
.cv-mini b{font-size:.86rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-mini i{font-style:normal;font-size:.72rem;color:var(--muted)}
.cv-mini:hover b{color:var(--brand)}

/* 横向排行 */
.cv-rank h2{margin:0 0 12px;font-size:1.3rem}
.cv-rank ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.cv-rank li{position:relative}
.cv-rank li a{position:relative;display:grid;grid-template-columns:34px 56px 1fr;align-items:center;gap:12px;
  padding:6px 12px;border-radius:10px;background:var(--bg-2);overflow:hidden}
.cv-rank__bar{position:absolute;left:0;top:0;bottom:0;width:var(--w);
  background:linear-gradient(90deg,rgba(29,78,216,.14),rgba(29,78,216,.03));z-index:0}
.cv-rank li em{font-style:normal;position:relative;z-index:1;font-family:var(--f-head);font-weight:800;
  color:var(--brand);font-size:.95rem}
.cv-rank__img{position:relative;z-index:1;width:56px;height:40px;object-fit:cover;border-radius:6px;background:var(--card-2)}
.cv-rank__t{position:relative;z-index:1;display:flex;justify-content:space-between;gap:10px;min-width:0}
.cv-rank__t b{font-size:.88rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-rank__t i{font-style:normal;font-size:.74rem;color:var(--muted);white-space:nowrap}

/* 标签云 */
.cv-tags{margin:28px 0}
.cv-tags h2{margin:0 0 12px;font-size:1.15rem}
.cv-tags__c{display:flex;flex-wrap:wrap;gap:8px}
.cv-tags__c a{border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-size:.8rem;color:#33415c;
  background:var(--card);transition:all .2s}
.cv-tags__c a:hover{border-color:var(--brand);color:var(--brand);background:var(--bg-2)}
.cv-tags__c i{font-style:normal;color:var(--muted);font-size:.7rem}

/* FAQ */
.cv-faq{margin:8px 0 44px;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2)}
.cv-faq h2{margin:0 0 12px;font-size:1.2rem}
.cv-faq details{border-bottom:1px solid var(--line);padding:10px 4px}
.cv-faq details:last-of-type{border-bottom:0}
.cv-faq summary{cursor:pointer;font-weight:700;font-family:var(--f-head);font-size:.95rem;list-style:none;
  position:relative;padding-right:26px}
.cv-faq summary::after{content:"+";position:absolute;right:2px;top:-2px;color:var(--brand);font-weight:800}
.cv-faq details[open] summary::after{content:"–"}
.cv-faq details p{margin:8px 0 4px;color:#3a4a63;font-size:.9rem}
.cv-faq details p a{color:var(--brand)}
.cv-faq__para{margin:14px 0 0;color:var(--muted);font-size:.86rem;line-height:1.8}
.cv-faq__para a{color:var(--brand)}

/* 响应式 */
@media (max-width:1080px){
  .cv-all__grid{grid-template-columns:repeat(4,1fr)}
  .cv-bubble{grid-template-columns:repeat(5,1fr)}
  .cv-trio{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .cv-hot__grid{grid-template-columns:repeat(2,1fr)}
  .cv-all__grid{grid-template-columns:repeat(2,1fr)}
  .cv-bubble{grid-template-columns:repeat(3,1fr)}
  .cv-trio{grid-template-columns:1fr}
  .cv-rank li a{grid-template-columns:28px 48px 1fr}
  .cv-rank__img{width:48px;height:34px}
}