/* ==========================================================================
   ZZSSL 证书检测 · 全站样式
   设计基调：纯白背景 + 单一科技蓝色系（文字 / 按钮 / 边框 / 图标 / 链接 / 强调）
   排版原则：8pt 间距节奏、统一字阶与行高、区块对齐与清晰视觉层级
   正文字体：阿里巴巴普惠体 3.0（自托管 woff2，GB2312 子集，覆盖界面全部文案用字）
   说明：全部颜色走 CSS 变量，改主色只需替换 --primary 一族的取值
   ========================================================================== */

/* --------------------------------------------------------------------------
   阿里巴巴普惠体 3.0（自托管，无外部 CDN）
   - 400/500 → Regular 55；600/900 → SemiBold 75（站点只用到这两档视觉重量）
   - 等宽字体留给代码块与技术串，保持对齐与辨识度
   - font-display: swap：字体未就绪时先用系统字体渲染，避免首屏空白
   - 文件为 GB2312 子集（7536 字形，覆盖本站全部中文文案），生僻字回退系统字体
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Alibaba PuHuiTi";
    src: url("fonts/alibaba-puhuiti-regular.woff2") format("woff2");
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Alibaba PuHuiTi";
    src: url("fonts/alibaba-puhuiti-semibold.woff2") format("woff2");
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---------- 颜色 · 表面 ---------- */
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f6f9ff;
    /* 极浅蓝：表头、代码块、证据区 */
    --surface-tint: #eef4ff;
    --surface-tint-strong: #e3edff;

    /* ---------- 颜色 · 线条 ---------- */
    --border: #e3ebf6;
    --border-strong: #c9d8ec;
    --border-focus: #9dbcf0;

    /* ---------- 颜色 · 文字（全部蓝灰系） ---------- */
    --text: #0b1a33;
    --text-2: #2b4166;
    --text-muted: #55678a;
    --text-faint: #64748f;

    /* ---------- 颜色 · 主色（科技蓝） ---------- */
    --primary: #1657d8;
    --primary-hover: #1147bb;
    --primary-strong: #0c3f9e;
    --primary-soft: #e9f0ff;
    --primary-line: #b8cdf3;
    --on-primary: #ffffff;
    --ring: rgba(22, 87, 216, 0.20);

    /* ---------- 颜色 · 状态（签章卡片的对勾用） ---------- */
    --ok: #12a150;

    /* ---------- 颜色 · 评级（同色系深浅编码 + 描边样式辅助） ---------- */
    --grade-a-plus-fg: #0a3578;
    --grade-a-plus-bg: #dce9ff;
    --grade-a-plus-bd: #a8c3f0;
    --grade-a-fg: #10419c;
    --grade-a-bg: #e6efff;
    --grade-a-bd: #b7cdf3;
    --grade-b-fg: #1c4f9e;
    --grade-b-bg: #eef4ff;
    --grade-b-bd: #cbdaf1;
    --grade-c-fg: #3c5f8f;
    --grade-c-bg: #f4f7fd;
    --grade-c-bd: #d5e1f1;
    --grade-d-fg: #53708f;
    --grade-d-bg: #f8fafd;
    --grade-d-bd: #d8e3f0;
    --grade-f-fg: #3f5a7a;
    --grade-f-bg: #ffffff;
    --grade-f-bd: #c2d2e6;
    --grade-na-fg: #64748f;
    --grade-na-bg: #f7f9fc;
    --grade-na-bd: #e0e8f3;

    /* ---------- 圆角 ---------- */
    --r-xs: 6px;
    --r-sm: 9px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* ---------- 阴影（蓝调、极轻） ---------- */
    --shadow-xs: 0 1px 2px rgba(12, 43, 92, 0.05);
    --shadow-sm: 0 1px 2px rgba(12, 43, 92, 0.04), 0 6px 16px -12px rgba(12, 43, 92, 0.18);
    --shadow-md: 0 1px 2px rgba(12, 43, 92, 0.05), 0 14px 30px -18px rgba(12, 43, 92, 0.26);

    /* ---------- 间距节奏（8pt 为主，4pt 细分） ---------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 48px;
    --sp-10: 64px;
    --sp-11: 80px;

    /* ---------- 字体 ---------- */
    --font-sans: "Alibaba PuHuiTi", "Alibaba PuHuiTi 3", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

    /* ---------- 字阶 ---------- */
    --fs-2xs: 11px;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 17px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 30px;

    /* ---------- 行高 ---------- */
    --lh-tight: 1.25;
    --lh-snug: 1.45;
    --lh-base: 1.7;
    --lh-loose: 1.85;

    /* ---------- 容器 ---------- */
    --wrap: 1080px;
    --header-h: 64px;
}

/* ==========================================================================
   基础重置
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

/* ---------- 标题：统一字阶与行高，建立层级 ---------- */
h1,
h2,
h3,
h4 {
    margin: 0 0 var(--sp-3);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: -0.015em;
    color: var(--text);
    text-wrap: balance;
}

h1 {
    font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.125rem);
    letter-spacing: -0.025em;
}

h2 {
    font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
}

h3 {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    font-weight: 600;
}

h4 {
    font-size: var(--fs-md);
    font-weight: 600;
}

p {
    margin: 0 0 var(--sp-4);
}

p:last-child {
    margin-bottom: 0;
}

ul,
ol {
    margin: 0 0 var(--sp-4);
    padding-left: 1.25em;
}

li {
    margin-bottom: var(--sp-2);
}

li:last-child {
    margin-bottom: 0;
}

strong,
b {
    font-weight: 600;
}

a {
    color: var(--primary);
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--primary-strong);
    text-decoration: underline;
}

hr {
    height: 1px;
    border: 0;
    background: var(--border);
    margin: var(--sp-6) 0;
}

/* ---------- 焦点可见性 ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--primary-strong);
    background: var(--surface-tint);
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
    padding: 0.1em 0.4em;
}

.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.small {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.break {
    word-break: break-all;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: var(--sp-4);
    top: -60px;
    z-index: 100;
    padding: 10px 18px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    background: var(--primary);
    color: var(--on-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 0;
    color: var(--on-primary);
    text-decoration: none;
}

/* ---------- 栅格容器 ---------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--sp-6);
}

/* ==========================================================================
   页头
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(180%) blur(10px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    min-width: 0;
}

.brand:hover {
    text-decoration: none;
    color: var(--text);
}

/* 品牌字标：矢量 SVG 按高度定尺寸（551×153 ≈ 3.6:1），宽度自适应 */
.brand-logo {
    display: block;
    height: 40px;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.site-nav a:hover {
    background: var(--primary-soft);
    color: var(--primary-strong);
    text-decoration: none;
}

.site-nav a.is-active {
    background: var(--primary-soft);
    color: var(--primary-strong);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--primary-line);
}

/* ==========================================================================
   主体与区块节奏
   ========================================================================== */
.site-main {
    padding: var(--sp-7) 0 var(--sp-11);
}

.section {
    margin-top: var(--sp-10);
}

.section:first-child {
    margin-top: 0;
}

.section > h2 {
    margin-bottom: var(--sp-2);
}

.section-desc {
    margin: 0 0 var(--sp-5);
    color: var(--text-muted);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    max-width: 72ch;
}

.breadcrumb {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb li {
    margin: 0;
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: var(--sp-2);
    color: var(--text-faint);
}

.breadcrumb a {
    color: var(--text-muted);
}

.breadcrumb a:hover {
    color: var(--primary);
}

/* ==========================================================================
   卡片
   ========================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-6);
}

.page-head {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-6);
}

.page-head h1 {
    margin-bottom: var(--sp-2);
}

.lead {
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    color: var(--text-2);
    max-width: 76ch;
}

/* ==========================================================================
   首页：单一检测入口（居中）
   ========================================================================== */
.home-hero {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--sp-8) 0 var(--sp-6);
    text-align: center;
}

.home-hero h1 {
    margin: 0 0 var(--sp-6);
    font-size: clamp(22px, 4.4vw, 30px);
    line-height: var(--lh-snug);
}

.home-form {
    gap: var(--sp-3);
    text-align: left;
}

.home-input-row {
    display: flex;
    gap: var(--sp-3);
    align-items: stretch;
}

.home-input-row input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 var(--sp-4);
    font-size: 16px; /* iOS 聚焦时不缩放页面 */
    border: 1px solid var(--border-strong, var(--border));
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
}

.home-input-row input[type="text"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-color: var(--primary);
}

.home-input-row .btn-submit {
    flex: none;
    height: 48px;
    padding: 0 var(--sp-6);
}

.home-help {
    margin: 0;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

.home-help code {
    font-size: var(--fs-xs);
}

.home-tip {
    margin: var(--sp-5) 0 0;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

/* 只给屏幕阅读器的标签（视觉上不占位，保持页面极简） */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   表单
   ========================================================================== */
.check-form {
    display: grid;
    gap: var(--sp-5);
}

.field {
    display: grid;
    gap: var(--sp-2);
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.field label,
.field legend {
    padding: 0;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text);
}

.field-group {
    gap: var(--sp-3);
}

.field-check {
    gap: var(--sp-2);
}

.req {
    color: var(--primary);
    font-weight: 700;
}

input[type="text"],
input[type="url"],
input[type="number"],
input[type="search"] {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    font-family: var(--font-mono);
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: none;
}

input::placeholder {
    font-family: var(--font-sans);
    color: var(--text-faint);
    letter-spacing: 0.01em;
}

input[type="text"]:hover,
input[type="url"]:hover,
input[type="number"]:hover {
    border-color: var(--primary-line);
}

input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring);
    outline: none;
}

.help {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

.radio-row {
    display: grid;
    gap: var(--sp-2);
}

.radio,
.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.radio input,
.checkbox input {
    margin: 0;
    accent-color: var(--primary);
    flex: none;
}

.radio:hover,
.checkbox:hover {
    border-color: var(--primary-line);
    background: var(--surface-soft);
}

.radio:has(input:checked),
.checkbox:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.checkbox.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---------- 按钮 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 42px;
    padding: 0 var(--sp-5);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 1px 2px rgba(22, 87, 216, 0.24), 0 8px 18px -12px rgba(22, 87, 216, 0.6);
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--on-primary);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(22, 87, 216, 0.28), 0 12px 24px -14px rgba(22, 87, 216, 0.7);
}

.btn-ghost {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-2);
}

.btn-ghost:hover {
    border-color: var(--primary);
    color: var(--primary-strong);
    background: var(--surface-soft);
    text-decoration: none;
}

.btn-block {
    width: 100%;
}

.form-tip {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--text-muted);
    text-align: center;
}

/* ==========================================================================
   评级徽章（同色系深浅 + 描边样式编码等级）
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2em;
    font-family: var(--font-mono);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    border-radius: var(--r-pill);
    border: 1px solid currentColor;
    background: var(--grade-na-bg);
    color: var(--grade-na-fg);
}

.badge-sm {
    font-size: var(--fs-xs);
    padding: 5px 9px;
}

.badge-md {
    font-size: var(--fs-base);
    padding: 7px 12px;
}

.badge-lg {
    font-size: var(--fs-lg);
    padding: 9px 16px;
}

.badge-xl {
    font-size: 34px;
    padding: 16px 26px;
    border-width: 2px;
    border-radius: var(--r-md);
    letter-spacing: -0.02em;
}

.badge-a-plus {
    color: var(--grade-a-plus-fg);
    background: var(--grade-a-plus-bg);
    border-color: var(--grade-a-plus-bd);
}

.badge-a {
    color: var(--grade-a-fg);
    background: var(--grade-a-bg);
    border-color: var(--grade-a-bd);
}

.badge-b {
    color: var(--grade-b-fg);
    background: var(--grade-b-bg);
    border-color: var(--grade-b-bd);
}

.badge-c {
    color: var(--grade-c-fg);
    background: var(--grade-c-bg);
    border-color: var(--grade-c-bd);
}

.badge-d {
    color: var(--grade-d-fg);
    background: var(--grade-d-bg);
    border-color: var(--grade-d-bd);
    border-style: dashed;
}

.badge-f {
    color: var(--grade-f-fg);
    background: var(--grade-f-bg);
    border-color: var(--grade-f-bd);
    border-style: dashed;
}

.badge-na {
    color: var(--grade-na-fg);
    background: var(--grade-na-bg);
    border-color: var(--grade-na-bd);
}

/* ==========================================================================
   能力卡片
   ========================================================================== */
