/* =============================================================================
   爱查询 · 新版全站样式（纯手写原生 CSS，无框架 / 无 Google 资源）
   路径：/static/model/site/common.css   （随镜像发布，属"代码相关"静态资源）

   目录：
     0. 浏览器归一化（Reset / Normalize）—— 最先执行
     1. 设计 token（亮色 + 深色）
     2. 基础排版
     3. 布局原语（container / grid / flex / 两栏 / prose）
     4. 组件
        4.1 顶栏  4.2 站点头部  4.3 面包屑  4.4 按钮  4.5 表单
        4.6 搜索框  4.7 卡片  4.8 工具卡  4.9 标签/徽标/榜单号
        4.10 列表  4.11 键值表  4.12 数据表  4.13 提示条  4.14 分页
        4.15 空状态  4.16 选项卡  4.17 汉字展示/ruby  4.18 Hero
        4.19 页脚  4.20 回到顶部  4.21 侧栏吸顶
     5. 工具类
     6. 响应式（移动优先 640 / 768 / 1024 / 1280）
     7. 打印（@media print）
   ============================================================================= */

/* =============================================================================
   0. 浏览器归一化（Reset / Normalize）—— 必须最先跑
   ============================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    tab-size: 4;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol, menu {
    margin: 0;
    padding: 0;
}

ul, ol, menu {
    list-style: none;
}

body {
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 表单元素统一继承页面字体 */
button, input, optgroup, select, textarea {
    font: inherit;
    color: inherit;
    margin: 0;
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    appearance: button;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

input, textarea, select {
    border-radius: 0;
    outline: none;
}

textarea {
    resize: vertical;
    overflow: auto;
}

input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="password"] {
    -webkit-appearance: none;
    appearance: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
    -webkit-appearance: none;
}

img, picture, video, canvas, svg, iframe {
    max-width: 100%;
    vertical-align: middle;
}

img, svg {
    height: auto;
}

svg {
    fill: currentColor;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

th, td {
    padding: 0;
    text-align: left;
}

a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}

a:active, a:hover {
    outline: 0;
}

code, kbd, samp, pre {
    font-family: var(--font-mono, monospace);
    font-size: .95em;
}

pre {
    overflow: auto;
}

blockquote, q {
    quotes: none;
}

blockquote::before, blockquote::after, q::before, q::after {
    content: "";
    content: none;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    border: 0;
    border-top: 1px solid var(--c-divider);
}

small {
    font-size: .875em;
}

