/* ==========================================================================
   Debt Payoff Planner — site.css (v3 = visual v2)
   "Midnight Finance Command Deck": dark navy hero + dark results dashboard
   + violet→cyan neon brand gradient + three-strategy color coding
   (snowball sky-blue / avalanche molten-orange / hybrid violet, each with
   a shape glyph ●/▲/◆ so color is never the only signal).
   Per visual-redesign-v2.md (2026-10-18). The ONLY stylesheet for the site.
   Mobile-first, system font stacks only, all classes prefixed `dpp-`.
   Budgets: 360px no horizontal scroll · tap targets >= 48px ·
   text contrast >= 4.5:1 · visible focus · prefers-reduced-motion.
   Zero external fonts / zero external resources (no url(), no @import).
   v1 variables are kept below for compatibility/rollback; v2 tokens drive
   every component. Contrast figures were measured per the spec (WCAG 2.1).
   ========================================================================== */

:root {
  /* ---- v1 文字 (kept for compatibility) ---- */
  --dpp-ink: #101828;
  --dpp-body: #475467;
  --dpp-muted: #667085;
  --dpp-faint: #98a2b3;

  /* ---- v1 品牌 (kept for compatibility) ---- */
  --dpp-brand: #0b4ea2;
  --dpp-brand-strong: #083a7a;
  --dpp-brand-dark: #083a7a;
  --dpp-brand-deep: #06305f;
  --dpp-brand-soft: #eaf1fc;
  --dpp-brand-ghost: #f2f6fd;

  /* ---- v1 表面 / 边框 (kept for compatibility) ---- */
  --dpp-page: #f6f8fb;
  --dpp-card: #ffffff;
  --dpp-surface: #f2f6fb;
  --dpp-border: #e2e8f2;
  --dpp-border-strong: #c9d3e2;

  /* ---- v1 语义色 (kept for compatibility) ---- */
  --dpp-ok: #067647;
  --dpp-ok-bg: #ecfdf3;
  --dpp-ok-border: #a6f4c5;
  --dpp-warn: #b42318;
  --dpp-warn-bg: #fef3f2;
  --dpp-warn-border: #fecdca;
  --dpp-info: #0b4ea2;

  /* ---- v1 聚焦 (kept for compatibility) ---- */
  --dpp-focus: #2e90fa;
  --dpp-focus-ring: rgba(46, 144, 250, .35);

  /* ---- v1 圆角 (kept) ---- */
  --dpp-radius: .75rem;
  --dpp-radius-sm: .5rem;
  --dpp-radius-md: .75rem;
  --dpp-radius-lg: 1rem;
  --dpp-radius-xl: 1.25rem;
  --dpp-radius-pill: 999px;

  /* ---- v1 阴影 (kept) ---- */
  --dpp-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --dpp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06),
                   0 1px 3px rgba(16, 24, 40, .05);
  --dpp-shadow-md: 0 2px 4px rgba(16, 24, 40, .05),
                   0 8px 24px rgba(16, 24, 40, .08);
  --dpp-shadow-lg: 0 4px 8px rgba(16, 24, 40, .05),
                   0 16px 40px rgba(16, 24, 40, .12);
  --dpp-shadow-hero: 0 2px 6px rgba(11, 78, 162, .06),
                     0 24px 64px rgba(11, 78, 162, .14);

  /* ---- v1 字体 (kept) ---- */
  --dpp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
              Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --dpp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ================= v2 tokens (visual-redesign-v2.md §2.6, verbatim) ================= */
  --v2-brand:#5B21B6; --v2-brand-700:#4C1D95;
  --v2-brand-grad:linear-gradient(135deg,#6D28D9,#5B21B6);
  --v2-neon-grad:linear-gradient(90deg,#7C3AED,#22D3EE);
  --v2-brand-tint:#EFE9FB;
  --v2-night:#0A1128; --v2-night-2:#101B33; --v2-night-3:#16233F;
  --v2-dtext:#F4F7FC; --v2-dtext-2:#B7C2D8; --v2-dmuted:#93A0B8;
  --v2-dhair:rgba(255,255,255,.12);
  --v2-page:#F3F5FA; --v2-card:#FFFFFF;
  --v2-ink:#101B2E; --v2-body:#3D4B63; --v2-muted:#5B6B85;
  --v2-border:#DDE3F0; --v2-input-bd:#B9C4DA;
  --v2-sb:#2B8FD9; --v2-sb-tx:#0E63B6; --v2-sb-dtx:#7FB5F2;
  --v2-av:#E2701D; --v2-av-tx:#B5430A; --v2-av-dtx:#F6A94C;
  --v2-hy:#8B5CF6; --v2-hy-tx:#6D28D9; --v2-hy-dtx:#C4A8FF;
  --v2-base:#64748B; --v2-base-tx:#475569; --v2-base-dtx:#A9B6CC;
  --v2-ok:#0E7A3D; --v2-ok-d:#5FD08A;
  --v2-err:#C81E1E; --v2-err-d:#FF9B9B;
  --v2-warn:#8A5A00; --v2-warn-d:#F2C14E;
  --v2-focus-d:#A78BFA;

  /* strategy selected-tints (light) */
  --v2-sb-tint:#E7F3FC; --v2-av-tint:#FDF0E4; --v2-hy-tint:#EFE9FB;

  /* ================= v2 font stacks (spec §3, system only) ================= */
  --v2-font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
                     "Segoe UI", system-ui, sans-serif;
  --v2-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --v2-font-num: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
                 "Liberation Mono", monospace;
}

/* ---------- base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--v2-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--v2-ink);
  background: var(--v2-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* type scale (spec §3) */
h1, h2, h3 {
  font-family: var(--v2-font-display);
  color: var(--v2-ink);
  text-wrap: balance;
}
h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
h2 { font-size: 1.625rem; font-weight: 750; line-height: 1.2; letter-spacing: -0.015em; margin: 2.5rem 0 .875rem; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 1.5rem 0 .625rem; }

p { margin: 0 0 1rem; color: var(--v2-body); }

a { color: var(--v2-brand); text-decoration: underline; text-underline-offset: 2px; } /* 8.98:1 on white */
a:hover { color: var(--v2-brand-700); }

/* 正文链接去下划线化（导航/按钮/页脚除外）：hover 才显示下划线 */
.dpp-method a, .dpp-example a, .dpp-faq a, .dpp-related a {
  text-decoration: none;
  font-weight: 600;
}
.dpp-method a:hover, .dpp-example a:hover,
.dpp-faq a:hover, .dpp-related a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 眉题 */
.dpp-eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v2-brand-700);
  margin-bottom: .5rem;
}

