/* SSL 证书检测页样式。
   与 tool.css 的分工：tool.css 是各工具页共用的表单 / 结果面板基础样式，
   这里只放本页独有的概览卡、证书信息、链路表、协议矩阵与弱点清单。

   ⚠️ 本页结果区是**一份报告**而不是一张多行表格：容器是 div#result-tbody，
   里面按「概况 / 信任链 / 证书 / 加密协议 / 弱点」分块。

   ★ 2026-11-10 版式重构，核心决定（改版前请先读这一段）：
     结果区以前是「小标题 + 一条条 kv 行」纵向铺到底，一张证书 30 多个字段
     排成一条长龙，要滚三四屏才能读完全部结论。现在改成**卡片 + 双列**：
       · 每一块（证书 / 信任链 / 协议 / 安全特性 / 服务器）是一张卡片；
       · 卡片内部尽量用 2~3 列网格，而不是一行一个字段；
       · 长文本字段（DN、指纹、SAN、套件清单）仍然跨整行，但限高滚动；
       · 最常被扫读的字段（评级、到期、协议、套件）提到「关键指标」一行。
     代价是 DOM 结构变了 —— 但这完全由 ssl.js 生成，模板里只有容器，
     所以不必改模板（CSS/JS 是唯一可改的边界）。 */

/* ===== 表单 =====
   左输入框右按钮，与 findping 同构。输入框高度与按钮显式写死同值，
   不依赖 stretch：说明文字在输入框下方，父级高度由内容决定，stretch 会让
   按钮跟着被拉高到包含说明行的总高度。

   ★ 2026-11-10 第二次修订（用户：「跟网站测速等页面的字体大小、页面风格
   不一致」）。上一版本页的控件尺寸自成一档，与 ping / 找 IP 等页逐项对不上：
     · 输入框 46px / 圆角 8px / 字号 14px   → 其它页 44px / 2px / 13px
     · 按钮   46px / 圆角 8px / 字号 15px   → 其它页 44px / 3px / 15px
   圆角 8px 是差异最刺眼的一项：本页控件是圆润的「胶囊感」，别的工具页都是
   近乎直角的 2~3px，两页并排一眼就能看出不是同一套设计。
   现在全部回到站内基线（44px / 2px 输入框、3px 按钮），只保留两项本页特性：
     · 输入框用等宽字体（目的是核对 example.com 与 examp1e.com 这类形近字符，
       与 findping 的地址段输入同一理由，那页也是等宽）；
     · 按钮列仍与左栏同宽 200px（本页只有一颗按钮，撑满会与输入框争视觉重心）。 */
.ssl-form-body {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* 覆盖 .form-row 默认的 align-items:flex-end（底对齐会让按钮被压到提示行
       下方），本页两栏高度不同，必须顶对齐。 */
    align-items: flex-start;
}

.ssl-form-main {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ssl-form-side {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* 顶线与左侧输入框对齐（同 flex-start），并锁死自身不被拉伸。 */
    align-self: flex-start;
}

/* 域名用等宽字体：核对 example.com 与 examp1e.com 这类形近字符时更可靠。
   ⚠️ 选择器前缀必须与 workspace.css 的
   `.tool-page>.tool-form .form-group input`（(0,3,1)）同级或更高，
   否则 44px / 2px 会退回基线的 13px 字与 (0,1,1) 的默认外观。
   padding-right 40px 是给右侧「清空」按钮留位（target-history.js 动态插入）。 */
.tool-page>.tool-form .form-row .ssl-form-main input[type="text"] {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 12px;
    border: 1px solid #d9e0e6;
    border-radius: 2px;
    font-family: Menlo, Consolas, "Microsoft YaHei", monospace;
    font-size: 13px;
    color: #44525c;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.tool-page>.tool-form .form-row .ssl-form-main input[type="text"]:hover {
    border-color: #c2d2da;
}

.tool-page>.tool-form .form-row .ssl-form-main input[type="text"]:focus {
    border-color: #4285ed;
    box-shadow: 0 0 0 2px rgba(66, 133, 237, .15);
    outline: none;
}

/* ⚠️ 必须带 `.tool-page > .tool-form .form-row` 前缀：workspace.css 的
   `.tool-page>.tool-form .form-row .btn`、`.tool-page>.tool-form .btn`、
   `.tool-page>.tool-form .btn-lg` 三条都是 (0,4,0)~(0,4,1)，不带前缀的
   (0,2,0) 覆盖不了，按钮会停在 44px 但保留 `.btn-lg` 的 `padding:12px 32px`
   —— border-box 下 44px 的内容盒被压成 20px，文字被挤扁。
   因此 padding / border-radius 必须在这里显式复位成站内口径（0 14px / 3px）。 */
.tool-page>.tool-form .form-row .ssl-form-side .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    /* 纵向 padding 必须为 0：按钮是 inline-flex + align-items:center，
       上下留白交给 flex 居中，任何纵向 padding 都会把文字挤离中线。 */
    padding: 0 14px;
    border-radius: 3px;
    font-size: 15px;
    line-height: 1;
    align-self: flex-start;
}

.tool-page>.tool-form .form-row .ssl-form-side .btn .btn-icon {
    margin-right: 6px;
}

/* 输入框右侧的「清空」按钮（target-history.js 动态插入的 .th-clear-btn）：
   它按父容器坐标定位，位置本身没问题，但本页输入框 46px 高（比其它页的
   44px 高一档），脚本按 rect.height 算的垂直居中值会多出 1px。
   这里不改脚本（会波及其它页），只在 CSS 侧对齐 —— 定位由内联 style 给出，
   无法在此覆盖，因此保留脚本口径，不做 hack；此注释仅作说明。 */

/* 提示行字号 12 → 13px：
   与 findping 的 .findping-hint 同为输入框下方的说明行，两页原本一个 12px
   一个 13px —— 同一位置的同类文字，字号不同会被读成「这页更不重要」。
   站内说明性正文统一 13px（见 tool.css 的 .ech-disclaimer）。 */
.ssl-hint {
    margin: 0;
    color: #7a8b96;
    font-size: 13px;
    line-height: 1.75;
}

.ssl-hint code {
    padding: 1px 5px;
    border-radius: 3px;
    background: #f2f6f9;
    color: #3d5a6c;
    font-family: Menlo, Consolas, monospace;
    font-size: 12px;
}

/* ===== 概览卡 =====
   从上到下：评级徽章 + 目标与结论 → 关键指标行 → 分项得分 → 计分依据。

   ★ 改版要点：原先「徽章 + 三行文字」占掉 110px 高度却只放了 3 条信息，
     右侧一大片空白。现在把最常被扫读的事实（协议、套件）提成一行等宽指标卡。

   ⚠️ 2026-11-10：原「常显说明」块（.ssl-disclaimer，左侧橙线 + 淡黄底）
      已随模板一起删除 —— 它与本卡底部的 .ssl-summary-foot 及 FAQ 第 2 条
      三处重复同一段「近似实现、非官方结果」。评级口径的说明现在只有
      一处正文来源（.ssl-summary-foot），不再有第二个黄框与之竞争注意力。 */
/* 概览卡与结果面板同一圈口径：8px 圆角 + 同样的浅阴影
   （.ping-results-panel 基线是 3px / 0 2px 5px，本页在 .ssl-results-panel
   里统一提到 8px，因此这里保持 8px 不能退回去）。 */