.cap-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
}

.cap-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.cap-card:hover {
    border-color: var(--primary-line);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.cap-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: 0;
}

.cap-card h3 {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
}

.cap-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

.weight-pill {
    flex: none;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-strong);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    white-space: nowrap;
}

/* ==========================================================================
   正文（说明页 / FAQ / 步骤）
   ========================================================================== */
.prose {
    max-width: none;
    color: var(--text-2);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
}

/*
 * 正文块保持可读行宽（72ch），左对齐以保证与表格/标题的左边线一致；
 * 表格与代码块例外，允许占满容器，否则长内容只能横向滚动。
 */
.prose > * {
    max-width: 72ch;
}

.prose > .table-scroll,
.prose > .code-block,
.prose > figure,
.prose > .faq-list,
.prose > .steps {
    max-width: 100%;
}

.prose h2 {
    margin-top: var(--sp-9);
    margin-bottom: var(--sp-3);
    color: var(--text);
}

.prose h2:first-child {
    margin-top: 0;
}

.prose h3 {
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-2);
    color: var(--text);
}

.prose ul,
.prose ol {
    padding-left: 1.35em;
    margin-bottom: var(--sp-5);
}

.prose li {
    margin-bottom: var(--sp-2);
}

.prose .note {
    margin: var(--sp-5) 0;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-soft);
    border: 1px solid var(--primary-line);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--primary-strong);
    font-size: var(--fs-base);
}

.inline-links {
    margin-top: var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.inline-links a {
    font-weight: 500;
}

.code-block {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--text-2);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow-x: auto;
    white-space: pre;
    tab-size: 2;
}

/* ---------- 步骤 ---------- */
.steps {
    list-style: none;
    counter-reset: step;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
}

.steps li {
    counter-increment: step;
    margin: 0;
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.steps li::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: var(--sp-3);
    border-radius: 50%;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-strong);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.steps h3 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-md);
}

.steps p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

/* ---------- FAQ ---------- */
.faq-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
}

.faq-item {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
    box-shadow: var(--shadow-xs);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.faq-item:hover {
    border-color: var(--primary-line);
    box-shadow: var(--shadow-sm);
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::before {
    content: "+";
    display: inline-block;
    width: 18px;
    margin-right: 4px;
    color: var(--primary);
    font-family: var(--font-mono);
    font-weight: 700;
}

.faq-item[open] summary::before {
    content: "−";
}

.faq-item p {
    margin: var(--sp-3) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    overflow-wrap: anywhere;
}

/* ==========================================================================
   结果页
   ========================================================================== */
.result-hero {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: center;
    padding: var(--sp-7);
}

.result-grade {
    text-align: center;
    padding-right: var(--sp-7);
    border-right: 1px solid var(--border);
}

.result-score {
    margin: var(--sp-3) 0 var(--sp-1);
    font-family: var(--font-mono);
    color: var(--text);
}

.result-score strong {
    font-size: clamp(2.25rem, 1.8rem + 1vw, 2.75rem);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 700;
}

.result-score span {
    margin-left: 4px;
    color: var(--text-faint);
    font-size: var(--fs-sm);
}

.result-grade-note {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-2xs);
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.meter {
    height: 6px;
    margin: var(--sp-3) 0 0;
    border-radius: var(--r-pill);
    background: var(--surface-tint);
    overflow: hidden;
}

.meter-fill {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--primary);
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.meter-a-plus {
    background: var(--grade-a-plus-fg);
}

.meter-a {
    background: var(--grade-a-fg);
}

.meter-b {
    background: var(--grade-b-fg);
}

.meter-c {
    background: var(--grade-c-fg);
}

.meter-d {
    background: var(--grade-d-fg);
}

.meter-f,
.meter-na {
    background: var(--grade-na-fg);
}

.result-meta h1 {
    margin-bottom: var(--sp-2);
}

.result-summary {
    margin-bottom: var(--sp-4);
    color: var(--text-2);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
}

.meta-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-6);
    margin: 0 0 var(--sp-5);
}

.meta-list > div {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    min-width: 0;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border);
}

.meta-list dt {
    flex: none;
    min-width: 64px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.meta-list dd {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-2);
    word-break: break-all;
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: 0;
}

/* ---------- 待整改清单 ---------- */
.risk-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}

.risk-list li {
    margin: 0;
}

.risk-list li a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-sm);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.risk-list li a:hover {
    background: var(--surface-soft);
    border-left-color: var(--primary-strong);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.risk-list em {
    font-style: normal;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* ---------- 六项评级卡（3 列网格） ---------- */
.grade-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
    align-items: stretch;
}

.grade-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.grade-card:hover {
    border-color: var(--primary-line);
    box-shadow: var(--shadow-md);
}

.grade-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
}

.grade-card-head h3 {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
}

.grade-card-weight {
    margin: 4px 0 0;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--text-faint);
    letter-spacing: 0.02em;
}

.grade-card-summary {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: var(--lh-snug);
    color: var(--text);
}

.grade-card-detail {
    margin: 0;
    padding: var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--text-2);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    word-break: break-word;
}

.grade-card-note {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

.grade-advice {
    margin-top: auto;
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--border);
}

.grade-advice summary {
    cursor: pointer;
    list-style: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary);
}

.grade-advice summary::-webkit-details-marker {
    display: none;
}

.grade-advice summary::after {
    content: " ›";
    font-family: var(--font-mono);
}

.grade-advice[open] summary::after {
    content: " ⌄";
}

.grade-advice .code-block {
    margin-top: var(--sp-3);
    white-space: pre-wrap;
}

/* ---------- 评级卡内的协议状态（TLS 协议配置项专属） ----------
   已开启 / 不安全 / 未能测出 / 推荐配置四行直接平铺在卡片里：
   这是整改时最需要一眼看到的结论，不藏进折叠区。 */
.grade-card-protocols {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
}

.gcp-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    margin: 0;
}

.gcp-label {
    flex: none;
    min-width: 4.5em;
    color: var(--text-muted);
    font-weight: 600;
}

.gcp-value {
    color: var(--text);
    word-break: break-word;
}

.gcp-row-bad .gcp-label,
.gcp-row-bad .gcp-value {
    color: var(--primary-strong);
    font-weight: 600;
}

.gcp-row-muted .gcp-value {
    color: var(--text-muted);
}

.gcp-row-recommended {
    padding-top: 6px;
    border-top: 1px dashed var(--border);
}

.gcp-row-recommended .gcp-value {
    font-weight: 600;
}

/* ==========================================================================
   悬浮快捷导航（结果页）：按主题分组的站内跳转入口。
   分组恒为两级——分组标题（评测结论 / 证书与部署 / 协议 / 环境与端口）→ 链接，
   每个链接对应结果页里真实存在的锚点（目标区块未渲染时入口整体不出现）。
   用 <details> 实现展开/收起，不依赖 JS；跳转后的高亮复用 .is-highlight 动画。
   面板带 max-height + 内部滚动：入口最多十几项，也不能撑满屏幕遮挡正文。
   z-index 低于站点页头（40），避免遮挡顶部导航。
   ========================================================================== */
.quick-nav {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    z-index: 30;
    width: 240px;
    border: 1px solid var(--primary-line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-xs);
}

.quick-nav > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--primary-strong);
}

.quick-nav > summary::-webkit-details-marker {
    display: none;
}

.quick-nav > summary::after {
    /* 面板向上弹出，收起态用向上箭头示意展开方向 */
    content: " ⌃";
    margin-left: auto;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.quick-nav[open] > summary::after {
    content: " ⌄";
}

.quick-nav-title {
    white-space: nowrap;
}

.quick-nav-panel {
    /* 绝对定位成"浮层"贴在摘要上方：
       ① 摘要固定在屏幕右下角不动（不再随面板高度上移，展开时触发器不跳位）；
       ② 高度上限扣掉页头与摘要自身占位，任何屏高都不会压到吸顶页头；
       ③ 内容超出时面板内部滚动，正文不被整屏遮挡。 */
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + var(--sp-2));
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-height: min(70vh, 560px);
    /* 支持 dvh 的浏览器用动态视口高度（移动端地址栏收起/展开时更准） */
    max-height: min(70dvh, calc(100dvh - 160px), 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-2);
    border: 1px solid var(--primary-line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.quick-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 分组之间用细线隔开；第一个分组上方已是面板边缘，不需要分隔 */
.quick-nav-group + .quick-nav-group {
    border-top: 1px solid var(--border);
    padding-top: var(--sp-2);
}

.quick-nav-group-title {
    margin: 0;
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.quick-nav-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--text);
}

.quick-nav-link:hover {
    background: var(--primary-soft);
}

.quick-nav-link strong {
    font-size: var(--fs-sm);
    color: var(--primary-strong);
}

.quick-nav-link span {
    color: var(--text-muted);
    font-size: var(--fs-2xs);
}

/* ==========================================================================
   表格
   ========================================================================== */
.table-scroll {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.data-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: var(--fs-base);
}

.data-table caption {
    caption-side: top;
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.data-table th,
.data-table td {
    padding: 11px var(--sp-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border-strong);
}

.data-table tbody tr:nth-child(even) {
    background: #fcfdff;
}

.data-table tbody tr:hover {
    background: var(--primary-soft);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody th[scope="row"] {
    font-weight: 600;
    color: var(--text);
}

/* 区块内的子标题（证书部署下的「证书链」「并列对比」）：比 h2 小一号，
   让模块到子区块的层级一眼可辨，同时不抢走 h2 的页面骨架地位。 */
.subsection-title {
    margin: var(--sp-6) 0 var(--sp-2);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text);
}

.subsection-title:first-of-type {
    margin-top: var(--sp-4);
}

/* 链上证书已过期 / 尚未生效：在过期时间那一列直接标出来，
   避免用户还要自己拿日期跟今天比。 */
.chain-table .chain-time-bad {
    color: var(--primary-strong);
    font-weight: 700;
}

.chain-table .chain-time-warn {
    color: var(--text-2);
    font-weight: 600;
}

.chain-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--surface-tint);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--primary-strong);
    white-space: nowrap;
}

/* 证书链：起止时间必须是完整一行，不能被拆成 "2026-06-" + "09" */
.chain-table {
    min-width: 720px;
}

.chain-table .chain-time {
    white-space: nowrap;
}

/* 由信任链补齐的内置根证书：与服务器下发的层级区分开 */
.chain-table tr.chain-anchor {
    background: var(--surface-tint);
}

.chain-tag {
    display: inline-block;
    margin-right: 4px;
    padding: 0 6px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-pill);
    font-size: var(--fs-2xs);
    color: var(--text-faint);
    white-space: nowrap;
}

