/* 常在 v1 樣式。Light only、長輩閱讀、與 chung-wealth 視覺同源。 */

:root {
  --paper: #FBF8F2;
  --surface: #FFFFFF;
  --cream: #F5F0E8;
  --cream-dark: #EDE6D6;
  --ink: #1C1A16;
  --ink-light: #4A4640;
  --ink-muted: #8A847A;
  --gold: #B8922A;
  --gold-text: #967319;
  --gold-pale: #F0E4C0;
  --brick: #B03A20;
  --green: #1D6640;
  --r: 20px;
  --r-in: 14px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(28, 26, 22, .04), 0 8px 24px -12px rgba(28, 26, 22, .10);
  --serif: "Songti TC", "Noto Serif TC", serif;
  --sans: "PingFang TC", "Noto Sans TC", sans-serif;
  --fs-base: 17px;
}

html[data-fs="2"] { --fs-base: 19px; }
html[data-fs="3"] { --fs-base: 21px; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color-scheme: light;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.35;
  margin: 0;
}

.tabnum { font-variant-numeric: tabular-nums; }

/* ── 頂欄 ──────────────────────────────────────────── */
.cz-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--cream-dark);
  flex-wrap: wrap;
}
.cz-brand {
  font-family: var(--serif);
  font-size: 1.25em;
  letter-spacing: .08em;
  color: var(--ink);
}
.cz-brand .cz-brand-dot { color: var(--gold); margin: 0 6px; }
.cz-demo-badge {
  font-size: .75em;
  color: var(--gold-text);
  background: var(--gold-pale);
  border-radius: 999px;
  padding: 3px 12px;
  letter-spacing: .04em;
}
.cz-topbar-spacer { flex: 1; }
.cz-topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── 按鈕 ──────────────────────────────────────────── */
.cz-btn {
  font-family: var(--sans);
  font-size: .95em;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--r-sm);
  border: 1px solid var(--cream-dark);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cz-btn:hover { background: var(--cream); }
.cz-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cz-btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  font-size: 1.02em;
}
.cz-btn-primary:hover { background: var(--gold-text); }
.cz-btn-ghost { border-color: transparent; background: transparent; }
.cz-btn-ghost:hover { background: var(--cream); }
.cz-btn-danger { color: var(--brick); border-color: var(--cream-dark); }
.cz-btn-danger:hover { background: rgba(176, 58, 32, .07); }
.cz-btn-sm { min-height: 38px; padding: 7px 14px; font-size: .88em; }
.cz-btn[disabled] { opacity: .45; cursor: default; }

.cz-fs-control { display: inline-flex; align-items: center; gap: 2px; }
.cz-fs-control .cz-btn { min-width: 44px; padding: 10px 12px; }