sub, sup {
    font-size: .75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub { bottom: -.25em; }
sup { top: -.5em; }

[hidden] {
    display: none !important;
}

a, button, label, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* =============================================================================
   1. 设计 token
   ============================================================================= */
:root {
    color-scheme: light;

    /* ---------- 品牌色：方案 A 靛青 + 朱砂 ---------- */
    --c-primary: #2B5C8A;
    --c-primary-hover: #22496E;
    --c-primary-active: #1B3A58;
    --c-primary-soft: #EAF2FA;
    --c-primary-border: #C7DCF0;

    --c-accent: #C0442E;
    --c-accent-soft: #FBEDEA;
    --c-accent-border: #F0CFC7;

    /* ---------- 文字层级 ---------- */
    --c-text: #1F2329;
    --c-text-2: #5A6472;
    --c-text-3: #98A2B3;
    --c-text-inverse: #FFFFFF;
    --c-link: var(--c-primary);
    --c-link-hover: var(--c-primary-hover);

    /* ---------- 背景 / 边框 ---------- */
    --c-bg: #F6F7F9;
    --c-surface: #FFFFFF;
    --c-surface-2: #FBFCFD;
    --c-surface-3: #F1F3F7;
    --c-border: #E6E9EF;
    --c-border-strong: #D3D9E3;
    --c-divider: #F0F2F6;

    /* ---------- 语义色 ---------- */
    --c-success: #1E9E6A;
    --c-success-soft: #E9F7F1;
    --c-success-border: #BFE6D4;
    --c-warning: #D98C0A;
    --c-warning-soft: #FDF4E4;
    --c-warning-border: #F0DCB4;
    --c-danger: #E5484D;
    --c-danger-soft: #FCEDEB;
    --c-danger-border: #F3C9C6;
    --c-info: var(--c-primary);
    --c-info-soft: var(--c-primary-soft);

    /* 榜单前三 */
    --c-rank-1: #C0442E;
    --c-rank-2: #E08A3C;
    --c-rank-3: #C9A227;

    /* ---------- 字体 ---------- */
    --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --font-han: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;

    /* ---------- 字号 ---------- */
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 28px;
    --fs-3xl: 34px;
    --lh-tight: 1.3;
    --lh-base: 1.7;
    --lh-loose: 1.9;

    /* ---------- 间距（4px 基准）---------- */
    --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: 56px;

    /* ---------- 圆角：4×6 基调（按钮 4 / 卡片 6）---------- */
    --r-xs: 2px;
    --r-sm: 4px;
    --r-md: 4px;
    --r-lg: 6px;
    --r-xl: 6px;
    --r-pill: 999px;

    /* ---------- 阴影（克制：层级主要靠边框 + 留白）---------- */
    --sh-1: 0 1px 2px rgba(16, 24, 40, .04);
    --sh-2: 0 2px 8px rgba(16, 24, 40, .06);
    --sh-3: 0 8px 24px rgba(16, 24, 40, .10);
    --sh-focus: 0 0 0 3px rgba(43, 92, 138, .18);

    /* ---------- 尺寸 ---------- */
    --container: 1200px;
    --container-narrow: 900px;
    --topbar-h: 32px;
    --header-h: 58px;
    --sidebar-w: 300px;

    /* ---------- 层级 ---------- */
    --z-sticky: 100;
    --z-header: 200;
    --z-dropdown: 300;
    --z-backtop: 400;

    /* ---------- 动效 ---------- */
    --tr-fast: .15s ease;
    --tr-base: .25s ease;
}

/* ---------- 深色模式 ----------
   约定：html[data-theme="dark"] 手动切换；未设置时跟随系统（prefers-color-scheme） */
:root[data-theme="dark"] {
    color-scheme: dark;

    --c-primary: #6BA3D6;
    --c-primary-hover: #8CB9E3;
    --c-primary-active: #A8CbEE;
    --c-primary-soft: #17283A;
    --c-primary-border: #2C4763;

    --c-accent: #E2705A;
    --c-accent-soft: #34201C;
    --c-accent-border: #5A332B;

    --c-text: #E6E8EC;
    --c-text-2: #A7B0BD;
    --c-text-3: #6E7885;
    --c-text-inverse: #10151C;

    --c-bg: #0F1318;
    --c-surface: #171C23;
    --c-surface-2: #1C222A;
    --c-surface-3: #222A34;
    --c-border: #2A323C;
    --c-border-strong: #3A444F;
    --c-divider: #232B34;

    --c-success: #46B98A;
    --c-success-soft: #14251E;
    --c-success-border: #24513E;
    --c-warning: #DFA13A;
    --c-warning-soft: #2A2216;
    --c-warning-border: #4E3D1D;
    --c-danger: #EA6A6E;
    --c-danger-soft: #2C1A1B;
    --c-danger-border: #5A2E30;

    --c-rank-1: #E2705A;
    --c-rank-2: #DFA13A;
    --c-rank-3: #C9A227;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
    --sh-2: 0 2px 8px rgba(0, 0, 0, .45);
    --sh-3: 0 8px 24px rgba(0, 0, 0, .55);
    --sh-focus: 0 0 0 3px rgba(107, 163, 214, .25);
}

/* 跟随系统（用户没手动选过主题时生效）*/
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --c-primary: #6BA3D6;
        --c-primary-hover: #8CB9E3;
        --c-primary-active: #A8CBEE;
        --c-primary-soft: #17283A;
        --c-primary-border: #2C4763;

        --c-accent: #E2705A;
        --c-accent-soft: #34201C;
        --c-accent-border: #5A332B;

        --c-text: #E6E8EC;
        --c-text-2: #A7B0BD;
        --c-text-3: #6E7885;
        --c-text-inverse: #10151C;

        --c-bg: #0F1318;
        --c-surface: #171C23;
        --c-surface-2: #1C222A;
        --c-surface-3: #222A34;
        --c-border: #2A323C;
        --c-border-strong: #3A444F;
        --c-divider: #232B34;

        --c-success: #46B98A;
        --c-success-soft: #14251E;
        --c-success-border: #24513E;
        --c-warning: #DFA13A;
        --c-warning-soft: #2A2216;
        --c-warning-border: #4E3D1D;
        --c-danger: #EA6A6E;
        --c-danger-soft: #2C1A1B;
        --c-danger-border: #5A2E30;

        --c-rank-1: #E2705A;
        --c-rank-2: #DFA13A;
        --c-rank-3: #C9A227;

        --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
        --sh-2: 0 2px 8px rgba(0, 0, 0, .45);
        --sh-3: 0 8px 24px rgba(0, 0, 0, .55);
        --sh-focus: 0 0 0 3px rgba(107, 163, 214, .25);
    }
}