/* 数字统一等宽 */
.dpp-num, .dpp-card__value, .dpp-table td:last-child,
dd, output {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* 渐变关键词（h1 内 span；文案不动，纯视觉）。
   深色 hero 用霓虹渐变；浅色页 h1 用品牌紫渐变（霓虹青在浅底对比不足）。
   @supports 回退纯色。 */
.dpp-grad-text {
  background: var(--v2-neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
main > .dpp-wrap > h1 .dpp-grad-text {
  background-image: var(--v2-brand-grad); /* 两端白底 ≥7:1 */
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .dpp-grad-text { background: none; color: var(--v2-dtext); -webkit-text-fill-color: var(--v2-dtext); }
  main > .dpp-wrap > h1 .dpp-grad-text { color: var(--v2-brand-700); -webkit-text-fill-color: var(--v2-brand-700); }
}

:focus-visible {
  outline: 2px solid var(--v2-brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(91, 33, 182, .22);
  border-radius: 2px;
}
/* 深色区：浅色焦点环 */
.dpp-header :focus-visible,
.dpp-hero :focus-visible,
.dpp-footer :focus-visible,
#dpp-results:is(.dpp-results--dash, :has(> *)) :focus-visible {
  outline-color: var(--v2-focus-d);
  box-shadow: 0 0 0 4px rgba(167, 139, 250, .4);
}

.dpp-wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

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

.dpp-skip-link,
#dpp-skip-link {
  position: absolute; left: .5rem; top: -4rem;
  background: var(--v2-brand); color: #fff;
  padding: .75rem 1rem; border-radius: .5rem; z-index: 100;
  transition: top .15s ease;
}
.dpp-skip-link:focus,
#dpp-skip-link:focus { top: .5rem; color: #fff; }

.dpp-print-only { display: none; }

[hidden] { display: none !important; }

/* ---------- static skeletons (page builders paste plain elements) -----
   These :where() rules carry zero specificity, so component classes
   always win where both apply. */

:where(.dpp-tool) input[type="text"],
:where(.dpp-tool) input[type="number"],
:where(.dpp-tool) input[type="month"],
:where(.dpp-tool) select,
.dpp-input {
  width: 100%;
  min-height: 52px;
  padding: .75rem .875rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--v2-ink);
  background: #fff;
  border: 1.5px solid var(--v2-input-bd);
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* 金额类输入：终端感等宽字 */
:where(.dpp-tool) input[type="number"] {
  font-family: var(--v2-font-num);
  font-size: 1.0625rem;
}
:where(.dpp-tool) input:hover, .dpp-input:hover { border-color: #8fa1c0; }
:where(.dpp-tool) input:focus, .dpp-input:focus {
  border-color: var(--v2-brand);
  box-shadow: 0 0 0 4px rgba(91, 33, 182, .14);
  outline: none;
}
:where(.dpp-tool) input:disabled, .dpp-input:disabled { background: var(--v2-page); color: var(--v2-muted); }
.dpp-input[aria-invalid="true"] { border-color: var(--v2-err); }
:where(.dpp-tool) input[type="radio"],
:where(.dpp-tool) input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  accent-color: var(--v2-brand);
  margin: 0;
}
:where(.dpp-tool) fieldset, .dpp-fieldset {
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  padding: 1rem 1rem 1.125rem;
  margin: 0 0 1rem;
  background: #fbfcfe;
}
/* 分区标题条：display 字体 + 左侧品牌渐变竖条（不再是灰色小字图例） */
:where(.dpp-tool) legend {
  font-family: var(--v2-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--v2-ink);
  padding: 0 .625rem 0 .75rem;
  position: relative;
}
:where(.dpp-tool) legend::before {
  content: "";
  position: absolute;
  left: 0; top: .15em; bottom: .15em;
  width: 4px;
  border-radius: 2px;
  background: var(--v2-brand-grad);
}
:where(.dpp-tool) label, .dpp-field > label, .dpp-legend {
  display: block;
  font-weight: 700;
  font-size: .8125rem;
  margin-bottom: .375rem;
  color: var(--v2-ink);
}
:where(.dpp-tool) label > input[type="text"],
:where(.dpp-tool) label > input[type="number"],
:where(.dpp-tool) label > input[type="month"] { margin-top: .375rem; }
:where(.dpp-tool) label:has(> input[type="radio"]),
:where(.dpp-tool) label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 48px;
  font-weight: 400;
  font-size: .9375rem;
  color: var(--v2-body);
  cursor: pointer;
}
/* 旧骨架按钮统一收口：次按钮样式（品牌边框、10px 圆角、hover 淡紫底） */
:where(.dpp-tool) button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .01em;
  border-radius: 10px;
  border: 1.5px solid var(--v2-brand);
  background: #fff;
  color: var(--v2-brand-700);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.25;
  margin: 0 .5rem .5rem 0;
  box-shadow: var(--dpp-shadow-xs);
  transition: background .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .1s ease;
}
:where(.dpp-tool) button:hover { background: var(--v2-brand-tint); }
:where(.dpp-tool) button:active { background: var(--v2-brand-tint); transform: translateY(1px); }
:where(.dpp-tool) button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
/* 文本按钮（危险操作：删除债务行 / Reset） */
:where(.dpp-tool) button[data-dpp-remove-debt],
:where(.dpp-tool) button[data-dpp-remove-lump],
:where(.dpp-tool) button[data-dpp-reset],
:where(.dpp-tool) button[data-dpp-dti-remove] {
  background: transparent;
  border-color: transparent;
  color: var(--v2-err);
  font-weight: 600;
  padding: .75rem;
  box-shadow: none;
}
:where(.dpp-tool) button[data-dpp-remove-debt]:hover,
:where(.dpp-tool) button[data-dpp-remove-lump]:hover,
:where(.dpp-tool) button[data-dpp-reset]:hover,
:where(.dpp-tool) button[data-dpp-dti-remove]:hover {
  background: rgba(200, 30, 30, .08);
}
:where(.dpp-tool) details {
  border: 1px dashed var(--v2-border);
  border-radius: 10px;
  padding: .75rem .875rem;
  margin: 0 0 1.25rem;
  background: #fff;
}
:where(.dpp-tool) summary {
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  display: flex;
  align-items: center;
  color: var(--v2-ink);
}

/* fund validation message target */
#dpp-fund-error:not(:empty) {
  border: 1px solid var(--v2-err);
  background: #FDECEC;
  color: #8f1d1d;                       /* 深红小字 ≥4.5:1 */
  border-radius: 10px;
  padding: .75rem .875rem;
  margin: .75rem 0;
  font-size: .9375rem;
}

/* debt rows: 机架设备式卡片 —— 顶部 3px 霓虹光条 */
.dpp-debt-row {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--v2-border);
  border-radius: 14px;
  box-shadow: var(--dpp-shadow-xs);
  padding: 1rem;
  padding-top: calc(1rem + 3px);
  margin: 0 0 .875rem;
  transition: border-color .15s ease;
}
.dpp-debt-row::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--v2-neon-grad);
}
.dpp-debt-row:hover { border-color: var(--v2-brand); }
.dpp-debt-row > label { margin-bottom: .625rem; }
.dpp-debt-row > label:last-of-type { margin-bottom: .25rem; }

/* ---------- header：深色通栏，与 hero 连为一体 ---------- */

.dpp-header {
  background: var(--v2-night);
  border-bottom: 1px solid var(--v2-dhair);
  box-shadow: none;
}

.dpp-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.dpp-brand {
  font-family: var(--v2-font-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--v2-dtext);
  text-decoration: none;
  margin-right: auto;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}