.ssl-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0 20px;
    margin: 14px 0 14px;
    padding: 18px 20px 0;
    border: 1px solid #dce2e9;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(31, 53, 75, .06);
}

/* 徽章列：徽章在上、说明文字在下。 */
.ssl-summary-grade {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* 说明文字只做「标签」，不参与阅读：字号与字距压到最小，
   避免它与右侧的结论句争夺注意力。 */
.ssl-grade-caption {
    color: #8b9aa5;
    font-size: 12px;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* 右列：目标名 → 一句话结论 → 到期信息。 */
.ssl-summary-main {
    min-width: 0;
    padding-top: 2px;
}

.ssl-summary-target {
    margin: 0 0 6px;
    color: #1f3548;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    /* 站点名可能是很长的 IDN 或子域名，必须允许断开。 */
    overflow-wrap: anywhere;
}

.ssl-summary-note {
    margin: 0 0 6px;
    color: #44525c;
    font-size: 13px;
    line-height: 1.65;
}

/* 到期信息 12.5 → 13px：它包含「到期 2027-01-10（剩余 66 天）」这类
   需要读准的日期与数字，是概览卡里第二顺位的信息，不该比结论句小。 */
.ssl-summary-expiry {
    margin: 0;
    color: #6b7f8c;
    font-size: 13px;
    line-height: 1.65;
}

.ssl-summary-expiry.is-warn {
    color: #b8821b;
}

.ssl-summary-expiry.is-bad {
    color: #c0392b;
    font-weight: 600;
}

/* ── 关键指标行 ──
   跨满整行（含徽章列）。每格：小标签在上、值在下。
   这一行的作用是「不看正文也能答出最常见的问题」。

   ★ 2026-11-10 精简：格数由 4 降到 2（去掉「剩余有效期」——同一张卡
   下一行就写着到期日与天数；去掉「探测节点」——页头已有）。
   因此最小列宽从 150px 提到 200px：两格在宽屏下不会各自缩成一条窄柱，
   套件名（AES_256_GCM_SHA384 这类长串）有足够横向空间不被省略号截断。 */
.ssl-kpi {
    grid-column: 1 / -1;
    display: grid;
    /* auto-fit + 最小 200px：宽屏一行两格，窄屏自动折成一格，不写断点。 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    margin: 16px -20px 0;
    background: #eef2f5;
    border-top: 1px solid #eef2f5;
}

.ssl-kpi-item {
    min-width: 0;
    padding: 10px 16px;
    background: #fff;
}

.ssl-kpi-label {
    display: block;
    margin-bottom: 3px;
    color: #93a1ab;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}

.ssl-kpi-value {
    display: block;
    color: #254150;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 协议/套件是「按值判断好坏」的指标，颜色与正文里的状态色一致。
   ⚠️ is-warn / is-bad 两条规则已随「剩余有效期」格一起删除：现在只剩
   协商协议（恒 is-good）与加密套件（无色调）两种，多留的档位是无用规则。 */
.ssl-kpi-value.is-mono {
    font-family: Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 500;
}

.ssl-kpi-value.is-good {
    color: #1f9254;
}

/* 计分依据脚注：跨满整行，字号小、颜色淡 —— 它是注解不是结论。 */
.ssl-summary-foot {
    grid-column: 1 / -1;
    margin: 0 -20px;
    padding: 9px 20px 10px;
    border-top: 1px solid #eef2f5;
    background: #fafcfd;
    color: #97a5ae;
    font-size: 12px;
    line-height: 1.75;
}

.ssl-summary-foot strong {
    color: #7a8b96;
    font-weight: 600;
}

/* 评级徽章：56px 见方 —— 比文字大一个量级，因为它是这一页的主结论。
   配色只按档位分四组（见 ssl.js 的 GRADE_TONE），不做分数渐变。 */
.ssl-grade-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    padding: 0 8px;
    border-radius: 10px;
    background: #eef2f5;
    color: #6b7b87;
    font-family: Menlo, Consolas, monospace;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.ssl-grade-badge.is-best {
    background: #e6f7ee;
    color: #12864a;
}

.ssl-grade-badge.is-good {
    background: #eaf7ee;
    color: #1f9254;
}

.ssl-grade-badge.is-fair {
    background: #fdf6ec;
    color: #b8821b;
}

.ssl-grade-badge.is-warn {
    background: #fdf1e5;
    color: #cc7a1a;
}

.ssl-grade-badge.is-bad {
    background: #fdecec;
    color: #c0392b;
}

.ssl-grade-badge.is-worst {
    background: #fbe4e4;
    color: #a52a1f;
}

/* ===== 结果面板骨架（与 ping / 找 IP 等页对齐）=====
   ★ 2026-11-10（用户：「跟网站测速等页面的字体大小、页面风格不一致」）。

   本页模板套的是 `<section class="ping-results-panel ssl-results-panel">` +
   `<div class="ping-panel-heading ping-results-heading">`，与 ping 页同一份骨架，
   因此**不应该**在这里另起一套外观。实测两处偏离：

   ① 圆角：`.ping-results-panel` 的基线是 3px（site/ping.css），
      而本页报告里的卡片、概览卡是 8px。同一屏里外框 3px、内卡 8px，
      看起来像两个不同时期的组件拼在一起。现在把面板提到 8px，
      与页内卡片同档 —— 面板是「容器」，容器比内容更圆会显得头重，
      反过来（外框略圆于内卡）才是常见的嵌套观感。
      徽章/计分条同理走 8px。

   ② 内边距：ping 页的表格贴边铺满、面板自身没有 padding；
      本页内容是卡片网格，必须留出 14px。这个 padding 只应加在本页
      （由下方 .ssl-detail-host 承担），不能动 .ping-results-panel 本身，
      否则会波及 ping / tcping / http / dns 四页的贴边表格
      （findping.css 里已有同样的注释，沿用同一处理方式）。

   ③ 标题：`.ping-panel-heading h2` 基线是 15px/400/#526675。本页模板同样
      用这个 h2，无需覆盖 —— 这里只补一条左侧竖条的高度对齐（基线 24px，
      在 50px 高的标题栏里略偏上），以及右上角「探测节点」的字号，
      让它与 ping 页的「当前显示：20/20」同为 14px（.result-count-label 口径）。 */
.ssl-results-panel {
    border-radius: 8px;
    /* 与 ping 页 .ping-result-area 同口径：面板距上方表单 12px。
       workspace-tool.css 的 .probe-result-area（本页容器）已给 12px，
       这里只是把「概览卡与面板之间」也收进同一节奏：
       概览卡自带 margin 14px 0，面板不再额外加顶部间距。 */
    margin-bottom: 0;
}

.ssl-results-panel .ping-panel-heading {
    padding: 0 16px;
}

.ssl-results-panel .ping-panel-heading .class-hr {
    border-radius: 2px;
}

/* 探测节点：#ssl-node-name 是等宽名（节点 ID 含短横与数字），
   与 ping 页「当前显示」同字号 14px。
   ⚠️ 这里**不能**再写 margin-left:auto。本页标题栏只有三件东西
   （标题 / 导出按钮组 / 探测节点），而导出按钮组 .result-share-actions
   自带 margin-left:auto（见 site/ping.css）——两个 auto 会平分剩余空间，
   结果按钮组被推到中间、探测节点占最右。本页要的是「按钮靠右、节点跟在标题后」，
   所以把 auto 只留给按钮组，这里改为不顶边（margin-left:0 显式声明，
   免得将来有人给 .result-count-label 加 auto 又把它顶过去）。 */
.ssl-results-panel .result-count-label {
    margin-left: 0;
    font-size: 14px;
}

/* ===== 报告主体 =====
   ★ 卡片化（2026-11-10）：每块一张卡，卡片之间 14px 留白。
   块内用卡片而不是「小标题 + 裸表格」的原因：五块内容并列展示时，
   没有边界就只能靠标题层级区分，读者需要反复确认「这一行属于哪块」。
   卡片边界让每块成为独立可读单元，也让双列网格有地方收边。 */
.ssl-detail-host {
    padding: 14px 16px 18px;
}

/* 报告内容的容器：内部是卡片网格。 */
.ssl-report {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

/* 跨满两列的卡片：内容宽或需要横向排布（信任链、弱点、说明、失败态）。 */
.ssl-section.is-wide {
    grid-column: 1 / -1;
}

.ssl-section {
    min-width: 0;
    margin: 0;
    border: 1px solid #e3eaf0;
    border-radius: 8px;
    background: #fff;
    /* 卡片内不留 padding：标题栏与内容各自控制，标题的下边框才能贴边。 */
    overflow: hidden;
}

/* 卡片标题栏：15px/600，与结果面板标题（.ping-panel-heading h2 15px）同档。
   ★ 2026-11-10：原为 13.5px/600 —— 比面板标题小一档半，在「检测结果」下方
   紧挨着的五张卡里，每一块的标题都像脚注。站内 h2/h3 的层级口径是
   面板标题 15px、卡片标题 15px（只靠字重与底色区分），见 ping.css。 */
.ssl-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid #eef2f5;
    background: #fbfcfd;
    color: #354e5e;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

/* 标题左侧的蓝色竖条：站内区块标题的统一视觉语言，
   但因为它现在贴在灰底标题栏里，改为 3px 圆角小条而不是通高 border-left。 */
.ssl-section-title::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 13px;
    border-radius: 2px;
    background: #4285ed;
}

.ssl-section-body {
    padding: 12px 14px 14px;
    min-width: 0;
}

/* kv 表：左侧标签定宽，右侧值可换行。
   ★ 改版后 kv 表只用于「少量字段」的窄卡（安全特性、服务器信息）；
   字段多的块改用 .ssl-field-group + .ssl-field-grid 的分组网格，见下。 */
.ssl-kv {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* 标签 13px：与值同字号、只靠颜色区分（站内 kv 表口径，见 ech-kv）。
   原先 13px/500 也合规，这里保持 13px 不再放大 —— 本页 kv 表只剩
   「失败态」在用，是错误详情，字号不宜再提。 */
.ssl-kv th {
    width: 108px;
    padding: 6px 12px 6px 0;
    color: #7a8b96;
    font-weight: 500;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.ssl-kv td {
    padding: 6px 0;
    color: #254150;
    vertical-align: top;
    overflow-wrap: anywhere;
}

/* 行分隔线改为更淡的一档：卡片本身已有边框，行线太重会把卡内切碎。 */
.ssl-kv tr+tr th,
.ssl-kv tr+tr td {
    border-top: 1px solid #f4f7f9;
}

/* 卡片里只剩一张 kv 表时，首行不再需要额外上边距。 */
.ssl-section-body>.ssl-kv:first-child {
    margin-top: -2px;
}

/* 等宽值（CN、算法、序列号、指纹）。
   ★ 2026-11-10（用户：「这个字体大小没有统一一个」，附图里 baidu.com /
   SHA256-RSA 明显比 GlobalSign / 199 天小一号）：
   原值是 12.5px，而同一行的普通值是 13px —— 同一个字段条里两种字号并排，
   看起来像其中一半没加载完样式。现在统一到 13px，与 .ssl-grid-item dd 一致。
   ⚠️ 原注释担心「13px 下指纹会超过一行」，实测不会：
      指纹 95 字符（64 hex + 31 冒号）× 13px 等宽约 7.8px/字符 ≈ 741px，
      卡片整行内宽约 1000px，加上「复制」按钮仍在一行内。
      真正需要防的是窄屏，那边走 .ssl-fp 的任意断行，与字号无关。 */
.ssl-mono {
    font-family: Menlo, Consolas, "Courier New", monospace;
    font-size: 13px;
    color: #3d5a6c;
}

/* ===== 有效期进度条 =====
   用「已过 / 总长」的填充表达紧迫感：数字（剩余 12 天）需要读，
   进度条只需要看。两条信息并排，不需要用户自己换算。

   ★ 2026-11-10 调整：进度条从 6px 加粗到 8px、两端改全圆角，
   并给轨道加内阴影 —— 参考图里这条是卡片顶部最醒目的元素，
   6px 细线在 1000px 宽度下太轻，看着像一条分隔线而不是进度。
   另外 label 从「剩余 113 天」加粗到 14px：它是这一块的主读数。 */
.ssl-validity {
    margin: 0 0 14px;
}

.ssl-validity-bar {
    height: 8px;
    border-radius: 4px;
    background: #edf1f4;
    overflow: hidden;
}

.ssl-validity-bar>span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: #4285ed;
    /* 填充右端加一点内亮，让「已用/剩余」的交界更清楚。 */
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .35);
    transition: width .25s ease;
}

.ssl-validity-bar>span.is-good {
    background: #3aa76d;
}

.ssl-validity-bar>span.is-warn {
    background: #e6a23c;
}

.ssl-validity-bar>span.is-bad {
    background: #e05252;
}

.ssl-validity-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    font-size: 13px;
}

/* 主读数（「剩余 113 天」）：14px + 600，是这块最重的一行。
   14px 而不是 15px 的理由：卡片标题已提到 15px，主读数与标题同号会让
   「剩余 113 天」与「证书信息」看起来同级 —— 它俩是内容与容器的关系。 */
.ssl-validity-label {
    font-size: 14px;
    font-weight: 600;
    color: #44525c;
}

.ssl-validity-label.is-good {
    color: #1f9254;
}

.ssl-validity-label.is-warn {
    color: #b8821b;
}

.ssl-validity-label.is-bad {
    color: #c0392b;
}

.ssl-validity-total {
    color: #91a0a9;
}

/* ===== 证书结论条 =====
   ★ 2026-11-10（方案 B）新增：证书信息的「一句话答案」，横置于字段组之上。
   改版前「可信 / OV / 剩余 392 天」与「组织（O）/ 签名算法」同一权重平铺，
   用户要读完全部字段才知道这张证书行不行。测速类站点（测速网、itdog、
   SSLLabs 摘要）统一是**结论在上、细节在下**，这里照此分层。

   视觉分三档，不允许混淆：
     1. .ssl-verdict-badge  唯一的强结论，实心胶囊 + 白字 + 14px，视线第一落点；
     2. .ssl-verdict-meta   中性事实（域名/品牌/类型/天数），13px 正文色，用 · 分隔；
     3. .ssl-verdict-note   OCSP 查询来源，12px 淡灰，补充说明性质。
   左边界用一条 3px 竖条着色（绿/红），与卡片标题的蓝竖条同构 ——
   整块结论条因此像"卡片的结论栏"，而不是又一行字段。 */
/* ⚠️ 类名统一用 ssl-verdict- 前缀，不用 ssl-trust-：
   .ssl-trust-row / .ssl-trust-item / .ssl-trust-label / .ssl-trust-value
   已被下方「证书链」区块的判定卡占用（见 860 行起），它们带 padding、
   border、背景，若这里复用同名类，结论条里的每一项都会被套成一张小卡片。 */
.ssl-verdict {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: #f8fbfd;
    border: 1px solid #e3edf3;
    border-left: 3px solid #1e8bf0;
    border-radius: 6px;
}

/* 受信任 → 绿；不受信任 → 红。整条的竖条跟着变色，
   让"这张证书算不算数"在余光里就能读到。 */
.ssl-verdict:has(.ssl-verdict-badge.is-good) {
    border-left-color: #2f9e57;
    background: #f6fbf8;
    border-color: #dcefe4;
}

.ssl-verdict:has(.ssl-verdict-badge.is-bad) {
    border-left-color: #c0392b;
    background: #fdf7f6;
    border-color: #f4dedb;
}

.ssl-verdict-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

/* 主结论胶囊：实心而不是浅底 —— 它是全块唯一的"判断"。 */
.ssl-verdict-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 11px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
    color: #fff;
    white-space: nowrap;
}

.ssl-verdict-badge.is-good {
    background: #2f9e57;
}

.ssl-verdict-badge.is-bad {
    background: #c0392b;
}

/* 胶囊内的 ✓ / ! 用小一号字重，避免符号比文字还粗。 */
.ssl-verdict-badge>span:first-child {
    font-size: 12px;
    font-weight: 700;
    opacity: .9;
}

/* 中性事实带：域名 / 品牌 / 类型 / 剩余天数，中间用 · 分隔。
   分隔点用 ::before 画，不占 DOM —— 最后一项不带。 */
.ssl-verdict-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
    color: #46606f;
    font-size: 13px;
    line-height: 1.7;
    min-width: 0;
}