/* ---- 多证书（RSA + ECDSA）并列对比 ---- */
.cm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-3);
}

.cm-hint {
    font-size: var(--fs-2xs);
    color: var(--text-faint);
}

.cert-compare .cm-field-col {
    width: 128px;
    min-width: 128px;
}

.cert-compare thead th {
    vertical-align: top;
}

.cert-compare .cm-cert-col {
    text-align: left;
}

.cm-cert-name {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text);
}

.cm-cert-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: 2px;
    font-size: var(--fs-2xs);
    font-weight: 400;
    color: var(--text-faint);
}

.cm-tag {
    display: inline-block;
    padding: 0 6px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.cm-tag-primary {
    border-color: var(--primary-line);
    background: var(--primary-soft);
    color: var(--primary-strong);
    font-weight: 600;
}

/* 差异行：左侧色条 + 字段名后的"差异"小标，便于一眼扫出不同点 */
.cert-compare .cm-row.is-diff th[scope="row"] {
    background: var(--surface-tint);
    box-shadow: inset 3px 0 0 var(--primary);
}

.cm-diff-tag {
    display: inline-block;
    margin-left: var(--sp-1);
    padding: 0 5px;
    border-radius: var(--r-xs);
    background: var(--primary-soft);
    color: var(--primary-strong);
    font-size: var(--fs-2xs);
    font-weight: 600;
    white-space: nowrap;
}

.cm-value {
    vertical-align: top;
}

.cm-text {
    display: block;
    color: var(--text-2);
    word-break: break-word;
}

.cm-note {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-2xs);
    line-height: var(--lh-tight, 1.45);
    color: var(--text-faint);
}

.cm-empty {
    color: var(--text-faint);
}

.cm-unit {
    margin-left: var(--sp-1);
    font-size: var(--fs-2xs);
    color: var(--text-faint);
}

/* 色调：整体只有科技蓝一族，靠"深浅 + 字重 + 底纹"区分，不引入第二种色相 */
.cv-ok .cm-text {
    color: var(--primary-strong);
    font-weight: 600;
}

.cv-warn .cm-text {
    color: var(--text);
    font-weight: 700;
}

.cv-bad .cm-text {
    display: inline-block;
    padding: 0 6px;
    border-radius: var(--r-xs);
    background: var(--primary-strong);
    color: var(--on-primary);
    font-weight: 600;
}

.cv-muted .cm-text {
    color: var(--text-faint);
}

.cm-san-count {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* SAN 逐条列出：长列表内部滚动，避免把对比表撑得过高 */
.cm-san-list {
    max-height: 148px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cm-san-list li {
    padding: 1px 0;
    color: var(--text-2);
    word-break: break-all;
}

.cm-footnotes {
    margin: var(--sp-3) 0 0;
    padding-left: 1.1em;
    font-size: var(--fs-2xs);
    line-height: var(--lh-base);
    color: var(--text-faint);
}

.cm-footnotes li + li {
    margin-top: var(--sp-2);
}

.cm-footnotes strong {
    color: var(--text-muted);
    font-weight: 600;
}

/* 只看差异项（由结果页按钮切换） */
.cert-compare.only-diff .cm-row:not(.is-diff) {
    display: none;
}

.cm-scroll-hint {
    display: none;
    font-size: var(--fs-2xs);
    color: var(--text-faint);
}

/* 证书链里每一级的角色（叶子 / 中间 / 根），直接回答"链上都有什么" */
.chain-role {
    display: inline-block;
    padding: 0 6px;
    border-radius: var(--r-xs);
    background: var(--surface-tint);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ---- 单张证书完整字段画像 ----
   单证书站点同样按 19 个字段逐项展示，不再只给四项摘要。
   样式与并列对比矩阵共用一套色调类（cv-*），保证两种视图观感一致。 */
.cert-profile th[scope="row"] {
    width: 150px;
    min-width: 150px;
    vertical-align: top;
    white-space: nowrap;
}

.cp-value {
    vertical-align: top;
}

.cp-text {
    display: block;
    color: var(--text-2);
    word-break: break-word;
}

.cp-note {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-2xs);
    line-height: 1.45;
    color: var(--text-faint);
}

.cp-empty {
    color: var(--text-faint);
}

.cv-ok .cp-text {
    color: var(--primary-strong);
    font-weight: 600;
}

.cv-warn .cp-text {
    color: var(--text);
    font-weight: 700;
}

.cv-bad .cp-text {
    display: inline-block;
    padding: 0 6px;
    border-radius: var(--r-xs);
    background: var(--primary-strong);
    color: var(--on-primary);
    font-weight: 600;
}

.cv-muted .cp-text {
    color: var(--text-faint);
}

.cp-san-count {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.cp-san-list {
    max-height: 220px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-san-list li {
    padding: 1px 0;
    color: var(--text-2);
    word-break: break-all;
}

.cp-san-more {
    margin-top: var(--sp-2);
}

.cp-san-more summary {
    font-size: var(--fs-2xs);
    color: var(--primary);
    cursor: pointer;
}

@media (max-width: 640px) {
    .cert-compare .cm-field-col {
        width: 104px;
        min-width: 104px;
    }

    /* 窄屏：字段名与值上下堆叠。
       .kv-table 有 520px 最小宽度，若沿用表格布局，手机上必须横向滑动才能看到值，
       而"值"恰恰是用户最想看的，所以这里直接改成卡片式纵向排布。 */
    /* 用 .cert-profile.kv-table 提高特异性，压过后面 .kv-table 的 min-width / th 宽度。
       caption 必须一起改成 block：整表变块级后 caption 仍是 UA 默认的
       display:table-caption，失去表格上下文后被浏览器包进匿名表格并把宽度收缩到
       "最窄内容"宽度——实测 390px 下只有 66px 宽、11 行，标题文字竖着排。 */
    .cert-profile.kv-table,
    .cert-profile.kv-table > caption,
    .cert-profile.kv-table tbody,
    .cert-profile.kv-table tr,
    .cert-profile.kv-table th,
    .cert-profile.kv-table td {
        display: block;
        width: auto;
        min-width: 0;
    }

    /* 卡片化后的表头：按容器宽度正常折行（中文按字断行），不再被压成一字一行 */
    .cert-profile.kv-table > caption {
        margin-bottom: var(--sp-1);
        padding-bottom: var(--sp-2);
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .cert-profile.kv-table tr {
        padding: var(--sp-2) 0;
        border-bottom: 1px solid var(--border);
    }

    .cert-profile.kv-table tr:last-child {
        border-bottom: 0;
    }

    .cert-profile.kv-table th[scope="row"] {
        width: auto;
        padding: 0 0 2px;
        border: 0;
        /* 堆叠成卡片后仍是"键 → 值"标签，字号与全站标签统一为 12px */
        font-size: var(--fs-xs);
        color: var(--text-muted);
    }

    .cert-profile.kv-table td {
        padding: 0;
        border: 0;
    }

    /* 窄屏下对比表改为容器内横向滚动，并显式提示可滑动，避免用户以为列被截断 */
    .cm-scroll-hint {
        display: inline;
    }
}

.port-table tr.is-target {
    background: var(--surface-tint);
    box-shadow: inset 3px 0 0 var(--primary);
}

.port-table tr.is-target:hover {
    background: var(--surface-tint-strong);
}

.kv-table {
    min-width: 520px;
}

.kv-table th[scope="row"] {
    width: 200px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
}

.tag {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-strong);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* ---------- 状态标记 ---------- */
.state {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.state-tls {
    color: var(--primary-strong);
    background: var(--primary-soft);
    border-color: var(--primary-line);
}

.state-plain {
    color: var(--text-muted);
    background: var(--surface-soft);
    border-color: var(--border);
}

.state-skip {
    color: var(--text-faint);
    background: var(--surface);
    border-color: var(--border-strong);
    border-style: dashed;
}

.days {
    display: inline-block;
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.days-warn {
    color: var(--text-2);
    font-weight: 600;
}

.days-bad {
    color: var(--primary-strong);
    font-weight: 700;
}

.empty {
    padding: var(--sp-6);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-base);
}

/* 锚点定位后的高亮提示（app.js 添加，2 秒后移除） */
.is-highlight {
    animation: highlight-pulse 2s ease-out;
}

@keyframes highlight-pulse {
    0% {
        box-shadow: 0 0 0 3px var(--ring);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(22, 87, 216, 0);
    }
}

/* ---------- 空状态 ---------- */
.empty-state {
    padding: var(--sp-9) var(--sp-6);
    text-align: center;
}

.empty-state h2 {
    margin-top: 0;
}

.empty-state p {
    max-width: 58ch;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-muted);
    line-height: var(--lh-loose);
}

.empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-bottom: 0;
}

.empty-inline {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ==========================================================================
   错误页
   ========================================================================== */
.error-card {
    padding: var(--sp-10) var(--sp-6);
    text-align: center;
}

.error-card h1 {
    color: var(--primary-strong);
}

.error-message {
    font-size: var(--fs-md);
    color: var(--text-2);
    line-height: var(--lh-loose);
}

.error-hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin: var(--sp-5) 0 0;
}

/* ==========================================================================
   页脚
   ========================================================================== */
.site-footer {
    margin-top: var(--sp-10);
    padding: var(--sp-8) 0 var(--sp-6);
    background: var(--surface);
    border-top: 1px solid var(--border);
}

/* 页脚两栏：左侧备案 / 版权文字，右侧本站安全认证章（窄屏自动堆叠） */
.footer-legal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-5) var(--sp-6);
    padding-top: var(--sp-2);
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: var(--text-faint);
}

.footer-main {
    min-width: 0;
}

/* 安全章：印章 SVG 自带圆角描边，这里不再套一层卡片（避免"框套框"） */
.footer-seal {
    justify-self: end;
    line-height: 0;
}

/* --------------------------------------------------------------------------
   签章卡片：默认只是一枚印章，鼠标移上去（或键盘聚焦）时放大并在上方展开认证信息。
   交互参考 DigiCert 站点章；页脚是"看版权"的地方，所以默认状态刻意压到最轻。
   -------------------------------------------------------------------------- */
.seal-hover {
    position: relative;
    display: inline-block;
    border-radius: var(--r-xs);
    line-height: 0;
    text-decoration: none;
    outline-offset: 4px;
}

.seal-hover__badge {
    display: block;
}

.seal-hover__badge img {
    display: block;
    width: 130px;
    height: auto;
    border: 0;
    /* 从右下角放大：印章贴在页脚右边缘，往左上"长"才不会顶出容器 */
    transform-origin: bottom right;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.seal-hover:hover .seal-hover__badge img,
.seal-hover:focus-visible .seal-hover__badge img {
    transform: scale(1.09);
    filter: drop-shadow(0 6px 14px rgba(12, 43, 92, 0.18));
}

.seal-hover__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    display: block;
    /* 292px 是「ENCRYPTION ACTIVE + TLS 1.3 · 256 bit」同行的最小宽度，
       再窄这一行就会被挤成两行（标签断成 ENCRYPTION / ACTIVE） */
    width: 292px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    line-height: var(--lh-snug);
    text-align: left;
    white-space: normal;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px) scale(0.97);
    transform-origin: bottom right;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: none;
}

/* 面板与印章之间留了 10px：用透明垫片接住鼠标，斜着移上去才不会被"闪断" */
.seal-hover__panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 12px;
}

.seal-hover:hover .seal-hover__panel,
.seal-hover:focus-visible .seal-hover__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.seal-hover__domain {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0;
    word-break: break-all;
}

