/* ==========================================================================
   NAT 检测页 · 视觉与交互优化层（2026-10-14）
   --------------------------------------------------------------------------
   约束：不改任何文案、标题层级、关键词、URL、alt；本文件只做样式与交互。
   做法：全部为「追加覆盖」，不删改上方任何原有规则，回滚只需删掉本段。
   色条/图标配色沿用原有的语义类（.card-icon.green/.blue/.yellow/.red），
   因此无需改动 nat-test.php 的 PHP 标记。
   ========================================================================== */

.nat-test-page {
    --nat-radius-card: 16px;
    --nat-radius-inner: 12px;
    --nat-radius-pill: 999px;

    --nat-s1: 8px;
    --nat-s2: 16px;
    --nat-s3: 24px;
    --nat-s4: 32px;
    --nat-s5: 48px;

    --nat-line: #e6eaf0;
    --nat-line-soft: #eef1f6;
    --nat-surface: #ffffff;
    --nat-surface-sunken: #f7f8fa;
    --nat-surface-tint: #f0f7ff;
    --nat-ink: #1a2433;
    --nat-ink-soft: #4b5563;
    --nat-ink-mute: #5b6b80;

    --nat-shadow-1: 0 1px 2px rgba(16, 32, 56, .05), 0 2px 8px rgba(16, 32, 56, .05);
    --nat-shadow-2: 0 2px 6px rgba(16, 32, 56, .07), 0 10px 24px rgba(16, 32, 56, .08);
    --nat-shadow-brand: 0 4px 14px rgba(37, 99, 235, .28);

    --nat-success: #10b981;
    --nat-info: #3b82f6;
    --nat-warn: #f59e0b;
    --nat-danger: #ef4444;

    --nat-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 1. 排版节奏：标题层级 + 行高 + 8px 间距系统 ---------- */
.nat-test-page { line-height: 1.75; }

.nat-test-page h1 { font-size: 34px; line-height: 1.3; letter-spacing: -.01em; }
.nat-test-page h2 { font-size: 23px; line-height: 1.35; letter-spacing: -.005em; }
.nat-test-page h3 { font-size: 18px; line-height: 1.45; }
.nat-test-page p  { line-height: 1.8; }

/* 页头：把标题与说明的间距收到 8px 网格 */
.page-header { margin-bottom: var(--nat-s5); }
.page-header h1 { margin-bottom: var(--nat-s2); }
.page-header p { color: var(--nat-ink-soft); max-width: 62ch; margin-inline: auto; }

/* ---------- 2. 顶部说明：由「生硬蓝块」改为左侧色条提示卡 ----------
   注意：页面里真实的类是 .nat-quick-note（不是 .detection-notice，
   .detection-notice 在 nat-test.css 里有规则但 PHP 中并不存在）。 */
.nat-test-page .nat-quick-note {
    position: relative;
    text-align: left;
    background: var(--nat-surface-tint);
    border: 1px solid #d8e6fb;
    border-left: 4px solid var(--nat-info);
    border-radius: var(--nat-radius-inner);
    padding: var(--nat-s2) 20px;
    margin: var(--nat-s3) 0 0;
    color: #24405f;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.8;
}

.nat-test-page .nat-quick-note strong { color: #1d4ed8; }

/* 短域名提示：弱化为一行辅助信息 */
.nat-test-page .short-domain-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--nat-s2) 0 0;
    padding: 6px 12px;
    background: var(--nat-surface-sunken);
    border: 1px solid var(--nat-line-soft);
    border-radius: var(--nat-radius-pill);
    font-size: 13px;
    color: var(--nat-ink-mute);
    line-height: 1.6;
}