/* logo：霓虹渐变方块 + 白色 "$" */
.dpp-brand::before {
  content: "$";
  flex: 0 0 auto;
  width: 24px; height: 24px;
  margin-right: .5rem;
  background: var(--v2-neon-grad);
  border-radius: 7px;
  color: #fff;
  font-size: .875rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 12px rgba(124, 58, 237, .5);
}
.dpp-brand:hover { color: #fff; }

.dpp-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .125rem .25rem;
}

.dpp-nav a,
.dpp-more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .5rem .75rem;
  border-radius: var(--dpp-radius-sm);
  color: var(--v2-dtext-2);               /* 10.43:1 ✅ */
  text-decoration: none;
  font-weight: 600;
  font-size: .9375rem;
  cursor: pointer;
  list-style: none;
}
.dpp-nav a:hover,
.dpp-more > summary:hover { background: rgba(255, 255, 255, .08); color: var(--v2-dtext); }
.dpp-nav a[aria-current="page"] {
  background: var(--v2-brand-grad);
  color: #fff;                           /* 两端 ≥7:1 ✅ */
  border-radius: 999px;
}
.dpp-more > summary::-webkit-details-marker { display: none; }

.dpp-more { position: relative; }
.dpp-more__menu {
  position: absolute;
  right: 0;
  top: calc(100% + .25rem);
  min-width: 15rem;
  background: var(--v2-night-2);
  border: 1px solid var(--v2-dhair);
  border-radius: var(--dpp-radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
  padding: .375rem;
  z-index: 50;
}
.dpp-more__menu a { display: flex; width: 100%; }

/* ---------- breadcrumb ---------- */

.dpp-breadcrumb { font-size: .875rem; margin: .75rem 0 0; }
.dpp-breadcrumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .25rem .5rem;
}
.dpp-breadcrumb li { color: var(--v2-muted); display: inline-flex; align-items: center; gap: .5rem; }
.dpp-breadcrumb li + li::before { content: "\203A"; color: var(--v2-muted); }
.dpp-breadcrumb a { font-weight: 600; }

/* ---------- hero：午夜深色横幅 ---------- */

.dpp-hero {
  position: relative;
  overflow: hidden;
  background: var(--v2-night);
  border-bottom: 0;
  padding: 3rem 0 5.5rem;                /* 底部留白给工具卡上压 */
  margin-bottom: 0;
}
/* ::before = 光晕层 + 点阵层（二合一，纯装饰） */
.dpp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38rem 20rem at 12% -4rem, rgba(124, 58, 237, .38), transparent 60%),
    radial-gradient(30rem 18rem at 88% 108%, rgba(34, 211, 238, .16), transparent 60%),
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px);
  background-size: auto, auto, 22px 22px;
  background-position: 0 0, 0 0, 0 0;
}
/* ::after = 底部 3px 霓虹光条（v1 卡片顶蓝条移到 hero 底） */
.dpp-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--v2-neon-grad);
}
/* 卫星页用瘦版（当前 HTML 未挂载，供后续启用） */
.dpp-hero--slim { padding: 1.75rem 0 4rem; }
.dpp-hero .dpp-wrap { position: relative; z-index: 1; }

.dpp-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--v2-dtext);
  max-width: 40rem;
}
/* hero 内 eyebrow = 胶囊徽章，前缀 ◆ */
.dpp-hero .dpp-eyebrow {
  display: inline-block;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: .375rem .875rem;
  color: var(--v2-dtext);
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.dpp-hero .dpp-eyebrow::before {
  content: "◆ ";
  color: #22D3EE;                        /* 装饰符号，不承载文字 */
}
.dpp-lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--v2-dtext-2);               /* 10.43:1 ✅ */
  max-width: 38rem;
  margin: 0 0 1.75rem;
}
/* trust chips：深色底高对比徽章 */
.dpp-hero__trust {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 0; padding: 0;
  font-size: .8125rem; font-weight: 600;
}
.dpp-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: .375rem .875rem;
  min-height: 32px;
  color: var(--v2-dtext-2);
}
.dpp-hero__trust li::before {
  content: "✓";
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  color: var(--v2-ok-d);                  /* 9.68:1 ✅ */
  font-weight: 800;
}

/* ---------- tool card ---------- */

.dpp-tool {
  background: var(--v2-card);
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: var(--dpp-radius-xl);
  box-shadow: 0 24px 64px rgba(10, 17, 40, .18);
  padding: 1.25rem;
  margin: 1rem 1rem 2rem;
  scroll-margin-top: 1rem;
}
@media (max-width: 639px) {
  .dpp-tool { border-radius: var(--dpp-radius-lg); }
}

/* 首页 hero 主卡：压住 hero 下缘 —— "仪表盘浮出暗夜" */
.dpp-tool--hero {
  position: relative;
  z-index: 2;
  margin-top: -3.5rem;
  margin-bottom: 3rem;
  box-shadow: 0 32px 80px rgba(10, 17, 40, .35),
              0 4px 16px rgba(10, 17, 40, .2);
}
.dpp-tool--hero > :first-child { margin-top: .5rem; }

.dpp-field { margin: 0 0 1rem; }

.dpp-hint { font-size: .8125rem; color: var(--v2-muted); margin: .375rem 0 0; } /* 5.40:1 ✅ */

.dpp-check,
.dpp-radio {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 48px;
  font-size: .9375rem;
  cursor: pointer;
  color: var(--v2-body);
}
.dpp-check input,
.dpp-radio input {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  accent-color: var(--v2-brand);
  margin: 0;
}

/* ---------- 策略选项卡片：三策略颜色编码 + 形状符号 ----------
   静态 fieldset（.dpp-option-card）与 site.js 动态生成的策略单选
   （结构选择器）同一套观感，纯 CSS :has()，零 JS。 */
