/* ============================================================================
 * 财务页样式（追加式，不覆盖 style.css 的任何既有类）
 * ============================================================================
 * 只做三件事：
 *   1) 子页签 / 面板切换（.fin-pane）
 *   2) 表单与内联错误 / 警告态（复用 --r/--line/--red/--yellow 等既有 token）
 *   3) 手绘柱状图与净值折线（纯 CSS/SVG，不引图表库）
 * 命名一律 fin- 前缀，避免和主站既有类打架。
 * ========================================================================== */

/* ---------- 顶部条 + 子页签 ---------- */
.fin-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.fin-top-r { display: flex; align-items: center; gap: 8px; }
#finSub { flex-wrap: wrap; }
.fin-pane { display: none; }
.fin-pane.active { display: block; }

/* ---------- 面板内的通用小件 ---------- */
.fin-note { font-size: 11.5px; line-height: 1.7; color: var(--muted); margin: 6px 0 0; }
.fin-note b { color: var(--text); }
/* 批次 30：账号域价值表里的「说明」列。
 * 与数字列反着来 —— 数字右对齐好比较，说明列左对齐才好读。
 * 窄屏下允许换行而不是把表格撑破：这一列写的是整句话。 */
.fin-td-note { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.grid td.fin-td-note { max-width: 320px; }
.fin-err {
  border: 1px solid var(--red); border-left-width: 2px; border-radius: var(--r);
  background: rgba(255, 80, 80, .06); color: var(--red);
  padding: 8px 10px; font: 11.5px var(--mono); margin-bottom: 8px; word-break: break-all;
}
.fin-warn {
  border: 1px solid var(--yellow); border-left-width: 2px; border-radius: var(--r);
  background: rgba(250, 204, 21, .06); padding: 9px 11px; margin-bottom: 8px;
}
.fin-warn .fin-warn-h { font: 600 11.5px var(--mono); color: var(--yellow); margin-bottom: 4px; }
.fin-warn ul { margin: 0; padding-left: 16px; font-size: 11.5px; line-height: 1.7; }
.fin-warn.danger { border-color: var(--red); background: rgba(255, 80, 80, .06); }
.fin-warn.danger .fin-warn-h { color: var(--red); }
.fin-warn-info { border-color: var(--line2); background: var(--surface2); }
.fin-warn-info .fin-warn-h { color: var(--muted); }

/* 严重度胶囊 */
.fin-sev {
  display: inline-block; padding: 1px 8px; border-radius: var(--r-pill);
  font: 10.5px var(--mono); border: 1px solid currentColor;
}
.fin-sev.high { color: var(--red); }
.fin-sev.medium { color: var(--yellow); }
.fin-sev.low { color: var(--muted); }

/* ---------- 财务 KPI：数字后面跟着币种代码，字号要收一点 ---------- */
.fin-kpi .k-value { font-size: 20px; letter-spacing: -.5px; word-break: break-all; }

/* ---------- 健康分 ---------- */.fin-score { display: flex; align-items: baseline; gap: 10px; }
.fin-score .fin-score-n { font: 600 42px/1 var(--mono); letter-spacing: -2px; }
.fin-score .fin-score-g { font: 600 15px var(--mono); color: var(--muted); }
.fin-score .fin-score-t { font: 12px var(--mono); color: var(--muted); }
.fin-score.A .fin-score-n, .fin-score.A .fin-score-g { color: var(--green); }
.fin-score.B .fin-score-n, .fin-score.B .fin-score-g { color: var(--green); }
.fin-score.C .fin-score-n, .fin-score.C .fin-score-g { color: var(--yellow); }
.fin-score.D .fin-score-n, .fin-score.D .fin-score-g { color: var(--orange); }
.fin-score.E .fin-score-n, .fin-score.E .fin-score-g { color: var(--red); }

/* 组件条：复用 .bars/.bar-row，只调列宽 */
.fin-cmp .bar-row { grid-template-columns: 104px 1fr 44px; cursor: default; }
.fin-cmp .bar-row.skipped .bar-k { opacity: .55; }
.fin-cmp .bar-detail {
  grid-column: 1 / -1; font-size: 11px; color: var(--muted);
  line-height: 1.6; margin: -2px 0 2px 4px;
}
.fin-cmp .bar-fill.skipped { background: var(--line2) !important; }

/* ---------- 诊断卡片 ---------- */
.fin-issue {
  border: 1px solid var(--line); border-left: 2px solid var(--sev, var(--line2));
  border-radius: var(--r); background: var(--surface2);
  padding: 9px 11px; margin-bottom: 8px;
}
.fin-issue.high { --sev: var(--red); }
.fin-issue.medium { --sev: var(--yellow); }
.fin-issue.low { --sev: var(--line2); }
.fin-issue-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 12.5px var(--mono); margin-bottom: 5px; }
.fin-issue-r { font-size: 11.5px; line-height: 1.7; color: var(--muted); }
.fin-issue-r b { color: var(--text); font-weight: 600; }
.fin-issue-r .k { display: inline-block; min-width: 34px; color: var(--muted); font-family: var(--mono); }