.seal-hover__org {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.seal-hover__rows {
    display: block;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}

.seal-hover__row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
}

.seal-hover__row:last-child {
    margin-bottom: 0;
}

.seal-hover__check {
    flex: none;
    color: var(--ok);
}

.seal-hover__label {
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
    /* 标签是固定短语，宁可让右侧小注换行，也不要把 ENCRYPTION / ACTIVE 拆成两行 */
    white-space: nowrap;
}

/* 加密那一行右侧的小注（TLS 1.3 · 256 bit）：只在有空间时出现，不抢标签的注意力 */
.seal-hover__detail {
    margin-left: auto;
    font-size: var(--fs-2xs);
    color: var(--text-faint);
    white-space: nowrap;
}

.seal-hover__foot {
    display: block;
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
    font-size: var(--fs-2xs);
    color: var(--text-faint);
}

.seal-hover__dot {
    margin: 0 5px;
    color: var(--border-strong);
}

/* 触屏没有 hover：面板直接不出现，点一下就走详情页 */
@media (hover: none) {
    .seal-hover__panel {
        display: none;
    }
}

.footer-legal p {
    margin: 0 0 var(--sp-1);
}

/* 友情链接：页脚最上方一行，标签弱化、链接跟随主色 */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    margin: 0 0 var(--sp-2) !important;
    font-size: var(--fs-xs);
}

.footer-links-label {
    color: var(--text-faint);
}

.footer-link {
    color: var(--text-muted);
    text-decoration: none;
}

.footer-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.footer-copyright {
    color: var(--text-muted);
}

/* 备案信息：ICP 与公安联网备案并排展示，未配置时给出占位标记 */
.footer-beian {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-5);
    margin: var(--sp-2) 0 var(--sp-1) !important;
}

.beian-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    text-decoration: none;
}

a.beian-item:hover {
    color: var(--primary);
    text-decoration: underline;
}

.beian-item.is-placeholder {
    color: var(--text-faint);
}

.beian-label {
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: var(--fs-xxs, 11px);
    color: var(--text-faint);
    white-space: nowrap;
}

.beian-placeholder {
    font-style: italic;
}

/* 公安备案图标位：未配置图标时用内置 SVG 占位，替换配置即可直接上线 */
.beian-icon {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--text-faint);
    vertical-align: -2px;
}

/* ==========================================================================
   响应式
   ========================================================================== */

/* ---------- 中屏：平板横屏 / 小笔记本 ---------- */
/* ==========================================================================
   统一输入框（单一 target 字段）
   ========================================================================== */
.input-group {
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
    min-width: 0;
}

.input-group-icon {
    display: none;
}

.input-group > input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    font-size: var(--fs-md);
}

.target-field .input-group > input[type="text"] {
    padding-left: 40px;
    background-image: none;
}

.target-field {
    position: relative;
}

.target-field .input-group-icon {
    display: flex;
    position: absolute;
    top: 33px;
    left: 1px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 44px;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    /* 盖住横向滚动到左侧的输入文字，避免与图标叠字 */
    background: var(--surface);
    color: var(--primary);
    pointer-events: none;
}

.btn-submit {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 var(--sp-6);
    white-space: nowrap;
}

/* 提交中：按钮左侧出现旋转指示，宽度不跳变 */
.btn-submit.is-loading {
    cursor: progress;
    opacity: 0.9;
}

.btn-submit.is-loading::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sslcheck-spin 0.75s linear infinite;
}

@keyframes sslcheck-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-submit.is-loading::before {
        animation-duration: 2.5s;
    }
}

/* 检测状态条：进行中 / 出错 两种形态 */
.check-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    color: var(--text);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.check-status[data-state="loading"] {
    border-color: var(--primary-line);
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.check-status[data-state="error"] {
    border-color: var(--grade-f-bd, var(--border));
    border-left: 3px solid var(--grade-f, var(--primary));
    background: var(--grade-c-bg, var(--surface-soft));
}

.check-status[data-state="done"] {
    border-color: var(--primary-line);
    background: var(--primary-soft);
    color: var(--primary-strong);
}

/* display:flex 会覆盖 hidden 属性的默认样式，必须显式还原 */
.check-status[hidden] {
    display: none;
}

.check-status-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.check-status[data-state="loading"] .check-status-dot {
    animation: sslcheck-pulse 1.2s ease-in-out infinite;
}

@keyframes sslcheck-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.check-status-text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.check-status-cancel {
    flex: 0 0 auto;
    padding: 2px 10px;
    border: 1px solid currentColor;
    border-radius: var(--r-pill);
    background: transparent;
    color: inherit;
    font-size: var(--fs-xs);
    cursor: pointer;
}

.check-status-cancel:hover {
    background: var(--surface);
}

.parse-echo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    min-height: 20px;
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* 没有输入时该区域是空的：:empty 直接不出现在布局里，否则会在输入框和
   帮助文案之间留出一条 20px 的空白（表单 gap 仍会为它撑出间距） */
.parse-echo:empty {
    display: none;
}

.parse-echo-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface-soft);
    line-height: 1.6;
}

.parse-echo-item code {
    padding: 0;
    background: none;
    color: var(--primary-strong);
    font-size: var(--fs-xs);
}

.parse-echo-item.is-warn {
    border-color: var(--primary-line);
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.parse-echo-item.is-error {
    border-color: var(--grade-f-bd);
    background: var(--grade-c-bg);
    color: var(--text);
}

.form-alert {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--primary-line);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-sm);
    background: var(--primary-soft);
    color: var(--text);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

.form-alert strong {
    color: var(--primary-strong);
}

.form-alert-hint {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.example-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.chips-label {
    font-size: var(--fs-xs);
    color: var(--text-faint);
    letter-spacing: 0.02em;
}

.chip {
    padding: 4px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.6;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.chip:hover {
    border-color: var(--primary-line);
    background: var(--primary-soft);
    color: var(--primary-strong);
}

/* ==========================================================================
   结果页：报告地址与服务器环境指纹
   ========================================================================== */

/* ---- 首屏：目标行、关键事实、脚注 ---- */
.result-target {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-2);
    word-break: break-all;
}

.result-target-arrow {
    color: var(--text-faint);
}

.result-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-3);
    margin: var(--sp-5) 0 0;
    padding: 0;
    list-style: none;
}

.fact {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-soft);
}

.fact-label {
    font-size: var(--fs-2xs);
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.fact-value {
    font-size: var(--fs-md);
    line-height: 1.3;
    color: var(--text);
    word-break: break-word;
}

.fact-note {
    font-size: var(--fs-2xs);
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fact-ok {
    border-color: var(--primary-line);
    background: var(--primary-soft);
}

.fact-ok .fact-value {
    color: var(--primary-strong);
}

.fact-warn .fact-value {
    color: var(--text);
}

.fact-warn {
    border-color: var(--primary-line);
}

.fact-bad {
    border-left: 3px solid var(--grade-f-fg, var(--primary));
}

.fact-muted .fact-value {
    color: var(--text-muted);
    font-size: var(--fs-base);
}

.result-footnote {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--border);
    font-size: var(--fs-2xs);
    color: var(--text-faint);
}

.result-footnote .mono {
    word-break: break-all;
}

/* ---- 结果不完整提示 ---- */
.result-partial {
    display: grid;
    gap: 4px;
    margin: var(--sp-4) 0 0;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--primary-line);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-sm);
    background: var(--primary-soft);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--text-2);
}

.result-partial strong {
    color: var(--primary-strong);
}

/* ---- 通用键值网格（证书核心字段） ---- */
.kv-grid {
    display: grid;
    gap: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.kv-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.kv-row:last-child {
    border-bottom: 0;
}

.kv-row dt {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.kv-row dd {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-sm);
    word-break: break-all;
}

/* ---- 折叠区 ---- */
.detail-block {
    margin-top: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}

.detail-block > summary {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--primary-strong);
    cursor: pointer;
    list-style: none;
}

.detail-block > summary::-webkit-details-marker {
    display: none;
}

.detail-block > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s ease;
}

.detail-block[open] > summary::before {
    transform: rotate(90deg);
}

.detail-block[open] > summary {
    border-bottom: 1px solid var(--border);
}

.detail-block .table-scroll,
.detail-block .data-table {
    margin: 0;
}

.detail-block .data-table caption {
    padding-top: var(--sp-3);
}

.group-row th {
    background: var(--surface-soft);
    font-size: var(--fs-2xs);
    letter-spacing: 0.06em;
    color: var(--primary-strong);
}

.env-note {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-2xs);
    color: var(--text-faint);
    line-height: var(--lh-base);
}

/* 环境分组"查了但没查到"的空态：明确写未披露，不留下空白卡片 */
.env-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: var(--text-muted);
}

.env-empty-tag {
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-pill);
    font-size: var(--fs-2xs);
    white-space: nowrap;
    color: var(--text-faint);
}

/* 响应头未取到时的说明：区分"探测失败"与"目标未披露" */
.env-warn {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--primary-line);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-sm);
    background: var(--primary-soft);
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: var(--text-2);
}

.result-links {
    margin: var(--sp-7) 0 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
}

.result-permalink {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--border);
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

.result-permalink code {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-2);
    word-break: break-all;
}

.env-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--primary-line);
    border-radius: var(--r-md);
    background: var(--primary-soft);
    font-size: var(--fs-md);
    color: var(--primary-strong);
    word-break: break-word;
}

.env-headline-label {
    flex: 0 0 auto;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.env-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
}

.env-card {
    padding: var(--sp-5);
    min-width: 0;
}

.env-card h3 {
    margin: 0 0 var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text);
}

.env-list {
    display: grid;
    gap: var(--sp-3);
    margin: 0;
}

.env-row {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.env-row dt {
    /* 与 .kv-table th / .cs-grid dt / .kv-row dt 统一：12px / 600 / text-muted */
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.env-row dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    margin: 0;
    min-width: 0;
}

.env-value {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}

.env-conf {
    padding: 1px 7px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    font-size: var(--fs-2xs);
    line-height: 1.6;
    color: var(--text-muted);
    white-space: nowrap;
}

.env-conf-high {
    border-color: var(--primary-line);
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.env-conf-medium {
    border-color: var(--border-strong);
    background: var(--surface-soft);
    color: var(--text-2);
}

.env-conf-low {
    border-style: dashed;
    color: var(--text-faint);
}

.env-evidence {
    flex: 1 0 100%;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--text-faint);
    word-break: break-all;
}

@media (max-width: 1024px) {
    .wrap {
        padding: 0 var(--sp-5);
    }

    .home-hero {
        padding: var(--sp-7) 0 var(--sp-5);
    }

    .cap-grid,
    .grade-grid,
    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .result-hero {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: var(--sp-6);
        padding: var(--sp-6);
    }

    .result-grade {
        padding-right: var(--sp-6);
    }

    .prose {
        max-width: none;
    }
}

/* ---------- 平板竖屏：单列主结构 ---------- */
@media (max-width: 860px) {
    .site-main {
        padding: var(--sp-6) 0 var(--sp-9);
    }

    .home-hero {
        padding: var(--sp-6) 0 var(--sp-4);
    }

    .result-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-5);
    }

    .result-grade {
        padding: 0 0 var(--sp-5);
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .section {
        margin-top: var(--sp-8);
    }

    .footer-beian {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-2);
    }

    /* 页脚收成单列：安全章挪到文字下方，左对齐，不再挤在右侧 */
    .footer-legal {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-4);
    }

    .footer-seal {
        justify-self: start;
    }

    /* 章挪到文字下方后，面板改为向左展开（否则 268px 宽会顶出屏幕） */
    .seal-hover__panel {
        right: auto;
        left: 0;
        transform-origin: bottom left;
    }
}