/* =============================================================================
   2. 基础排版
   ============================================================================= */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-text);
    background: var(--c-bg);
}

h1, h2, h3, h4, h5, h6 {
    line-height: var(--lh-tight);
    font-weight: 600;
    color: var(--c-text);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5, h6 { font-size: var(--fs-base); }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--c-link);
    transition: color var(--tr-fast);
}

a:hover { color: var(--c-link-hover); }

strong, b { font-weight: 600; }

::selection {
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

:focus-visible {
    outline: 0;
    box-shadow: var(--sh-focus);
    border-radius: var(--r-xs);
}

/* 桌面端滚动条轻美化 */
@media (min-width: 1024px) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--c-border-strong) transparent;
    }

    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-thumb {
        background: var(--c-border-strong);
        border-radius: var(--r-pill);
    }
    ::-webkit-scrollbar-track { background: transparent; }
}

/* =============================================================================
   3. 布局原语
   ============================================================================= */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--sp-4);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: 1400px; }

/* 自适应卡片网格（不写死列数）*/
/* ⚠️ minmax(160px, 1fr) 的最小值是「固定 160px」：容器比它窄时会撑破页面。
   正确写法是 min(160px, 100%) —— 容器窄时最小值退到 100%，永不溢出。*/
.grid {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
}

.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.grid--tight { gap: var(--sp-2); }

/* 标签云（自动换行）*/
.tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }

/* 主内容 + 侧栏；<1024 自动堆叠（内容优先）*/
/* ⚠️ 1fr 的自动最小尺寸是 min-content —— 表格/长卡片会把轨道撑到比视口还宽，
   整页出现横向滚动条（header/footer 也会被撑宽）。必须写 minmax(0, 1fr)，
   并给直接子项 min-width: 0，允许它们收缩到内容以下。*/
.layout {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.layout > * { min-width: 0; }

.section { margin-bottom: var(--sp-4); }

.section__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.section__hd h2,
.section__hd h3 {
    position: relative;
    padding-left: var(--sp-3);
    font-size: var(--fs-lg);
}

.section__hd h2::before,
.section__hd h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 3px;
    border-radius: var(--r-pill);
    background: var(--c-primary);
}

.section__more {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
    white-space: nowrap;
}

.section__more:hover { color: var(--c-primary); }

/* 长文正文 */
.prose {
    line-height: var(--lh-loose);
    color: var(--c-text);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.prose p { margin: 0 0 var(--sp-4); }
.prose h2 { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-lg); }
.prose h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-md); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4); padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--sp-1); }
.prose img { border-radius: var(--r-lg); }

.prose blockquote {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-left: 3px solid var(--c-primary-border);
    background: var(--c-primary-soft);
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    color: var(--c-text-2);
}

/* =============================================================================
   4. 组件
   ============================================================================= */

/* ---------- 4.1 顶栏（沿用老版：IP查询 / 字典 / 词典 + 当前时间）---------- */
.topbar {
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-divider);
    font-size: var(--fs-xs);
    color: var(--c-text-3);
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    height: var(--topbar-h);
}

