/* 常在 · 傳承試算互動沙盤樣式（js/sandbox.js 產生的 czs- DOM）。
   由 sandbox.html 原型移植：全部 czs- 前綴避免污染其他分頁；純淺色（沿用 app.css :root token，
   含沙盤補的 --teal/--canvas-bg/--num/--ink-faint/--gold-deep/--line/--line-strong）；不帶深色模式。 */

/* 根容器：原型是整頁，這裡內嵌「傳承試算」分頁，撐一個工作區高度 */
.czs-root {
  display: flex; flex-direction: column; height: calc(100vh - 172px); min-height: 560px; margin: -4px 0;
  /* 可讀性強化：--ink-muted(3.7:1)／--ink-faint(2.15:1)／--gold-text(4.4:1) 在沙盤常見的
     11-13px 小字級下都未達 WCAG AA 4.5:1（實測見 2026-07-10 review）。不動 app.css 全域 token，
     只在沙盤範圍內加一顆更深的金（僅供「文字」用，邊框/底色類裝飾維持原金不動），
     其餘淡字一律改用既有的 --ink-light（9.4:1，已在別處使用，不新增色相）。*/
  --czs-gold-ink: #86660E;
}
.czs-toolbar { display: flex; align-items: center; gap: 14px; padding: 10px 4px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.czs-toolbar-hint { font-size: 13px; color: var(--ink-light); line-height: 1.5; }
.czs-toolbar-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.czs-btn { font-family: var(--sans); font-size: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-light); border-radius: 999px; padding: 9px 15px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; min-height: 40px; white-space: nowrap; }
.czs-btn:hover { border-color: var(--gold); color: var(--czs-gold-ink); }
.czs-btn.czs-btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.czs-btn.czs-btn-primary:hover { background: var(--czs-gold-ink); border-color: var(--czs-gold-ink); color: #fff; }
.czs-btn.czs-btn-trust { border-color: var(--teal); color: var(--teal); }
.czs-btn:active { transform: translateY(1px); }

.czs-stage { display: flex; flex: 1; min-height: 0; }
.czs-canvas-wrap { flex: 1; position: relative; overflow: hidden; background: var(--canvas-bg); border-radius: var(--r-in); }
.czs-canvas-wrap svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; }

.czs-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; pointer-events: none; padding: 20px; }
.czs-empty h2 { font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); font-weight: 400; letter-spacing: .05em; margin: 0; color: var(--ink); }
.czs-empty p { color: var(--ink-light); max-width: 46ch; margin: 0; line-height: 1.85; }
.czs-empty-btns { display: flex; gap: 12px; pointer-events: auto; flex-wrap: wrap; justify-content: center; }
.czs-empty-hint { font-size: 12.5px; color: var(--ink-light); line-height: 1.8; }

/* 節點 */
.czs-node .czs-bg { transition: stroke .2s, fill .2s, filter .2s; }
.czs-node.czs-person .czs-bg { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.8; }
.czs-node.czs-entity .czs-bg { fill: var(--cream); stroke: var(--gold-deep); stroke-width: 1.8; }
.czs-node.czs-trust .czs-bg { fill: var(--surface); stroke: var(--teal); stroke-width: 2; stroke-dasharray: 7 4; }
.czs-node.czs-asset { cursor: grab; }
.czs-node.czs-asset .czs-bg { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.6; }
.czs-node.czs-person, .czs-node.czs-entity, .czs-node.czs-trust { cursor: pointer; }
.czs-node.czs-sel .czs-bg { stroke: var(--gold); stroke-width: 3; filter: drop-shadow(0 6px 16px rgba(184, 146, 42, .35)); }
.czs-node.czs-drag-src .czs-bg { opacity: .5; }
.czs-node.czs-drop-ok .czs-bg { stroke: var(--green); stroke-width: 3; filter: drop-shadow(0 0 12px rgba(29, 102, 64, .5)); }
.czs-node .czs-nm { font-family: var(--sans); font-weight: 600; fill: var(--ink); pointer-events: none; }
.czs-node .czs-sub { font-size: 12px; fill: var(--ink-light); pointer-events: none; }
.czs-node .czs-val { font-family: var(--num); fill: var(--czs-gold-ink); pointer-events: none; }
.czs-node .czs-dots { font-size: 11px; letter-spacing: .14em; fill: var(--gold-deep); pointer-events: none; }
.czs-node .czs-tag { font-size: 11px; font-weight: 600; pointer-events: none; }
.czs-node.czs-dim { opacity: .3; }