/* ---------- 手机 ---------- */
@media (max-width: 600px) {
    :root {
        --header-h: 56px;
    }

    html {
        /* 移动端页头两行堆叠（字标 + 导航），锚点跳转需多留出偏移量；
           字标改为纯图形后页头比旧版矮约 20px，偏移量同步收紧 */
        scroll-padding-top: 112px;
    }

    body {
        font-size: 15px;
        letter-spacing: 0;
    }

    .wrap {
        padding: 0 var(--sp-4);
    }

    .site-main {
        padding: var(--sp-4) 0 var(--sp-8);
    }

    .header-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2);
        padding-top: var(--sp-3);
        padding-bottom: var(--sp-3);
    }

    .site-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }

    .site-nav a {
        flex: none;
        height: 34px;
        padding: 0 12px;
        font-size: var(--fs-sm);
    }

    .brand-logo {
        height: 34px;
    }

    .cap-grid,
    .grade-grid,
    .steps,
    .meta-list,
    .radio-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .card,
    .page-head,
    .result-hero {
        padding: var(--sp-5);
    }

    .section {
        margin-top: var(--sp-7);
    }

    .grade-card-detail {
        font-size: var(--fs-xs);
        line-height: 1.65;
    }

    .data-table {
        min-width: 560px;
        font-size: var(--fs-sm);
    }

    .data-table th,
    .data-table td {
        padding: 10px var(--sp-3);
    }

    /* 2 列键值表（证书元数据 / 网络链路 / 探测证据）在手机上不该再强制 460px：
       标签列收窄到 38%、值列允许换行，整表落在屏内，右侧不再被裁掉。
       .cert-profile 已是堆叠卡片布局、.proto-probes 是多列留痕表，两者保持原样。 */
    .kv-table:not(.proto-probes):not(.cert-profile) {
        min-width: 0;
    }

    .kv-table:not(.proto-probes):not(.cert-profile) th[scope="row"] {
        width: auto;
        max-width: 38%;
    }

    .kv-table:not(.proto-probes):not(.cert-profile) td {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .kv-table {
        min-width: 460px;
    }

    .result-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-2);
    }

    .result-actions .btn {
        width: 100%;
    }

    .empty-actions .btn,
    .error-actions .btn {
        flex: 1 1 auto;
    }

    .footer-beian {
        gap: var(--sp-1);
    }
}

/* ---------- 超小屏 ---------- */
@media (max-width: 380px) {
    .badge-xl {
        font-size: 28px;
        padding: 13px 20px;
    }

    .result-score strong {
        font-size: 2rem;
    }
}

/* ---------- 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================================
   打印
   ========================================================================== */
@media print {
    .site-header,
    .site-footer,
    .skip-link,
    .result-actions,
    .error-actions,
    .empty-actions,
    .inline-links {
        display: none !important;
    }

    body {
        background: #ffffff;
        color: #000000;
        font-size: 12pt;
    }

    .card,
    .page-head,
    .table-scroll {
        box-shadow: none;
        border: 1px solid #b9c6d8;
        break-inside: avoid;
    }

    a {
        color: #0c3f9e;
        text-decoration: underline;
    }
}

/* ==========================================================================
   统一输入框 / 环境区块 · 响应式（追加在末尾，覆盖上面默认值）
   ========================================================================== */
@media (max-width: 1024px) {
    .env-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .result-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .env-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .result-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .result-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .kv-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .result-footnote {
        flex-direction: column;
        align-items: flex-start;
    }
    .input-group {
        flex-direction: column;
        gap: var(--sp-3);
    }

    .target-field .input-group-icon {
        top: 33px;
    }

    .btn-submit {
        width: 100%;
        height: 46px;
    }

    .example-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: var(--sp-2);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .example-chips::-webkit-scrollbar {
        display: none;
    }

    .chips-label {
        flex: 0 0 auto;
    }

    .chip {
        flex: 0 0 auto;
    }

    .env-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .env-card {
        padding: var(--sp-4);
    }
}

/* ==========================================================================
   协议版本支持表 + 证书清单
   基调沿用全站的「白底 + 科技蓝」：状态色只用主色深浅与文字层级表达，
   不引入第二套色相，保证与评级徽章、证书对比矩阵观感一致。
   ========================================================================== */

/* ---------- 协议版本表 ---------- */
.proto-warn {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--primary-line);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-sm);
    background: var(--primary-soft);
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: var(--text-2);
}

.proto-warn strong {
    color: var(--primary-strong);
    font-weight: 700;
}

.proto-table th[scope="row"] {
    vertical-align: top;
    white-space: normal;
}

.proto-table th[scope="col"]:nth-child(2),
.proto-table th[scope="col"]:nth-child(3),
.proto-table th[scope="col"]:nth-child(5) {
    white-space: nowrap;
}

.proto-name {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text);
}

.proto-note {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-2xs);
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-faint);
}

.proto-flag {
    display: inline-block;
    margin-top: var(--sp-1);
    padding: 0 6px;
    border-radius: var(--r-xs);
    background: var(--surface-tint);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-muted);
}

/* 支持 / 不支持 / 未知 三种状态：与证书字段的 cv-* 色调保持一致 */
.proto-status {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}

.pv-ok {
    color: var(--primary-strong);
    background: var(--primary-soft);
    border-color: var(--primary-line);
}

.pv-warn {
    color: var(--text);
    background: var(--surface-tint);
    border-color: var(--border-strong);
}

.pv-bad {
    color: var(--on-primary);
    background: var(--primary-strong);
    border-color: var(--primary-strong);
}

.pv-muted {
    color: var(--text-faint);
    background: var(--surface);
    border-color: var(--border-strong);
}

/* 「其它站点证书」：拿到了证书、但不属于本域名（共用节点的默认证书），不计数。
   必须和 pv-warn（握手失败 = 没拿到）、pv-muted（未执行 = 没测）在样式上分得开，
   否则用户会把它读成"那次探测失败"，进而怀疑证书张数被漏统计。
   因此这里用"实底浅蓝 + 虚线描边"：实底表示"确实拿到了东西"，虚线表示"但不算数"。 */
.pv-other {
    color: var(--text);
    background: var(--surface-tint-strong);
    border-color: var(--primary-line);
    border-style: dashed;
}

.proto-detail {
    display: block;
    max-width: 62ch;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--text-muted);
}

.proto-row.proto-unsupported .proto-detail,
.proto-row.proto-unknown .proto-detail {
    color: var(--text-faint);
}

.proto-actions {
    margin: 0 0 var(--sp-2);
}

.proto-foot {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-2xs);
    line-height: 1.6;
    color: var(--text-faint);
}

.proto-probes th[scope="row"] {
    width: 260px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    white-space: normal;
}

.proto-probes td {
    vertical-align: top;
}

.proto-probes .proto-status {
    margin-right: var(--sp-2);
}

/* 整行淡蓝底 + 正文加粗，让"被排除的那张证书"在折叠展开后一眼可见。
   选择器要压过 .data-table tbody tr:nth-child(even) 的斑马纹（0,2,2）。 */
.data-table.proto-probes tbody tr.probe-other {
    background: var(--surface-soft);
}

.data-table.proto-probes tbody tr.probe-other:hover {
    background: var(--primary-soft);
}

.data-table.proto-probes tbody tr.probe-other .proto-detail {
    max-width: 68ch;
    color: var(--text-2);
    font-weight: 600;
}

/* 排除说明：直接回答"我明明探测了，怎么少一张证书" */
.proto-other-note {
    margin: var(--sp-3) 0;
    padding: var(--sp-2) var(--sp-3);
    border: 1px dashed var(--primary-line);
    border-left: 3px solid var(--primary-line);
    border-radius: var(--r-md);
    background: var(--surface-soft);
    max-width: 78ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--text-2);
}

.proto-other-note strong {
    color: var(--text);
}

/* 兜底证书画像：默认 vhost 也可能部署多张证书（实测 zuncloud 兜底站
   ECDSA + RSA 各一张）。按指纹去重后逐张列出，让"不计入"的证书
   也看得清完整类型与身份——只印一行文字会把另一张彻底藏起来。 */
.proto-other-certs {
    margin: var(--sp-3) 0;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-soft);
}

.proto-other-certs-title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
}

.proto-other-cert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}

.proto-other-cert {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
}

.proto-other-cert .cm-tag {
    flex: none;
}

.proto-other-cert-cn {
    font-weight: 600;
    color: var(--text);
    word-break: break-all;
}

.proto-other-cert .muted {
    color: var(--text-muted);
}

.proto-other-cert .break {
    word-break: break-all;
}

@media (max-width: 640px) {
    .proto-other-cert {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-1);
    }
}

/* ---------- 证书窜站告警（主握手证书不覆盖目标域名） ---------- */
/* 严重度高于链不完备与字段缺失：浏览器会直接拒绝访问，因此用主色实底页头 +
   白底卡片，和"提示级"的 proto-other-note（虚线浅蓝）在视觉上明确分层。 */
.cs-alert {
    margin: 0 0 var(--sp-4);
    border: 1px solid var(--primary-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cs-alert-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--primary-strong);
    color: var(--on-primary);
}

.cs-alert-badge {
    padding: 2px 10px;
    border-radius: var(--r-pill);
    background: var(--on-primary);
    color: var(--primary-strong);
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}

.cs-alert-title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: var(--lh-tight);
    /* 必须显式给白色：全局 h1~h4 的 color 是元素选择器，会盖掉 .cs-alert-head
       继承下来的 --on-primary，否则深蓝底上会出现深色标题（对比度不足 2:1） */
    color: var(--on-primary);
}

.cs-alert-detail {
    margin: 0;
    padding: var(--sp-3) var(--sp-4) 0;
    max-width: 82ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--text-2);
}

.cs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-4);
    margin: var(--sp-3) var(--sp-4) 0;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-soft);
}

.cs-grid > div {
    min-width: 0;
}

.cs-grid .cs-span-2 {
    grid-column: span 2;
}

.cs-grid dt {
    /* 与 .kv-table th 同一套标签样式：12px / 600 / 次级文字色，
       全站"键 → 值"区块的标签看起来才是同一套设计 */
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
}

.cs-grid dd {
    margin: 2px 0 0;
    font-size: var(--fs-sm);
    color: var(--text);
}

.cs-subline {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.cs-site-count {
    display: block;
    font-size: var(--fs-2xs);
    color: var(--text-faint);
}

/* 域名盒：等宽等高网格。
   原先用 flex + 内容宽度，长域名（shop.other-site.net）会把最后一个盒子撑得比
   其它盒子宽一截，视觉上「最后一个不一样」。改为 grid 等分列 + 单行省略，
   同一行的盒子尺寸完全一致；超长域名以 title 提供全文。 */
.cs-site-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-1) var(--sp-2);
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.cs-site-list li {
    min-width: 0;
    padding: 2px 8px;
    border: 1px solid var(--primary-line);
    border-radius: var(--r-xs);
    background: var(--surface);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-error {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--r-xs);
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-strong);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.cs-note {
    margin: var(--sp-3) var(--sp-4) 0;
    padding: var(--sp-2) var(--sp-3);
    max-width: 82ch;
    border-left: 3px solid var(--primary-line);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--surface-tint);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--text-2);
}

.cs-howto {
    margin: var(--sp-3) var(--sp-4) var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--border-strong);
}

.cs-howto summary {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
}

.cs-howto-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-4);
    margin-top: var(--sp-3);
}