.topbar__links {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.topbar__links a { color: var(--c-text-2); }
.topbar__links a:hover { color: var(--c-primary); }

/* ---------- 4.2 站点头部 ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    height: var(--header-h);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    white-space: nowrap;
    flex: 0 0 auto;
}

.brand__logo { height: 30px; width: auto; }

.brand__text {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-text);
}

.brand__sub {
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--c-text-3);
}

.nav {
    display: none;
    align-items: center;
    gap: var(--sp-1);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.nav__link {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    white-space: nowrap;
}

.nav__link:hover {
    background: var(--c-surface-2);
    color: var(--c-text);
}

.nav__link.is-active {
    color: var(--c-primary);
    background: var(--c-primary-soft);
    font-weight: 600;
}

.site-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 0 0 auto;
}

.icon-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-text-2);
    background: var(--c-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--tr-fast);
}

.icon-btn:hover {
    border-color: var(--c-primary-border);
    color: var(--c-primary);
    background: var(--c-primary-soft);
}

/* ---------- 4.3 面包屑 ---------- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-3) 0;
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

.breadcrumb__sep {
    color: var(--c-text-3);
    opacity: .6;
}

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

.breadcrumb [aria-current="page"] { color: var(--c-text-2); }

/* 兼容未重写的老模板（它们用 .position）*/
.position {
    padding: var(--sp-3) 0;
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

.position h6 {
    font-size: var(--fs-sm);
    font-weight: 400;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

/* ---------- 4.4 按钮 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 34px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-base);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--tr-fast);
}

.btn:hover {
    border-color: var(--c-primary-border);
    color: var(--c-primary);
}

.btn:disabled, .btn.is-disabled {
    opacity: .55;
    cursor: not-allowed;
}

.btn--primary {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    font-weight: 600;
}

.btn--primary:hover {
    background: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
    color: #fff;
}

/* ===== 按键计算器（jisuanqi）===== */
.card--flat {
    border: 0;
    box-shadow: none;
    background: var(--c-surface-2);
}
.card--flat .card__bd { padding: var(--sp-4); }
.text-mono { font-family: var(--font-mono); }
.keypad {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.keypad .btn { width: 100%; }
.btn--danger {
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: #fff;
    font-weight: 600;
}
.btn--danger:hover { background: var(--c-danger); color: #fff; filter: brightness(.94); }
.btn--ok {
    background: var(--c-success);
    border-color: var(--c-success);
    color: #fff;
    font-weight: 600;
}
.btn--ok:hover { background: var(--c-success); color: #fff; filter: brightness(.94); }
.calc-display {
    border: 1px solid var(--c-border);
    border-radius: var(--sp-3);
    background: var(--c-surface-2);
    padding: var(--sp-3) var(--sp-4);
    text-align: right;
    font-family: var(--font-mono);
}
.calc-display__history {
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    min-height: 1.5em;
    word-break: break-all;
}
.calc-display__current {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--c-text);
    word-break: break-all;
    overflow-wrap: anywhere;
}

.btn--accent {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
}

.btn--accent:hover {
    filter: brightness(1.06);
    color: #fff;
}

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

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

.btn--sm { height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn--lg { height: 42px; padding: 0 var(--sp-6); font-size: var(--fs-md); }
.btn--block { width: 100%; }

/* ---------- 4.5 表单 ---------- */
.field { display: block; margin-bottom: var(--sp-4); }

.field__label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
}

.field__hint {
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--c-text-3);
}

.input,
.select,
.textarea {
    width: 100%;
    height: 34px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-text);
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}

.textarea {
    height: auto;
    min-height: 96px;
    padding: var(--sp-2) var(--sp-3);
    line-height: var(--lh-base);
}

.input::placeholder, .textarea::placeholder { color: var(--c-text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-primary-border); }
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--c-primary);
    box-shadow: var(--sh-focus);
}

.input--lg { height: 42px; font-size: var(--fs-md); }

.form-grid {
    display: grid;
    gap: 0 var(--sp-4);
    grid-template-columns: 1fr;
}

/* 标签式单选（还款方式 / 筛选）*/
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    cursor: pointer;
    user-select: none;
    transition: all var(--tr-fast);
}

.chip:hover {
    border-color: var(--c-primary-border);
    color: var(--c-primary);
}

.chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.chip:has(input:checked),
.chip.is-checked {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-weight: 600;
}

/* ---------- 4.6 搜索框（工具站核心控件）---------- */
.searchbar {
    display: flex;
    gap: var(--sp-2);
    width: 100%;
}

.searchbar__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-md);
}

.searchbar__input:focus {
    border-color: var(--c-primary);
    box-shadow: var(--sh-focus);
}

.searchbar__btn {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 var(--sp-6);
    border: 1px solid var(--c-primary);
    border-radius: var(--r-sm);
    background: var(--c-primary);
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tr-fast);
}

.searchbar__btn:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }

/* ---------- 4.7 卡片 ---------- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    overflow: hidden;
}

.card + .card { margin-top: var(--sp-3); }

.card__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-divider);
    background: var(--c-surface-2);
}

.card__hd h2, .card__hd h3 { font-size: var(--fs-md); }

.card__bd { padding: var(--sp-4); }
.card__bd--tight { padding: var(--sp-3); }
.card__bd--flush { padding: 0; }

.card__ft {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--c-divider);
    background: var(--c-surface-2);
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

/* ---------- 4.8 工具卡 ---------- */
.tool-card {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    transition: all var(--tr-fast);
    /* 长标题 + 数值并排时允许换行，避免窄屏撑破卡片 */
    flex-wrap: wrap;
    min-width: 0;
}

/* 卡片内所有子项允许收缩（否则长中文标题会把卡片顶宽）*/
.tool-card > * { min-width: 0; }

.tool-card:hover {
    border-color: var(--c-primary-border);
    background: var(--c-primary-soft);
}

.tool-card__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 700;
}