.ssl-verdict-item+.ssl-verdict-item::before {
    content: "·";
    margin: 0 8px;
    color: #b6c4cd;
}

/* 域名是这一串里最需要被确认的（"证书是不是发给我的"），因此最深。 */
.ssl-verdict-name {
    color: #254150;
    font-weight: 600;
    font-family: Menlo, Consolas, "Courier New", monospace;
}

/* 剩余天数：与进度条、有效期表同一套颜色口径。
   默认（>30 天）不额外着色，跟着父级正文色。 */
.ssl-verdict-days.is-warn {
    color: #b8821b;
    font-weight: 600;
}

.ssl-verdict-days.is-bad {
    color: #c0392b;
    font-weight: 600;
}

/* 结论条里嵌的吊销状态胶囊比正文胶囊小一号：
   它是"事实"不是"判断"，不该和主结论抢体积。 */
.ssl-verdict-meta .ssl-tag {
    padding: 0 7px;
    font-size: 12px;
    line-height: 1.6;
}

.ssl-verdict-note {
    margin-top: 6px;
    color: #8595a0;
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* 窄屏：结论条内边距收一点，主结论与事实带允许换行堆叠。 */
@media (max-width: 640px) {
    .ssl-verdict {
        padding: 10px 12px;
    }

    .ssl-verdict-main {
        gap: 6px 8px;
    }
}

/* ===== 状态标签 ===== */
/* 状态胶囊 12 → 13px：站内同类胶囊（.ech-badge）是 12px，但那些胶囊挂在
   12px 的表格正文里；本页正文已是 13px，12px 的胶囊会显得被「缩小」过。
   胶囊内文字与正文同号才不会被读成标签。 */
.ssl-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.7;
    white-space: nowrap;
}