/* ── 主區與 tab ────────────────────────────────────── */
.cz-main { max-width: 1180px; margin: 0 auto; padding: 24px; }
.cz-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--cream-dark);
  overflow-x: auto;
}
.cz-tab {
  font-family: var(--sans);
  font-size: 1em;
  min-height: 48px;
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.cz-tab.active { color: var(--ink); border-bottom-color: var(--gold); }
.cz-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.cz-panel { display: none; }
.cz-panel.active { display: block; }

/* ── 卡片 ──────────────────────────────────────────── */
.cz-card {
  background: var(--surface);
  border: 1px solid var(--cream-dark);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 24px;
}
.cz-card-h { font-size: 1.15em; margin-bottom: 16px; }
.cz-muted { color: var(--ink-muted); }
.cz-hint { color: var(--ink-muted); font-size: .9em; margin: 8px 0 0; }

/* ── 空狀態 ────────────────────────────────────────── */
.cz-empty {
  text-align: center;
  padding: 64px 24px;
  max-width: 560px;
  margin: 0 auto;
}
.cz-empty-title { font-size: 1.5em; margin-bottom: 12px; }
.cz-empty-text { color: var(--ink-light); margin-bottom: 32px; }
.cz-empty-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.cz-empty-actions .cz-btn { min-width: 280px; }

/* ── 摘要列與健康燈號 ──────────────────────────────── */
.cz-summary { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.cz-summary-total { flex: 1; min-width: 200px; }
.cz-summary-total-v { font-family: var(--serif); font-size: 2.2em; color: var(--ink); letter-spacing: .04em; }
.cz-summary-total-l { color: var(--ink-muted); font-size: .9em; margin-top: 4px; }
.cz-summary-count { color: var(--ink-light); }
.cz-health { display: flex; gap: 16px; flex-wrap: wrap; }
.cz-light { display: flex; align-items: center; gap: 8px; font-size: .9em; color: var(--ink-light); }
.cz-light-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.cz-light-dot.ok { background: var(--green); }
.cz-light-dot.warn { background: var(--gold); }
.cz-light-dot.bad { background: var(--brick); }

/* ── segmented 三視圖 ──────────────────────────────── */
.cz-segmented {
  display: inline-flex;
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 4px;
  gap: 4px;
  margin-bottom: 16px;
}
.cz-seg {
  font-family: var(--sans);
  min-height: 40px;
  padding: 8px 18px;
  border: none;
  background: transparent;
  color: var(--ink-light);
  border-radius: 8px;
  cursor: pointer;
}
.cz-seg.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ── 家業關係圖 ────────────────────────────────────── */
.cz-map-wrap { overflow-x: auto; padding: 8px 0; }
.cz-map-svg { display: block; width: 100%; min-width: 720px; height: auto; }

.cz-edge { stroke: var(--ink-muted); stroke-width: 1.4; fill: none; }
.cz-edge.edge-marriage, .cz-edge.edge-parentchild { stroke: var(--cream-dark); stroke-width: 1.4; }
.cz-edge.edge-hold { stroke: var(--ink-muted); stroke-width: 1.6; }
.cz-edge.edge-borrow { stroke: var(--gold); stroke-width: 1.6; }
.cz-edge.dim { stroke: var(--cream-dark); opacity: .5; }
.cz-edge.manage-on { stroke: var(--gold); stroke-width: 2.2; }
.cz-edge.benefit-on { stroke: var(--green); stroke-width: 2.2; }

.cz-shape { fill: var(--surface); stroke: var(--ink-light); stroke-width: 1.5; }
.cz-shape.person { fill: var(--cream); stroke: var(--ink-light); }
.cz-shape.person.nominee { stroke-dasharray: 4 3; }
.cz-shape.entity { fill: var(--gold-pale); stroke: var(--gold-text); }
.cz-shape.asset { fill: var(--surface); stroke: var(--ink-light); }
.cz-label { font-family: var(--sans); font-size: 13px; fill: var(--ink); text-anchor: middle; }
.cz-label.inrect { font-size: 12px; }
.cz-dot.on { fill: var(--gold); }
.cz-dot.off { fill: none; stroke: var(--ink-muted); stroke-width: 1; }

.cz-node { cursor: pointer; }
.cz-node:focus-visible { outline: none; }
.cz-node:focus-visible .cz-shape { stroke: var(--gold); stroke-width: 2.5; }
.cz-node.hl .cz-shape { stroke-width: 2.6; }
.cz-node.hl.person .cz-shape { stroke: var(--gold); }
.cz-node.dim { opacity: .34; }
.cz-node:hover .cz-shape { stroke: var(--gold); }

/* ── 詳情卡 / 私談卡 ───────────────────────────────── */
.cz-detail { margin-top: 16px; }
.cz-detail-empty { color: var(--ink-muted); font-size: .92em; }
.cz-detail-title { font-family: var(--serif); font-size: 1.2em; margin-bottom: 12px; }
.cz-detail-rows { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.cz-detail-rows dt { color: var(--ink-muted); }
.cz-detail-rows dd { margin: 0; color: var(--ink); }
.cz-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cz-flag { font-size: .82em; padding: 3px 10px; border-radius: 999px; background: var(--cream); color: var(--ink-light); }
.cz-private-card {
  border: 1px solid var(--gold);
  background: var(--gold-pale);
  border-radius: var(--r-in);
  padding: 20px;
  margin-top: 16px;
}
.cz-private-card .cz-detail-title { color: var(--gold-text); }
.cz-private-note { color: var(--ink-light); margin-top: 12px; font-size: .95em; }

/* ── 稅額明細卡 ────────────────────────────────────── */
.cz-taxline { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--cream); cursor: default; }
.cz-taxline:last-child { border-bottom: none; }
.cz-taxline .cz-taxline-l { color: var(--ink-light); }
.cz-taxline .cz-taxline-v { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.cz-taxline.total { font-family: var(--serif); font-size: 1.15em; padding-top: 16px; }
.cz-taxline.sub { padding-left: 16px; font-size: .92em; }
.cz-taxline-why { color: var(--ink-muted); font-size: .84em; margin: 2px 0 8px 0; }
.cz-toggle-why { color: var(--gold-text); cursor: pointer; font-size: .84em; background: none; border: none; padding: 0; }
.cz-taxnote { color: var(--ink-muted); font-size: .82em; line-height: 1.7; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cream-dark); }

.cz-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cream); }
.cz-switch { position: relative; width: 52px; height: 30px; flex: none; }
.cz-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cz-switch-track { position: absolute; inset: 0; background: var(--cream-dark); border-radius: 999px; transition: background .15s; }
.cz-switch-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: #fff; border-radius: 50%; box-shadow: var(--shadow); transition: left .15s; }
.cz-switch input:checked + .cz-switch-track { background: var(--gold); }
.cz-switch input:checked + .cz-switch-track + .cz-switch-thumb { left: 25px; }