.tool-card__name {
    display: block;
    font-size: var(--fs-base);
    color: var(--c-text);
    font-weight: 500;
}

.tool-card__desc {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--c-text-3);
}

/* 内联 SVG 图标跟随文字颜色 */
.icon-img {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
}

/* ---------- 4.8b 工具卡图标（用老版真实图标 /static/images/project/{子域}.png）---------- */
/* 卡片用的是我们自己的定稿样式，这里只负责图标：真图 / 无图时退化成首字方块 */
.tool-card__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--r-lg);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
    font-weight: 700;
    overflow: hidden;
}

.tool-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- 4.9 标签 / 徽标 / 榜单号 ---------- */
.tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    transition: all var(--tr-fast);
}

a.tag:hover {
    border-color: var(--c-primary-border);
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

.tag--primary {
    background: var(--c-primary-soft);
    border-color: var(--c-primary-border);
    color: var(--c-primary);
}

.tag--accent {
    background: var(--c-accent-soft);
    border-color: var(--c-accent-border);
    color: var(--c-accent);
}

.tag--ok {
    background: var(--c-success-soft);
    border-color: var(--c-success-border);
    color: var(--c-success);
}

.tag--sm { height: 21px; font-size: var(--fs-xs); padding: 0 var(--sp-2); }

.rank-no {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: var(--r-xs);
    background: var(--c-surface-3);
    color: var(--c-text-3);
    font-size: var(--fs-xs);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rank-no--1 { background: var(--c-rank-1); color: #fff; }
.rank-no--2 { background: var(--c-rank-2); color: #fff; }
.rank-no--3 { background: var(--c-rank-3); color: #fff; }

/* ---------- 4.10 列表 ---------- */
.list { display: block; }

.list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-divider);
}

.list__item:last-child { border-bottom: 0; }
.list--tight .list__item { padding: var(--sp-2) 0; }

.list__main { flex: 1 1 auto; min-width: 0; }

.list__title {
    font-size: var(--fs-base);
    color: var(--c-text);
    font-weight: 500;
    word-break: break-word;
}

.list__title:hover { color: var(--c-primary); }

.list__desc {
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    line-height: 1.6;
}

.list__meta {
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    color: var(--c-text-3);
}

/* ---------- 4.11 键值表（查询结果 / 属性）---------- */
.kv {
    width: 100%;
    font-size: var(--fs-base);
}

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

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

.kv th {
    width: 34%;
    max-width: 160px;
    font-weight: 500;
    color: var(--c-text-2);
    background: var(--c-surface-2);
    white-space: nowrap;
}

.kv td { color: var(--c-text); }
.kv--strong td { font-weight: 600; }

/* ---------- 4.12 数据表（多列）---------- */
.table {
    width: 100%;
    font-size: var(--fs-sm);
}

.table th, .table td {
    padding: var(--sp-3);
    border-bottom: 1px solid var(--c-divider);
    text-align: left;
    white-space: nowrap;
}

.table thead th {
    background: var(--c-surface-2);
    color: var(--c-text-2);
    font-weight: 600;
}

.table tbody tr:hover { background: var(--c-surface-2); }
.table--striped tbody tr:nth-child(even) { background: var(--c-surface-2); }

.table--scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 作为 grid/flex 子项时必须能收缩，否则宽表会把整页撑出横向滚动条 */
    min-width: 0;
    max-width: 100%;
}

/* 数字列右对齐 + 等宽 */
.table .num { text-align: right; font-family: var(--font-mono); }

/* ---------- 4.12b 贷款明细表（长表：纵向滚动 + 表头吸顶）---------- */
.loan-plan {
    max-height: 520px;
    overflow-y: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    -webkit-overflow-scrolling: touch;
}

.loan-plan .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: inset 0 -1px 0 var(--c-border);
}

/* 两种还款方式对比表：类别列不换行 */
.loan-compare td:first-child,
.loan-compare th:first-child { white-space: nowrap; }

/* kv 表（键值结果）：单元格不换行会把表撑宽，窄屏允许换行 */
.kv { table-layout: fixed; }
.kv th { white-space: normal; }

/* ---------- 4.13 提示条 ---------- */
.alert {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    color: var(--c-text-2);
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.alert--info {
    background: var(--c-info-soft);
    border-color: var(--c-primary-border);
    color: var(--c-primary);
}

.alert--warn {
    background: var(--c-warning-soft);
    border-color: var(--c-warning-border);
    color: var(--c-warning);
}

.alert--danger {
    background: var(--c-danger-soft);
    border-color: var(--c-danger-border);
    color: var(--c-danger);
}

.alert--ok {
    background: var(--c-success-soft);
    border-color: var(--c-success-border);
    color: var(--c-success);
}

/* ---------- 4.14 分页 ---------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-4) 0;
}

.pagination__item {
    min-width: 32px;
    height: 32px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-text-2);
    font-size: var(--fs-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination__item:hover { border-color: var(--c-primary-border); color: var(--c-primary); }

.pagination__item.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    font-weight: 600;
}

.pagination__item.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- 4.15 空状态 ---------- */
.empty {
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    color: var(--c-text-3);
    font-size: var(--fs-sm);
}

.empty__icon { font-size: 32px; line-height: 1; margin-bottom: var(--sp-3); opacity: .5; }

/* ---------- 4.16 选项卡 ---------- */
.tabs {
    display: flex;
    gap: var(--sp-1);
    overflow-x: auto;
    border-bottom: 1px solid var(--c-border);
    -webkit-overflow-scrolling: touch;
}

.tabs__item {
    flex: 0 0 auto;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-base);
    color: var(--c-text-2);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.tabs__item:hover { color: var(--c-text); }

.tabs__item.is-active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
    font-weight: 600;
}

/* ---------- 4.17 汉字展示 / ruby 注音 ---------- */
.han { font-family: var(--font-han); line-height: 1; }
.han--xl { font-size: 64px; }

.han-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 60px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    font-family: var(--font-han);
    font-size: 38px;
    line-height: 1;
}