.ssl-tag.is-good {
    background: #e8f7ee;
    color: #1f9254;
}

.ssl-tag.is-warn {
    background: #fdf6ec;
    color: #b8821b;
}

.ssl-tag.is-bad {
    background: #fdecec;
    color: #c0392b;
}

/* is-faint 用于「无结论」类标签（未探测、低危）：必须是中性的灰，
   不能被误读成「已通过」（绿）或「有问题」（红）。 */
.ssl-tag.is-faint {
    background: #f2f5f7;
    color: #8595a0;
}

/* 补充说明文字：紧跟在标签后面（同一行），解释这个标签的含义。
   ★ 2026-11-10：加 overflow-wrap，因为 OCSP 的「查询自 <URL>」
   现在改为跟在徽标右侧（用户要求），长 responder_url 必须能断行，
   否则会把「OCSP 检查」那一格顶宽。 */
.ssl-kv-note {
    margin-left: 8px;
    color: #8595a0;
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* ===== SAN 列表 =====
   限高 + 滚动：CDN 证书动辄上百个域名，全铺开会把「加密与协议」挤到屏幕外。

   ★ 2026-11-10 调整：计数从「共 15 个」句子改成贴组标题的圆角徽标
   （.ssl-san-count），列表本身用 CSS Grid 均分列宽 —— flex-wrap 下
   每个胶囊宽度随域名长短浮动，一行的右边缘参差不齐；改成 grid 后
   同一列的胶囊左右边缘对齐，像一张清单而不是一堆散落的标签。 */
/* 计数徽标：12 → 13px、高 18 → 20px、颜色 #7a8b96 → #46606f。
   ★ 2026-11-10（用户：「这个统计字体颜色不明显 字体也小」，附图为 SAN 的「53」）：
   原值 12px + #7a8b96 在浅底 #eef3f7 上对比度不足 —— 12px 是站内最小正文档，
   而 #7a8b96 又是本页最淡的一档灰，两者叠加后这个数字几乎读不出来，
   但它其实是「这张证书覆盖多少个域名」的唯一量化信息，不该被弱化到这个程度。
   现在字号提到 13px（与组内正文同档）、颜色提到 #46606f（本页次要文字的实色档，
   不再是灰调），并加 500 字重让数字在胶囊里立住。
   ⚠️ 它与 .ssl-chain-count / .ssl-weak-group-count 是同一类小计数，
      三者必须同字号同高度（原注释即有此约定），因此本次三者一起调整，
      否则同一页里会出现「SAN 的 53 比链的 4 级大一号」这种看不出原因的差异。 */
/* ★ 2026-11-10（用户：「总数放到右上方，不要放到里面」）：
   徽标现在位于组标题 <h4> 内，靠 margin-left:auto 推到标题栏最右
   （配合 .ssl-field-group-title.is-with-count 的 flex 布局）。
   这样它与卡片标题栏的其它右对齐元信息位置一致，
   也不会再被读成胶囊列表的第一项。 */
.ssl-san-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 24px;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    background: #eef3f7;
    color: #46606f;
    font-family: Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 500;
}

/* 「仅列出前 N 个」：节点侧截断时才有，说明清单不完整。
   ★ 2026-11-10：计数移进标题栏后，它成为分组内的**第一个**块级元素，
   因此要自己补上「与下方胶囊墙」的间距 —— 原先这个间距由它和
   head 在同一行里自然形成，现在没有了。 */
.ssl-san-note {
    display: block;
    margin: 0 0 6px;
    color: #b8821b;
    font-size: 13px;
    font-weight: 400;
}

.ssl-san-list {
    display: grid;
    /* 均分列：宽屏 6 列、窄屏自动减列。最小 140px 保证
       www.baidu.com 这类常见长度不被截断。 */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    max-height: 116px;
    overflow-y: auto;
    padding: 2px;
}