/* ── 流動性缺口帶 ──────────────────────────────────── */
.cz-liq-bars { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.cz-liq-row { }
.cz-liq-head { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--ink-light); font-size: .92em; }
.cz-liq-head .cz-liq-v { font-variant-numeric: tabular-nums; }
.cz-liq-track { height: 22px; background: var(--cream); border-radius: 999px; overflow: hidden; }
.cz-liq-fill { height: 100%; border-radius: 999px; }
.cz-liq-fill.need { background: var(--ink-light); }
.cz-liq-fill.cash { background: var(--green); }
.cz-liq-fill.gap { background: var(--brick); }
.cz-gap-note {
  margin-top: 16px;
  padding: 16px 20px;
  border-left: 3px solid var(--brick);
  background: rgba(176, 58, 32, .06);
  border-radius: var(--r-sm);
  color: var(--ink);
}

/* ── 沙盒方案卡 ────────────────────────────────────── */
.cz-plan-card { border: 1px solid var(--cream-dark); border-radius: var(--r-in); padding: 16px 20px; margin-bottom: 12px; }
.cz-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cz-plan-title { font-family: var(--serif); }
.cz-plan-card.on { border-color: var(--gold); }
.cz-plan-body { margin-top: 12px; }
.cz-plan-remind { color: var(--ink-muted); font-size: .84em; margin-top: 8px; }
.cz-plan-delta { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.cz-plan-delta span { font-variant-numeric: tabular-nums; }
.cz-delta-down { color: var(--green); }

/* ── 表單 ──────────────────────────────────────────── */
.cz-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--cream); flex-wrap: wrap; }
.cz-list-row:last-child { border-bottom: none; }
.cz-list-main { display: flex; flex-direction: column; gap: 2px; }
.cz-list-name { color: var(--ink); }
.cz-list-sub { color: var(--ink-muted); font-size: .86em; }
.cz-list-actions { display: flex; gap: 8px; }
.cz-crud-section { margin-bottom: 24px; }
.cz-crud-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.cz-field { margin-bottom: 16px; }
.cz-field label { display: block; color: var(--ink-light); margin-bottom: 6px; font-size: .92em; }
.cz-field input, .cz-field select, .cz-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 1em;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--cream-dark);
  border-radius: var(--r-sm);
}
.cz-field input:focus, .cz-field select:focus, .cz-field textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.cz-field .cz-amount-preview { color: var(--gold-text); font-size: .86em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.cz-field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.cz-field-row .cz-field { flex: 1; min-width: 160px; }
.cz-advanced { border: 1px solid var(--cream-dark); border-radius: var(--r-sm); padding: 0 16px; margin-bottom: 16px; }
.cz-advanced summary { cursor: pointer; padding: 12px 0; color: var(--ink-light); }
.cz-checks { display: flex; flex-direction: column; gap: 10px; }
.cz-check { display: flex; align-items: center; gap: 10px; }
.cz-check input { width: 20px; height: 20px; }

/* ── modal ─────────────────────────────────────────── */
.cz-modal-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(28, 26, 22, .38);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cz-modal {
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: 0 20px 60px -20px rgba(28, 26, 22, .4);
  width: 100%; max-width: 540px;
  max-height: 88vh; overflow-y: auto;
  padding: 28px;
}
.cz-modal-title { font-family: var(--serif); font-size: 1.3em; margin-bottom: 12px; }
.cz-modal-text { color: var(--ink-light); margin-bottom: 20px; }
.cz-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

/* ── 頁尾雙揭露（常駐）─────────────────────────────── */
.cz-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
  color: var(--ink-muted);
  font-size: .82em;
  border-top: 1px solid var(--cream-dark);
  line-height: 1.5;
}
.cz-footer p { margin: 4px 0; }