/* 汉字云 */
.chars { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.chars a {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    font-family: var(--font-han);
    font-size: 21px;
    color: var(--c-text);
    transition: all var(--tr-fast);
}

.chars a:hover {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

.chars--sm a { width: 34px; height: 34px; font-size: 17px; }

ruby {
    ruby-align: center;
    font-size: 1.1em;
    line-height: 2.2;
    margin-right: .1em;
}

rt {
    font-size: .5em;
    color: var(--c-text-3);
    font-family: var(--font-sans);
    font-weight: 400;
}

/* ---------- 4.17b 词条头（字 / 词 / 成语详情）---------- */
.entry-hd {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    flex-wrap: wrap;
}

.entry-hd__main {
    flex: 1 1 240px;
    min-width: 0;
}

.entry-hd__main h1 {
    font-family: var(--font-han);
    font-size: var(--fs-3xl);
    letter-spacing: .06em;
    margin-bottom: var(--sp-2);
    word-break: break-word;
}

.entry-hd__py {
    color: var(--c-text-2);
    font-size: var(--fs-md);
}

.entry-hd__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.entry-hd__pic {
    flex: 0 0 auto;
}

.entry-hd__pic img {
    width: 120px;
    height: 120px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    object-fit: contain;
}

/* 词条分段（释义 / 出处 / 例句 / 用法）*/
.entry-sec {
    padding: var(--sp-3) 0;
    border-bottom: 1px dashed var(--c-divider);
}

.entry-sec:last-child { border-bottom: 0; }

.entry-sec__label {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--sp-2);
    border-radius: var(--r-sm);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-size: var(--fs-xs);
    font-weight: 600;
    margin-right: var(--sp-2);
}

.entry-sec__label--accent {
    background: var(--c-accent-soft);
    color: var(--c-accent);
}

/* ---------- 4.18 主页 Hero ---------- */
.hero {
    padding: var(--sp-8) 0 var(--sp-6);
    background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 100%);
    border-bottom: 1px solid var(--c-border);
    text-align: center;
}

.hero h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.hero__sub { color: var(--c-text-2); margin-bottom: var(--sp-5); }
.hero__search { max-width: 640px; margin: 0 auto; }
.hero__meta { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--c-text-3); }
.hero__meta b { color: var(--c-primary); }

/* 工具站首页搜索区 */
.tool-hero {
    padding: var(--sp-6) 0;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}

.tool-hero h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.tool-hero__sub { color: var(--c-text-2); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

.tool-hero__hot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

/* ---------- 4.19 页脚（对齐老版：#f8f8f8 底 + 顶部 2px 浅蓝线 + 灰链接，不抢注意力）---------- */
.site-footer {
    margin-top: var(--sp-8);
    padding: var(--sp-6) 0 var(--sp-7);
    background: var(--c-surface-2);
    border-top: 2px solid var(--c-primary-border);
    color: var(--c-text-3);
    font-size: var(--fs-sm);
}

.site-footer a {
    color: var(--c-text-2);
}

.site-footer a:hover {
    color: var(--c-text);
}

.site-footer__logo {
    height: 30px;
    width: auto;
    margin-bottom: var(--sp-4);
    opacity: .92;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    margin-bottom: var(--sp-3);
}

.site-footer__links span {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.site-footer__links em {
    color: var(--c-text-3);
    font-style: normal;
    opacity: .7;
}

.site-footer__desc {
    color: var(--c-text-3);
    line-height: 1.8;
    margin-bottom: var(--sp-4);
}

.site-footer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-divider);
    color: var(--c-text-3);
}