/* 連線 */
.czs-edge { fill: none; transition: opacity .3s; }
.czs-edge.czs-hold { stroke: var(--gold-deep); stroke-width: 2; }
.czs-edge.czs-marry { stroke: var(--ink-muted); stroke-width: 1.4; }
.czs-edge.czs-child { stroke: var(--line-strong); stroke-width: 1.4; }
.czs-edge.czs-nominee { stroke: var(--brick); stroke-width: 1.8; stroke-dasharray: 6 5; }
.czs-edge.czs-trust { stroke: var(--teal); stroke-width: 2; stroke-dasharray: 5 4; }
.czs-edge.czs-benef { stroke: var(--teal); stroke-width: 1.5; stroke-dasharray: 2 4; }
.czs-edge-label { font-size: 12px; fill: var(--czs-gold-ink); font-weight: 600; pointer-events: none; }
.czs-edge-label.czs-n { fill: var(--brick); }
.czs-edge-label.czs-t { fill: var(--teal); }

.czs-ghost { pointer-events: none; }
.czs-ghost rect { fill: var(--surface); stroke: var(--gold); stroke-width: 2; opacity: .92; }
.czs-ghost text { fill: var(--ink); font-size: 13px; font-weight: 600; text-anchor: middle; }

.czs-sat { cursor: pointer; }
.czs-sat circle { fill: var(--ink); stroke: var(--paper); stroke-width: 2; transition: fill .15s; }
.czs-sat:hover circle { fill: var(--gold-deep); }
.czs-sat text { fill: var(--paper); font-size: 12px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.czs-sat-label { font-size: 11.5px; fill: var(--ink-light); font-weight: 500; pointer-events: none; }
.czs-sat-label-bg { fill: var(--surface); stroke: var(--line); stroke-width: 1; }

/* 右側面板 */
.czs-panel { width: 336px; flex-shrink: 0; border-left: 1px solid var(--line); background: var(--surface); overflow-y: auto; padding: 20px; }
@media (max-width: 920px) { .czs-panel { display: none; } }
.czs-total { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.czs-total .czs-big { font-family: var(--num); font-size: 38px; line-height: 1; transition: color .3s; color: var(--ink); }
.czs-total .czs-lbl { font-size: 12px; letter-spacing: .16em; color: var(--czs-gold-ink); font-weight: 600; margin-bottom: 6px; }
.czs-total .czs-meta { font-size: 12.5px; color: var(--ink-light); margin-top: 8px; line-height: 1.6; }
.czs-block { margin-bottom: 18px; }
.czs-block .czs-bh { font-size: 12px; letter-spacing: .14em; color: var(--ink-light); font-weight: 600; margin-bottom: 10px; }
.czs-benef-row { display: grid; grid-template-columns: 76px 1fr auto; gap: 9px; align-items: center; margin-bottom: 9px; font-size: 13px; }
.czs-benef-row .czs-nm { color: var(--ink-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.czs-benef-bar { height: 8px; border-radius: 4px; background: var(--cream-dark); overflow: hidden; }
.czs-benef-bar span { display: block; height: 100%; background: var(--gold); border-radius: 4px; transition: width .5s cubic-bezier(.16, 1, .3, 1); }
.czs-benef-bar span.czs-trust { background: var(--teal); }
.czs-benef-row .czs-v { font-family: var(--num); font-size: 13px; color: var(--ink-light); text-align: right; }
.czs-gap-card { background: var(--cream); border-radius: var(--r-in); padding: 15px 17px; }
.czs-gap-card .czs-g-lbl { font-size: 12px; color: var(--ink-light); }
.czs-gap-card .czs-g-val { font-family: var(--num); font-size: 23px; margin-top: 2px; color: var(--ink); }
.czs-gap-card.czs-warn .czs-g-val { color: var(--brick); }
.czs-gap-card.czs-ok .czs-g-val { color: var(--green); }
.czs-gap-card p { font-size: 12px; color: var(--ink-light); margin: 9px 0 0; line-height: 1.7; }
.czs-health-grid { display: flex; flex-direction: column; gap: 8px; }
.czs-health-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.czs-health-dot { width: 9px; height: 9px; border-radius: 50%; }
.czs-health-dot.czs-g { background: var(--green); }
.czs-health-dot.czs-y { background: var(--gold-deep); }
.czs-health-dot.czs-r { background: var(--brick); }
.czs-health-dot.czs-n { background: var(--ink-faint); }
.czs-health-row .czs-hl { color: var(--ink-light); }
.czs-health-row .czs-hv { font-size: 12.5px; font-weight: 500; color: var(--ink-light); text-align: right; }
.czs-compare-card { background: var(--gold-pale); border-radius: var(--r-in); padding: 15px 17px; }
.czs-cmp-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-light); padding: 5px 0; line-height: 1.5; }
.czs-cmp-row .czs-cmp-v { font-family: var(--num); white-space: nowrap; }
.czs-cmp-net { font-family: var(--num); font-size: 21px; margin-top: 9px; padding-top: 10px; border-top: 1px solid var(--line-strong); }
.czs-cmp-net.czs-good { color: var(--green); }
.czs-cmp-net.czs-bad { color: var(--brick); }
.czs-cmp-sub { display: flex; flex-direction: column; gap: 5px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.czs-cmp-dist { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-light); }
.czs-cmp-dist .czs-arw { color: var(--ink); font-weight: 600; }
.czs-cmp-note { font-size: 12px; color: var(--ink-light); line-height: 1.7; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.czs-baseline-card { background: var(--cream); border-radius: var(--r-in); padding: 15px 17px; border-left: 3px solid var(--ink-muted); }
.czs-baseline-card .czs-bl-intro { font-size: 12.5px; color: var(--ink-light); line-height: 1.7; margin-bottom: 10px; }
.czs-baseline-card .czs-bl-tax { font-size: 13px; color: var(--ink-light); padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--line); }
.czs-baseline-card .czs-bl-tax b { font-family: var(--num); font-size: 18px; color: var(--brick); margin-left: 4px; }
.czs-bl-heir { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-light); padding: 4px 0; }
.czs-bl-heir span:last-child { font-family: var(--num); }
.czs-baseline-card .czs-bl-note { font-size: 12px; color: var(--ink-light); line-height: 1.7; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.czs-flags { display: flex; flex-direction: column; gap: 6px; }
.czs-flag { font-size: 12.5px; color: var(--brick); display: flex; gap: 8px; align-items: flex-start; }
.czs-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brick); margin-top: 6px; flex-shrink: 0; }
.czs-moves { margin-top: 6px; }
.czs-move-row { font-size: 12.5px; color: var(--ink-light); padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; }
.czs-move-row .czs-cost { color: var(--brick); font-family: var(--num); white-space: nowrap; }
.czs-move-row.czs-trust-move .czs-cost { color: var(--teal); }