/* ── 報告 ──────────────────────────────────────────── */
.cz-report {
  background: var(--surface);
  border: 1px solid var(--cream-dark);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  max-width: 820px;
  margin: 0 auto;
  padding: 48px;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.cz-report-cover { border-bottom: 2px solid var(--gold); padding-bottom: 20px; margin-bottom: 28px; }
.cz-report-cover-line { font-family: var(--serif); font-size: 2em; letter-spacing: .06em; }
.cz-report-cover-sub { color: var(--gold-text); letter-spacing: .1em; margin-top: 6px; }
.cz-report-cover-date { color: var(--ink-muted); margin-top: 4px; }
.cz-report-card { margin-bottom: 28px; break-inside: avoid; }
.cz-report-h { font-size: 1.2em; margin-bottom: 14px; color: var(--ink); border-left: 3px solid var(--gold); padding-left: 12px; }
.cz-advisor-card { background: var(--cream); border-radius: var(--r-in); padding: 20px 24px; }
.cz-advisor-name { font-family: var(--serif); font-size: 1.15em; }
.cz-advisor-line { color: var(--ink-light); margin-top: 6px; }
.cz-advisor-placeholder { color: var(--ink-muted); font-style: normal; }
.cz-report-map-frame { overflow: hidden; }
.cz-report-map-frame .cz-map-svg { min-width: 0; width: 100%; }
.cz-report-figs { display: flex; gap: 24px; flex-wrap: wrap; }
.cz-report-fig { flex: 1; min-width: 140px; background: var(--cream); border-radius: var(--r-in); padding: 18px; text-align: center; }
.cz-report-fig-v { font-family: var(--serif); font-size: 1.5em; }
.cz-report-fig-l { color: var(--ink-muted); font-size: .88em; margin-top: 6px; }
.cz-report-fig.brick .cz-report-fig-v { color: var(--brick); }
.cz-report-fig.green .cz-report-fig-v { color: var(--green); }
.cz-report-gap-note { margin-top: 16px; padding: 14px 18px; border-left: 3px solid var(--brick); background: rgba(176, 58, 32, .06); border-radius: var(--r-sm); }
.cz-action-list { margin: 0; padding-left: 22px; }
.cz-action-list li { margin-bottom: 12px; }
.cz-action-title { display: block; font-family: var(--serif); }
.cz-action-detail { display: block; color: var(--ink-light); font-size: .92em; margin-top: 2px; }
.cz-action-private { margin-top: 20px; padding: 16px 20px; border: 1px solid var(--gold); border-radius: var(--r-in); background: var(--gold-pale); }
.cz-action-private-h { color: var(--gold-text); margin-bottom: 12px; }
.cz-next-row { display: flex; gap: 12px; padding: 10px 0; }
.cz-next-label { color: var(--ink-muted); min-width: 84px; }
.cz-next-blank { color: var(--cream-dark); letter-spacing: 2px; }
.cz-report-footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--cream-dark); }
.cz-disclose { color: var(--ink-muted); font-size: .78em; margin: 6px 0; line-height: 1.5; }
.cz-report-hint { color: var(--ink-muted); font-size: .84em; margin-top: 10px; }

/* ── 列印：只留報告，保色 ─────────────────────────── */
@media print {
  body { background: #fff; }
  .cz-topbar, .cz-tabs, .cz-footer, .cz-print-hide, .cz-modal-overlay { display: none !important; }
  .cz-main { padding: 0; max-width: none; }
  .cz-panel { display: none !important; }
  .cz-panel.active { display: block !important; }
  .cz-report {
    box-shadow: none;
    border: none;
    max-width: none;
    margin: 0;
    padding: 0;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .cz-report-card, .cz-taxline, .cz-report-fig, .cz-action-private { break-inside: avoid; }
  .cz-report-map-frame .cz-map-svg { break-inside: avoid; }
}

/* ── 響應式 ────────────────────────────────────────── */
@media (max-width: 640px) {
  .cz-main { padding: 16px; }
  .cz-report { padding: 24px; }
  .cz-summary { flex-direction: column; align-items: flex-start; }
  .cz-report-figs { flex-direction: column; }
}