/* ---------- 手绘图（柱状 / 折线） ---------- */
.fin-chart { width: 100%; height: auto; display: block; margin-top: 4px; }
.fin-chart .ax { stroke: var(--line); stroke-width: 1; }
.fin-chart .ln { fill: none; stroke: var(--green); stroke-width: 1.6; }
.fin-chart .lna { fill: url(#finGrad); opacity: .18; }
.fin-chart .pt { fill: var(--green); }
.fin-chart .tx { fill: var(--muted); font: 9px var(--mono); }
.fin-chart .tx2 { fill: var(--muted); font: 9.5px var(--mono); }
.fin-chart .bar { fill: var(--cyan); }
.fin-chart .bar.neg { fill: var(--red); }

/* ---------- 表格内小件 ---------- */
.fin-tbl .num, .fin-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.fin-tbl td.ops { white-space: nowrap; }
.fin-tbl td.ops .btn { padding: 2px 8px; font-size: 11px; line-height: 1.6; margin-right: 4px; }
.fin-tbl td.neg { color: var(--red); }
.fin-tbl td.pos { color: var(--green); }
.fin-tbl td.dim { color: var(--muted); }
.fin-code { font-family: var(--mono); color: var(--cyan); }
.fin-tag { display: inline-block; padding: 0 7px; border: 1px solid var(--line2); border-radius: var(--r-pill); font: 10.5px var(--mono); color: var(--muted); }
.fin-tag.liability { color: var(--red); border-color: var(--red); }
.fin-tag.asset { color: var(--green); border-color: var(--green); }
.fin-tag.on { color: var(--green); border-color: var(--green); }
.fin-tag.off { color: var(--muted); }

/* ---------- 表单 ---------- */
.fin-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px 12px; }
.fin-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fin-f > span { font: 10.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.fin-f input, .fin-f select, .fin-f textarea {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); font: 12px var(--mono); padding: 6px 8px; outline: none; min-width: 0; width: 100%;
  box-sizing: border-box;
}
.fin-f input:focus, .fin-f select:focus, .fin-f textarea:focus { border-color: var(--green); }
.fin-f input[type="checkbox"] { width: auto; }
.fin-f .fin-f-h { font-size: 10.5px; color: var(--muted); }
.fin-f.wide { grid-column: 1 / -1; }

/* ---------- 敏感字段（完整卡号 / 资金账号） ----------
   提示与字段同属一个 label 内，所以 em 要跟输入框并排而不是另起一行：
   grid 里它是 flex column 的第三个子元素，跟 span/input 一样是块级，
   换行会把这个网格单元撑高、别的单元跟着错位。 */
.fin-secret-hint {
  display: block; font: 10px var(--mono); font-style: normal;
  color: var(--green); opacity: .85; letter-spacing: .3px; margin-top: -1px;
}
/* 字段说明：比 secret 提示弱一级（它是「怎么做」不是「现在是什么状态」） */
.fin-field-hint {
  display: block; font: 10px var(--mono); font-style: normal;
  color: var(--muted); opacity: .75; margin-top: -1px;
}
/* secret 单元占满一行：完整卡号 + 它的两行提示挤在半格宽里没法看 */
.fin-f.secret { grid-column: 1 / -1; }
.fin-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.fin-actions .fin-spacer { flex: 1; }
.fin-sect { font: 600 11px var(--mono); color: var(--green); letter-spacing: .4px; margin: 14px 0 7px; }
.fin-sect:first-child { margin-top: 0; }

/* 筛选条：复用主站 .toolbar 的排布，但输入框更紧凑 */
.fin-filters { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 9px; }
.fin-filters input, .fin-filters select {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); font: 11.5px var(--mono); padding: 4px 7px; outline: none; max-width: 100%;
}
.fin-filters input:focus, .fin-filters select:focus { border-color: var(--green); }
.fin-filters .fin-lbl { font: 10.5px var(--mono); color: var(--muted); }

/* 表格空态 / 加载态 */
.fin-empty { padding: 16px 4px; text-align: center; color: var(--muted); font: 11.5px var(--mono); opacity: .8; }