.cs-howto-grid h4 {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-faint);
}

.cs-howto-grid ul {
    margin: 0;
    padding-left: 1.2em;
    font-size: var(--fs-xs);
    line-height: var(--lh-loose);
    color: var(--text-2);
}

/* 证书清单卡片上的来源端口徽章：与主评级端口不同的证书必须显式标注，
   虚线描边表示"同一次检测的另一个端口"，与"当前协商 / 补充探测"语义区分。 */
.ci-tag-port {
    border-color: var(--primary-line);
    border-style: dashed;
    color: var(--text-2);
}

/* 探测过程表的端口列：多端口枚举时同一标签会出现在多个端口，
   没有这一列就无法区分"哪个端口的那次探测"。 */
.proto-probes .probe-port {
    width: 56px;
    text-align: right;
    white-space: nowrap;
    color: var(--text-muted);
}

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

    /* 窄屏下域名盒改为单列：两列会把 shop.other-site.net 这类长域名截得太狠 */
    .cs-site-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-grid .cs-span-2 {
        grid-column: span 1;
    }
}

/* ---------- 证书清单（逐张列出密钥 / 签名 / 颁发者 / 有效期 / 序列号） ---------- */
.cert-inventory {
    margin: var(--sp-4) 0 var(--sp-5);
}

.cert-list th[scope="row"] {
    width: 40px;
}

.cert-list .ci-name {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
}

.cert-list .ci-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: 2px;
    font-size: var(--fs-2xs);
    font-weight: 400;
    color: var(--text-faint);
}

.cert-list .ci-key {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r-xs);
    background: var(--surface-tint);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-2);
    white-space: nowrap;
}

.cert-list .ci-unit {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-2xs);
    color: var(--text-faint);
}

.cert-list .ci-validity {
    white-space: nowrap;
}

/* 签名算法是短标记（SHA256-RSA / SHA256-ECDSA），不要折行，避免读成两段 */
.cert-list .ci-sig {
    white-space: nowrap;
}

/* 锚点跳转时给吸顶导航留出高度，避免标题被遮住 */
.section[id],
.cert-inventory[class] {
    scroll-margin-top: 84px;
}

.cert-list .ci-days {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-2xs);
}

.cert-list .ci-days.cv-ok {
    color: var(--primary-strong);
    font-weight: 600;
}

.cert-list .ci-days.cv-warn {
    color: var(--text);
    font-weight: 700;
}

.cert-list .ci-days.cv-bad {
    color: var(--primary-strong);
    font-weight: 700;
}

.cert-list .ci-days.cv-muted {
    color: var(--text-faint);
}

/* ---- 实际发现的证书：以逐张卡片替代横向宽表，先交代来源与实测证据 ---- */
.cert-inventory {
    margin: var(--sp-4) 0 var(--sp-5);
}

.ci-intro .section-desc {
    margin-bottom: var(--sp-2);
}

.ci-exclusion-summary {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
    border-left: 3px solid var(--primary-line);
    background: var(--surface-soft);
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
}

.ci-coverage {
    margin: 0 0 var(--sp-5);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-soft);
}

.ci-coverage-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-3);
}

.ci-coverage-head h3 {
    margin: 0;
    font-size: var(--fs-md);
}

.ci-coverage-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    line-height: 1.55;
}

.ci-coverage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--border);
}

.ci-coverage-grid > div {
    min-width: 0;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface);
}

.ci-coverage-grid dt,
.ci-scan-grid dt {
    margin: 0 0 3px;
    /* 同上：12px / 600 / text-muted */
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.ci-coverage-grid dd {
    margin: 0;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.ci-node-list,
.ci-variant-list,
.ci-budget-note {
    margin: var(--sp-3) 0 0;
    color: var(--text-2);
    font-size: var(--fs-xs);
    line-height: 1.65;
}

.ci-node-list span,
.ci-variant-list span {
    display: inline-block;
    margin-right: var(--sp-2);
    color: var(--text-muted);
    font-weight: 700;
}

.ci-node-list code {
    color: var(--text);
    font-family: var(--font-mono);
    font-size: inherit;
    word-break: break-all;
}

.ci-budget-note {
    padding: var(--sp-2) var(--sp-3);
    border: 1px dashed var(--border-strong);
    background: var(--surface);
}

.ci-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sp-4);
}

.ci-cert-card {
    min-width: 0;
    border: 1px solid var(--border-strong);
    border-top: 3px solid var(--primary-line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.ci-cert-card.ci-key-rsa { border-top-color: var(--primary-strong); }
.ci-cert-card.ci-key-ecc { border-top-color: var(--primary); }
.ci-cert-card.ci-key-ed { border-top-color: var(--text-2); }
.ci-cert-card.ci-key-other { border-top-color: var(--border-strong); }

.ci-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.ci-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
}

.ci-card-title h3 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    line-height: 1.25;
}

.ci-number,
.ci-curve {
    padding: 2px 7px;
    border-radius: var(--r-xs);
    background: var(--primary-soft);
    color: var(--primary-strong);
    font-size: var(--fs-2xs);
    font-weight: 700;
}

.ci-curve {
    background: var(--surface-tint);
    color: var(--text-2);
    font-family: var(--font-mono);
    font-weight: 600;
}

.ci-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--sp-2);
}

.ci-fingerprint {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    white-space: nowrap;
}

.ci-origin {
    display: grid;
    gap: 5px;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.ci-origin b {
    display: inline-block;
    min-width: 58px;
    margin-right: var(--sp-2);
    color: var(--text-muted);
    font-weight: 700;
}

.ci-scan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--border);
}

.ci-scan-grid > div {
    min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
}

.ci-scan-grid .ci-span-2 {
    grid-column: span 2;
}

.ci-scan-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: var(--fs-xs);
    line-height: 1.55;
}

.ci-scan-grid .ci-tone-ok { color: var(--primary-strong); font-weight: 700; }
.ci-scan-grid .ci-tone-bad { color: var(--text); font-weight: 700; }
.ci-scan-grid .ci-tone-warn { color: var(--text-2); font-weight: 700; }
.ci-scan-grid .ci-tone-muted { color: var(--text-faint); }

.ci-subline,
.ci-scan-grid .ci-days {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: var(--fs-2xs);
}

.ci-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.ci-card-foot > span { margin-right: auto; font-weight: 700; }
.ci-card-foot b { font-family: var(--font-mono); font-weight: 700; }
.ci-probe-details {
    margin-top: var(--sp-4);
}

/* ==========================================================================
   结果页分区节奏
   简约：分区之间只用一条细分割线分隔，不叠加额外卡片与色块
   ========================================================================== */
.result-page .section {
    margin-top: var(--sp-9);
    padding-top: var(--sp-7);
    border-top: 1px solid var(--border);
}

.result-page .section:first-of-type {
    margin-top: var(--sp-8);
    padding-top: 0;
    border-top: 0;
}

.result-page .section > h2 {
    margin-bottom: var(--sp-3);
}

/* ==========================================================================
   统计胶囊（协议详情）
   ========================================================================== */
.pdetails-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-5);
    padding: 0;
    list-style: none;
}

.pdstat-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface);
}

.pdstat-num {
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1;
}

.pdstat-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.pdstat-ok {
    border-color: var(--primary-line);
    background: var(--primary-soft);
}

.pdstat-ok .pdstat-num {
    color: var(--primary-strong);
}

.pdstat-bad {
    border-color: var(--border-strong);
    background: var(--surface-soft);
}

.pdstat-bad .pdstat-num {
    color: var(--text);
}

.pdstat-unknown {
    border-style: dashed;
}

.pdstat-unknown .pdstat-num,
.pdstat-unknown .pdstat-label {
    color: var(--text-faint);
}

.pdstat-total .pdstat-num {
    color: var(--text-2);
}

/* ==========================================================================
   协议详情（项目 / 状态 / 说明）
   ========================================================================== */
.pdetails-table th[scope="row"] {
    width: 24%;
}

.pd-name {
    white-space: normal;
    font-weight: 600;
}

.pd-value {
    display: block;
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 400;
    color: var(--text-faint);
}

.pd-status {
    display: inline-block;
    min-width: 62px;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.pd-yes {
    color: var(--primary-strong);
    background: var(--primary-soft);
    border-color: var(--primary-line);
}

.pd-no {
    color: var(--text-2);
    background: var(--surface-soft);
    border-color: var(--border-strong);
}

.pd-unknown {
    color: var(--text-faint);
    background: var(--surface);
    border-color: var(--border-strong);
}

.pd-detail {
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 70ch;
}

.pd-method {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: var(--r-xs);
    background: var(--surface-tint);
    color: var(--text-muted);
    font-size: var(--fs-2xs);
    font-weight: 600;
    white-space: nowrap;
}

.pd-method-measured {
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.pd-method-not_tested {
    background: var(--surface);
    color: var(--text-faint);
    box-shadow: inset 0 0 0 1px var(--border);
}

.pdetails-row.pdetails-unknown .pd-text {
    color: var(--text-faint);
}

@media (max-width: 640px) {
    .proto-table th[scope="col"],
    .proto-table td {
        white-space: normal;
    }

    /* 手机上先保住结论（版本 / 是否支持 / 判定依据），协商版本与耗时让位；
       同时取消 640px 的最小宽度，避免必须横向滑动才能看完判定依据 */
    .proto-table {
        min-width: 0;
    }

    .proto-table th:nth-child(3),
    .proto-table td:nth-child(3),
    .proto-table th:nth-child(5),
    .proto-table td:nth-child(5) {
        display: none;
    }

    .proto-table th:nth-child(1),
    .proto-table td:nth-child(1) {
        width: 32%;
    }

    /* 手机上不展示「版本说明」，把宽度让给判定依据；说明在桌面端仍完整保留 */
    .proto-note {
        display: none;
    }

    .proto-table th[scope="row"] {
        word-break: normal;
        overflow-wrap: break-word;
    }

    .proto-detail {
        max-width: none;
    }

    .proto-probes th[scope="row"] {
        width: auto;
    }

    .cert-list .ci-validity {
        white-space: normal;
    }

    /* 实际证书卡片：覆盖统计和扫读属性都改为单列，长节点 / 套件可自然换行。 */
    .ci-coverage {
        padding: var(--sp-3);
    }

    .ci-coverage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ci-card-grid {
        grid-template-columns: 1fr;
    }

    .ci-card-head,
    .ci-card-badges {
        justify-content: flex-start;
    }

    .ci-scan-grid {
        grid-template-columns: 1fr;
    }

    .ci-scan-grid .ci-span-2 {
        grid-column: auto;
    }

    .ci-card-foot > span {
        width: 100%;
        margin-right: 0;
    }

    /* 协议详情：窄屏下不隐藏任何列（三列都是必要信息），只压缩统计胶囊 */
    .pdstat-item {
        padding: 5px 10px;
    }

    .pdetails-table th[scope="row"] {
        width: auto;
    }
    /* 首页：窄屏时输入框与按钮上下堆叠，按钮占满一行，避免挤压输入框 */
    .home-input-row {
        flex-direction: column;
    }

    .home-input-row .btn-submit {
        width: 100%;
    }

    /* 悬浮快捷导航：窄屏贴边拉通，既保持可达又不遮挡正文中部；
       面板高度上限比桌面端更保守（60vh），小屏留出更多正文可视区域 */
    .quick-nav {
        right: var(--sp-4);
        bottom: var(--sp-4);
        left: var(--sp-4);
        width: auto;
    }

    /* 面板上限再按窄屏收紧：手机页头是两行（约 103px），
       扣掉页头 + 摘要 + 间距后剩余高度才是面板可用空间 */
    .quick-nav-panel {
        max-height: min(60vh, 420px);
        max-height: min(60dvh, calc(100dvh - 190px), 420px);
    }
}
/* ==========================================================================
   安全认证签章（/seal 申请页 + /seal/detail 详情页）
   印章本身是服务端生成的 SVG，这里只负责页面壳子：表单、预览卡、脚本块，
   以及弹窗尺寸（约 520×800）下的窄卡片详情页。
   ========================================================================== */

/* ---------- 申请表单 ---------- */
.seal-form {
    margin: var(--sp-6) 0 var(--sp-5);
}

.seal-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--sp-2);
}