.ssl-san-chip {
    padding: 3px 8px;
    border: 1px solid #e2ebf0;
    border-radius: 4px;
    background: #f8fbfc;
    color: #3d5a6c;
    font-family: Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    /* 单行省略而不是折行：折行的胶囊会让整个网格的行高被它一个人撑高，
       同一行其它胶囊上下留白一大片。完整域名可在 title 里看（见 JS）。 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 悬停时把完整域名露出来：胶囊被省略后仍要能核对。 */
.ssl-san-chip:hover {
    border-color: #b9d3f5;
    background: #f2f8ff;
    color: #2f74d8;
}

.ssl-copy-btn {
    margin-left: 8px;
    padding: 1px 8px;
    border: 1px solid #c5d3da;
    border-radius: 3px;
    background: #fff;
    color: #5c707d;
    font-size: 12px;
    line-height: 1.6;
    cursor: pointer;
}

.ssl-copy-btn:hover {
    border-color: #2a9df4;
    color: #2a9df4;
}

/* ===== 信任判定行（2026-11-10 改版）=====
   ★ 改版要点（用户：「看不出来证书链，证书链单独一行，要有重点」）：
   上一版是「左栏 200px 竖排判定 + 右栏链路」，链路被挤在右栏、
   四张卡并排压到 180px，读者只看见四个同质小框，看不出「谁签谁」、
   也数不出链有几级。

   现在判定**横排成一行**：4 个判定本来就是并行的独立结论（受信 / 匹配 /
   有效期 / 中间证书），横排符合它们的同级关系，也比竖排少占 3 行高度，
   把纵向空间整块让给下方的证书链。

   每格是「标签在上、徽标在下」的紧凑卡：标签 12px 灰、徽标保持胶囊原样。
   为什么不用 kv 表的行内形式：行内形式（标签左、值右）在横排时会变成
   「标签标签标签 值值值值」的错位列，读者对不上号。 */
.ssl-trust-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.ssl-trust-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid #eef3f7;
    border-radius: 6px;
    background: #fafcfd;
}

.ssl-trust-label {
    color: #8b9aa5;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
}

.ssl-trust-value {
    min-width: 0;
    color: #254150;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* ===== 证书链（独占一行，视觉重点）=====
   ★ 三处「重点」设计：
   ① **独占整行**：不再与判定分栏，链的横向空间从约 600px 涨到卡片全宽，
      四张卡每张能拿到 200px 以上，DN/算法不再被压成窄柱；
   ② **序号徽标**：第 1 级用主题蓝、其余灰色。序号是唯一能让人一眼说出
      「这条链有四级」的线索 —— 上一版完全靠角色名自己去数；
   ③ **块标题**：`证书链 4 级` 带计数徽标，与判定行之间用 16px 间距分隔，
      从「卡片里的附录」升级为「这一块的主角」。

   卡片之间用 gap + 伪元素箭头表达签名方向（A 签 B 的箭头必须朝右）。
   gap 放大到 18px，是因为箭头要落在缝里且不能贴住卡片边框。 */
.ssl-chain-block {
    padding-top: 14px;
    border-top: 1px dashed #eef2f5;
}

.ssl-chain-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #2f4a5c;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* 级数徽标：与 SAN 计数同款（同 13px、同 20px 高），
   保持「同一类小计数长得一样」。
   ★ 2026-11-10：随 SAN 计数一起上调字号与高度，见 .ssl-san-count 注释。
   这里原本就是蓝色 #3b74c4（比 SAN 的灰更深、更明显），
   因此只同步尺寸，不改颜色 —— 换色会让它和 SAN 计数看起来不是同一类。 */
.ssl-chain-count {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    background: #eaf2fb;
    color: #3b74c4;
    font-size: 13px;
    font-weight: 500;
}

.ssl-chain {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: stretch;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ssl-chain-card {
    position: relative;
    display: flex;
    gap: 9px;
    min-width: 0;
    padding: 11px 13px 11px 11px;
    border: 1px solid #e3ecf3;
    border-radius: 7px;
    background: #fbfdfe;
}

/* 序号徽标。叶子证书（第 1 级）用实心蓝，其余描边灰 ——
   链的「起点」是全链唯一与服务端直接相关的一张，值得重一点。 */
.ssl-chain-step {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid #dbe4ec;
    border-radius: 50%;
    background: #f4f7f9;
    color: #7a8b96;
    font-family: Menlo, Consolas, monospace;
    /* 序号只有 1 位数字，11px 在 18px 圆里完全居中可读；
       它是图形元素而不是正文，因此不受 12px 正文下限约束
       （12px 的单字在 18px 圆里会顶到边）。圆径 18 → 20px 是配合
       同级计数徽标 18px 高度做的对齐，让序号与角色名基线更稳。 */
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
}

.ssl-chain-step.is-leaf {
    border-color: #4285ed;
    background: #4285ed;
    color: #fff;
}

.ssl-chain-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* 箭头画在卡片右侧的缝里（用伪元素，不占网格列）：
   gap 18px，箭头宽 7px、right:-13px 正好居中。
   ⚠️ 最后一张不画 —— 根证书后面没有下一级。 */
.ssl-chain-card:not(.is-last)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -12.5px;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid #b9cad6;
    border-right: 1.5px solid #b9cad6;
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
}

/* 根证书用蓝色描边「落地」：它是链条终点，与中间证书区分开。 */
.ssl-chain-card.is-root {
    border-color: #cfe0f7;
    background: #f7faff;
}

.ssl-chain-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 3px;
}

/* 角色名（服务器证书 / 中间证书 / 根证书）：卡片里最重的一行，
   比主体名更重要 —— 用户先要认出「这是第几级的什么证书」。 */
.ssl-chain-role {
    color: #23404f;
    font-size: 13px;
    font-weight: 600;
}

/* 剩余天数 11.5 → 13px：它与角色名同一行，是这一级证书的关键数字
   （「哪一级快过期了」是排查链问题的第一顺位），比角色名小一档半
   会让它读起来像笔记。 */
.ssl-chain-days {
    color: #8b9aa5;
    font-size: 13px;
}

.ssl-chain-days.is-warn {
    color: #b8821b;
}

.ssl-chain-days.is-bad {
    color: #c0392b;
    font-weight: 600;
}

/* 主体名（CN/DN）与元信息 12/11.5 → 13px：
   与 .ssl-grid-item dd 同步（本页正文统一 13px，见该处注释）。
   元信息靠颜色（#8595a0）退居次要，不再靠字号。 */
.ssl-chain-name {
    color: #254150;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.ssl-chain-meta {
    color: #8595a0;
    font-size: 13px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* ===== 协议矩阵 =====
   四列并排：TLS1.3 / 1.2 / 1.1 / 1.0 是固定的一组，等宽排列后
   一眼就能看出「从哪一版开始断掉」。 */
.ssl-proto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.ssl-proto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid #e7eef3;
    border-radius: 6px;
    background: #fbfdfe;
}

.ssl-proto-name {
    color: #354e5e;
    font-size: 13px;
    font-weight: 600;
}

.ssl-proto-state {
    font-size: 13px;
}

/* ===== 服务能力行（HTTP/2、TLS 1.3）=====
   ★ 2026-11-10 新增：原「安全特性」整块并入「协议与套件」后，
   只剩这两条真正独有的结论，做成一行横排的小标签组：
   「标签名 + 状态胶囊」，比原来一张 kv 表（每行一对）省 4 行高度。
   上面加一条虚线，与套件清单分开 —— 前者是「怎么加密的」，
   这里是「服务端还支持什么」。 */
.ssl-feature-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #eef2f5;
}

.ssl-feature {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #6b7f8c;
    font-size: 13px;
}