/* 決策卡（拖放後浮出）*/
.czs-scrim { position: fixed; inset: 0; background: rgba(20, 16, 10, .35); display: none; align-items: center; justify-content: center; z-index: 60; padding: 20px; }
.czs-scrim.czs-show { display: flex; }
.czs-dcard { background: var(--surface); border-radius: var(--r); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; }
.czs-dcard-head { padding: 22px 26px 18px; border-bottom: 1px solid var(--line); }
.czs-dcard-eyebrow { font-size: 12px; letter-spacing: .16em; color: var(--czs-gold-ink); font-weight: 600; }
.czs-dcard-title { font-family: var(--serif); font-size: 24px; font-weight: 400; letter-spacing: .04em; margin: 6px 0 0; line-height: 1.35; color: var(--ink); }
.czs-dcard-body { padding: 22px 26px; }
.czs-dcard-cost { background: var(--cream); border-radius: var(--r-in); padding: 16px 18px; margin-bottom: 20px; }
.czs-ct-lbl { font-size: 12px; color: var(--ink-light); }
.czs-ct-total { font-family: var(--num); font-size: 30px; color: var(--brick); margin: 2px 0 10px; }
.czs-ct-total.czs-teal { color: var(--teal); }
.czs-ct-line { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-light); padding: 5px 0; border-top: 1px solid var(--line); }
.czs-ct-line .czs-cv { font-family: var(--num); }
.czs-dcard-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 8px; }
@media (max-width: 520px) { .czs-dcard-cols { grid-template-columns: 1fr; } }
.czs-dcol h4 { font-size: 13px; font-weight: 600; margin: 0 0 10px; letter-spacing: .04em; }
.czs-dcol.czs-pro h4 { color: var(--green); }
.czs-dcol.czs-con h4 { color: var(--brick); }
.czs-dcol ul { margin: 0; padding: 0; list-style: none; }
.czs-dcol li { font-size: 13px; color: var(--ink-light); line-height: 1.6; padding: 6px 0 6px 18px; position: relative; }
.czs-dcol.czs-pro li::before { content: "＋"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.czs-dcol.czs-con li::before { content: "−"; position: absolute; left: 0; color: var(--brick); font-weight: 700; }
.czs-annual-tip { background: var(--gold-pale); border-radius: var(--r-in); padding: 12px 15px; font-size: 13px; color: var(--ink-light); line-height: 1.7; margin-top: 16px; }
.czs-annual-tip b { color: var(--ink); }
.czs-dcard-note { font-size: 12px; color: var(--ink-light); line-height: 1.7; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.czs-dcard-actions { padding: 16px 26px 22px; display: flex; gap: 12px; justify-content: flex-end; }

/* 節點編輯抽屜 */
.czs-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 330px; background: var(--surface); border-left: 1px solid var(--line-strong); box-shadow: -10px 0 30px -18px rgba(0, 0, 0, .3); transform: translateX(100%); transition: transform .32s cubic-bezier(.16, 1, .3, 1); z-index: 8; padding: 20px; overflow-y: auto; }
.czs-drawer.czs-open { transform: none; }
.czs-dh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.czs-dh h3 { font-family: var(--serif); font-size: 19px; font-weight: 400; margin: 0; letter-spacing: .05em; color: var(--ink); }
.czs-x { background: none; border: none; font-size: 22px; color: var(--ink-light); cursor: pointer; padding: 4px; }
.czs-fld { margin-bottom: 13px; }
.czs-fld label { display: block; font-size: 12.5px; color: var(--ink-light); margin-bottom: 5px; }
.czs-fld input, .czs-fld select { width: 100%; font-family: var(--sans); font-size: 15px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); min-height: 44px; }
.czs-fld input:focus, .czs-fld select:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.czs-unit { font-size: 12px; color: var(--ink-light); margin-top: 4px; }
.czs-drawer-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-light); cursor: pointer; padding: 7px 0; }
.czs-drawer-check input { width: 20px; height: 20px; }
.czs-drawer-adv { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.czs-drawer-adv summary { cursor: pointer; font-size: 13px; color: var(--czs-gold-ink); font-weight: 600; list-style: none; }
.czs-drawer-adv summary::-webkit-details-marker { display: none; }
.czs-drawer-note { font-size: 12px; color: var(--ink-light); line-height: 1.7; margin-top: 6px; }
.czs-drawer-danger { margin-top: 18px; }
.czs-drawer-danger .czs-btn { color: var(--brick); border-color: var(--brick); width: 100%; }
.czs-trust-effect { background: var(--cream); border-radius: var(--r-in); padding: 14px 16px; margin-top: 6px; }
.czs-trust-effect .czs-te-h { font-size: 12px; color: var(--teal); font-weight: 600; margin-bottom: 6px; }
.czs-trust-effect p { font-size: 12.5px; color: var(--ink-light); line-height: 1.7; margin: 0; }

/* 浮動控制 */
.czs-hint-bar { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-size: 13px; padding: 9px 18px; border-radius: 999px; opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; box-shadow: var(--shadow); z-index: 6; max-width: 90%; }
.czs-hint-bar.czs-show { opacity: .95; }
.czs-time { position: absolute; left: 16px; bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 16px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow); z-index: 6; }
.czs-time .czs-seg { display: flex; background: var(--cream); border-radius: 999px; padding: 3px; gap: 2px; }
.czs-time .czs-seg button { border: none; background: none; font-family: var(--sans); font-size: 13px; color: var(--ink-light); border-radius: 999px; padding: 6px 13px; cursor: pointer; min-height: 36px; }
.czs-time .czs-seg button.czs-on { background: var(--ink); color: var(--paper); }
.czs-time .czs-tlbl { font-size: 12px; color: var(--ink-light); }
.czs-legend { position: absolute; right: 16px; bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-in); padding: 11px 14px; font-size: 12px; color: var(--ink-light); z-index: 6; line-height: 1.9; box-shadow: var(--shadow); }
.czs-legend b { color: var(--ink); font-weight: 600; }
@media (max-width: 920px) { .czs-legend { display: none; } }