.dpp-option-card,
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"]) {
  position: relative;
  display: flex; align-items: flex-start; gap: .75rem;
  border: 1px solid var(--v2-input-bd);
  border-left-width: 4px;
  border-radius: 12px;
  padding: .875rem 1rem;
  padding-right: 2.5rem;                  /* 给右上角形状符号让位 */
  cursor: pointer;
  background: #fff;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  min-height: 48px;
}
/* 每张卡左侧 4px 策略色签 */
.dpp-option-card:has(input[value="snowball"]),
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"][value="snowball"]) { border-left-color: var(--v2-sb); }
.dpp-option-card:has(input[value="avalanche"]),
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"][value="avalanche"]) { border-left-color: var(--v2-av); }
.dpp-option-card:has(input[value="hybrid"]),
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"][value="hybrid"]) { border-left-color: var(--v2-hy); }
/* 形状符号：卡片右上角（●/▲/◆，色盲双重编码） */
.dpp-option-card:has(input[value="snowball"])::after,
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"][value="snowball"])::after {
  content: "●"; color: var(--v2-sb-tx);
}
.dpp-option-card:has(input[value="avalanche"])::after,
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"][value="avalanche"])::after {
  content: "▲"; color: var(--v2-av-tx);
}
.dpp-option-card:has(input[value="hybrid"])::after,
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"][value="hybrid"])::after {
  content: "◆"; color: var(--v2-hy-tx);
}
.dpp-option-card::after,
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"])::after {
  position: absolute;
  top: .625rem; right: .875rem;
  font-size: 1rem;
  line-height: 1;
}
/* radio 按策略走 accent-color */
.dpp-option-card:has(input[value="snowball"]) input,
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"][value="snowball"]) input { accent-color: var(--v2-sb); }
.dpp-option-card:has(input[value="avalanche"]) input,
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"][value="avalanche"]) input { accent-color: var(--v2-av); }
.dpp-option-card:has(input[value="hybrid"]) input,
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"][value="hybrid"]) input { accent-color: var(--v2-hy); }
/* hover 只提亮边框 */
.dpp-option-card:hover,
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"]):hover { border-color: var(--v2-brand); }
/* 选中态：2px 策略色边框 + 策略 tint 底 */
.dpp-option-card:has(input:checked),
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"]:checked) {
  border-width: 2px;
  padding: calc(.875rem - 1px) calc(1rem - 1px);
  padding-right: calc(2.5rem - 1px);
  box-shadow: none;
}
.dpp-option-card:has(input[value="snowball"]:checked),
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"][value="snowball"]:checked) {
  border-color: var(--v2-sb); background: var(--v2-sb-tint);
}
.dpp-option-card:has(input[value="avalanche"]:checked),
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"][value="avalanche"]:checked) {
  border-color: var(--v2-av); background: var(--v2-av-tint);
}
.dpp-option-card:has(input[value="hybrid"]:checked),
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"][value="hybrid"]:checked) {
  border-color: var(--v2-hy); background: var(--v2-hy-tint);
}
.dpp-option-card input,
.dpp-tool fieldset > label:has(> input[name="dpp-strategy"]) input {
  width: 1.25rem; height: 1.25rem; margin-top: .125rem;
  flex: 0 0 auto;
}
.dpp-option-card__text { display: block; min-width: 0; }
.dpp-option-card strong { display: block; font-size: .9375rem; color: var(--v2-ink); }
.dpp-option-card small { display: block; color: var(--v2-muted); font-size: .8125rem; margin-top: .125rem; }

/* K 输入框：hybrid 参数隐喻 —— 底部 3px hybrid 色下划线
   （静态页 name="k"；JS 动态生成的是 #dpp-k） */
:where(.dpp-tool) input[name="k"],
:where(.dpp-tool) #dpp-k {
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04),
              inset 0 -3px 0 var(--v2-hy);
}
:where(.dpp-tool) input[name="k"]:focus,
:where(.dpp-tool) #dpp-k:focus {
  border-color: var(--v2-brand);
  box-shadow: 0 0 0 4px rgba(91, 33, 182, .14),
              inset 0 -3px 0 var(--v2-hy);
  outline: none;
}

/* ---------- debt editor ---------- */

.dpp-debt-list { display: grid; gap: .875rem; margin-bottom: .875rem; }

.dpp-debt-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .625rem;
}
.dpp-debt-row__title { font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: var(--v2-body); text-transform: uppercase; }

.dpp-debt-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr;
}
.dpp-debt-grid .dpp-field { margin: 0; }

/* ---------- buttons ---------- */

.dpp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: 10px;
  border: 1px solid transparent;
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.25;
  transition: background .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .1s ease;
}

/* 主按钮：紫罗兰渐变 + 霓虹投影 */
.dpp-btn--primary {
  background: var(--v2-brand-grad);
  color: #fff;                            /* 两端白字 ≥7:1 ✅ */
  box-shadow: 0 1px 2px rgba(91, 33, 182, .4),
              0 8px 24px rgba(91, 33, 182, .28);
}
.dpp-btn--primary:hover {
  background: linear-gradient(135deg, #7C3AED, #5B21B6);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(91, 33, 182, .4),
              0 12px 32px rgba(91, 33, 182, .36);
}
.dpp-btn--primary:active {
  background: var(--v2-brand-700);
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

/* 次按钮 */
.dpp-btn--secondary {
  background: #fff;
  color: var(--v2-brand-700);              /* 10.95:1 ✅ */
  border-color: var(--v2-brand);
  border-width: 1.5px;
  box-shadow: var(--dpp-shadow-xs);
}
.dpp-btn--secondary:hover {
  background: var(--v2-brand-tint);
  color: var(--v2-brand-700);
}
.dpp-btn--secondary:active { background: var(--v2-brand-tint); transform: translateY(1px); }

/* 文本按钮（危险操作） */
.dpp-btn--text {
  background: transparent;
  color: var(--v2-err);                    /* 5.74:1 ✅ */
  border-color: transparent;
  padding: .75rem .75rem;
  min-height: 48px;
  font-weight: 600;
  box-shadow: none;
}
.dpp-btn--text:hover { background: rgba(200, 30, 30, .08); text-decoration: none; }

/* 禁用 */
.dpp-btn:disabled, .dpp-btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none;
}

.dpp-add-debt { margin-bottom: 1.25rem; }

.dpp-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--v2-border);
}
.dpp-privacy-note { font-size: .8125rem; color: var(--v2-muted); margin: .5rem 0 0; flex-basis: 100%; }
.dpp-share-fallback { margin-top: .625rem; flex-basis: 100%; }

/* ---------- what-if ---------- */

.dpp-whatif {
  border: 1px dashed var(--v2-border);
  border-radius: 10px;
  padding: .75rem .875rem;
  margin: 0 0 1.25rem;
  background: #fff;
}
.dpp-whatif > summary {
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  display: flex;
  align-items: center;
  color: var(--v2-ink);
}
.dpp-extra-row,
.dpp-lump-row {
  display: grid;
  gap: .5rem;
  grid-template-columns: 1fr;
  align-items: end;
  padding: .625rem 0;
  border-top: 1px solid var(--v2-border);
}
.dpp-extra-row .dpp-field,
.dpp-lump-row .dpp-field { margin: 0; }

/* ==========================================================================
   结果区 = 深色 Dashboard
   主选择器：JS 在渲染时加的 .dpp-results--dash（旧浏览器回退）；
   :has(> *) 为增强。两者行为一致。
   ========================================================================== */

#dpp-results:is(.dpp-results--dash, :has(> *)) {
  background:
    radial-gradient(40rem 18rem at 20% 0%, rgba(124, 58, 237, .16), transparent 60%),
    linear-gradient(180deg, #0D1730, #0A1128);
  border: 1px solid rgba(139, 92, 246, .28);
  border-radius: 20px;
  padding: clamp(1rem, 3vw, 2rem);
  margin-top: 1.5rem;
  color: var(--v2-dtext);
  box-shadow: 0 24px 64px rgba(10, 17, 40, .45);
}
#dpp-results:is(.dpp-results--dash, :has(> *)) h3 { color: var(--v2-dtext); }
#dpp-results:is(.dpp-results--dash, :has(> *)) p { color: var(--v2-dtext-2); }