.ssl-proto-meta {
    color: #91a0a9;
    font-size: 12px;
}

.ssl-proto.is-on {
    border-color: #cfe9db;
    background: #f5fcf8;
}

.ssl-proto.is-on .ssl-proto-state {
    color: #1f9254;
}

/* 不支持：中性灰，不用红色 —— 不支持旧协议是**好事**，
   标红会让人误以为这一项有问题。只有 TLS 1.0/1.1 的支持态才值得警示。 */
.ssl-proto.is-off {
    background: #fafbfc;
}

.ssl-proto.is-off .ssl-proto-state {
    color: #a3b0b9;
}

/* 未探测：虚线圈，与「不支持」区分开 —— 没测到不等于不支持。 */
.ssl-proto.is-unknown {
    border-style: dashed;
    background: #fff;
}

.ssl-proto.is-unknown .ssl-proto-state {
    color: #b0bcc4;
}

/* 当前协商的那一版：左侧强调条。 */
.ssl-proto.is-current {
    border-left: 3px solid #4285ed;
}

/* ===== 证书信息的「字段组」（2026-11-10 第二次改版）=====
   ★ 上一版是一张 auto-fit 网格（minmax 210px），12 个字段硬并进 5 列，
   实测有三个具体毛病（用户反馈「显示不好看」）：
     ① 标签列只有 92px，「证书签发时间」这类 6 字标签自己先折成两行，
        值（带秒时间戳）再折一行 —— 一格占三行，与旁边一行高的格子参差；
     ② 值列只剩约 100px，「Beijing Baidu Netcom Science Technology Co., Ltd」
        折成三行，把整行格子的高度全顶起来；
     ③ 所有格子长得一样重：品牌、签发时间、序列号同层级，
        读者要逐个读完才知道哪个是结论、哪个只是编号。
   现在按语义分组（信任与身份 / 算法 / 有效期 / 吊销 / 标识 / SAN），
   组标题自带说明，组内固定 2~3 列、标签列固定 100px —— 列宽不再被
   「字段数」决定，任何字段都不会把邻格挤成窄柱。

   组与组之间用一条淡分隔线 + 12px 间距；组标题是 12px 灰色小字，
   与值的 12~13px 正文拉开层级但不抢戏（它只是目录，不是内容）。 */
/* ★ 2026-11-10（用户：「内部的 具体详情信息 加上边框」）：
   每个字段组从「共用一条虚线分隔的裸块」改为**各自一张带框的子卡片**。
   原先只有卡片外框，组与组之间靠一条虚线区分，视觉上整块是一片
   连续的白底文字，读者很难看出「身份」「有效期」「算法」是三个独立单元。
   现在每组自成一格：细边 + 浅底标题条 + 独立内边距。

   边框比卡片外框（#e3eaf0）淡一档（#e8eff4）：
   内层如果与外层同深，两块框会互相争边界，看起来像两层同样的容器；
   淡一档后层次是「卡片 > 字段组」，一眼能分出主次。 */
.ssl-field-groups {
    display: block;
}

.ssl-field-group {
    padding: 10px 12px 11px;
    border: 1px solid #e8eff4;
    border-radius: 6px;
    background: #fcfdfe;
}

/* 组与组之间用间距分隔，不再用虚线 —— 有框之后虚线是多余的第二道分隔。 */
.ssl-field-group+.ssl-field-group {
    margin-top: 10px;
}

/* 组标题 12 → 13px，颜色加深到 #6b7f8c：
   13px 与组内正文同档，作为「目录」仍靠颜色与字重区分层级，
   不再靠缩小字号 —— 12px 在 13px 的正文旁边会显得像批注。 */
/* 组标题做成子卡片内的标题条：淡底 + 下边框，与卡片标题栏（.ssl-section-title）
   同构但轻两档（无左侧竖条、字号同正文、底色更淡）。
   ★ 2026-11-10：加框后标题若仍是裸文字，会像浮在框里的第一行内容；
   做成标题条才读得出「这是一个分组的名字」。
   负外边距让它贴到子卡片的边框上（内边距由父级给 12/10px）。 */
.ssl-field-group-title {
    display: flex;
    align-items: center;
    margin: -10px -12px 10px;
    padding: 7px 12px;
    border-bottom: 1px solid #eef4f8;
    background: #f7fafc;
    border-radius: 6px 6px 0 0;
    color: #5b7285;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}

/* 组标题前的短竖线：
   ★ 2026-11-10（方案 B）删除。分组由 6 组压到 3 组后，再用竖线强调
   每个组标题，视觉上会和结论条左侧那条彩色竖条、以及卡片标题的蓝竖条
   凑成「三层竖线」，反而让人分不清哪条代表什么。组标题现在只靠
   颜色 + 字重与正文区分，足够。 */

/* 标题栏右侧带计数的变体（目前只有「域名列表（SAN）」在用）。
   标题本身已是 flex，文字是匿名文本节点，徽标靠自身 margin-left:auto
   顶到最右即可；这里只需给出两者的最小间隙。
   ⚠️ 不要试图用 `> span:not(.ssl-san-count)` 去约束标题文字 ——
   它不是一个 span，选择器不会命中。 */
.ssl-field-group-title.is-with-count {
    gap: 8px;
}

/* 组内网格：列数由 fieldGroup() 按**本组项数**注入 is-col-1/2/3，
   不再全局固定 3 列。
   ★ 2026-11-10（方案 B）改因：固定 3 列时项数不是 3 的倍数必然漏空洞 ——
   「算法」2 项空一格、「吊销状态」1 项空掉 2/3 宽。空白会被读成
   「数据没加载出来」，而不是「这组就这么多字段」。

   为什么不用 auto-fit 自适应：auto-fit 在宽屏会排出 4~5 列，每个值列
   又窄回一百多像素，「组织名折三行」的老问题立刻复现。列数必须是
   显式的、可预测的，只有 1/2/3 三种。 */
.ssl-field-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 24px;
    margin: 0;
}

.ssl-field-grid.is-col-1 {
    grid-template-columns: minmax(0, 1fr);
}

.ssl-field-grid.is-col-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ssl-field-grid.is-col-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ssl-grid-item {
    display: grid;
    /* ★ 2026-11-10（用户：「这个间距太大」，附图为标签与值之间的白发空隙）：
       原来写死 `104px minmax(0,1fr)` + `gap: 8px`。104px 是按**最长的**
       「证书签发时间」（13px 下约 84px）预留的，但同一行里大量标签只有
       2~4 个字（「总时长」「签名算法」「组织（O）」），标签左对齐、
       右侧留白 → 视觉上就成了几十像素的空洞，比 gap 本身宽一个数量级。

       改为 `max-content`：标签列刚好容纳该列最长的标签，不再统一按
       「最长的那一个」占位。gap 收到 6px —— 它现在就是标签与值的**唯一**
       间距，不需要再额外留白。
       ⚠️ max-content 取的是整列所有标签的最大宽度，列内仍然对齐
          （不是每格各自为政），因为同一 group 的 dl 是同一张 grid。
       ⚠️ 必须保留 min-width:0：极端长的标签由 dt 的 ellipsis 省略，
          不能把值列挤到 0 宽。 */
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px;
    padding: 6px 0;
    min-width: 0;
}

/* 跨满整行的项（序列号、指纹）：长串需要全宽，不再参与 3 列布局。 */
.ssl-grid-item.is-wide {
    grid-column: 1 / -1;
}