.seal-form-row input[type="text"] {
    flex: 1 1 240px;
    min-width: 0;
    min-height: 44px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-md);
}

.seal-form-row input[type="text"]:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--ring);
}

.seal-form-row select {
    min-height: 44px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-2);
    font: inherit;
    font-size: var(--fs-sm);
}

.seal-form-row .btn {
    min-height: 44px;
}

.seal-form .help {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: var(--text-muted);
}

/* ---------- 预览区：左图右表 ---------- */
.seal-result {
    margin-top: var(--sp-6);
}

.seal-preview {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-soft);
}

.seal-preview-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 120px;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
}

/* 印章图下方的正式名称：「ZunTrust 安全认证签章」/「ZZSSL 安全认证签章」 */
.seal-preview-title {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--text-faint);
    text-align: center;
}

/* 样式二（悬停卡片）的预览：直接把面板摊开摆出来，让人一眼看到「移上去会展开什么」。
   真正的 hover 交互在页脚和目标站点上（面板默认收起），预览区不按遮罩那套做法，
   否则 292px 宽的浮层会盖住上面的标题和表单。 */
.seal-preview-badge.is-hover {
    position: relative;
}

.seal-preview-badge.is-hover .seal-hover {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
}

/* 印章与名称一起构成"章"，面板挂在下面展开 */
.seal-preview-badge.is-hover .seal-hover__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
}

.seal-preview-badge.is-hover .seal-hover__panel {
    position: static;
    display: block;
    width: 100%;
    /* 与页脚面板同宽（292px）；预览列更窄时按容器收，不横向溢出 */
    max-width: 292px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

/* 面板与印章之间的透明垫片是给 hover 用的，摊开后不需要 */
.seal-preview-badge.is-hover .seal-hover__panel::after {
    display: none;
}

/* 预览卡片里的状态行图标固定 13px（不被上面的等比缩放规则带走） */
.seal-preview-badge .seal-hover__check {
    flex: none;
    width: 13px;
    height: 13px;
}

/* 样式三（动感签章）的预览：这里渲染的是对外脚本本身，样式全在脚本自带的 <style> 里，
   页面只负责给它留出位置——面板浮在章上方，不预留高度就会盖住「签章图示」标题 */
.seal-preview-badge.is-motion {
    position: relative;
}

.seal-preview-badge.is-motion.has-panel {
    /* 面板含域名 / 组织 / 三行状态 / 页脚，最高约 132px，再加 10px 间距与余量 */
    padding-top: 156px;
}

/* 内联 SVG（未签发预览）与 img（已签发）都按容器宽度等比缩放。
   面板里的对勾图标要排除掉：它们也是 svg，被这条规则撑成 260px 会把卡片撑爆 */
.seal-preview-badge svg:not(.seal-hover__check),
.seal-preview-badge .seal-badge-img {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
}

.seal-meta {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
}

.seal-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: baseline;
}

.seal-row dt {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.seal-row dd {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-base);
    overflow-wrap: anywhere;
}

.seal-row-grade {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.seal-score {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.seal-certtype {
    padding: 1px 6px;
    border: 1px solid var(--primary-line);
    border-radius: var(--r-xs);
    background: var(--primary-soft);
    color: var(--primary-strong);
    font-size: var(--fs-2xs);
}

.seal-preview-note {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

/* ---------- 脚本块 ---------- */
.seal-snippet {
    margin: 0 0 var(--sp-5);
}

.seal-snippet .code-block {
    max-height: 360px;
    margin-bottom: var(--sp-2);
    overflow: auto;
    /* 自动换行：整段脚本最长的一行（window.open 参数）有 300+ 字符，
       不折行的话用户在手机上只能看到开头一截，复制前无法核对内容。
       折行只影响显示，复制出去的仍是原始文本。 */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.seal-snippet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0;
}

.seal-hint {
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--text-muted);
}

/* ---------- 步骤与规则 ---------- */
.seal-steps,
.seal-rules {
    margin: 0 0 var(--sp-5);
    padding-left: 1.4em;
    color: var(--text-2);
}

.seal-steps li,
.seal-rules li {
    margin-bottom: var(--sp-2);
}

/* ---------- 签发动作 ---------- */
.seal-issue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    border: 1px dashed var(--primary-line);
    border-radius: var(--r-md);
    background: var(--primary-soft);
}

.seal-issue-note {
    flex: 1 1 220px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* ---------- 不合格提示 ---------- */
.seal-blocked {
    margin: var(--sp-5) 0;
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-md);
    background: var(--surface-soft);
}

.seal-blocked h2 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-lg);
    color: var(--text);
}

.seal-blocked-lead {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-2);
}

.seal-blocked-list {
    margin: 0;
    padding-left: 1.3em;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--text-2);
}

.seal-blocked-list li {
    margin-bottom: var(--sp-1);
}

.seal-blocked-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 0;
}

/* ---------- 说明卡片 ---------- */
.seal-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-3);
    margin: var(--sp-4) 0 var(--sp-5);
}

.seal-fact {
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-soft);
}

.seal-fact h3 {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-base);
    color: var(--text);
}

.seal-fact p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--text-muted);
}

/* ---------- FAQ ---------- */
.seal-faq {
    margin: 0;
}

.seal-faq dt {
    margin-top: var(--sp-4);
    color: var(--text);
    font-weight: 700;
}

.seal-faq dd {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--text-2);
}

/* ==========================================================================
   详情页：极简布局，弹窗内单列阅读
   ========================================================================== */
.seal-body {
    margin: 0;
    background: var(--surface-soft);
    color: var(--text-2);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    -webkit-text-size-adjust: 100%;
}

.seal-shell {
    display: block;
    max-width: 520px;
    margin: 0 auto;
    padding: var(--sp-4);
}

.seal-card {
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.seal-card-head {
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.seal-card-badge {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    margin: 0 auto var(--sp-3);
}

.seal-card-title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    color: var(--text);
}

.seal-card-lead {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--text-2);
}

.seal-card-subtitle {
    margin: var(--sp-5) 0 var(--sp-3);
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text);
}

/* 键值表：详情页用 dl 而不是 table，避免受窄屏表格样式影响 */
.seal-rows {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.seal-rows .seal-row {
    padding: 9px var(--sp-3);
    border-top: 1px solid var(--border);
}

.seal-rows .seal-row:first-child {
    border-top: 0;
}

.seal-rows .seal-row:nth-child(odd) {
    background: var(--surface-soft);
}

.seal-dash {
    color: var(--text-faint);
}

.seal-more {
    margin: var(--sp-3) 0 0;
    text-align: right;
    font-size: var(--fs-sm);
}

.seal-points {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
}

.seal-point h3 {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--text);
}

.seal-point p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--text-2);
}

.seal-warn {
    margin: var(--sp-3) 0 0;
    padding: var(--sp-3);
    border: 1px solid var(--primary-line);
    border-radius: var(--r-sm);
    background: var(--primary-soft);
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: var(--text-2);
}

.seal-note {
    margin: var(--sp-5) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
    font-size: var(--fs-2xs);
    line-height: var(--lh-base);
    color: var(--text-faint);
}

.seal-foot {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-2xs);
    color: var(--text-faint);
}

.seal-pagefoot {
    margin: var(--sp-4) 0 0;
    text-align: center;
    font-size: var(--fs-2xs);
    color: var(--text-faint);
}

.seal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-5) 0 0;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 640px) {
    .seal-form-row {
        flex-direction: column;
    }

    /* 竖排后 flex-basis 作用在高度上：不重置的话输入框会被撑成 240px 高 */
    .seal-form-row input[type="text"] {
        flex: 0 0 auto;
        width: 100%;
    }

    .seal-form-row .btn,
    .seal-form-row select {
        width: 100%;
    }

    .seal-preview {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-4);
        padding: var(--sp-4);
    }

    .seal-row {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: var(--sp-2);
    }

    .seal-shell {
        padding: var(--sp-3);
    }

    .seal-card {
        padding: var(--sp-4);
    }
}
/* 签章页是功能页而不是长文：结果区（预览 + 样式网格 + 脚本）按容器铺满。
   .prose > * 的 72ch 行宽限制会把这里压到约 621px，样式网格只能排 2 列。 */
.prose.seal-page > .seal-result {
    max-width: 100%;
}

/* ---------- 签章样式选择（ZZSSL 评级章 + ZUNTRUST DV/OV/EV 认证章） ---------- */
.seal-styles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-3);
    margin: 0 0 var(--sp-5);
}

/* 卡片本身是 <button type="submit" name="style">：原生提交，
   所以这里要把浏览器给按钮的默认外观与字体全部抹平，让它看起来还是张卡片 */
.seal-style {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    width: 100%;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.seal-style:hover {
    border-color: var(--primary-line);
    background: var(--surface-soft);
}

.seal-style:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* 选中态由服务端渲染（当前预览用的就是这张） */
.seal-style.is-active {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 2px var(--ring);
}

/* 缩略图：官方 SVG 与内联评级章都按卡片宽度等比缩放 */
.seal-style-shot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 66px;
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    background: var(--surface-soft);
}

.seal-style-shot img,
.seal-style-shot svg {
    display: block;
    width: 100%;
    max-width: 170px;
    height: auto;
}

.seal-style-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--text);
    /* 名称形如「ZUNTRUST EV SECURE」：只在空格处折行，不把单词从中间劈开 */
    word-break: keep-all;
    /* 兜底：万一某段比卡片还宽，允许它断而不是溢出卡片 */
    overflow-wrap: anywhere;
}

.seal-style-meta {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

/* ---------- 展示样式选择（样式一标准签章 / 样式二悬停卡片） ----------
   与章面样式卡片同一套交互：整张卡片是原生提交按钮，不用脚本。
   这里没有缩略图，两列文字卡片比四个小图更适合"读说明再选"。 */
.seal-embeds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-3);
    margin: 0 0 var(--sp-5);
}

.seal-embed {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.seal-embed:hover {
    border-color: var(--primary-line);
    background: var(--surface-soft);
}

.seal-embed:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.seal-embed.is-active {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 2px var(--ring);
}

.seal-embed-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.seal-embed-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
}

.seal-embed-tag {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--ring);
    color: var(--primary);
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: 1.5;
}

.seal-embed-note {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

/* 详情页：认证章样式名（小字，说明这枚章是按哪一档发的） */
.seal-card-style {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-2xs);
    color: var(--text-faint);
}

/* ==========================================================================
   SSL 工具箱（/tools）
   - 目录：按用途分组的卡片网格
   - 工具页：切换 chip + 表单 + 结果
   - 结果：kv / table / note / tree / code 五种块，九个工具共用
   ========================================================================== */
.tools-head {
    margin-bottom: var(--sp-6);
}

.tools-head h1 {
    margin: 0 0 var(--sp-3);
}

.tools-head .lead {
    margin: 0;
    /* 目录页的正文块要和下面两列卡片同宽收边，否则右半边会空出一大条 */
    max-width: 92ch;
}

