/* ============================================================
   蜘蛛池 · SEO 报告页专用样式（/seo/site/{域名}、/seo/tld/{后缀}）
   只放 tool-page.css 没覆盖的部分：颜色、圆角、阴影全部取 tool-page.css 的变量，
   所以这里只需要写结构。
   引入顺序必须是 tool-page.css 在前、本文件在后。
   ============================================================ */

/* ---------- 面包屑 ---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:14px;font-size:12.5px;color:var(--faint)}
.crumb a{color:var(--text-2)}
.crumb a:hover{color:var(--brand-dark)}
.crumb .sep{color:var(--line)}

/* ---------- 两栏骨架 ---------- */
.seo-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;padding-bottom:46px}
/* 主栏用 flex + gap 控制节奏：tool-page.css 的 .panel + .panel 只在两块面板相邻时才生效，
   中间夹一条告警就会丢掉间距。 */
.seo-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.seo-main .panel + .panel,
.seo-side .panel + .panel{margin-top:0}
.seo-main .hero{margin-bottom:0}
/* 吸顶的硬条件：侧栏高度必须小于「视口高 − top」，否则 sticky 会半途失效 */
.seo-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:76px}
section[id]{scroll-margin-top:80px}

/* ---------- 首屏 ---------- */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.hero h1{font-size:23px;word-break:break-all}
.ring{width:124px;height:124px;flex:none;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p) * 1%), var(--line-soft) 0);display:flex;align-items:center;justify-content:center}
.ring em{width:98px;height:98px;border-radius:50%;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;font-style:normal}
.ring em b{font-size:32px;line-height:1.15;font-variant-numeric:tabular-nums}
.ring em span{font-size:11px;color:var(--faint);margin-top:2px}
.hinfo{flex:1;min-width:250px}
.verdict{font-size:14px;color:var(--text-2);margin:8px 0 4px}
.hero-lead{margin:10px 0 0;font-size:13px;color:var(--text-2);line-height:1.8;max-width:900px}
.badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
.badge.pass{background:var(--ok-bg);color:#0f7a3d}
.badge.warn{background:var(--warn-bg);color:#a14a00}
.badge.fail{background:#ffeceb;color:#c0251b}
.badge.mute{background:var(--line-soft);color:var(--text-2);font-weight:400}
.kpis{flex:1 1 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 18px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.kpi .k{color:var(--faint);font-size:12px}
.kpi .v{font-weight:600;margin-top:2px;overflow-wrap:anywhere}

.notice.is-err{border-left-color:#c0251b;background:#fff2f0}

/* ---------- 进度条 / 分布 ---------- */
.prow{display:grid;grid-template-columns:132px minmax(0,1fr) 48px 70px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line-soft);font-size:13px}
.prow:last-child{border-bottom:0}
.dist .prow{grid-template-columns:118px minmax(0,1fr) 52px 66px}
.pbar{height:8px;border-radius:6px;background:var(--line-soft);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:6px}
.pbar.pass i{background:var(--ok)}
.pbar.warn i{background:var(--warn)}
.pbar.fail i{background:#f53f3f}
.prow .r{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.prow .gm{text-align:right;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}

/* ---------- 折叠块 ---------- */
details{border:1px solid var(--line);border-radius:10px;background:#fcfdfe;padding:0 14px;margin-top:10px}
details[open]{background:var(--panel)}
summary{list-style:none;cursor:pointer;padding:11px 0;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--text)}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸";color:var(--faint);font-size:12px}
details[open] summary::before{content:"▾"}
summary .hint{font-size:12px;font-weight:400;color:var(--faint)}
summary .dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot.fail{background:#f53f3f}
.dot.warn{background:var(--warn)}
.dot.pass{background:var(--ok)}

/* ---------- 表格 ---------- */
.tb{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:6px}
.tb th{text-align:left;font-size:12px;color:var(--faint);font-weight:600;padding:0 10px 8px;border-bottom:1px solid var(--line-soft)}
.tb td{padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tb tr:last-child td{border-bottom:0}
.tb td.n{width:122px;font-weight:600}
.tb td.s{width:62px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tb td.rk{width:46px;color:var(--faint);font-variant-numeric:tabular-nums}
.tb td.tm{width:112px;color:var(--faint);font-size:12px;white-space:nowrap}
.tb td.dom a{color:var(--brand-dark);font-weight:600;overflow-wrap:anywhere}
.tb td.dom a:hover{text-decoration:underline}
.tb .lv{display:inline-block;padding:0 6px;border-radius:4px;font-size:11px;font-weight:700;margin-right:5px;white-space:nowrap}
.lv.pass{background:var(--ok-bg);color:#0f7a3d}
.lv.warn{background:var(--warn-bg);color:#a14a00}
.lv.fail{background:#ffeceb;color:#c0251b}
.tb .adv{color:var(--text-2)}

/* ---------- SERP 预览 ---------- */
.serp{border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:var(--panel)}
.serp .u{font-size:12.5px;color:#0f7a3d;overflow-wrap:anywhere}
.serp .t{font-size:17px;color:#1a0dab;margin:5px 0;line-height:1.5;overflow-wrap:anywhere}
.serp .d{font-size:13px;color:#4b5563;line-height:1.7;overflow-wrap:anywhere}
.len{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:12.5px;color:var(--faint)}
.len b{font-variant-numeric:tabular-nums}
.len .ok{color:#0f7a3d}
.len .bad{color:#c0251b}

/* ---------- 键值 / 域名 / 标签 ---------- */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 20px}
.kv .c{font-size:13px;color:var(--text-2);min-width:0;overflow-wrap:anywhere}
.kv .c b{color:var(--text);font-weight:600}
.kv .wide{grid-column:1/-1}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chips span{background:var(--line-soft);border-radius:6px;padding:1px 8px;font-size:12.5px;overflow-wrap:anywhere}

/* ---------- 词频 ---------- */
.wfrow{display:grid;grid-template-columns:78px minmax(0,1fr) 42px 60px;gap:10px;align-items:center;margin:6px 0;font-size:13px}
.wfrow .w{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wfrow .pbar i{background:linear-gradient(90deg,#7fc4a1,var(--ok))}
.wfrow .c,.wfrow .r{text-align:right;color:var(--faint);font-variant-numeric:tabular-nums}

/* ---------- FAQ / 内链 ---------- */
.faq details{border:0;border-bottom:1px solid var(--line-soft);border-radius:0;background:none;padding:0;margin:0}
.faq details:last-child{border-bottom:0}
.faq p{margin:0 0 12px;padding-left:20px;color:var(--text-2);font-size:13px;line-height:1.75}
.links{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none;font-size:12.5px}
.links li{border:1px solid var(--line);border-radius:999px;padding:2px 10px;background:var(--panel)}
.links a{color:var(--brand-dark)}
.links em{font-style:normal;color:var(--faint);margin-left:5px}
.sub-lbl{margin:0 0 7px;font-size:12px;color:var(--faint)}
.sub-lbl + .links + .sub-lbl{margin-top:12px}

/* ---------- 侧栏 ---------- */
.toc{display:flex;flex-direction:column;gap:2px;font-size:13px}
.toc a{padding:5px 8px;border-radius:7px;color:var(--text-2)}
.toc a:hover{background:var(--line-soft);color:var(--brand-dark)}
.side-note{margin:0;color:var(--faint);font-size:12px;line-height:1.7}
.tool-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 20px}
.tool-links a{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fcfdfe}
.tool-links a:hover{border-color:var(--brand);background:var(--brand-soft)}
.tool-links b{font-size:13px;color:var(--brand-dark);font-weight:600}
.tool-links span{font-size:12px;color:var(--faint)}

/* ---------- 断点 ---------- */
@media (max-width:1080px){
  .seo-layout{grid-template-columns:minmax(0,1fr)}
  .seo-side{position:static;order:2}
  .hero h1{font-size:20px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .hero{padding:18px 16px}
  .ring{width:104px;height:104px}
  .ring em{width:80px;height:80px}
  .ring em b{font-size:26px}
  .prow{grid-template-columns:96px minmax(0,1fr) 42px}
  .prow .gm{display:none}
  .dist .prow{grid-template-columns:88px minmax(0,1fr) 48px}
  .tb td.n{width:94px}
  .tb td.s{width:52px}
  .tb th:nth-child(2),.tb td.s{padding-left:4px}
  .tb td.tm{display:none}
  .serp .t{font-size:15px}
  .wfrow{grid-template-columns:66px minmax(0,1fr) 38px}
  .wfrow .r{display:none}
}