/* ★ 2026-11-10：标签 12px / 值 12.5px → 统一 13px。
   改动前本页正文是全站最小的两档之一（12、12.5），而 ping / DNS / HTTP 的
   结果正文与表头都是 13px；两页并排时本页的字明显「缩了一号」。
   13px 同时是站内结果区的正文基线，层级改由颜色承担
   （标签 #8b9aa5 灰、值 #254150 深），不靠字号缩小来弱化标签。
   ⚠️ 字号变大后标签列宽度必须同步：100px 是按 12px 时「证书签发时间」
   78px + 8px 间隙算的；13px 下 6 个汉字约 84px，仍放得下，
   但留了余量偏紧，因此提到 104px。 */
.ssl-grid-item dt {
    color: #8b9aa5;
    font-size: 13px;
    line-height: 1.7;
    /* 标签不允许折行：折了就和值的两行视觉上齐平，读不出哪个是标签。 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ssl-grid-item dd {
    margin: 0;
    min-width: 0;
    color: #254150;
    font-size: 13px;
    line-height: 1.7;
    /* 值允许断开但不允许溢出：组织名、DN 这类没有空格的长串
       必须能任意断行，否则会顶宽整列。 */
    overflow-wrap: anywhere;
}

/* 等宽值（CN、算法、序列号、指纹）在深色正文里再压深一档，
   与浅灰标签形成清晰的「标签—值」对比。 */
.ssl-grid-item dd .ssl-mono {
    color: #2b4759;
}

/* 指纹：长串 + 复制按钮。
   ★ 2026-11-10：.ssl-mono 已提到 13px，实测指纹（95 字符）约 741px，
   卡片整行内宽约 1000px，加「复制」按钮仍在同一行，不会折行。
   守卫手段保持不变：宽屏不截断；窄屏用 overflow-wrap:anywhere 任意断开，
   此时「复制」按钮会随串尾换行 —— 它紧跟在短标签「SHA-256」之后，
   归属仍然清楚（该字段已改为单列分组，见 fieldGroup 的 is-col-1）。 */
.ssl-fp {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 组织名（O/OU）：颜色压淡，字号与其它值一致。
   OV/EV 证书的组织名通常是「Beijing Baidu Netcom Science Technology Co., Ltd」
   这种长串，与证书主体信息同级时会抢走视线 —— 它只是身份备注，不是结论。
   ⚠️ 2026-11-10 修正：此前被一路改到 10px，在 13px 的正文旁边小了三档，
   已经不是「小一号」而是「读不清」，尤其是 .com 后面的 "Co., Ltd" 几乎糊成一条。
   ★ 2026-11-10 再改（用户：「这个字体大小没有统一一个」）：12.5 → 13px。
   同一个字段条里「统一名称 13px / 证书品牌 13px / 组织 12.5px」是肉眼可见的
   参差，弱化统一交给颜色（#46606f 比正文 #254150 淡），字号不再承担降档职责。 */
.ssl-grid-item dd .ssl-org {
    color: #46606f;
    font-size: 13px;
    line-height: 1.65;
}

/* ===== 支持的加密套件清单 =====
   ★ 改版要点：套件清单原先是一行一条的竖排列表，TLS 1.2 动辄十几条，
   纵向占满两屏。现在每项做成小胶囊、按版本横向换行排列 ——
   套件名本身短，横排比竖排省 5~6 倍高度，也更容易「一眼扫完有没有非 FS」。 */
.ssl-cipher-lists {
    margin-top: 12px;
}

.ssl-cipher-block {
    margin-bottom: 12px;
}

.ssl-cipher-block:last-child {
    margin-bottom: 0;
}

.ssl-cipher-version {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
    color: #3d5a6c;
    font-size: 13px;
    font-weight: 600;
}

/* 清单可能不完整时的小标注：不用红色，它不是错误，只是探测范围所限。 */
.ssl-cipher-partial {
    padding: 0 6px;
    border-radius: 3px;
    background: #f2f5f7;
    color: #8595a0;
    font-size: 12px;
    font-weight: 400;
}

.ssl-cipher-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ssl-cipher-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid #e7eef3;
    border-radius: 4px;
    background: #fbfdfe;
}

/* 套件名 11.5 → 12.5px：套件名 20~30 个字符，13px 会让胶囊明显变宽、
   TLS 1.2 那一段多占一行，因此不上到 13px；但 11.5px 在 13px 的版本标题下
   是整页最小的一档，属于「需要逐字符核对（有没有 _CBC、是否 _SHA1）」的内容，
   再小就伤可读性。12.5px + 等宽是这一段的下限。 */
.ssl-cipher-name {
    min-width: 0;
    color: #354e5e;
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.ssl-cipher-tags {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ssl-cipher-bits {
    color: #8b9aa5;
    font-size: 12px;
    white-space: nowrap;
}

/* 胶囊里的 FS 标签要再小一档，否则会把胶囊撑得比同行其它项高一截。 */
.ssl-cipher-item .ssl-tag {
    padding: 0 6px;
    font-size: 12px;
    line-height: 1.6;
}

.ssl-cipher-empty {
    margin: 0;
    color: #8b9aa5;
    font-size: 13px;
}

/* ===== 弱点清单 =====
   结构化后按分类分组：每组一个小标题 + 若干条「严重度 + 标题 + 说明」。
   ★ 改版要点：条目改成两列网格（窄卡片并排），单条由「整行宽条」
   变成「半行宽卡」，条目多时高度减半；分类组标题跨满整行。 */
.ssl-weakness-list {
    margin: 0;
}

.ssl-weak-group {
    margin-bottom: 14px;
}

.ssl-weak-group:last-child {
    margin-bottom: 0;
}

.ssl-weak-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: #3d5a6c;
    font-size: 13px;
    font-weight: 600;
}

.ssl-weak-group-count {
    /* ★ 2026-11-10：与 .ssl-san-count / .ssl-chain-count 同步上调
       （12→13px、18→20px、颜色 #7a8b96→#46606f），三者必须同档，
       否则同一页里三个计数的字号各不相同。 */
    min-width: 20px;
    height: 20px;
    box-sizing: border-box;
    padding: 0 6px;
    border-radius: 10px;
    background: #eef3f7;
    color: #46606f;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
}

/* 组内条目并排：auto-fit 保证窄屏自动折成一列。 */
.ssl-weak-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px;
}

.ssl-weak-item {
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid #eef2f5;
    border-radius: 6px;
    background: #fcfdfe;
}

.ssl-weak-item-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #2f4a5c;
    font-size: 13px;
    line-height: 1.6;
}

.ssl-weak-item-detail {
    margin: 5px 0 0;
    color: #6b7f8c;
    font-size: 13px;
    line-height: 1.75;
}

.ssl-no-weakness {
    margin: 0;
    color: #44525c;
    font-size: 13px;
    line-height: 1.8;
}

/* ===== 检测说明（notes）=====
   与弱点的视觉区分：说明是中性注解，不用红黄配色，避免被误读成「又一处问题」。 */
.ssl-notes {
    margin: 0;
    padding-left: 20px;
    color: #6b7f8c;
    font-size: 13px;
    line-height: 1.85;
}

.ssl-notes li {
    margin-bottom: 4px;
}

.ssl-notes li:last-child {
    margin-bottom: 0;
}

/* ===== 失败态 ===== */
.ssl-failure {
    margin: 0 0 4px;
    padding: 14px 16px;
    border: 1px solid #f3dede;
    border-radius: 8px;
    background: #fefafa;
}