/* KPI 卡片行 */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-summary {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 1rem;
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-card {
  position: relative;
  overflow: hidden;
  background: var(--v2-night-2);
  border: 1px solid var(--v2-dhair);
  border-radius: 14px;
  box-shadow: none;
  padding: 1rem 1.125rem;
  padding-top: calc(1rem + 3px);
}
/* 每张卡顶部 3px 策略色横条（data-dpp-plan 由 site.js 白名单增补写入） */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-summary[data-dpp-plan] .dpp-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-summary[data-dpp-plan="snowball"] .dpp-card::before { background: var(--v2-sb); }
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-summary[data-dpp-plan="avalanche"] .dpp-card::before { background: var(--v2-av); }
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-summary[data-dpp-plan="hybrid"] .dpp-card::before { background: var(--v2-hy); }
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-summary[data-dpp-plan="baseline"] .dpp-card::before { background: var(--v2-base); }
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-card__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--v2-dmuted);                  /* 7.08:1 ✅ */
  margin-bottom: .375rem;
}
/* phosphor 微光 KPI 数字 */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-card__value {
  font-family: var(--v2-font-num);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--v2-dtext);
  text-shadow: 0 0 24px rgba(139, 92, 246, .35);
  overflow-wrap: anywhere;
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-card__sub {
  font-size: .8125rem;
  color: var(--v2-dmuted);
  margin-top: .25rem;
}
/* 主 KPI（第一张：debt-free date）—— 暗紫底 + 霓虹渐变字 */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-summary > .dpp-card:first-child {
  background: #1B1440;
  border-color: rgba(139, 92, 246, .45);
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-summary > .dpp-card:first-child .dpp-card__value {
  background: var(--v2-neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  #dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-summary > .dpp-card:first-child .dpp-card__value {
    background: none; color: var(--v2-dtext); -webkit-text-fill-color: var(--v2-dtext);
  }
}

/* 策略对比条形图（phase 2 占位样式；JS 写入 .dpp-bar__fill 的 width） */
.dpp-bars { display: grid; gap: .625rem; margin: 0 0 1.25rem; }
.dpp-bar { display: grid; grid-template-columns: 7rem 1fr 5.5rem; align-items: center; gap: .75rem; }
.dpp-bar__label { font-size: .8125rem; font-weight: 700; color: var(--v2-dtext-2); white-space: nowrap; }
.dpp-bar__track { display: block; height: .625rem; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.dpp-bar__fill { display: block; height: 100%; border-radius: 999px; }
.dpp-bar[data-dpp-plan="snowball"] .dpp-bar__fill { background: linear-gradient(90deg, #2B8FD9, #7FB5F2); }
.dpp-bar[data-dpp-plan="avalanche"] .dpp-bar__fill { background: linear-gradient(90deg, #E2701D, #F6A94C); }
.dpp-bar[data-dpp-plan="hybrid"] .dpp-bar__fill { background: linear-gradient(90deg, #8B5CF6, #C4A8FF); }
.dpp-bar[data-dpp-plan="baseline"] .dpp-bar__fill { background: linear-gradient(90deg, #64748B, #A9B6CC); }
.dpp-bar__val { font-family: var(--v2-font-num); font-size: .875rem; font-weight: 600; color: var(--v2-dtext); text-align: right; }

/* Savings 行：暗色"奖杯面板" */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-savings-line {
  background: rgba(95, 208, 138, .10);
  border: 1px solid rgba(95, 208, 138, .35);
  border-left: 4px solid var(--v2-ok-d);
  border-radius: 10px;
  padding: .875rem 1rem;
  font-size: .9375rem;
  color: var(--v2-dtext);
  margin: 0 0 1rem;
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-savings-line strong {
  color: var(--v2-ok-d);                    /* 9.68:1 ✅ */
  font-family: var(--v2-font-num);
  font-size: 1.25rem;
}

/* 通知条（仪表盘内自动套暗色变体） */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-notice {
  border-radius: 10px;
  padding: .75rem .875rem;
  margin: 0 0 1rem;
  font-size: .9375rem;
  border: 1px solid var(--v2-dhair);
  background: var(--v2-night-2);
  color: var(--v2-dtext-2);
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-notice--warn {
  background: rgba(242, 193, 78, .10);
  border-color: rgba(242, 193, 78, .35);
  border-left: 4px solid var(--v2-warn-d);
  color: var(--v2-warn-d);                  /* 11.14:1 ✅ */
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-notice--info {
  background: rgba(139, 92, 246, .12);
  border-color: rgba(139, 92, 246, .35);
  border-left: 4px solid var(--v2-focus-d);
  color: #C4A8FF;
}

/* 对比注释（仪表盘内） */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-compare-note {
  font-size: .9375rem;
  color: var(--v2-dtext-2);
  background: rgba(139, 92, 246, .10);
  border: 1px solid rgba(139, 92, 246, .25);
  border-radius: 10px;
  padding: .75rem .875rem;
  margin: 0 0 1rem;
}

/* 还款顺序时间线：纵向连接线 + 策略色形状符号 */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-payoff-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-payoff-list li {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .875rem 0 .875rem 1.75rem;
  border-bottom: 1px solid var(--v2-dhair);
  font-size: .9375rem;
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-payoff-list li:last-child { border-bottom: 0; }
/* 纵向 2px 连接线 */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-payoff-list li::before {
  content: "";
  position: absolute;
  left: .4375rem;
  top: 1.75rem;
  bottom: -.25rem;
  width: 2px;
  background: var(--v2-dhair);
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-payoff-list li:last-child::before { display: none; }
/* 策略色形状符号（●/▲/◆/■，按根节点 data-dpp-plan） */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-payoff-list li::after {
  content: "●";
  position: absolute;
  left: 0;
  top: .8125rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--v2-base-dtx);
}
#dpp-results[data-dpp-plan="snowball"]:is(.dpp-results--dash, :has(> *)) .dpp-payoff-list li::after {
  content: "●"; color: var(--v2-sb-dtx);
}
#dpp-results[data-dpp-plan="avalanche"]:is(.dpp-results--dash, :has(> *)) .dpp-payoff-list li::after {
  content: "▲"; color: var(--v2-av-dtx);
}
#dpp-results[data-dpp-plan="hybrid"]:is(.dpp-results--dash, :has(> *)) .dpp-payoff-list li::after {
  content: "◆"; color: var(--v2-hy-dtx);
}
#dpp-results[data-dpp-plan="baseline"]:is(.dpp-results--dash, :has(> *)) .dpp-payoff-list li::after {
  content: "■"; color: var(--v2-base-dtx);
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-payoff-list .dpp-pl-name {
  font-weight: 600;
  color: var(--v2-dtext);
  overflow-wrap: anywhere;
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-payoff-list .dpp-pl-date {
  font-family: var(--v2-font-num);
  color: var(--v2-dtext-2);
  background: var(--v2-night-3);
  border: 1px solid var(--v2-dhair);
  border-radius: 999px;
  padding: .25rem .75rem;
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

/* 月度计划表（仪表盘内）：深色 thead */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-schedule {
  border: 1px solid var(--v2-dhair);
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 1.25rem;
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-schedule > summary {
  color: var(--v2-dtext);
  padding: .5rem 1rem;
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-table-scroll {
  border-color: var(--v2-dhair);
  background: var(--v2-night-2);
  box-shadow: none;
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-table,
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-results-table {
  background: var(--v2-night-2);
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-table th,
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-table td,
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-results-table th,
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-results-table td {
  border-bottom-color: var(--v2-dhair);
  color: var(--v2-dtext-2);
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-table tbody td:first-child,
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-results-table tbody td:first-child,
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-table .dpp-num,
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-results-table .dpp-num {
  color: var(--v2-dtext);
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-table tbody tr:nth-child(even) td,
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-results-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, .025);
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-table tbody tr:hover td,
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-results-table tbody tr:hover td {
  background: rgba(139, 92, 246, .12);
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-table tfoot td,
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-results-table tfoot td {
  background: var(--v2-night-3);
  border-top-color: var(--v2-dhair);
}

/* 空状态（仪表盘内） */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-empty {
  border: 1px dashed var(--v2-dhair);
  color: var(--v2-dmuted);
  background: transparent;
}

/* DTI 结果卡（仪表盘内） */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-dti-result {
  background: var(--v2-night-2);
  border: 1px solid var(--v2-dhair);
  border-radius: 14px;
  text-align: center;
  padding: 1.5rem 1rem;
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-dti-result .dpp-card__value {
  font-size: clamp(2rem, 6vw, 2.75rem);
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-dti-result .dpp-card__label,
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-dti-result .dpp-card__sub {
  color: var(--v2-dmuted);
}

/* fund-vs-debt 场景卡（仪表盘内） */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-scenario {
  background: var(--v2-night-2);
  border: 1px solid var(--v2-dhair);
  border-radius: 12px;
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-scenario > h3 { color: var(--v2-dtext); }
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-scenario dt { color: var(--v2-dmuted); }
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-scenario dd { color: var(--v2-dtext); }

/* fund chips 在仪表盘内（若出现） */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-chip {
  background: var(--v2-night-3);
  border-color: var(--v2-dhair);
  color: var(--v2-dtext-2);
}
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-chip[aria-pressed="true"] {
  background: var(--v2-brand-grad);
  border-color: transparent;
  color: #fff;
}

/* ---------- 浅色区 results 兜底（无 JS 渲染时的静态内容） ---------- */

.dpp-results { margin-top: 1.5rem; }

.dpp-summary {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 1rem;
}
.dpp-card {
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  box-shadow: var(--dpp-shadow-sm);
  padding: 1rem 1.125rem;
}
.dpp-card__label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--v2-muted);                   /* 5.40:1 ✅ */
  margin-bottom: .375rem;
}
.dpp-card__value {
  font-family: var(--v2-font-num);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--v2-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.dpp-card__sub { font-size: .8125rem; color: var(--v2-muted); margin-top: .25rem; }

.dpp-compare-note {
  font-size: .9375rem;
  color: var(--v2-body);
  background: var(--v2-brand-tint);
  border-radius: 10px;
  padding: .75rem .875rem;
  margin: 0 0 1rem;
}
.dpp-savings-line {
  background: #EAF9F0;
  border: 1px solid #A9E4C5;
  border-left: 4px solid var(--v2-ok);
  border-radius: 10px;
  padding: .875rem 1rem;
  font-size: .9375rem; color: var(--v2-ink);
  margin: 0 0 1rem;
}
.dpp-savings-line strong { color: var(--v2-ok); font-size: 1.125rem; }  /* 5.43:1 ✅ */

.dpp-notice {
  border-radius: 10px;
  padding: .75rem .875rem;
  margin: 0 0 1rem;
  font-size: .9375rem;
  border: 1px solid var(--v2-border);
  background: #fff;
  color: var(--v2-body);
}
.dpp-notice--warn {
  border-color: #F2C14E;
  border-left: 4px solid var(--v2-warn);
  background: #FDF3E3;
  color: #7A5200;                        /* 加深半阶，小字对比 ≥4.5 */
}
.dpp-notice--info {
  background: var(--v2-brand-tint);
  border: 1px solid #D9C8F5;
  border-left: 4px solid var(--v2-brand);
  color: var(--v2-brand-700);              /* 10.95:1 ✅ */
}

.dpp-empty {
  text-align: center;
  color: var(--v2-muted);
  padding: 2rem 1rem;
  border: 1px dashed var(--v2-border);
  border-radius: var(--dpp-radius);
  margin: 0 0 1rem;
  background: #fff;
}

.dpp-payoff-list { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.dpp-payoff-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 0;
  border-bottom: 1px solid #EDF1F7;
  font-size: .9375rem;
  align-items: baseline;
}
.dpp-payoff-list li:last-child { border-bottom: 0; }
.dpp-payoff-list .dpp-pl-name { font-weight: 600; color: var(--v2-ink); overflow-wrap: anywhere; }
.dpp-payoff-list .dpp-pl-date {
  font-variant-numeric: tabular-nums;
  color: var(--v2-body);
  background: var(--v2-brand-tint);
  border-radius: var(--dpp-radius-pill);
  padding: .25rem .75rem;
  font-size: .8125rem; font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

/* ---------- tables：全站统一深色 thead ---------- */

.dpp-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--v2-border);
  border-radius: 14px;
  box-shadow: var(--dpp-shadow-sm);
  background: #fff;
  max-width: 100%;
  margin: 0 0 1.25rem;
}
/* M3: .dpp-results-table is a full alias of .dpp-table (worked-example tables). */
.dpp-table, .dpp-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  background: #fff;
}
.dpp-table-scroll > .dpp-table,
.dpp-table-scroll > .dpp-results-table { min-width: 34rem; }
.dpp-table caption, .dpp-results-table caption {
  font-family: var(--v2-font-display);
  text-align: left; font-weight: 700; font-size: 1rem;
  padding: 1rem 1.125rem .75rem; color: var(--v2-ink);
}
.dpp-table thead th, .dpp-results-table thead th {
  background: #0F1B33;                   /* 深色表头（全站统一） */
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--v2-dtext);                 /* ~16:1 ✅ */
  padding: .75rem 1rem;
  border-bottom: 1px solid #0F1B33;
  white-space: nowrap;
  text-align: left;
}
.dpp-table th, .dpp-table td,
.dpp-results-table th, .dpp-results-table td {
  padding: .875rem 1rem;
  border-bottom: 1px solid #EDF1F7;
  vertical-align: baseline;
  text-align: left;
}
.dpp-table tbody tr:last-child td,
.dpp-results-table tbody tr:last-child td { border-bottom: 0; }

.dpp-table tbody tr:nth-child(even) td,
.dpp-results-table tbody tr:nth-child(even) td { background: rgba(91, 33, 182, .025); }
.dpp-table tbody tr:hover td,
.dpp-results-table tbody tr:hover td { background: var(--v2-brand-tint); }

/* 策略对比行：行首策略名配形状符号 + 策略色文字（浅底文字色 token） */
.dpp-table tbody tr[data-dpp-plan] > th[scope="row"],
.dpp-results-table tbody tr[data-dpp-plan] > th[scope="row"] { font-weight: 700; }
.dpp-table tbody tr[data-dpp-plan="snowball"] > th[scope="row"],
.dpp-results-table tbody tr[data-dpp-plan="snowball"] > th[scope="row"] { color: var(--v2-sb-tx); }
.dpp-table tbody tr[data-dpp-plan="avalanche"] > th[scope="row"],
.dpp-results-table tbody tr[data-dpp-plan="avalanche"] > th[scope="row"] { color: var(--v2-av-tx); }
.dpp-table tbody tr[data-dpp-plan="hybrid"] > th[scope="row"],
.dpp-results-table tbody tr[data-dpp-plan="hybrid"] > th[scope="row"] { color: var(--v2-hy-tx); }
.dpp-table tbody tr[data-dpp-plan="baseline"] > th[scope="row"],
.dpp-results-table tbody tr[data-dpp-plan="baseline"] > th[scope="row"] { color: var(--v2-base-tx); }
.dpp-table tbody tr[data-dpp-plan="snowball"] > th[scope="row"]::before,
.dpp-results-table tbody tr[data-dpp-plan="snowball"] > th[scope="row"]::before { content: "● "; }
.dpp-table tbody tr[data-dpp-plan="avalanche"] > th[scope="row"]::before,
.dpp-results-table tbody tr[data-dpp-plan="avalanche"] > th[scope="row"]::before { content: "▲ "; }
.dpp-table tbody tr[data-dpp-plan="hybrid"] > th[scope="row"]::before,
.dpp-results-table tbody tr[data-dpp-plan="hybrid"] > th[scope="row"]::before { content: "◆ "; }
.dpp-table tbody tr[data-dpp-plan="baseline"] > th[scope="row"]::before,
.dpp-results-table tbody tr[data-dpp-plan="baseline"] > th[scope="row"]::before { content: "■ "; }
/* 仪表盘内：策略文字用暗底安全色 */
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-table tbody tr[data-dpp-plan="snowball"] > th[scope="row"] { color: var(--v2-sb-dtx); }
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-table tbody tr[data-dpp-plan="avalanche"] > th[scope="row"] { color: var(--v2-av-dtx); }
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-table tbody tr[data-dpp-plan="hybrid"] > th[scope="row"] { color: var(--v2-hy-dtx); }
#dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-table tbody tr[data-dpp-plan="baseline"] > th[scope="row"] { color: var(--v2-base-dtx); }

/* 数字列 */
.dpp-table .dpp-num, .dpp-results-table .dpp-num {
  font-family: var(--v2-font-num);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
  color: var(--v2-ink);
}
.dpp-table tbody td:first-child,
.dpp-results-table tbody td:first-child { font-weight: 600; color: var(--v2-ink); }
.dpp-table tfoot td,
.dpp-results-table tfoot td {
  font-weight: 800; border-top: 2px solid var(--v2-input-bd);
  background: #F6F8FC;
}

.dpp-schedule { margin: 0 0 1.25rem; border: 1px solid var(--v2-border); border-radius: var(--dpp-radius); overflow: hidden; }
.dpp-schedule > summary {
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: .5rem .875rem;
  color: var(--v2-ink);
}
.dpp-schedule .dpp-table-scroll { border: 0; border-radius: 0; margin: 0; box-shadow: none; }
tbody.dpp-year { border-top: 2px solid var(--v2-border); }

/* 长还款计划表：表头吸顶 */
.dpp-table-scroll--sticky { max-height: 28rem; }
.dpp-table-scroll--sticky thead th { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 rgba(255,255,255,.12); }

/* ---------- DTI / fund extras（浅色区） ---------- */

.dpp-dti-result { text-align: center; padding: 1.5rem 1rem; }
.dpp-dti-result .dpp-card__value { font-size: clamp(2rem, 6vw, 2.75rem); }

.dpp-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.dpp-chip {
  min-height: 48px;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--v2-border);
  background: #fff;
  font-weight: 700;
  font-size: .9375rem;
  font-family: inherit;
  color: var(--v2-body);
  cursor: pointer;
}
.dpp-chip[aria-pressed="true"] { background: var(--v2-brand-grad); border-color: transparent; color: #fff; } /* ≥7:1 ✅ */

.dpp-scenario-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-bottom: 1rem; }
.dpp-scenario {
  border: 1px solid var(--v2-border);
  border-radius: var(--dpp-radius);
  padding: .875rem;
  background: #fff;
}
.dpp-scenario > h3 { margin: 0 0 .5rem; font-size: 1rem; }
.dpp-scenario dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; font-size: .9375rem; }
.dpp-scenario dt { color: var(--v2-muted); }
.dpp-scenario dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- static content blocks ---------- */

.dpp-method, .dpp-example, .dpp-faq, .dpp-related { margin: 0 0 1.5rem; }

/* 板块 h2：CSS counter 编号（01/02…，::before 生成，不算文案改动） */
main { counter-reset: dpp-sec; }
.dpp-method h2::before,
.dpp-example h2::before,
.dpp-faq h2::before {
  counter-increment: dpp-sec;
  content: counter(dpp-sec, decimal-leading-zero);
  font-family: var(--v2-font-num);
  font-size: .8em;
  font-weight: 700;
  color: var(--v2-brand);
  margin-right: .625rem;
  letter-spacing: 0;
}

/* FAQ：卡片化，summary 右侧 +/− 指示符 */
.dpp-faq details {
  background: #fff;
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  padding: 0;
  margin: 0 0 .625rem;
}
.dpp-faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: .875rem 1rem;
  font-weight: 700;
  color: var(--v2-ink);
  cursor: pointer;
}
.dpp-faq summary::-webkit-details-marker { display: none; }
.dpp-faq summary::marker { content: ""; }
.dpp-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--v2-font-num);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--v2-brand);
}
.dpp-faq details[open] summary::after { content: "−"; }
.dpp-faq details[open] {
  border-color: var(--v2-brand);
  background: var(--v2-brand-tint);
}
.dpp-faq details > p {
  margin: 0;
  padding: 0 1rem 1rem;
}
.dpp-faq__item { border-bottom: 1px solid var(--v2-border); padding: .25rem 0; }
.dpp-faq__item:last-child { border-bottom: 0; }

/* Related calculators：卡片列表 + 左侧霓虹渐变条 */
.dpp-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .625rem;
}
.dpp-related li {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  padding: .875rem 1rem;
}
.dpp-related li::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--v2-neon-grad);
}

.dpp-example .dpp-table, .dpp-example .dpp-results-table { margin-top: .5rem; }

/* Disclaimer：文件卡质感 —— 浅灰底 + 左侧品牌竖条 + 紧凑字阶 */
.dpp-disclaimer {
  position: relative;
  overflow: hidden;
  background: #EDF0F7;
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  padding: 1rem 1.125rem 1rem 1.5rem;
  margin: 0 1rem 1.5rem;
}
.dpp-disclaimer::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--v2-brand-grad);
}
.dpp-disclaimer h2 { margin-top: 0; font-size: 1.125rem; }
.dpp-disclaimer h2::before { content: none; }  /* 合规声明不编号 */
.dpp-disclaimer p { font-size: .875rem; margin-bottom: .75rem; }
.dpp-disclaimer p:last-child { margin-bottom: 0; }

/* ---------- ad slots (empty in v1) ---------- */

.ad-slot:empty { display: none; }

/* ---------- footer：品牌收尾 ---------- */

.dpp-footer {
  position: relative;
  border-top: 0;
  background: var(--v2-night);
  color: var(--v2-dtext-2);                   /* 10.43:1 ✅ */
  margin-top: 2.5rem;
  padding: 2rem 0 1.5rem;
}
/* 顶部 3px 霓虹光条（与 hero 底呼应） */
.dpp-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--v2-neon-grad);
}
.dpp-footer__links {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .125rem .75rem;
}
.dpp-footer__links a {
  display: inline-flex; align-items: center;
  min-height: 48px;
  font-size: .875rem;
  color: var(--v2-dtext-2);
  text-decoration: none;
  transition: transform .15s ease, color .15s ease;
}
.dpp-footer__links a:hover { color: #fff; text-decoration: underline; transform: translateX(2px); }
.dpp-footer__disclaimer, .dpp-footer__meta { font-size: .8125rem; color: var(--v2-dmuted); margin-bottom: .5rem; } /* 7.08:1 ✅ */
.dpp-footer__disclaimer a { color: var(--v2-dtext-2); }
.dpp-footer__disclaimer a:hover { color: #fff; }
.dpp-footer__meta { border-top: 1px solid var(--v2-dhair); padding-top: 1rem; }

/* ---------- print header (screen: hidden; print: shown) ---------- */

.dpp-print-header { display: none; }

/* ---------- 404 ---------- */

.dpp-notfound { text-align: center; padding: 3rem 1rem; }
.dpp-notfound h1 { font-size: 2rem; }
.dpp-notfound ul { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .5rem; }

/* ---------- wider screens ---------- */

@media (min-width: 640px) {
  .dpp-tool { padding: 2rem; }
  .dpp-summary { grid-template-columns: repeat(4, 1fr); }
  #dpp-results:is(.dpp-results--dash, :has(> *)) .dpp-summary { grid-template-columns: repeat(4, 1fr); }
  .dpp-debt-grid { grid-template-columns: repeat(2, 1fr); }
  .dpp-debt-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 .875rem;
  }
  .dpp-debt-row > label { margin-bottom: .75rem; }
  .dpp-extra-row { grid-template-columns: 1fr 12rem; }
  .dpp-lump-row { grid-template-columns: 1fr 1fr auto; }
  .dpp-scenario-grid { grid-template-columns: repeat(2, 1fr); }
  .dpp-footer__links { grid-template-columns: repeat(3, 1fr); }
  .dpp-bar { grid-template-columns: 9rem 1fr 6.5rem; }
}

@media (min-width: 960px) {
  .dpp-footer__links { grid-template-columns: repeat(4, 1fr); }
  .dpp-debt-grid { grid-template-columns: repeat(4, 1fr); }
}

/* M1: keep the bordered cards (.dpp-tool, .dpp-disclaimer) at the same
   content width as .dpp-wrap (72rem) on wide screens, centered. */
@media (min-width: 74rem) {
  .dpp-tool, .dpp-disclaimer { max-width: 72rem; margin-left: auto; margin-right: auto; }
}

/* ---------- reduced motion ---------- */

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

/* ---------- print：深色区强制转浅（省墨 + 可读） ---------- */

@media print {
  /* hide chrome + interactive bits (hooks used by the delivered pages) */
  .dpp-header,
  .dpp-breadcrumb,
  .dpp-faq,
  .ad-slot,
  .dpp-footer__links,
  .dpp-footer nav,
  .dpp-skip-link,
  #dpp-skip-link,
  .dpp-more,
  #dpp-form details,
  #dpp-planner-form details,
  #dpp-dti-form details,
  [data-dpp-add-debt],
  [data-dpp-add-lump],
  [data-dpp-remove-debt],
  [data-dpp-remove-lump],
  [data-dpp-dti-remove],
  [data-dpp-copy-link],
  [data-dpp-reset],
  [data-dpp-fill-numbers],
  [data-dpp-print],
  [data-dpp-share-fallback] { display: none !important; }

  body { font-size: 11pt; line-height: 1.45; color: #000; background: #fff; }
  .dpp-wrap { max-width: none; padding: 0; }
  .dpp-hero { background: none; padding: 0 0 1rem; }
  .dpp-hero::before, .dpp-hero::after { display: none; }
  .dpp-hero h1, .dpp-hero .dpp-lede { color: #000; }
  .dpp-hero .dpp-eyebrow { background: none; border: 1px solid #999; color: #000; }
  .dpp-hero .dpp-eyebrow::before { color: #000; }
  .dpp-hero__trust li { background: none; border: 1px solid #999; color: #000; }
  .dpp-hero__trust li::before { color: #000; }
  .dpp-tool { border: 0; padding: 0; margin: 0; box-shadow: none; }
  .dpp-disclaimer { margin-left: 0; margin-right: 0; background: #fff; }
  .dpp-disclaimer::before { display: none; }
  .dpp-tool, .dpp-disclaimer { max-width: none; }

  /* 深色仪表盘 → 白底黑字 */
  .dpp-hero, #dpp-results, .dpp-footer { background: #fff !important; color: #000 !important; }
  .dpp-hero h1, .dpp-hero .dpp-lede,
  #dpp-results .dpp-card__value,
  #dpp-results h3,
  #dpp-results p,
  #dpp-results .dpp-payoff-list .dpp-pl-name,
  #dpp-results .dpp-scenario > h3 { color: #000 !important; text-shadow: none !important; }
  #dpp-results { border: 1px solid #999; box-shadow: none; }
  #dpp-results .dpp-card,
  #dpp-results .dpp-summary > .dpp-card:first-child,
  #dpp-results .dpp-scenario,
  #dpp-results .dpp-dti-result { background: #fff !important; border-color: #999 !important; }
  #dpp-results .dpp-card__label,
  #dpp-results .dpp-card__sub,
  #dpp-results .dpp-payoff-list .dpp-pl-date,
  #dpp-results .dpp-scenario dt { color: #333 !important; }
  #dpp-results .dpp-savings-line,
  #dpp-results .dpp-notice,
  #dpp-results .dpp-compare-note { background: #fff !important; border-color: #999 !important; color: #000 !important; }
  #dpp-results .dpp-savings-line strong { color: #000 !important; }
  .dpp-grad-text { background: none !important; color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .dpp-table thead th, .dpp-results-table thead th { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .dpp-table, .dpp-results-table,
  #dpp-results .dpp-table, #dpp-results .dpp-results-table { background: #fff !important; }
  #dpp-results .dpp-table th, #dpp-results .dpp-table td { color: #000 !important; border-bottom-color: #ccc !important; }

  /* print header (populated by site.js on beforeprint) */
  .dpp-print-header { display: block !important; margin-bottom: 1rem; }
  .dpp-print-header h2 { font-size: 14pt; margin: 0 0 .25rem; }
  .dpp-print-header p { font-size: 9pt; color: #333; margin: 0 0 .125rem; }

  /* schedule prints in full, thead repeats, 12-month groups uncut */
  .dpp-schedule { border: 0; margin: 0; }
  .dpp-schedule > summary { display: none; }
  .dpp-table-scroll { overflow: visible; border: 0; margin: 0 0 1rem; }
  .dpp-table, .dpp-results-table { font-size: 9pt; }
  .dpp-table thead, .dpp-results-table thead { display: table-header-group; }
  .dpp-table tfoot, .dpp-results-table tfoot { display: table-footer-group; }
  tbody.dpp-year { break-inside: avoid; page-break-inside: avoid; }

  .dpp-card { break-inside: avoid; page-break-inside: avoid; }
  .dpp-disclaimer { break-inside: avoid; page-break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}