.tools-group {
    margin-top: var(--sp-8);
}

.tools-group:first-of-type {
    margin-top: var(--sp-6);
}

.tools-group-title {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: 0.02em;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--sp-4);
}

.tool-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: var(--sp-4);
    align-items: start;
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tool-card:hover {
    border-color: var(--primary-line);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transform: translateY(-1px);
}

.tool-card-icon,
.tool-head-icon {
    display: grid;
    place-items: center;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: var(--r-md);
}

.tool-card-icon {
    width: 44px;
    height: 44px;
}

.tool-head-icon {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 14px;
}

.tool-icon-svg {
    width: 22px;
    height: 22px;
}

.tool-head-icon .tool-icon-svg {
    width: 24px;
    height: 24px;
}

.tool-card-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.tool-card-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
    line-height: var(--lh-snug);
}

.tool-card-tagline {
    font-size: var(--fs-xs);
    color: var(--primary-strong);
    line-height: var(--lh-snug);
}

.tool-card-desc {
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--text-muted);
}

.tool-card-go {
    align-self: center;
    font-size: var(--fs-xs);
    color: var(--text-faint);
    white-space: nowrap;
}

.tool-card:hover .tool-card-go {
    color: var(--primary);
}

.tools-footnote {
    margin-top: var(--sp-9);
    padding: var(--sp-5) var(--sp-6);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

.tools-footnote h2 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-md);
}

.tools-footnote ul {
    margin: 0;
    padding-left: 1.2em;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
}

/* ---------- 工具切换 chip ---------- */
.tool-chips {
    display: flex;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-5);
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tool-chips::-webkit-scrollbar {
    display: none;
}

.tool-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tool-chip:hover {
    border-color: var(--primary-line);
    color: var(--primary-strong);
    text-decoration: none;
}

.tool-chip.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
}

/* ---------- 工具页头 ---------- */
.tool-head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
}

.tool-head-text h1 {
    margin: 0;
    font-size: clamp(20px, 3vw, 26px);
    line-height: var(--lh-snug);
}

.tool-head-tagline {
    margin: 2px 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.tool-lead {
    margin: 0 0 var(--sp-6);
    /* 与表单卡片同宽收边（76ch 对中文只有 40 字/行，显得比卡片窄一截） */
    max-width: 92ch;
}

/* ---------- 工具表单 ---------- */
.tool-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.tool-form .field.is-wide {
    grid-column: 1 / -1;
}

.tool-form textarea {
    width: 100%;
    padding: 11px 13px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    resize: vertical;
    tab-size: 2;
}

.tool-form textarea::placeholder {
    font-family: var(--font-mono);
    color: var(--text-faint);
}

.tool-form select,
.tool-form input[type="password"] {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    font-family: var(--font-mono);
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    appearance: none;
}

.tool-form select {
    padding-right: 36px;
    font-family: var(--font-sans);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%2355678a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    cursor: pointer;
}

.tool-form textarea:focus,
.tool-form select:focus,
.tool-form input[type="password"]:focus,
.tool-form input[type="file"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring);
    outline: none;
}

.tool-form input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    background: var(--surface-soft);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
}

.tool-form input[type="file"]::file-selector-button {
    margin-right: var(--sp-3);
    padding: 6px 12px;
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--primary-strong);
    background: var(--surface);
    border: 1px solid var(--primary-line);
    border-radius: var(--r-xs);
    cursor: pointer;
}

.tool-form .field-check .checkbox {
    padding: 10px 13px;
}

.tool-form-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding-top: var(--sp-4);
    border-top: 1px dashed var(--border);
}

.tool-form-hint {
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

/* ---------- 结果 ---------- */
.tool-anchor {
    scroll-margin-top: 84px;
}

.tool-result {
    margin-top: var(--sp-7);
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.tool-result-head h2 {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
}

.tool-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-3) 0 0;
}

.tool-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface-soft);
    font-size: var(--fs-xs);
    color: var(--text-2);
    line-height: 1.6;
}

.tool-badge.tone-ok {
    color: #0d7a3d;
    background: #ebf9f0;
    border-color: #b6e3c8;
}

.tool-badge.tone-warn {
    color: #8a4a0b;
    background: #fff7e8;
    border-color: #ecd0a3;
}

.tool-badge.tone-info {
    color: var(--primary-strong);
    background: var(--primary-soft);
    border-color: var(--primary-line);
}

.tool-section {
    margin-top: var(--sp-6);
}

.tool-section-title {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-2);
}

.tool-kv-wrap {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.tool-kv {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.tool-kv th,
.tool-kv td {
    padding: 10px var(--sp-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.tool-kv tr:last-child th,
.tool-kv tr:last-child td {
    border-bottom: 0;
}

.tool-kv th {
    width: 180px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--surface-soft);
    white-space: nowrap;
}

.tool-kv td {
    color: var(--text);
    word-break: break-word;
}

.tool-kv td.tone-ok {
    color: #0d7a3d;
    font-weight: 600;
}

.tool-kv td.tone-warn {
    color: #8a4a0b;
    font-weight: 600;
}

.tool-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.tool-table th,
.tool-table td {
    padding: 10px var(--sp-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
    word-break: break-word;
}

.tool-table thead th {
    background: var(--surface-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-strong);
}

.tool-table tbody tr:last-child td {
    border-bottom: 0;
}

.tool-note {
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--text-2);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary-line);
    border-radius: var(--r-sm);
    word-break: break-word;
}

.tool-code {
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--text-2);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow-x: auto;
    white-space: pre;
    tab-size: 2;
}

/* ---------- ASN.1 结构树 ---------- */
.asn1-tree-wrap {
    padding: var(--sp-3) var(--sp-4);
    max-height: 620px;
    overflow: auto;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.asn1-children {
    list-style: none;
    margin: 0;
    padding: 0 0 0 14px;
    border-left: 1px dashed var(--border-strong);
}

.asn1-tree-wrap > .asn1-children {
    padding-left: 0;
    border-left: 0;
}

.asn1-node {
    margin: 0;
    padding: 1px 0;
}

.asn1-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    line-height: 1.7;
}

.asn1-label {
    font-weight: 600;
    color: var(--primary-strong);
}

.asn1-value {
    color: var(--text);
    word-break: break-all;
}

.asn1-meta {
    font-size: var(--fs-2xs);
    color: var(--text-faint);
    white-space: nowrap;
}

.asn1-node.has-children > .asn1-line .asn1-label::after {
    content: " ›";
    color: var(--text-faint);
    font-weight: 400;
}

/* ---------- 输出块 ---------- */
.tool-output {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-soft);
}

.tool-output:first-of-type {
    margin-top: 0;
}

.tool-output-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.tool-output-head h4 {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
}

.tool-output-file {
    padding: 1px 7px;
    border-radius: var(--r-xs);
    background: var(--surface);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.tool-output-actions {
    display: flex;
    gap: var(--sp-2);
    margin-left: auto;
}

.tool-output-actions .btn-sm {
    min-height: 30px;
    padding: 0 12px;
    font-size: var(--fs-xs);
}

.tool-output-text {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    resize: vertical;
    white-space: pre;
    overflow-x: auto;
}

.tool-notes {
    margin: var(--sp-6) 0 0;
    padding-left: 1.2em;
    font-size: var(--fs-xs);
    line-height: var(--lh-loose);
    color: var(--text-muted);
}

/* ---------- 使用提示 ---------- */
.tool-tips {
    margin-top: var(--sp-7);
    padding: var(--sp-5) var(--sp-6);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

.tool-tips h2 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-2);
}

.tool-tips ul {
    margin: 0;
    padding-left: 1.2em;
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--text-muted);
}

/* 首页底部的小入口：不抢主任务，但让人知道有工具箱 */
.home-tools-link {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

.home-tools-link a {
    color: var(--primary);
    font-weight: 500;
}

@media (max-width: 860px) {
    .tool-form {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--sp-5);
    }

    .tool-kv th {
        width: 132px;
        white-space: normal;
    }
}

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

    .tool-card {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .tool-card-icon {
        width: 40px;
        height: 40px;
    }

    .tool-card-go {
        display: none;
    }

    .tool-result,
    .tools-footnote,
    .tool-tips {
        padding: var(--sp-4);
    }

    .tool-output-actions {
        margin-left: 0;
        width: 100%;
    }

    .asn1-tree-wrap {
        max-height: 480px;
    }
}

/* --------------------------------------------------------------------------
   签章状态提示（证书过期 / 不可信 / 即将到期）
   --------------------------------------------------------------------------
   签章的高亮与否由证书的信任状态与有效期决定（见 app/Seal/SealHealth.php）：
   证书不可信或已过期时，章图本身在服务端就被渲染成全灰（动态章换整套灰配色、
   静态章压一层灰度滤镜），这里负责在页面上把那件事说清楚。

   配色刻意做成「自带背景的小色块」，不依赖 --surface / --text：
   页脚在部分布局里是深色底，靠继承色写字会出现深灰字压深灰底；
   自带背景的色块在浅色与深色底上都能读。
   -------------------------------------------------------------------------- */

.seal-state-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: var(--sp-3) 0;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface-tint);
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

/* 失效态：灰底灰字，和章图的灰色同一套色阶（#f1f5f9 / #64748b） */
.seal-state-badge.is-faded {
    border-color: #cbd5e1;
    background: #f1f5f9;
    color: #475569;
}

/* 临期：仍然高亮，所以用警示色而不是灰色——用黄色提醒续期，不能用"失效"的语气 */
.seal-state-badge.is-warning {
    border-color: #f0c36d;
    background: #fef3c7;
    color: #92400e;
}

.seal-state-badge-title {
    font-weight: 600;
    /* 标题不换行：状态词（已失效 / 已过期 / 即将到期）必须一眼看到 */
    white-space: nowrap;
}

.seal-state-badge.is-faded .seal-state-badge-title {
    color: #334155;
}

.seal-state-badge-text {
    flex: 1 1 240px;
    min-width: 0;
}

.seal-state-badge-meta {
    flex-basis: 100%;
    font-size: var(--fs-xs);
    opacity: 0.9;
}

/* 页脚 / 预览区的悬停卡片：失效时整卡降透明，悬停或键盘聚焦时恢复，
   否则面板里的说明文字会跟着一起变淡、读不清 */
.seal-hover.is-faded {
    opacity: 0.66;
}

.seal-hover.is-faded:hover,
.seal-hover.is-faded:focus-visible {
    opacity: 1;
}

.seal-hover.is-faded .seal-hover__badge img {
    /* 静态章如果因为端点缓存还是彩色的（例如旧 CDN 缓存），这一层兜底去色 */
    filter: grayscale(1);
}

.seal-hover.is-faded:hover .seal-hover__badge img,
.seal-hover.is-faded:focus-visible .seal-hover__badge img {
    filter: grayscale(1) drop-shadow(0 6px 14px rgba(12, 43, 92, 0.18));
}

/* 面板里的状态行：一行小字，压在域名/组织之后、勾选列表之前 */
.seal-hover__state {
    display: block;
    margin: 2px 0 6px;
    padding: 4px 8px;
    border-radius: var(--r-xs);
    font-size: var(--fs-2xs);
    line-height: var(--lh-base);
    font-weight: 600;
}

.seal-hover__state.is-faded {
    background: #f1f5f9;
    color: #475569;
}

.seal-hover__state.is-warning {
    background: #fef3c7;
    color: #92400e;
}

.seal-hover__state-note {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    opacity: 0.9;
}