.nat-test-page .short-domain-hint svg { flex-shrink: 0; color: #64748b; }

/* ---------- 3. 统一卡片规范：圆角/边框/内边距/阴影 ----------
   注意：nat-test.css 里存在 .nat-test-page .info-card（权重 0,2,0），
   会压过裸 .info-card，所以这里统一加 .nat-test-page 前缀提权重。 */
.nat-test-page .info-card,
.nat-test-page .test-card,
.nat-test-page .nat-client-promo {
    border-radius: var(--nat-radius-card);
    border: 1px solid var(--nat-line);
    background: var(--nat-surface);
    box-shadow: var(--nat-shadow-1);
    transition: box-shadow .25s var(--nat-ease), transform .25s var(--nat-ease), border-color .25s var(--nat-ease);
}

.nat-test-page .info-card {
    padding: var(--nat-s4);
    border-radius: var(--nat-radius-card);
}

.nat-test-page .info-card:hover,
.nat-test-page .nat-client-promo:hover {
    box-shadow: var(--nat-shadow-2);
    transform: translateY(-2px);
    border-color: #dbe2ec;
}

/* ---------- 4. NAT 类型卡：左侧状态色条（最高优先级改动） ---------- */
/* 卡片本身不含语义类，颜色在 .card-icon 上 —— 用 :has() 把语义提到卡片层级。
   不支持 :has() 的浏览器只是没有色条，其余规则照常生效，属于渐进增强。 */
.nat-test-page .info-cards .info-card { position: relative; overflow: hidden; }

.nat-test-page .info-cards .info-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--nat-line);
    /* 让色条跟着卡片圆角走，否则左上/左下会切出直角 */
    border-radius: var(--nat-radius-card) 0 0 var(--nat-radius-card);
    transition: width .25s var(--nat-ease);
}

.nat-test-page .info-cards .info-card:hover::before { width: 6px; }

.nat-test-page .info-cards .info-card:has(.card-icon.green)::before { background: var(--nat-success); }
.nat-test-page .info-cards .info-card:has(.card-icon.blue)::before  { background: var(--nat-info); }
.nat-test-page .info-cards .info-card:has(.card-icon.yellow)::before { background: var(--nat-warn); }
.nat-test-page .info-cards .info-card:has(.card-icon.red)::before   { background: var(--nat-danger); }

/* 有状态色条后，左侧内边距多让出 4px，视觉重心才不偏 */
.nat-test-page .info-cards .info-card { padding-left: calc(var(--nat-s4) + 4px); }

/* ---------- 5. 徽章：统一胶囊形状、内边距、字重 ---------- */
.card-badge,
.nat-level-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--nat-radius-pill);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.4;
    box-shadow: inset 0 0 0 1px rgba(16, 32, 56, .06);
}

.card-badge {
    top: var(--nat-s3);
    right: var(--nat-s3);
}