/* 分页条 */
.fin-pager { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.fin-pager .fin-pg-t { font: 11px var(--mono); color: var(--muted); }

/* 目标进度条 */
.fin-goal { border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; margin-bottom: 8px; background: var(--surface2); }
.fin-goal-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 600 12px var(--mono); }
.fin-goal-h .fin-goal-p { color: var(--green); }
.fin-goal .bar-track { margin-top: 6px; }
.fin-goal .fin-note { margin-top: 5px; }

/* PWA 安装提示（顶部居中磨砂细条）
 * 位置为什么选顶部而不是底部：
 *  - 底部是移动端地址栏 / 手势条的地盘，横幅贴底既被系统UI 压着，
 *    又正好盖住页面底部的内容（表格末行、操作按钮）；
 *  - 顶部这条是「通知条」的语义位置，出现即读、不占内容区，
 *    几秒后看完就点关闭，注意力成本最低。
 * 观感靠三件事：极细的边框、低饱和的磨砂底、以及 icon 让它不像一条广告。 */
.pwa-install {
  position: fixed; left: 50%; top: 14px; z-index: 120;
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: min(92vw, 460px);
  padding: 8px 8px 8px 12px;
  background: rgba(17, 23, 31, .82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(52, 211, 153, .22);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  /* 初始态：靠 opacity + 轻微上移隐藏，配transition 做淡入 */
  opacity: 0; transform: translate(-50%, -12px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
}
.pwa-install.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* 新版本提示条（SW 通知后出现）
 * 与顶部安装条同一套视觉语言（磨砂 + 圆角药丸），但用蓝色描边区分语义：
 * 安装条是「邀请」，这条是「告知」，两者不该长得一样。 */
.sw-update {
  position: fixed; left: 50%; top: 14px; z-index: var(--z-modal);
  display: flex; align-items: center; gap: 10px; width: max-content;
  padding: 7px 8px 7px 14px;
  background: rgba(17, 23, 31, .85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(96, 165, 250, .3);
  border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  font-size: 12px; color: var(--text);
  animation: swUpdateIn .28s cubic-bezier(.2, .8, .2, 1);
}
@keyframes swUpdateIn {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.sw-update-btn {
  background: rgba(96, 165, 250, .16); color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, .35); border-radius: 999px;
  padding: 4px 12px; font-size: 11.5px; cursor: pointer; font-family: inherit;
}
.sw-update-btn:hover { background: rgba(96, 165, 250, .26); }
@media (prefers-reduced-motion: reduce) {
  .sw-update { animation: none; }
}

/* 内联编辑单元格（双击可改）
 * 设计要点：平时**看不出**它是可点的（避免整张表像布满按钮），
 * 只在悬停时给一个极轻的底色 + 虚线下划��提示；进入编辑后输入框铺满整格。
 * 这是表格类界面内联编辑的标准做法——可发现性靠 hover，不靠常驻装饰。 */
.fin-edit { position: relative; cursor: text; }
.fin-edit:hover { background: rgba(52, 211, 153, .05); }
.fin-edit:hover::after {
  content: '✎'; position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--muted); opacity: .65; pointer-events: none;
}
.fin-edit:hover .fin-edit-v { border-bottom: 1px dashed rgba(52, 211, 153, .45); }
.fin-edit-v { display: block; min-height: 16px; }
.fin-inline {
  width: 100%; min-width: 60px; box-sizing: border-box;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--green); border-radius: 4px;
  padding: 2px 5px; font: inherit; font-size: 12px; outline: none;
}
.fin-inline:focus { box-shadow: 0 0 0 2px rgba(52, 211, 153, .22); }

@media (prefers-reduced-motion: reduce) {
  .pwa-install { transition: none; }
}
/* 图标：终端风格的 ">_"，与应用图标同一视觉语言 */
.pwa-ic {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(52, 211, 153, .12);
  color: var(--green); font: 600 11px var(--mono);
}
.pwa-install-tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pwa-install-tx b { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.pwa-install-tx span {
  font-size: 10.5px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.pwa-btn { flex: 0 0 auto; padding: 5px 14px; font-size: 12px; border-radius: 999px; }
.pwa-x {
  flex: 0 0 auto; background: none; border: none; color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0 6px;
  border-radius: 50%; align-self: center;
}
.pwa-x:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
/* 窄屏：文案只留主标题，避免细条被撑成两行 */
@media (max-width: 420px) {
  .pwa-install-tx span { display: none; }
  .pwa-install { padding: 7px 7px 7px 10px; }
}