/* ==========================================================================
* 融·金融计算器 —— 站点样式（重构版）
* --------------------------------------------------------------------------
* 架构（自上而下，单向依赖，不再层层覆盖）：
* 0 Token 设计令牌：颜色 / 间距 / 圆角 / 层级 / 断点策略
* 1 Base 元素级基础样式
* 2 Layout 页面骨架：容器、标题区、主导航、页面栈（pane）
* 3 Surface 面：卡片、内嵌面、表单字段、网格、chip 行
* 4 Component 组件：按钮、输入、表格、分页、键盘、弹层、历史
* 5 State 状态：选中 / 胜负 / 显示隐藏（由 JS 切换类名）
* 6 Theme 深色主题、打印、动效偏好
*
* 断点策略：
* 主要 3 档 —— ≤639 手机（字号 / 触控目标 / 表格列宽）、≥768 平板（标题三栏、
* 计算页两栏）、≥1024 桌面（吸底条让位）；
* 另有 ≤900（隐藏快捷键提示、对比卡内下拉保持自身宽度）、系统深色、打印、
* 减弱动效各 1 个。页面级间距与卡片内边距用 clamp + 容器查询单位连续变化，
* 不依赖断点；.auto-grid-2 / .repay-grid 用 auto-fit + minmax 自适应列数。
* 媒体查询合计 9 个（重构前 11 个，且其中 5 个是互相覆盖的 !important 补丁）。
*
* 约定：!important 只出现在三类地方 —— 全屏覆盖层（要压过 Tailwind 工具类）、
* 显示切换 [class~="hidden"]（唯一出口，防止自定义 display 压掉 .hidden）、
* 以及打印 / 深色 / 主题过渡 / 减弱动效这些需要覆盖全局的场合。
* JS 依赖的类名与 id 一律保持：hidden / soft-* / term-quick-btn /
* pag-btn / fs-overlay / fs-bar / fs-lock /
* history-* /
* keypad-* / numkey-* / winner / tie / table-row-* / compact-card 等。
* ========================================================================== */
/* 字体改由 index.html 的 引入（此处不再写 CSS 的 @import 规则）：
那条规则会让浏览器先下完本文件、解析到它才去请求字体，多一个串行往返，
在移动端 / WebView 上是能明显感觉到的首屏延迟。preconnect 也一并放到了 HTML。 */
/* ============================ 0. 设计令牌 ============================ */
:root {
/* 颜色：浅色 */
--bg-body-start: #e0e5ec; --bg-body-mid: #f0f4f8; --bg-body-end: #e8eef4;
--card-bg-start: #e6ebf2; --card-bg-end: #fff;
--card-shadow-light: #cbd5e3; --card-shadow-dark: #fbfdff;
--inset-shadow-light: #cbd5e3; --inset-shadow-dark: #fbfdff;
--text-primary: #1b2432; --text-secondary: #46536b; --text-tertiary: #667386;
--border-light: #e2e8f0;
--table-stripe-even: #fff; --table-stripe-odd: #f7f9fc;
--table-hover: #edf1fe;
--input-bg-start: #e4e9f1; --input-bg-end: #fdfefe;
--button-bg-start: #e4e9f1; --button-bg-end: #fdfefe;
--button-primary-start: #667eea; --button-primary-end: #764ba2;
--button-clear-start: #f56565; --button-clear-end: #e53e3e;
--button-special-start: #ed8936; --button-special-end: #dd6b20;
--button-operator-start: #667eea; --button-operator-end: #764ba2;
--button-equal-start: #48bb78; --button-equal-end: #38a169;
--dreamy-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
--error-text: #e53e3e;
--toast-bg: #1f2937; --toast-text: #f9fafb;
--tfoot-bg: #e5e7eb; --thead-bg: #d0d7de;
--info-icon-color: #6b7280;
--chart-text: #374151;
--winner-color: #48bb78;
--winner-bg: rgba(72, 187, 120, 0.08);
--nav-bg-start: rgba(230, 235, 242, 0.88); --nav-bg-end: rgba(255, 255, 255, 0.88);
--focus-ring: rgba(102, 126, 234, 0.3);
--accent-red: #ef4444;
/* 间距刻度：4 的倍数，页面级间距用容器查询单位连续变化 */
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem;
--gap-page: clamp(0.75rem, 2.5cqi + 0.35rem, 1.5rem);
--gap-stack: clamp(0.5rem, 1.6cqi + 0.25rem, 1rem);
--pad-card: clamp(0.8rem, 2.2cqi + 0.35rem, 1.25rem);
--pad-field-y: 0.7rem;
--pad-field-x: clamp(0.7rem, 2cqi + 0.25rem, 1rem);
/* 圆角 / 阴影 */
--radius-card: 20px; --radius-field: 12px; --radius-inner: 12px;
--radius-pill: 999px;
--shadow-card: 8px 8px 16px var(--card-shadow-light), -8px -8px 16px var(--card-shadow-dark);
--shadow-card-sm: 5px 5px 10px var(--card-shadow-light), -5px -5px 10px var(--card-shadow-dark);
--shadow-inset: inset 3px 3px 6px var(--inset-shadow-light), inset -3px -3px 6px var(--inset-shadow-dark);
--shadow-inset-strong: inset 4px 4px 8px var(--inset-shadow-light), inset -4px -4px 8px var(--inset-shadow-dark);
/* 层级（集中登记，避免各处硬编码互相打架） */
--z-nav: 40; --z-sticky-bar: 9000; --z-keypad: 9500;
--z-toast: 9999; --z-fullscreen: 10000; --z-fullscreen-close: 10001;
--z-modal: 10050; --z-banner: 10100;
/* 触控目标与观感尺寸 */
--tap-min: 36px;
/* 由 JS 回填的运行时量 */
--nav-offset: 90px;
--sticky-bar-h: 76px;
/* 断点（media query 里无法用变量，此处仅作单一事实来源的文档）：
手机 < 640 | 平板 >= 768 | 桌面 >= 1024 */
}
/* ============================ 1. 基础 ============================ */
* {
font-family: 'Inter', sans-serif;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
/* 容器查询上下文：页面级间距随容器宽度连续变化，不依赖视口断点 */
#app-shell { container-type: inline-size; }
html { scroll-padding-top: var(--nav-offset); }
body {
background: linear-gradient(135deg, var(--bg-body-start), var(--bg-body-mid), var(--bg-body-end));
min-height: 100vh; min-height: 100dvh;
color: var(--text-primary);
/* 状态栏避让：
打包成 APK 后，壳若把状态栏画在 WebView 之上，而页面又拿不到安全区数值
（env(safe-area-inset-top) 在多数 Android WebView 里返回 0，除非壳主动
声明 edge-to-edge），标题与版本号就会被系统状态栏盖住。
这里把"基线值 + 安全区"一起写进 max()：基线值不依赖 env()，因此在拿不到
安全区的环境里也能保证至少让出 30px（约等于常见状态栏高度）；
支持 env() 时自动取更大的那个，不会重复留白。 */
padding-top: max(30px, calc(10px + env(safe-area-inset-top, 0px)));
padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
padding-left: max(var(--gap-page), env(safe-area-inset-left, 0px));
padding-right: max(var(--gap-page), env(safe-area-inset-right, 0px));
transition: background-color 0.3s, background 0.3s, color 0.3s;
}
/* 已安装到桌面 / 以 standalone 方式启动时，系统状态栏本身就不占页面空间，
上面那 30px 基线会变成多余的空白。JS 检测到后给 html 加 fs-standalone。 */
html.fs-standalone body {
padding-top: max(12px, calc(8px + env(safe-area-inset-top, 0px)));
}
html.fs-standalone .fs-overlay { margin-top: 0 !important; }
html.fs-standalone .fs-bar { padding-top: max(8px, env(safe-area-inset-top, 0px)); }
h1, h2, h3, h4 { line-height: 1.25; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--button-primary-start);
outline-offset: 2px;
}
/* 显示切换的唯一出口：模块之间靠切换 Tailwind 的 .hidden 控制显隐，
这里保证任何自定义规则（display:flex/grid 等）都不会把它压掉。 */
[hidden], [class~="hidden"] { display: none !important; }
/* ======================== 2. 页面骨架 ======================== */
/* 2.1 内容容器：唯一负责页面左右留白（body 只负责安全区） */
.app-container {
width: 100%;
max-width: 72rem;
margin-inline: auto;
}
/* 2.2 顶部标题区：窄屏纵向堆叠，≥768px 三栏让标题落在真正的中线 */
.app-header {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
gap: var(--sp-2);
margin-bottom: var(--gap-page);
text-align: center;
}
.app-header .brand { min-width: 0; }
.app-header .brand h1 { margin-bottom: var(--sp-1); }
.app-header .brand p {
color: var(--text-tertiary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-header .top-actions {
display: flex; flex-wrap: nowrap; align-items: center;
justify-content: center; gap: var(--sp-1);
}
/* 2.3 主导航：内容放得下就居中，放不下就横向滚动（不再用负外边距技巧） */
.nav-shell {
position: sticky;
top: max(var(--sp-2), env(safe-area-inset-top));
z-index: var(--z-nav);
margin-bottom: var(--gap-page);
padding: var(--sp-1);
border-radius: var(--radius-card);
background: linear-gradient(145deg, var(--nav-bg-start), var(--nav-bg-end));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: box-shadow 0.25s, border-radius 0.25s;
}
.nav-shell.is-stuck {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
border-radius: 14px;
}
.nav-scroll {
display: flex; gap: var(--sp-2);
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x proximity;
padding: 2px;
scrollbar-width: none; -ms-overflow-style: none;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
}
.nav-scroll::-webkit-scrollbar { display: none; }
/* 内容比容器窄时居中；溢出时两端的 auto 外边距自动归零，滚动范围完整 */
.nav-scroll > * { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
.nav-scroll > *:first-child { margin-left: auto; }
.nav-scroll > *:last-child { margin-right: auto; }
/* 2.4 页面（pane）：切换单位，统一垂直节奏 —— 取代每个 section 各写一条 animation。
注意：整条选择器必须包在 :where() 里（特异性 0,0,0）。否则 .pane.space-y-6 这种
(0,2,0) 的规则会压过 Tailwind 的 `.hidden { display:none }`（0,1,0），
被 JS 加上 .hidden 的页面仍然会显示出来。 */
.pane { animation: sectionFade 0.28s ease; }
.pane + .pane { margin-top: var(--gap-page); }
:where(.pane.space-y-6, .pane.space-y-4, .pane.space-y-3, .pane.space-y-2) {
display: flex; flex-direction: column;
}
:where(.pane.space-y-6) { gap: var(--gap-page); }
:where(.pane.space-y-4) { gap: var(--gap-stack); }
:where(.pane.space-y-3, .pane.space-y-2) { gap: var(--sp-3); }
/* 2.5 页内标题行（标题 + 右侧操作按钮） */
.pane-head {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--sp-2);
margin-bottom: var(--sp-4);
}
.pane-head h2, .pane-head h3 { margin: 0; }
/* ============================ 3. 面 ============================ */
/* 3.1 卡片 / 内嵌面 */
.soft-card {
background: linear-gradient(145deg, var(--card-bg-start), var(--card-bg-end));
box-shadow: var(--shadow-card);
border-radius: var(--radius-card);
}
.soft-card-inset {
background: linear-gradient(145deg, var(--card-bg-start), var(--card-bg-end));
box-shadow: var(--shadow-inset-strong);
border-radius: var(--radius-inner);
}
/* 卡片内边距：一处定义，取代原来 5 处媒体查询 !important 覆盖 */
.card { padding: var(--pad-card); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
/* 3.2 表单字段：标签 + 控件 + 提示 + 错误，统一节奏 */
.field { display: block; }
.field + .field { margin-top: var(--gap-stack); }
.field > label, .field > .field-label {
display: block;
margin-bottom: var(--sp-1);
font-size: 0.875rem;
color: var(--text-secondary);
}
/* 字段内部的纵向间隔（label 与控件之间由 label 的 margin-bottom 负责） */
.field .soft-input + .rate-note { margin-top: var(--sp-1); }
/* 3.3 网格：列数自适应，无断点 */
.auto-grid-2 {
display: grid;
/* 单列 → 双列的分界由可用宽度决定：≥400px 可用宽度时并排 */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
gap: var(--gap-stack);
}
.auto-grid-2.tight { gap: var(--sp-2); }
/* 对比页的 A/B 两列：始终尽量并排（同一项左右对照才有意义），
只有实在放不下（<320px 可用宽度）才退回单列。 */
.auto-grid-2.compare-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.75rem), 1fr));
}
/* 还款方式 4 按钮：窄屏 2 列、宽屏 4 列，自适应 */
.repay-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
gap: var(--sp-2);
}
/* 计算页参数区 / 结果区：窄屏单列，宽屏两栏等宽 */
.calc-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap-page);
}
/* 3.4 快捷 chip 行 */
.chip-row, .quick-chip-row {
display: flex; flex-wrap: wrap;
gap: 6px;
margin-top: var(--sp-2);
}
.chip-row:first-child { margin-top: 0; }
/* 3.5 指标块：贷款总额 / 总利息 / 还款总额 / IRR 等小结果卡 */
.metric-card {
padding: var(--sp-3) var(--sp-3);
text-align: center;
}
/* 3.6 字段内的辅助文本 */
.field-hint { margin-top: var(--sp-1); font-size: 0.75rem; color: var(--text-tertiary); }
/* 通用弱化文字（取代散落的 inline style="color:var(--text-tertiary)"） */
.text-muted { color: var(--text-tertiary); }
.text-muted-sm { color: var(--text-tertiary); font-size: 0.75rem; }
.accent-text { color: var(--button-primary-start); }
/* 3.7 单选项行 */
.radio-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.radio-row label { display: inline-flex; align-items: center; gap: var(--sp-1); cursor: pointer; }
/* 3.8 分段区块：与上一块拉开固定距离（原 .mt-6 散落各处） */
.schedule-block { margin-top: var(--gap-page); }
.result-block { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
/* 3.9 对比页专用：卡片内间距与并排间距 */
.compare-grid { margin-bottom: var(--gap-page); }
.compare-submit { margin-bottom: var(--gap-page); }
/* ============================ 4. 组件 ============================ */
/* 4.0 图标系统
sprite 定义在 index.html 的 #icon-sprite，共用一个极简宿主样式：
fill 透明 + stroke 用 currentColor，因此图标颜色永远跟随所在控件的文字颜色，
深色主题无需额外规则。统一用 em 尺寸，跟着控件字号走。 */
#icon-sprite symbol {
fill: none;
stroke: currentColor;
/* 16px 渲染时约 1.2px、19px 时约 1.4px —— 按实际像素定的值。
原来 1.45 在 16px 下只有 ~0.97px，细到看不出轮廓（手机变实心块、太阳射线消失）。 */
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/*