.site-footer__meta img {
    height: 16px;
    width: auto;
    vertical-align: -3px;
    margin-right: 4px;
}

.site-footer__qr {
    display: none;
}

.site-footer__qr img {
    height: auto;
    width: 90px;
    margin: 0;
}

/* ---------- 4.20 回到顶部 ---------- */
#backtop {
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-5);
    z-index: var(--z-backtop);
    width: 40px;
    height: 40px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    color: var(--c-text-2);
    box-shadow: var(--sh-2);
    display: none;
    align-items: center;
    justify-content: center;
    transition: all var(--tr-fast);
}

#backtop.is-show { display: inline-flex; }
#backtop:hover { color: var(--c-primary); border-color: var(--c-primary-border); }

/* ---------- 4.21 侧栏 ---------- */
.sidebar { display: block; }

/* 结果强调块（计算器 / 查询结果）*/
.result-hero {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: minmax(0, 1fr);
    padding: var(--sp-4);
    border-radius: var(--r-lg);
    background: var(--c-primary-soft);
    border: 1px solid var(--c-primary-border);
}

.result-hero__item { text-align: center; }

.result-hero__num {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--c-primary);
    font-family: var(--font-mono);
    line-height: 1.2;
    /* 长数字/长金额（如「玖佰玖拾玖兆…」）不折行会撑破容器 */
    overflow-wrap: anywhere;
}

.result-hero__num small {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-2);
    margin-left: 2px;
}

.result-hero__label { font-size: var(--fs-xs); color: var(--c-text-2); margin-top: var(--sp-1); }
.result-hero--accent { background: var(--c-accent-soft); border-color: var(--c-accent-border); }
.result-hero--accent .result-hero__num { color: var(--c-accent); }

/* =============================================================================
   5. 工具类
   ============================================================================= */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--c-text-3); }
.text-2 { color: var(--c-text-2); }
.text-primary { color: var(--c-primary); }
.text-accent { color: var(--c-accent); }
/* 涨跌配色（中文习惯：涨红跌绿）—— 菜价/汇率等页面用 */
.text-up { color: var(--c-accent); }
.text-down { color: var(--c-success); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-lg { font-size: var(--fs-lg); }
.text-bold { font-weight: 600; }
.text-nowrap { white-space: nowrap; }
.text-break { word-break: break-all; }
.font-mono { font-family: var(--font-mono); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.w-full { width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.hidden { display: none !important; }

.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;
}

.hide-md { display: initial; }
.show-md { display: none; }

/* =============================================================================
   6. 响应式（移动优先）
   ============================================================================= */
@media (min-width: 640px) {
    .container { padding: 0 var(--sp-5); }
    .hero { padding: var(--sp-9) 0 var(--sp-7); }
    .hero h1 { font-size: var(--fs-3xl); }
    .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); }
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .result-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-footer__qr { display: block; }
}