.ssl-failure-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #c0392b;
    font-size: 14px;
}

.ssl-failure-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fdecec;
    color: #c0392b;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
}

.ssl-failure-hint {
    margin: 10px 0 0;
    color: #7a8b96;
    font-size: 13px;
    line-height: 1.75;
}

.ssl-failure-hint code {
    padding: 1px 5px;
    border-radius: 4px;
    background: #f2f6f9;
    color: #3d5a6c;
    font-family: Menlo, Consolas, monospace;
}

/* 失败态里的 kv 表是卡片内的唯一内容，标签列可以宽一点。 */
.ssl-failure .ssl-kv th {
    width: 88px;
}

/* ===== 空态 ===== */
.ssl-empty {
    margin: 0;
    padding: 26px 12px;
    color: #91a0a9;
    font-size: 13px;
    text-align: center;
}

/* ===== 分项得分条 =====
   三项分项排一行，综合得分独占一行（跨满宽度），理由：
   - 4 列并排时每格只有 ~170px，进度条短到读不出 90 与 100 的差别；
   - 2×2 会把「综合得分」摆到「加密强度」右边，它与上方三项是
     「汇总 vs 分项」的关系，并排会读成四个同级指标。 */
.ssl-breakdown {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 22px;
    padding: 12px 20px 14px;
    background: #fbfdfe;
}

.ssl-breakdown-item {
    min-width: 0;
}

/* 综合得分：跨满整行，与上方三项用一条细虚线隔开。 */
.ssl-breakdown-item.is-total {
    grid-column: 1 / -1;
    padding-top: 10px;
    border-top: 1px dashed #e3eaf0;
}

.ssl-breakdown-item.is-total .ssl-breakdown-label {
    color: #44525c;
    font-weight: 600;
}

.ssl-breakdown-item.is-total .ssl-breakdown-bar {
    height: 7px;
}

/* 封顶标签：跟在「综合得分」标签后面，做成小胶囊。用琥珀色而非红色 ——
   封顶表示「达到了上限」，不是「配置危险」。 */
.ssl-breakdown-cap-tag {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 9px;
    background: #fdf6ec;
    color: #a8721a;
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
    cursor: help;
}

.ssl-breakdown-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}

.ssl-breakdown-label {
    color: #7a8b96;
}

/* 分数用等宽数字：四个分数左对齐成列后，位数一多一少时
   比例字体（100 比 90 宽）会让它们的右边缘参差不齐。 */
.ssl-breakdown-score {
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ssl-breakdown-score.is-good {
    color: #1f9254;
}

.ssl-breakdown-score.is-fair {
    color: #b8821b;
}

.ssl-breakdown-score.is-bad {
    color: #c0392b;
}

.ssl-breakdown-bar {
    height: 5px;
    border-radius: 3px;
    background: #eef2f5;
    overflow: hidden;
}

.ssl-breakdown-bar>span {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width .25s ease;
}

.ssl-breakdown-bar>.is-good {
    background: #4caf82;
}

.ssl-breakdown-bar>.is-fair {
    background: #e6a23c;
}

.ssl-breakdown-bar>.is-bad {
    background: #e06c5a;
}

/* 链路表里的「本地根库」提示：说明这张根证书不是服务端发的。 */
.ssl-chain-hint {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 3px;
    background: #f2f5f7;
    color: #8595a0;
    font-size: 12px;
    font-weight: 400;
}

/* ===== 页面尾部说明区（检测项目 / 常见问题）：2026-11-10 已随模板全部删除 =====
   原先这里有 8 组规则：
     · .ssl-guide / .ssl-guide-title / .ssl-guide-grid / .ssl-guide-card /
       .ssl-guide-grades / .ssl-mini-badge*（「检测项目」六张卡）
     · .ssl-faq / .ssl-faq-item / .ssl-faq-body（「常见问题」折叠问答）
   两块内容都被用户判定为冗余（与报告逐条重复），模板也已删掉，
   因此样式一并清除 —— 留着会成为永不生效的孤儿规则，反而误导后续维护。
   ⚠️ 若日后要恢复其中任一块，需要同时恢复模板里的 DOM。 */

/* ===== 中窄屏：卡片网格折成单列 =====
   980px 是两列卡片的临界点：低于它每张卡只剩 460px 左右，
   证书信息三列网格会挤成两列再挤成一列，读数体验断崖式下降。
   因此这里直接把报告主网格折成一列，卡片内容自然恢复全宽。 */
@media (max-width: 980px) {
    .ssl-report {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 判定行在单列卡片里一行仍可放三格（150px 起）；再窄由 auto-fit 折行。 */
    .ssl-trust-row {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

/* 字段组固定 3 列，必须在窄屏显式降列 —— 固定列数是「值列够宽」的
   保证（见 .ssl-field-grid 注释），但也意味着不会自动折行。
   860px 时三列每格约 250px（标签 104 + 值 146），组织名开始折两行；
   640px 时每格只剩 190px，值列 86px 已经完全不能读。
   ⚠️ 这两个断点是按字号 13px、标签列 104px 重新核过的（2026-11-10），
   字号再动就要重新算「值列剩余宽度」是否还够放一个域名。 */
@media (max-width: 860px) {
    .ssl-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ssl-field-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ★ 2026-11-10：96px 固定标签列同样会产生「标签右侧一大片空白」
       （与宽屏 104px 是同一个问题，见 .ssl-grid-item 注释）。
       单列时横向空间更紧张，更应让标签只占它自己的宽度，
       因此与宽屏统一改为 max-content。 */
    .ssl-grid-item {
        grid-template-columns: max-content minmax(0, 1fr);
    }

    /* SAN 单列时两列胶囊即可，避免每个胶囊被压到 100px 以下。 */
    .ssl-san-list {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

@media (max-width: 860px) {

    /* 判定行在窄屏折两列（每格仍够「中间证书」标签不折行）。 */
    .ssl-trust-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 徽章改为横排（徽章 + 说明文字同一行），比竖排更省高度。 */
    .ssl-summary {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ssl-summary-grade {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
    }

    /* 分项得分折成单列：三列在窄屏里每格只有一百多像素，
       进度条短到看不出差异。综合分本来就是整行，无需额外处理。 */
    .ssl-breakdown {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ssl-breakdown-item.is-total {
        padding-top: 10px;
    }
}

@media (max-width: 560px) {
    .ssl-kv th {
        width: 92px;
    }

    /* 换行占满整行：按钮独占一行，不再需要与输入框并排对齐。 */
    .ssl-form-side {
        flex: 1 1 100%;
    }

    .ssl-form-side .btn {
        width: 100%;
    }

    /* 极窄屏下「探测节点」再降一档字号：它紧跟标题、不和导出按钮抢靠右位，
       但一行里挤着 标题 + JSON/CSV/TXT + 节点名，缩字号换来不折行。 */
    .ssl-results-panel .result-count-label {
        margin-left: 0;
        font-size: 13px;
    }

    /* 560px 以下 label 列改为上下堆叠：label 独占一行，值另起一行。
       此时 dt 的 nowrap/ellipsis 必须复位 —— 单列布局里没有「列宽压力」，
       截断只会白白吃掉标签文字。 */
    .ssl-grid-item {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .ssl-grid-item dt {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* KPI 行在极窄屏折成一列，每格独占一行。 */
    .ssl-kpi {
        grid-template-columns: 1fr;
    }

    .ssl-kpi-value {
        white-space: normal;
    }
}