/* 可列印建議書 */
.czs-report-scrim { position: fixed; inset: 0; background: rgba(20, 16, 10, .5); display: none; z-index: 70; overflow-y: auto; padding: 28px 18px; }
.czs-report-scrim.czs-show { display: block; }
.czs-report-wrap { max-width: 780px; margin: 0 auto; }
.czs-report-bar { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 14px; }
.czs-report { background: #fff; color: #1C1A16; border-radius: 8px; padding: 46px 52px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); }
.czs-report h1 { font-family: var(--serif); font-size: 27px; font-weight: 400; letter-spacing: .08em; margin: 0 0 4px; color: #1C1A16; }
.czs-report .czs-rp-sub { color: #8A847A; font-size: 12.5px; margin-bottom: 26px; }
.czs-report h2 { font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: .05em; margin: 26px 0 11px; padding-bottom: 6px; border-bottom: 1px solid #EDE6D6; color: #1C1A16; }
.czs-report p { font-size: 14px; line-height: 1.85; color: #4A4640; margin: 0 0 8px; }
.czs-report ul { margin: 0; padding-left: 18px; }
.czs-report li { font-size: 14px; line-height: 1.8; color: #4A4640; margin-bottom: 5px; }
.czs-rp-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; border-bottom: 1px solid #F5F0E8; color: #4A4640; }
.czs-rp-row .czs-rv { font-family: var(--num); color: #1C1A16; }
.czs-rp-big { font-family: var(--num); font-size: 22px; color: #1C1A16; }
.czs-rp-neg { color: #B03A20; }
.czs-rp-pos { color: #1D6640; }
.czs-rp-foot { margin-top: 30px; padding-top: 15px; border-top: 1px solid #EDE6D6; font-size: 11px; color: #9C9385; line-height: 1.7; }

@media print {
  .cz-topbar, .cz-tabs, .czs-toolbar, .czs-stage { display: none !important; }
  .czs-report-scrim { position: static !important; display: block !important; background: #fff !important; padding: 0 !important; overflow: visible !important; }
  .czs-report-bar { display: none !important; }
  .czs-report { box-shadow: none !important; padding: 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .czs-report h2, .czs-rp-row, .czs-report li { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { .czs-root * { transition: none !important; } }