@media (min-width: 640px) {
    :root { --fs-base: 15px; --header-h: 62px; }
    .nav { display: flex; }
    .nav-toggle { display: none; }
    .kv th { width: 140px; }
    /* ⚠️ .grid 的列定义同优先级且源顺序更靠后 → 会把 .grid--2/.grid--3 的列宽覆盖掉，
       导致 grid--2 拿不到 220px。这里显式补回来。 */
    .grid--2 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .grid--3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (min-width: 1024px) {
    :root { --fs-base: 15px; --header-h: 64px; }
    .layout { grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: var(--sp-6); }
    .hide-md { display: none; }
    .show-md { display: initial; }
    .sidebar--sticky { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

@media (min-width: 1280px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* 移动端导航抽屉（由内联 JS 切 .is-open）*/
@media (max-width: 767.98px) {
    .nav {
        display: none;
        position: fixed;
        inset: var(--header-h) 0 0 0;
        z-index: var(--z-dropdown);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--sp-3);
        background: var(--c-surface);
        overflow-y: auto;
    }

    .nav.is-open { display: flex; }

    .nav__link {
        padding: var(--sp-4) var(--sp-3);
        border-bottom: 1px solid var(--c-divider);
        font-size: var(--fs-md);
        border-radius: 0;
    }

    .layout > .sidebar { order: 2; }
    .layout > .main { order: 1; }
    .section__hd h2, .section__hd h3 { font-size: var(--fs-md); }
    .card__bd { padding: var(--sp-3); }
    .kv th, .kv td { padding: var(--sp-3); }
    .topbar { display: none; }
    .result-hero__num { font-size: var(--fs-xl); }
}

@media (max-width: 360px) {
    .grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: var(--fs-xl); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* =============================================================================
   7. 打印（结果页 / 计算器：打印出来要能看）
   ============================================================================= */
@media print {
    :root {
        --c-bg: #fff;
        --c-surface: #fff;
        --c-surface-2: #fff;
        --c-text: #000;
        --c-text-2: #333;
        --c-text-3: #666;
        --c-border: #ccc;
        --c-divider: #ddd;
        --c-primary: #000;
        --c-primary-soft: #f2f2f2;
        --c-primary-border: #ccc;
        box-shadow: none;
    }

    .no-print,
    .topbar,
    .site-header,
    .site-footer,
    .sidebar,
    #backtop,
    .pagination,
    .nav,
    .tabs {
        display: none !important;
    }

    /* 提示条是 position:fixed，打印时会贴在纸上；视频播放器会印出一个黑框 */
    #ax-notify,
    video {
        display: none !important;
    }

    /* ---------- 打印：只输出「结果」，不输出输入表单 ---------- */
    /* 表单区（输入框/按钮/单选）打印出来是一堆灰框，必须去掉 */
    .form-grid,
    .field,
    .field__label,
    .field__hint,
    .chip-group,
    .searchbar,
    .btn,
    .btn--primary,
    .btn--ghost,
    .btn--sm,
    .btn--lg,
    .icon-btn {
        display: none !important;
    }

    body {
        background: #fff;
        font-size: 12pt;
    }

    .container {
        max-width: none;
        padding: 0;
    }

    .layout {
        display: block !important;
    }

    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 12px;
    }

    .card__hd {
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .result-hero {
        background: #f5f5f5 !important;
        border: 1px solid #bbb !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .result-hero__num { color: #000 !important; }

    a { color: #000; text-decoration: none; }

    /* 打印时把表格完整展开（去掉横向滚动）*/
    .table--scroll { overflow: visible !important; }
    .table th, .table td { white-space: normal; }

    /* ⚠️ 长表（贷款逐期明细）必须放开高度，否则只打印出屏幕上可见的十几行 */
    .loan-plan,
    .table--scroll,
    .kv-wrap {
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* 表格跨页：表头每页重复、数据行不被切断 */
    .table thead { display: table-header-group; }
    .table tfoot { display: table-footer-group; }
    .table tr { break-inside: avoid; page-break-inside: avoid; }

    /* 打印时用块级标题（h3 在 .card__bd 里，避免被分页切开）*/
    .card__bd h3 { break-after: avoid; page-break-after: avoid; }

    /* 打印抬头 */
    .print-only { display: block !important; }

    .print-head {
        display: block !important;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 2px solid #000;
        font-size: 14pt;
        font-weight: 700;
    }

    .print-foot {
        display: block !important;
        margin-top: 12px;
        padding-top: 6px;
        border-top: 1px solid #ccc;
        font-size: 9pt;
        color: #666;
    }
}

/* 默认隐藏打印专用元素 */
.print-only,
.print-head,
.print-foot {
    display: none;
}


/* ==========================================================================
   旧模板迁移兼容（老 UIkit 结构 → 新样式）
   历史页面里普遍是「输入框 + 查询按钮」的嵌套 div，这里用 :has() 让它们自动排成一行；
   不支持 :has() 的浏览器会退化为上下排列，不影响功能。
   ========================================================================== */

form > div:has(input.input),
form > div:has(> div > input.input),
div:has(> input.input + button),
div:has(> div > input.input + button) {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
}

div:has(> input.input) > input.input,
div:has(> div > input.input) input.input {
    flex: 1 1 220px;
    width: auto;
    min-width: 0;
}

/* 老模板里裸露的 h1（放在卡片里）与卡片头样式对齐 */
.card > h1:first-child {
    margin: var(--sp-4) var(--sp-4) 0;
    font-size: var(--fs-xl);
    line-height: 1.35;
}

/* 老模板里成排的标签链接（a-list） */
.card__bd > a,
.card__bd > span > a {
    margin: 0 2px 4px 0;
}