/* 徽章底色与状态色条同源，扫视时能对上 */
.card-badge.best     { background: #e7f8f1; color: #047857; }
.card-badge.good     { background: #e8f1fe; color: #1d4ed8; }
.card-badge.moderate { background: #fef4e2; color: #a15c07; }
.card-badge.poor     { background: #fdeaea; color: #b91c1c; }

/* ---------- 6. 卡片内图标：由渐变改为实色浅底，更干净 ---------- */
.card-icon {
    border-radius: 14px;
    width: 52px;
    height: 52px;
    padding: 13px;
}

.card-icon.green  { background: #e7f8f1; color: #047857; }
.card-icon.blue   { background: #e8f1fe; color: #1d4ed8; }
.card-icon.yellow { background: #fef4e2; color: #a15c07; }
.card-icon.red    { background: #fdeaea; color: #b91c1c; }

/* 圆角与阴影统一后，卡片标题跟色条对齐更稳 */
.nat-test-page .info-card h3 { color: var(--nat-ink); letter-spacing: -.005em; }
.nat-test-page .info-card p  { color: var(--nat-ink-soft); }

/* ---------- 7. 折叠面板：箭头旋转 + 高度过渡 + 可点击暗示 ---------- */
/* 折叠容器本身不画底色 —— 按钮已经自带边框/底色，
   容器再套一层灰底会让按钮缩窄后右边留出一大块空灰面。 */
.nat-diagram-toggle {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: none;
}

.nat-diagram-toggle:hover { background: transparent; }

.nat-diagram-toggle .toggle-icon,
.nat-diagram-toggle svg {
    transition: transform .3s var(--nat-ease);
}

.nat-diagram-toggle[aria-expanded="true"] .toggle-icon,
.nat-diagram-toggle.is-open .toggle-icon {
    transform: rotate(180deg);
}

/* 折叠内容：用 grid-template-rows 做高度过渡（height:auto 无法 transition） */
.nat-diagram-content {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows .32s var(--nat-ease), opacity .28s var(--nat-ease), margin .32s var(--nat-ease);
    margin-top: 0;
}

.nat-diagram-content > * { overflow: hidden; }

.nat-diagram-content.is-open,
.nat-diagram-toggle.is-open + .nat-diagram-content,
.nat-diagram-toggle[aria-expanded="true"] + .nat-diagram-content {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: var(--nat-s2);
}

.nat-test-page .diagram-toggle-btn {
    /* 原规则有 width:100% 且同优先级在后，这里用 .nat-test-page 提权重压过它；
       否则按钮会被拉成一条与卡片同宽的超宽胶囊。 */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    padding: 10px 20px;
    border-radius: var(--nat-radius-pill);
    border: 1px solid var(--nat-line);
    background: var(--nat-surface);
    color: var(--nat-ink-soft);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s var(--nat-ease), color .2s var(--nat-ease), border-color .2s var(--nat-ease), transform .2s var(--nat-ease);
}

.nat-test-page .diagram-toggle-btn:hover {
    background: var(--nat-surface-tint);
    border-color: #cfe0f7;
    color: #1e40af;
}

.nat-test-page .diagram-toggle-btn:active { transform: translateY(0); }

/* 折叠容器居中时按钮跟随内容宽度 */
.nat-diagram-toggle { text-align: center; }

.nat-diagram-toggle:not([style*="justify-content: center"]) { text-align: left; }

.diagram-toggle-btn:hover { transform: translateY(-1px); }

/* ---------- 8. 流程图与图例：统一宽度/圆角/字号 ---------- */
.nat-node {
    border-radius: var(--nat-radius-inner);
    padding: 12px 16px;
    min-width: 132px;
    box-shadow: 0 1px 2px rgba(16, 32, 56, .05);
    transition: transform .2s var(--nat-ease), box-shadow .2s var(--nat-ease);
}

.nat-node:hover {
    transform: translateY(-2px);
    box-shadow: var(--nat-shadow-1);
}

.nat-node.ok   { border-left: 4px solid var(--nat-success); }
.nat-node.fail { border-left: 4px solid var(--nat-danger); }

.nat-diagram-note,
.diagram-note {
    border-radius: var(--nat-radius-inner);
    background: var(--nat-surface-sunken);
    border: 1px solid var(--nat-line-soft);
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--nat-ink-mute);
}

.diagram-legend {
    border-radius: var(--nat-radius-inner);
    background: var(--nat-surface-sunken);
    border: 1px solid var(--nat-line-soft);
    padding: 12px 16px;
    gap: var(--nat-s3);
}

/* ---------- 9. 按钮：主按钮强化焦点 + hover 上浮 + loading ---------- */
.nat-test-page .test-btn,
.nat-test-page .test-btn.tool-actions,
.nat-test-page .test-btn.ipv6-link {
    border-radius: var(--nat-radius-pill);
    min-height: 48px;
    padding: 0 var(--nat-s4);
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .2s var(--nat-ease), box-shadow .2s var(--nat-ease), background-color .2s var(--nat-ease);
}

/* 真实类名：主按钮 = .test-btn.tool-actions，副按钮 = .test-btn.ipv6-link
   （页面上并没有 .secondary —— 那是原建议里的臆测类名）。 */
.test-btn.tool-actions {
    /* 渐变中值须保证白字 >=4.5:1：#3b82f6->#2563eb 实测仅 4.15:1，故压深一档 */
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: 0;
    color: #fff;
    box-shadow: var(--nat-shadow-brand);
    font-size: 16px;
}

.test-btn.tool-actions:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, .38);
}

.test-btn.tool-actions:active { transform: translateY(0); }

/* 副按钮降为 ghost，不与主按钮抢视觉 */
.test-btn.ipv6-link {
    background: transparent;
    border: 1px solid #cfd8e3;
    color: var(--nat-ink-soft);
    box-shadow: none;
    font-weight: 500;
}

.test-btn.ipv6-link:hover {
    background: var(--nat-surface-sunken);
    border-color: #b9c5d4;
    transform: translateY(-1px);
}

/* 检测中的反馈：页面上已有进度条 + 百分比 + 文案三重提示，
   按钮里再加转圈就是第四重冗余（owner 指出），因此只保留
   视觉上的"不可再点"暗示，不再画旋转指示器。 */
.nat-test-page .test-btn.is-loading {
    pointer-events: none;
    opacity: .55;
    filter: saturate(.4);
    cursor: progress;
}

/* ---------- 10. 可访问性 ---------- */
.nat-test-page :is(a, button, .diagram-toggle-btn, .nat-diagram-toggle, .faq-question):focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 8px;
}

/* 触控区下限：仅对页内可点元素生效，不影响导航栏 */
.nat-test-page :is(.diagram-toggle-btn, .faq-question, .nat-app-item) { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
    .nat-test-page *,
    .nat-test-page *::before,
    .nat-test-page *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ---------- 11. 响应式 ---------- */
@media (max-width: 768px) {
    .nat-test-page { margin: var(--nat-s3) auto var(--nat-s5); }

    .nat-test-page h1 { font-size: 26px; }
    .nat-test-page h2 { font-size: 20px; }

    .info-card,
    .test-card,
    .nat-client-promo { padding: var(--nat-s3); }

    .info-cards .info-card { padding-left: calc(var(--nat-s3) + 4px); }

    /* 徽章不再绝对定位，避免窄屏压住标题 */
    .card-badge {
        position: static;
        display: inline-flex;
        margin-bottom: 12px;
        order: -1;
    }

    .info-card-header { flex-wrap: wrap; }

    .nat-node { min-width: 0; width: 100%; }

    .test-btn { width: 100%; }
}

/* ---------- 12. 对比度收口（WCAG AA） ----------
   实测发现的不达标项，逐条加深到 ≥4.5:1。均为纯颜色调整，不动文案。 */
.nat-test-page .promo-more { color: #1d4ed8; }

.nat-test-page .legend-icon.success { color: #047857; }

.nat-test-page .legend-icon.fail { color: #b91c1c; }

.nat-test-page .legend-icon.arrow { color: #475569; }

.nat-test-page .nat-arrow { color: #64748b; }

/* 欢迎语里的赞助链接（琥珀 #f59e0b 在白底只有 2.15:1） */
.nat-test-page #welcomeMessage a { color: #b45309 !important; }

.nat-test-page #welcomeMessage span[style*="color:#e74c3c"],
.nat-test-page #welcomeMessage span[style*="color: #e74c3c"] { color: #c0392b !important; }

/* 流程图里的小字说明 */
.nat-test-page .diagram-note,
.nat-test-page .nat-diagram-note { color: #5b6b80; }

/* 4.41:1 —— 提示卡内正文（.nat-quick-note 里的 span），再加深一档 */
.nat-test-page .nat-quick-note,
.nat-test-page .nat-quick-note span { color: #1e3a5f; }

.nat-test-page .nat-quick-note span[style] { color: #1e3a5f !important; }

/* ---------- 13. 检测中的冗余指示器 ----------
   owner 指出：检测时页面上已有「进度条 + 百分比 + 文字说明」三重反馈，
   顶部那个孤立的旋转圆圈图标是第四重，视觉冗余且位置突兀，因此隐藏。
   只藏图标本身，标题/说明/进度条全部保留；nat-test.js 的 innerHTML 不动。 */
.nat-test-page .status-icon.loading { display: none; }

/* 图标被藏掉后，标题与说明的间距需要补回 */
.nat-test-page .test-status h3:first-of-type { margin-top: 8px; }

/* ---------- 14. 流程图节点：统一框体/圆角/状态色条 ----------
   实测发现：我先前写的 .nat-node 规则没生效（节点仍是 8px 圆角、左色条 1px），
   原因是 nat-test.css 里有更高权重的 .nat-flow-chart .nat-node 之类规则。
   这里用 .nat-test-page + !important 兜住。 */
.nat-test-page .nat-flow-chart .nat-node,
.nat-test-page .nat-diagram-html .nat-node {
    border-radius: 12px !important;
    padding: 12px 16px !important;
    min-width: 132px;
    box-shadow: 0 1px 2px rgba(16, 32, 56, .06);
    transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s cubic-bezier(.22,.61,.36,1);
}

.nat-test-page .nat-flow-chart .nat-node:hover,
.nat-test-page .nat-diagram-html .nat-node:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(16, 32, 56, .1);
}

/* 状态色条：成功/失败各自的左边框（覆盖原来的 1px） */
.nat-test-page .nat-node.ok { border-left: 4px solid #10b981 !important; }
.nat-test-page .nat-node.fail { border-left: 4px solid #ef4444 !important; }

/* 箭头：加深到 AA 可读，并统一线宽 */
.nat-test-page .nat-arrow,
.nat-test-page .diagram-arrow,
.nat-test-page .flow-arrow { color: #64748b; font-weight: 500; }

/* ---------- 15. FAQ 折叠：与上方卡片统一交互语言 ----------
   FAQ 由 includes/FaqBlock.php 用 <details>/<summary> 渲染（全站共用），
   原生已具备无障碍语义，这里只补视觉：箭头旋转 + 高度过渡 + 与卡片同款圆角。 */
.nat-test-page .faqx-item {
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 32, 56, .05), 0 2px 8px rgba(16, 32, 56, .05);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .25s cubic-bezier(.22,.61,.36,1), border-color .25s cubic-bezier(.22,.61,.36,1);
}

.nat-test-page .faqx-item:hover {
    box-shadow: 0 2px 6px rgba(16, 32, 56, .07), 0 10px 24px rgba(16, 32, 56, .08);
    border-color: #dbe2ec;
}

.nat-test-page .faqx-item > summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
    min-height: 44px;
    padding: 14px 20px;
    cursor: pointer;
    font-weight: 600;
    color: #1a2433;
    list-style: none;
    transition: background-color .2s cubic-bezier(.22,.61,.36,1), color .2s cubic-bezier(.22,.61,.36,1);
}

/* 问句文字单独撑开，箭头推到最右 */
.nat-test-page .faqx-item > summary > *:not(:last-child) { flex: 1 1 auto; text-align: left; }

.nat-test-page .faqx-item > summary::-webkit-details-marker { display: none; }
.nat-test-page .faqx-item > summary::marker { content: ""; }

.nat-test-page .faqx-item > summary:hover { background: #f7f8fa; color: #1d4ed8; }

/* 与 .nat-diagram-toggle 同款的箭头旋转 */
.nat-test-page .faqx-item > summary::after {
    content: "";
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg);
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
    margin-top: -4px;
    /* summary 里问句是文本节点（Q 徽标是 ::before），flex 无法给文本节点分配空间，
       用 margin-left:auto 把箭头推到卡片最右 */
    margin-left: auto;
}

.nat-test-page .faqx-item[open] > summary::after {
    transform: rotate(-135deg);
    margin-top: 3px;
}

.nat-test-page .faqx-item[open] > summary { background: #f7f8fa; }

.nat-test-page .faqx-a {
    padding: 0 20px 16px;
    color: #4b5563;
    line-height: 1.8;
    animation: faqx-fade .28s cubic-bezier(.22,.61,.36,1);
}

@keyframes faqx-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- 16. 导航栏：当前页高亮更明显 ----------
   <li class="menu-item"> 上已有 active 类，但全站只靠"文字变白"区分，
   与普通项字重相同、无背景无下划线，扫视时几乎看不出当前位置。
   这里在页内补强：加底部色条 + 轻微背景。
   注意：导航栏由 includes/header.php 全站共用，但本规则只在页面挂载了
   nat-opt.css 时生效（即只在本页），不会波及其他 147 个页面。 */
.top-navbar .menu-item.active { position: relative; }

.top-navbar .menu-item.active > .menu-link {
    font-weight: 600;
    color: #fff;
}

.top-navbar .menu-item.active > .menu-link::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: #60a5fa;
}

/* 导航项 hover：加轻微背景，提示可点 */
.top-navbar .menu-item > .menu-link {
    border-radius: 8px;
    transition: background-color .18s ease, color .18s ease;
}

.top-navbar .menu-item:not(.active) > .menu-link:hover { background: rgba(255, 255, 255, .1); }

/* ---------- 17. 顶部原理配图：锐化 + 留白 ----------
   清晰度已通过 srcset 解决（视网膜屏取 1536w 的 webp，且比原 PNG 更小）。
   这里只做视觉留白与质感，不动 img 的任何属性。 */
.nat-test-page .nat-structure-image {
    margin: 24px auto 0;
    padding: 0;
    text-align: center;
    max-width: 768px;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.nat-test-page .nat-structure-image {
    /* owner 指出：容器再包一层边框/阴影，会在图注下方多出一圈"线"，
       看起来像多了一个盒子。图片本身自带圆角卡片底，容器不应再画框。 */
    border: 0;
    box-shadow: none;
    background: transparent;
}

.nat-test-page .nat-structure-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    /* 位图放大时的插值，配合 srcset 让边缘更锐 */
    image-rendering: -webkit-optimize-contrast;
}

/* 说明文字：由过灰加深到 AA，字号略增 */
.nat-test-page .image-caption {
    margin: 12px auto 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: #5b6b80;
    max-width: 60ch;
}

/* ---------- 19. 移动端首屏：把说明长文收起，让「开始检测」进视野 ----------
   实测 390x844：H1(91-160) + 副标题(171-227) + 快速检测说明(251-411, 160px)
   + 短域名提示(427-547, 120px) + 检测卡(571-928)，导致主按钮落在 799-847，
   被挤出 844px 首屏底部。这里在窄屏把两块说明压成单行可展开，
   文案一字未删，只是默认收起。 */
@media (max-width: 640px) {
    .nat-test-page .page-header { margin-bottom: 24px; }

    .nat-test-page .page-header h1 { font-size: 24px; margin-bottom: 8px; }

    .nat-test-page .page-header p { font-size: 14px; line-height: 1.6; }

    /* 快速检测说明：窄屏只留首行，点击展开全文 */
    .nat-test-page .nat-quick-note {
        margin-top: 16px;
        padding: 12px 16px;
        font-size: 13px;
        line-height: 1.7;
        max-height: 76px;
        overflow: hidden;
        position: relative;
        cursor: pointer;
    }

    .nat-test-page .nat-quick-note.is-open { max-height: none; }

    /* 收起态底部渐隐，暗示还有内容 */
    .nat-test-page .nat-quick-note:not(.is-open)::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 28px;
        background: linear-gradient(to bottom, rgba(240, 247, 255, 0), #f0f7ff);
        pointer-events: none;
    }

    /* 短域名提示：窄屏压成一行，长文折叠 */
    .nat-test-page .short-domain-hint {
        margin-top: 12px;
        padding: 8px 12px;
        font-size: 12.5px;
        line-height: 1.6;
        flex-wrap: nowrap;
    }

    .nat-test-page .short-domain-hint svg { width: 13px; height: 13px; }

    /* 检测卡上移 */
    .nat-test-page .test-card { margin-top: 16px; }

    .nat-test-page .test-status { padding: 20px 16px; }

    .nat-test-page .test-status h3 { font-size: 17px; margin: 0 0 8px; }

    .nat-test-page .test-status p { font-size: 13px; line-height: 1.65; margin: 0 0 16px; }
}