:root{
    /* ---- Theme tokens (swap these to re-skin) ---- */
    --canvas-w: 1920px;
    --canvas-h: 1080px;
    --rail-w: 360px;            /* left non-probate rail ~19% */
    --header-h: 120px;

    --ink:        #1d2330;
    --ink-soft:   #4a5568;
    --line:       #c7ced9;
    --bg:         #eef1f5;
    --paper:      #ffffff;

    --brand:      #2f6f4f;      /* brand green accent */
    --brand-deep: #1f4d37;
    --brand-tint: #eaf3ee;
    --gold:       #b9912f;

    --will:       #3a6ea5;
    --trust:      #2f6f4f;
    --marital:    #6a4c93;
    --family:     #b9912f;
    --tax:        #b23a48;      /* RESERVED for estate tax — the tax box + the "taxable" ring */
    --outright:   #1d2330;      /* black: outright / not in trust (person, specific gifts) */
    --person:     #4a5568;

    --plat-sig: 4f2ab9c1;       /* build lineage token — keep verbatim, not a color */
    --radius: 14px;
    --shadow: 0 2px 6px rgba(20,30,50,.10), 0 8px 24px rgba(20,30,50,.08);
    --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; height:100%; font-family:var(--font); color:var(--ink); background:#dfe3ea; }

  /* ---------- App chrome ---------- */
  #app{ display:flex; flex-direction:column; height:100vh; }
  #toolbar{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; padding:9px 16px;
    background:#fff; border-bottom:1px solid var(--line); flex:0 0 auto; z-index:20;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
  }
  #toolbar .viewseg{ flex:0 0 auto; }   /* never shrink/clip the Estate Plan / Trust Funding switch */
  /* "Plat." wordmark — the entire logo (no icon/graphic mark). Semi-bold, slightly tightened
     tracking; letters in deep ink, the period alone carries the accent color. System fonts only
     (modern system sans first, generic sans-serif last — the file stays fully self-contained). */
  #toolbar .brand{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size:21px; font-weight:600; letter-spacing:-0.015em; line-height:1;
    margin-right:8px; user-select:none;
  }
  #toolbar .brand .wm-name{ color:var(--ink); }
  #toolbar .brand .wm-dot{ color:var(--brand); }
  /* author-only copyright line. It lives in #toolbar, which is hidden in present mode and in
     exported files, and the PDF deck is built from the boards alone — so it is visible to
     whoever is building the plan and never appears in a client deliverable. */
  #toolbar .tb-copy{ font-size:10px; color:#9aa3b2; white-space:nowrap; margin-left:8px; user-select:none; }
  /* client-screen reveal stepper (shown only while the client window is open, estate board) */
  #toolbar .phase-ctl{ display:inline-flex; align-items:center; gap:4px; }
  #toolbar .phase-ctl button{ padding:6px 9px; font-size:12px; line-height:1; }
  #toolbar #cvPhaseLabel{ font-size:12px; color:var(--ink-soft); min-width:34px; text-align:center; user-select:none; }
  #toolbar .tb-sep{ width:1px; align-self:stretch; background:var(--line); margin:0 4px; }
  #toolbar .tb-check{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-soft); white-space:nowrap; cursor:pointer; }
  #toolbar .tb-check input{ margin:0; cursor:pointer; }
  /* exported standalone files hide the authoring chrome */
  body.exported #toolbar, body.exported #panel{ display:none !important; }
  #toolbar .spacer{ flex:1; }
  select,button{ font-family:var(--font); font-size:14px; }
  button{
    border:1px solid var(--line); background:#fff; color:var(--ink);
    padding:7px 13px; border-radius:9px; cursor:pointer; transition:.12s;
  }
  button:hover{ border-color:var(--brand); color:var(--brand-deep); }
  button.primary{ background:var(--brand); color:#fff; border-color:var(--brand); }
  button.primary:hover{ background:var(--brand-deep); color:#fff; }
  button.toggle.on{ background:var(--brand-tint); border-color:var(--brand); color:var(--brand-deep); font-weight:600; }
  select{ padding:6px 9px; border:1px solid var(--line); border-radius:9px; background:#fff; }

  #main{ flex:1; display:flex; min-height:0; position:relative; }   /* anchors the floating zoom controls */

  /* ---------- Side panel (questionnaire / inspector) ---------- */
  #panel{
    width:320px; flex:0 0 auto; background:#fff; border-right:1px solid var(--line);
    overflow:auto; padding:16px; transition:margin-left .2s;
  }
  #panel.hidden{ margin-left:-320px; }
  #panel h3{ margin:6px 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
  #panel .field{ margin-bottom:11px; }
  #panel label{ display:block; font-size:12px; color:var(--ink-soft); margin-bottom:3px; }
  #panel input[type=text]{ width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
  #panel .hint{ font-size:11px; color:#8a93a3; margin:-2px 0 14px; line-height:1.4; }
  #panel hr{ border:none; border-top:1px solid var(--line); margin:16px 0; }
  .scenario-toggle{ display:flex; gap:6px; }
  .scenario-toggle .scen, .scenario-toggle .tmode{
    flex:1; font-size:12px; padding:7px 6px; border:1px solid var(--line);
    background:#fff; border-radius:8px; cursor:pointer;
  }
  .scenario-toggle .scen.on, .scenario-toggle .tmode.on{ background:var(--brand-tint); border-color:var(--brand); color:var(--brand-deep); font-weight:600; }
  /* multi-candidate role inputs */
  .role-list .role-row{ display:flex; gap:5px; margin-bottom:5px; align-items:center; }
  .role-list .role-row input{ flex:1; }
  .role-list .ord{ font-size:10px; color:#9aa3b2; width:38px; flex:0 0 auto; }
  .role-row.auto input{ background:var(--brand-tint); border-color:var(--brand); color:var(--brand-deep); font-weight:600; }
  .role-row .auto-tag{ font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--brand); width:26px; flex:0 0 auto; }
  label.sf-toggle{ display:inline-flex; align-items:center; gap:5px; float:right; font-size:11px;
    text-transform:none; letter-spacing:0; color:var(--brand-deep); cursor:pointer; margin:0; }
  label.sf-toggle input{ width:auto; margin:0; cursor:pointer; }
  /* role header: name + option toggles in a wrapping flex row (no floats — two floated
     toggles overflowed into the first candidate row and squeezed its input) */
  .role-head{ display:flex; flex-wrap:wrap; align-items:center; column-gap:10px; row-gap:2px; margin-bottom:4px; }
  .role-head label{ display:inline-flex; margin:0; }
  .role-head label:first-child{ flex:1 1 auto; }
  .role-head label.sf-toggle{ float:none; flex:0 0 auto; white-space:nowrap; }
  .role-list .rm,.children-edit .rm{
    flex:0 0 auto; width:26px; height:30px; padding:0; font-size:15px; line-height:1;
    border-radius:7px; color:#b23a48;
  }
  .role-list .add,.children-edit .add{
    font-size:12px; padding:5px 10px; border-radius:7px; border:1px dashed var(--line);
    background:#fafbfc; color:var(--brand-deep); margin-top:2px;
  }
  /* per-spouse fiduciaries: two labeled candidate lists inside one role field */
  .ps-group{ border:1px solid var(--line); border-radius:9px; padding:7px 8px 6px; margin-bottom:7px; background:#fcfdfe; }
  .ps-group .ps-name{ font-size:11px; font-weight:700; color:var(--brand-deep); margin-bottom:5px;
    text-transform:none; letter-spacing:0; }
  .children-edit .child-block{ border:1px solid var(--line); border-radius:9px; padding:8px; margin-bottom:8px; background:#fcfdfe; }
  .children-edit .child-row{ display:flex; gap:5px; margin-bottom:6px; align-items:center; }
  .children-edit .child-row input{ flex:1; }
  .children-edit .cnum{ font-size:10px; color:#9aa3b2; width:26px; flex:0 0 auto; }
  .children-edit .child-share{ display:flex; gap:5px; margin:0 0 6px 26px; }
  .children-edit .child-share input{ flex:1; min-width:0; padding:5px 7px; font-size:12px; border:1px solid var(--line); border-radius:7px; }
  .children-edit .child-scope{ margin:0 0 6px 26px; }
  .children-edit .child-scope select{ width:100%; padding:5px 7px; font-size:12px; border:1px solid var(--line); border-radius:7px; background:#fff; }
  .children-edit .child-ages{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding-left:26px; }
  .children-edit .child-ages input.age{ width:78px; flex:0 0 auto; padding:5px 7px; }
  .children-edit .co-toggle{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--ink-soft); margin:0; cursor:pointer; }
  .children-edit .same-ages{ display:flex; font-size:12px; font-weight:600; color:var(--ink); margin:0 0 10px; }
  .children-edit .child-ages.shared{ padding-left:0; margin-top:4px; border-top:1px dashed var(--line); padding-top:8px; }
  .children-edit .co-toggle input{ width:auto; margin:0; cursor:pointer; }
  #panel .gifts-edit .gift-row{ display:flex; flex-direction:column; gap:5px; padding:8px; margin-bottom:8px;
    border:1px solid var(--line); border-radius:9px; background:#fcfdfe; }
  #panel .gifts-edit .gift-row input{ width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:7px; font-size:13px; }
  #panel .gifts-edit .gift-meta{ display:flex; gap:6px; align-items:center; }
  #panel .gifts-edit .gift-meta select{ flex:1; min-width:0; padding:6px 8px; border:1px solid var(--line); border-radius:7px; font-size:13px; background:#fff; }
  #panel .gifts-edit .rm{ width:30px; height:32px; padding:0; color:#b23a48; flex:0 0 auto; }
  #panel .gifts-edit .add{ font-size:12px; padding:5px 10px; border-radius:7px; border:1px dashed var(--line); background:#fafbfc; color:var(--brand-deep); }
  label.tax-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink); cursor:pointer; margin:0; }
  label.tax-toggle input{ width:auto; margin:0; cursor:pointer; }
  #panel h3.sec{ margin-top:20px; padding-top:14px; border-top:1px solid var(--line); }

  /* Powers-of-Attorney card (pinned top-right of the canvas) */
  .poa-card{
    position:absolute; z-index:6; background:#fff; border:1px solid var(--line);
    border-top:5px solid var(--person); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:11px 14px;
  }
  .poa-card .poa-h{ font-size:16px; font-weight:700; margin-bottom:7px; color:var(--ink); }
  .poa-card .poa-role{ margin-bottom:7px; }
  .poa-card .poa-role .poa-t{ font-size:13px; font-weight:600; }
  .poa-card .poa-role .poa-s{ font-size:11px; color:var(--ink-soft); font-style:italic; }
  .poa-card .poa-role .poa-v{ font-size:13px; margin-top:1px; }
  /* living-will choices, ruled off at the foot of the card */
  .poa-card .poa-lw{ margin-top:8px; padding-top:7px; border-top:1px dashed var(--line); }
  .poa-card .poa-lw .poa-t{ font-size:13px; font-weight:600; margin-bottom:3px; }
  .poa-card .poa-lw ul{ margin:0; padding-left:15px; }
  .poa-card .poa-lw li{ font-size:12px; line-height:1.35; margin-bottom:2px; }

  /* ---------- Stage (scaled canvas) ---------- */
  #stage{
    flex:1; min-width:0; position:relative; overflow:auto;
    background:
      radial-gradient(circle at 1px 1px, rgba(120,135,160,.18) 1px, transparent 0) 0 0 / 26px 26px,
      #dfe3ea;
    display:flex; padding:28px;
  }
  /* #zoomPane is sized by fit() to the SCALED slide (1920s × 1080s), so the stage's native
     scrollbars pan exactly the zoomed-in overflow. margin:auto centers it when it fits
     (flex centering would make the top-left of overflowing content unreachable). */
  #zoomPane{ margin:auto; flex:0 0 auto; }
  #scaler{ transform-origin:0 0; }
  /* floating zoom controls (build mode only) — anchored to #main so they don't scroll with the stage */
  #zoomCtl{
    position:absolute; right:24px; bottom:24px; z-index:40;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px;
    box-shadow:0 4px 14px rgba(20,30,50,.16);
  }
  #zoomCtl button{ width:30px; height:30px; padding:0; font-size:16px; line-height:1; border-radius:7px; }
  #zoomCtl #zoomFit{ font-size:13px; }
  #zoomPct{ font-size:10px; color:var(--ink-soft); user-select:none; }
  body.presenting #zoomCtl, body.exported #zoomCtl{ display:none !important; }
  /* the fold control never reaches a client: not in present mode, not in an exported deck */
  body.presenting .n-collapse, body.exported .n-collapse{ display:none !important; }

  /* ---------- The slide canvas (virtual 1920x1080) ---------- */
  #canvas{
    position:relative; width:var(--canvas-w); height:var(--canvas-h);
    background:var(--paper); border-radius:8px; overflow:hidden;
    box-shadow:0 10px 40px rgba(20,30,50,.25);
  }
  #edgeLayer{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }

  /* header band */
  .slide-header{
    position:absolute; top:0; left:0; right:0; height:var(--header-h);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 36px; border-bottom:3px solid var(--brand); background:#fff; z-index:6;
  }
  .slide-title{ font-size:34px; font-weight:700; color:var(--ink); line-height:1.1; }
  .slide-subtitle{ font-size:19px; color:var(--brand-deep); margin-top:4px; font-weight:500; }
  .slide-logo{ height:74px; max-width:340px; object-fit:contain; }

  /* non-probate rail */
  .rail{
    position:absolute; top:var(--header-h); left:0; bottom:0; width:var(--rail-w);
    background:linear-gradient(180deg,#f6f8fa,#eef1f5); border-right:1px dashed var(--line);
    padding:18px 16px; z-index:4;
  }
  .rail h4{ margin:4px 0 12px; font-size:15px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }
  .rail .asset{
    background:#fff; border:1px solid var(--line); border-left:4px solid var(--gold);
    border-radius:10px; padding:9px 11px; margin-bottom:11px; box-shadow:var(--shadow);
  }
  .rail .asset .a-name{ font-size:15px; font-weight:600; }
  .rail .asset .a-detail{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
  .rail .asset .a-target{ font-size:11px; color:var(--brand-deep); margin-top:5px; font-style:italic; }

  /* nodes */
  .node{
    position:absolute; z-index:5; background:#fff; border:1px solid var(--line);
    border-top:5px solid var(--trust); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:calc(12px * var(--ns,1)) calc(15px * var(--ns,1)); overflow:hidden;
  }
  /* --ns (node scale, default 1) shrinks crowded tiers — set inline by renderNodes */
  .node .n-title{ font-size:calc(18px * var(--ns,1)); font-weight:700; line-height:1.15; margin-bottom:3px; }
  .node .n-sub{ font-size:calc(13px * var(--ns,1)); color:var(--ink-soft); font-style:italic; margin-bottom:calc(7px * var(--ns,1)); }
  .node ul{ margin:0; padding-left:calc(16px * var(--ns,1)); }
  .node li{ font-size:calc(13px * var(--ns,1)); line-height:1.32; margin-bottom:calc(3px * var(--ns,1)); }
  .node .n-badge{
    position:absolute; top:8px; right:10px; width:24px; height:24px; border-radius:50%;
    background:var(--brand); color:#fff; font-size:13px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
  }
  /* SEMANTIC color scheme: blue = revocable · green = irrevocable · purple = charitable ·
     red = outright (not in trust). Family/marital keep their kind names but now read green. */
  .node.kind-will{ border-top-color:var(--will); }
  .node.kind-rev{ border-top-color:var(--will); }
  .node.kind-trust{ border-top-color:var(--trust); }
  .node.kind-marital{ border-top-color:var(--trust); }
  .node.kind-family{ border-top-color:var(--trust); }
  .node.kind-charity{ border-top-color:var(--marital); background:#f9f6fc; }
  .node.kind-tax{ border-top-color:var(--tax); background:#fdf3f4; }
  .node.kind-gift{ border-top-color:var(--outright); background:#f6f7f9; }
  .node.kind-person{ border-top-color:var(--outright); background:#f6f7f9; text-align:center; }
  .node.kind-person .n-title{ font-size:17px; }
  .node .n-tax-amt{ font-size:22px; font-weight:800; color:var(--tax); }
  /* optional explanation link, directly under a box's title */
  .node .desc-link{
    font-size:13px; color:var(--brand-deep); text-decoration:underline; cursor:pointer;
    margin-top:5px; font-weight:600;
  }
  .node .desc-link:hover{ color:var(--brand); }

  /* ---------- per-box fold control ----------
     Sits at the foot of the box. A BUILD-MODE affordance only: the client screen's clone drops
     .build-mode and the print deck hides it explicitly, so the client never sees a control.
     The collapsed box keeps its title and its italic byline — the bullets are what fold away. */
  .node .n-collapse{
    display:none;                                   /* shown only in build mode, below */
    position:absolute; left:0; right:0; bottom:0; margin:0 auto;
    width:100%; height:calc(15px * var(--ns,1));
    padding:0; border:0; border-radius:0 0 var(--radius) var(--radius);
    background:transparent; cursor:pointer;
    font-size:calc(11px * var(--ns,1)); line-height:1; color:var(--ink-soft);
    transition:background .15s ease, color .15s ease;
  }
  #canvas.build-mode .node .n-collapse{ display:block; }
  .node .n-collapse:hover{ background:var(--wash,#eef1f6); color:var(--brand-deep); }
  /* a collapsed box has no bullet list, so leave room for the control instead of the <ul> */
  .node.collapsed{ padding-bottom:calc(17px * var(--ns,1)); }
  #canvas.build-mode .node:not(.collapsed){ padding-bottom:calc(19px * var(--ns,1)); }

  /* "subject to estate tax": a ring nested just inside the box's own border, in the tax red.
     Applied by renderNodes to every box wired to the estate-tax box. */
  .node.taxable::after{
    content:""; position:absolute; inset:3px; pointer-events:none;
    border:2px solid var(--tax); border-radius:calc(var(--radius) - 5px);
  }
  /* tangible-personal-property sidecar: a compact card pinned in the band between the top
     two tiers — kept short so it fits that gap without crowding the diagram */
  .tpp-card{ z-index:5; padding:9px 12px; }
  .tpp-card .n-title{ font-size:15px; }
  /* single centered caption — no list marker (the card inherits .kind-person centering, which
     would otherwise leave the bullet stranded at the far left of centered text) */
  .tpp-card ul{ margin:3px 0 0; padding-left:0; list-style:none; }
  .tpp-card li{ font-size:12.5px; }
  /* tight variant: title and text run together on one line so the card fits a packed diagram */
  .tpp-card.tpp-tight{ padding:6px 11px; }
  .tpp-card.tpp-tight .n-title{ display:inline; font-size:13px; margin:0; }
  .tpp-card.tpp-tight ul{ display:inline; margin:0; padding:0; list-style:none; }
  .tpp-card.tpp-tight li{ display:inline; font-size:12.5px; }
  .tpp-card.tpp-tight li::before{ content:" \2014 "; }

  /* phase reveal animation */
  .phaseable{ opacity:0; transform:translateY(10px) scale(.985); transition:opacity .45s ease, transform .45s ease; }
  .phaseable.shown{ opacity:1; transform:none; }
  path.phaseable{ transform:none; }            /* svg paths animate opacity only */
  #canvas.build-mode .phaseable{ opacity:1; transform:none; }   /* show all while building */

  /* edge labels */
  .edge-label{
    position:absolute; z-index:8; background:#fff; border:1.5px solid var(--line);
    border-radius:6px; padding:2px 7px; font-size:12px; color:var(--ink-soft); font-weight:600;
    transform:translate(-50%,-50%);
  }

  /* phase footer controls */
  #phasebar{
    position:absolute; left:50%; bottom:44px; transform:translateX(-50%);   /* clears the locked footer */
    display:flex; align-items:center; gap:14px; z-index:8;
    background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:999px;
    padding:8px 16px; box-shadow:var(--shadow); backdrop-filter:blur(3px);
  }
  #phasebar .p-label{ font-size:16px; font-weight:600; min-width:230px; text-align:center; }
  #phasebar button{ border-radius:999px; width:38px; height:38px; font-size:18px; padding:0; }
  #phasebar .dots{ display:flex; gap:6px; }
  #phasebar .dot{ width:9px; height:9px; border-radius:50%; background:var(--line); }
  #phasebar .dot.active{ background:var(--brand); }

  /* ===== present-mode page navigation (estate → funding → checklist) ===== */
  #presentNav{ position:absolute; inset:0; pointer-events:none; z-index:30; }
  #presentNav .pg-arrow{
    position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto;
    width:54px; height:54px; border-radius:50%; padding:0; font-size:22px; line-height:1;
    background:rgba(255,255,255,.92); border:1px solid var(--line); box-shadow:var(--shadow);
    color:var(--brand-deep); display:flex; align-items:center; justify-content:center;
  }
  #presentNav .pg-arrow:hover{ background:#fff; border-color:var(--brand); }
  #presentNav .pg-arrow:disabled{ opacity:.3; cursor:default; box-shadow:none; }
  #presentNav .pg-left{ left:18px; }
  #presentNav .pg-right{ right:18px; }
  #pgIndicator{
    position:absolute; top:14px; left:50%; transform:translateX(-50%); pointer-events:auto;
    display:flex; gap:6px; background:rgba(255,255,255,.92); border:1px solid var(--line);
    border-radius:999px; padding:6px 10px; box-shadow:var(--shadow); backdrop-filter:blur(3px);
  }
  #pgIndicator .pg-dot{
    font-size:13px; font-weight:600; color:var(--ink-soft); padding:3px 12px; border-radius:999px;
    cursor:pointer; white-space:nowrap;
  }
  #pgIndicator .pg-dot.active{ background:var(--brand); color:#fff; }
  #pgIndicator .pg-dot:not(.active):hover{ background:var(--brand-tint); color:var(--brand-deep); }

  /* present mode: hide the authoring toolbar for clean recording; keep a minimal exit/full-screen cluster */
  body.presenting #toolbar{ display:none !important; }
  #presentTopbar{
    display:none; position:absolute; top:12px; right:16px; z-index:40; gap:8px;
    opacity:.35; transition:opacity .15s;
  }
  body.presenting #presentTopbar{ display:flex; }
  #presentTopbar:hover{ opacity:1; }
  #presentTopbar button{
    border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--ink);
    padding:6px 12px; border-radius:8px; font-size:13px; box-shadow:var(--shadow); cursor:pointer;
  }
  #presentTopbar button:hover{ border-color:var(--brand); color:var(--brand-deep); }
  body.exported #btnExitPresent{ display:none; }   /* exported presentations have no build mode to return to */

  /* locked slide footer: color key | provided-by byline | Plat. version.
     pointer-events:none = not clickable/selectable — it is not an editable element. */
  .slide-footer{
    position:absolute; left:0; right:0; bottom:0; z-index:6; pointer-events:none;
    display:flex; align-items:center; gap:18px; padding:7px 22px 8px;
    background:rgba(255,255,255,.94); border-top:1px solid var(--line);
    font-size:12px; color:#8a93a3; line-height:1.3;
  }
  .slide-footer .sf-left{ flex:1 1 0; display:flex; min-width:0; }
  .slide-footer .sf-center{ flex:0 1 auto; text-align:center; }
  .slide-footer .sf-right{ flex:1 1 0; text-align:right; white-space:nowrap; }
  .sf-plat{ font-weight:700; color:var(--ink); letter-spacing:-0.01em; }
  .sf-plat .sf-dot{ color:var(--brand); }
  /* semantic color key (footer left slot) */
  .color-legend{ display:inline-flex; flex-wrap:wrap; gap:4px 13px; font-size:11px; color:var(--ink-soft); align-items:center; }
  .color-legend .lg{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
  /* the outline is a fallback: borders print even where background colors are stripped */
  .color-legend .chip{
    width:10px; height:10px; border-radius:3px; flex:0 0 auto;
    box-sizing:border-box; border:1px solid rgba(20,30,50,.35);
  }

  /* ===== view switch ===== */
  .viewseg{ display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
  .viewseg .vseg{ border:none; border-radius:0; padding:7px 13px; background:#fff; }
  .viewseg .vseg.on{ background:var(--brand); color:#fff; }
  .viewseg .vseg:not(.on):hover{ background:var(--brand-tint); }

  /* ===== Trust Funding board ===== */
  #fundBoard{
    position:relative; width:var(--canvas-w); height:var(--canvas-h);
    background:var(--paper); border-radius:8px; overflow:hidden; box-shadow:0 10px 40px rgba(20,30,50,.25);
  }
  .fund-diagram{
    position:absolute; top:var(--header-h); left:0; right:0; bottom:84px;   /* progress bar + footer below */
    display:flex; gap:26px; padding:22px 32px; z-index:3;
  }
  .fund-col{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column;
    background:linear-gradient(180deg,#f7f9fb,#eef2f6); border:1px solid var(--line);
    border-radius:14px; padding:14px;
  }
  .fund-col.drop-hot{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); }
  .fund-col-trust{ background:linear-gradient(180deg,var(--brand-tint),#eef4f0); border-color:#cfe0d6; }
  .fund-col-h{ font-size:21px; font-weight:700; color:var(--ink); margin-bottom:12px; }
  .fund-col-h .col-sub{ display:block; font-size:12px; font-weight:500; color:var(--ink-soft); font-style:italic; }
  .fund-col-body{ flex:1; overflow:hidden; }
  /* crowded flat columns split into two balanced sub-columns (toggled by renderFundDiagram) */
  .fund-col-body.split2{ display:flex; gap:10px; align-items:flex-start; }
  .fund-col-body.split2 .fund-subcol{ flex:1 1 0; min-width:0; }
  .fund-col-total{ margin-top:8px; font-size:14px; font-weight:600; color:var(--brand-deep); text-align:right; }

  /* --fs (funding scale, default 1) shrinks cards to fit when a column overflows; set by fitFundingCards() */
  .asset{
    background:#fff; border:1px solid var(--line); border-left:5px solid var(--gold);
    border-radius:10px; padding:calc(9px * var(--fs,1)) calc(11px * var(--fs,1));
    margin-bottom:calc(10px * var(--fs,1)); box-shadow:var(--shadow);
    cursor:grab; position:relative;
  }
  .asset:active{ cursor:grabbing; }
  .asset.dragging{ opacity:.45; }
  .asset .a-top{ display:flex; align-items:center; gap:calc(8px * var(--fs,1)); }
  .asset .a-name{ font-size:calc(16px * var(--fs,1)); font-weight:600; flex:1; }
  .asset .a-type{ font-size:calc(11px * var(--fs,1)); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
  .asset .a-val{ font-size:calc(13px * var(--fs,1)); color:var(--brand-deep); font-weight:600; }
  .asset .a-action{ font-size:calc(12px * var(--fs,1)); color:var(--ink-soft); font-style:italic; margin-top:calc(3px * var(--fs,1)); }
  .asset .a-resp{ font-size:calc(11px * var(--fs,1)); color:#8a93a3; margin-top:calc(2px * var(--fs,1)); }
  .asset.k-trust{ border-left-color:var(--trust); }
  .asset.k-ben{ border-left-color:var(--gold); border-left-style:dashed; }
  .asset .a-check{
    width:24px; height:24px; flex:0 0 auto; border-radius:6px; border:2px solid var(--line);
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; color:#fff;
    background:#fff;
  }
  .a-check{
    width:24px; height:24px; flex:0 0 auto; border-radius:6px; border:2px solid var(--line);
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; color:#fff; background:#fff;
  }
  .a-check.s-inprogress{ border-color:var(--gold); color:var(--gold); }
  .a-check.s-done{ background:var(--brand); border-color:var(--brand); }
  /* trust card grows to nest its funded assets */
  .trust-card{
    background:#fff; border:1px solid #cfe0d6; border-top:5px solid var(--trust);
    border-radius:11px; padding:calc(11px * var(--fs,1)) calc(13px * var(--fs,1));
    margin-bottom:calc(12px * var(--fs,1)); box-shadow:var(--shadow);
  }
  .trust-card.trust-extra{ border-color:#cfe0d6; border-top-color:var(--trust); }   /* other trusts = irrevocable (green) */
  .trust-card.trust-extra .t-name{ color:var(--trust); }
  /* business entities (LLC / family LP) — steel-blue accent + kind chip */
  .trust-card.trust-entity{ border-top-color:#3a6ea5; border-color:#c6d6e8; background:#f6f9fc; }
  .trust-card.trust-entity .t-name{ color:#3a6ea5; }
  .t-kind{ margin-left:8px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:#3a6ea5; background:#e3edf7; border:1px solid #b9cfe5; border-radius:999px; padding:1px 8px; vertical-align:middle; }
  /* extra-trust editor rows in the funding Setup panel */
  #panel .extra-trusts .xt-row{ display:flex; gap:6px; margin-bottom:6px; }
  #panel .extra-trusts .xt-row input{ flex:1; min-width:0; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
  #panel .extra-trusts .xt-kind{ flex:0 0 auto; width:92px; font-size:12px; padding:6px 6px; border:1px solid var(--line); border-radius:8px; background:#fff; }
  #panel .resp-parties .rp-role{ flex:0 0 auto; width:122px; font-size:12px; padding:6px 6px; border:1px solid var(--line); border-radius:8px; background:#fff; }
  #panel .resp-parties .xt-row input{ flex:1; min-width:0; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
  /* live preview of an asset's funding instruction, in the asset editor */
  #panel .fa-preview{
    padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:#f7f8fa;
    font-size:12.5px; line-height:1.45; color:var(--ink);
  }
  /* funding cautions: the will-based note in the trust column, and the beneficiary-deed flag */
  .fund-caution{
    margin-top:10px; padding:8px 10px; border:1px dashed var(--tax); border-radius:9px;
    background:#fdf5f6; color:var(--ink); font-size:12px; line-height:1.4; cursor:pointer;
  }
  .fund-caution .fc-mark, .cl-caution .fc-mark{ color:var(--tax); font-weight:700; margin-right:3px; }
  .cl-caution{
    margin:0 0 12px; padding:9px 12px; border:1px dashed var(--tax); border-radius:9px;
    background:#fdf5f6; font-size:13px; line-height:1.45;
  }
  .deed-warn{ color:var(--tax); font-weight:700; cursor:help; }
  #fundDiagram .deed-warn{ cursor:pointer; }

  /* description editor: free-text body for a box's explanation */
  #panel textarea{
    width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
    font-family:var(--font); font-size:13px; line-height:1.45; color:var(--ink); resize:vertical;
  }
  /* living-will rows in Setup: a small caption above each free-text line */
  #panel .lw-row{ margin-bottom:6px; }
  #panel .lw-row .lw-lab{ display:block; font-size:11px; color:var(--ink-soft); margin-bottom:2px; }
  #panel .extra-trusts .add{ font-size:12px; padding:5px 10px; border-radius:7px; border:1px dashed var(--line); background:#fafbfc; color:var(--brand-deep); white-space:nowrap; }
  #panel .extra-trusts .rm{ width:26px; height:34px; padding:0; color:#b23a48; flex:0 0 auto; }
  .trust-card .t-name{ font-size:calc(17px * var(--fs,1)); font-weight:700; color:var(--brand-deep); }
  .trust-card .t-empty{ font-size:calc(12px * var(--fs,1)); color:#9aa3b2; font-style:italic; margin-top:calc(8px * var(--fs,1)); }
  .trust-assets{ margin-top:calc(9px * var(--fs,1)); display:flex; flex-direction:column; gap:calc(7px * var(--fs,1)); }
  .trust-asset{
    display:flex; align-items:center; gap:calc(7px * var(--fs,1)); background:#fff; border:1px solid var(--line);
    border-left:4px solid var(--trust); border-radius:8px; padding:calc(6px * var(--fs,1)) calc(9px * var(--fs,1)); cursor:grab; font-size:calc(13px * var(--fs,1));
  }
  .trust-asset:active{ cursor:grabbing; }
  .trust-asset.dragging{ opacity:.45; }
  .trust-asset .a-check{ width:20px; height:20px; font-size:13px; }
  .trust-asset .ta-name{ flex:1; font-weight:600; min-width:0; }
  .trust-asset .ta-name .half{ font-size:11px; color:var(--gold); font-weight:700; }
  .trust-asset .ta-val{ font-size:12px; color:var(--brand-deep); font-weight:600; }
  .assign{ font-size:11px; padding:3px 8px; border-radius:6px; border:1px solid var(--line);
    background:#fff; color:var(--brand-deep); cursor:pointer; white-space:nowrap; }
  .assign:hover{ border-color:var(--brand); }
  .empty-hint{ font-size:13px; color:#9aa3b2; font-style:italic; padding:8px 4px; }

  #benLayer{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; }
  /* funding cards are click-to-edit (Elements) */
  #fundDiagram .el-selectable:hover{ box-shadow:0 0 0 2px var(--brand-tint), var(--shadow); }
  #fundDiagram .asset.el-selected, #fundDiagram .trust-asset.el-selected, #fundDiagram .trust-card.el-selected{
    outline:3px solid var(--brand); outline-offset:2px;
  }

  .fund-progress{
    position:absolute; left:0; right:0; bottom:30px; height:54px; display:flex; align-items:center;   /* sits above the locked footer */
    justify-content:space-between; padding:0 32px; border-top:1px solid var(--line);
    background:#fff; font-size:15px; color:var(--ink); z-index:4;
  }
  .fund-progress .prog-bar{ flex:1; height:8px; margin:0 18px; background:var(--line); border-radius:5px; overflow:hidden; }
  .fund-progress .prog-fill{ height:100%; background:var(--brand); width:0%; transition:width .25s; }

  /* checklist */
  .fund-checklist{
    position:absolute; top:var(--header-h); left:0; right:0; bottom:84px; overflow:auto; padding:24px 36px; z-index:3;   /* progress bar + footer below */
  }
  .fund-checklist table{ width:100%; border-collapse:collapse; font-size:15px; }
  .fund-checklist th{
    text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);
    border-bottom:2px solid var(--brand); padding:8px 10px;
  }
  .fund-checklist td{ padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
  .fund-checklist tr.done td{ color:#9aa3b2; }
  .fund-checklist .cl-trusts{
    margin:0 0 16px; padding:12px 16px; background:var(--brand-tint); border:1px solid #cfe0d6;
    border-left:5px solid var(--brand); border-radius:10px;
  }
  .fund-checklist .cl-trusts-h{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--brand-deep); font-weight:600; margin-bottom:5px; }
  .fund-checklist .cl-trust-name{ font-size:19px; font-weight:700; color:var(--ink); }
  .fund-checklist .cl-pageinfo{ margin-top:12px; text-align:right; font-size:13px; color:var(--ink-soft); font-style:italic; }
  .fund-checklist .cl-check{
    width:24px; height:24px; border-radius:6px; border:2px solid var(--line); cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:15px;
  }
  .fund-checklist .cl-check.s-inprogress{ border-color:var(--gold); color:var(--gold); }
  .fund-checklist .cl-check.s-done{ background:var(--brand); border-color:var(--brand); }
  .fund-checklist .cl-action{ font-weight:600; }

  /* asset entry panel */
  #panel .asset-form .row2{ display:flex; gap:8px; }
  #panel .asset-form .row2 > *{ flex:1; min-width:0; }
  #panel select{ width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font-size:14px; background:#fff; }
  #panel .asset-list .ali{
    display:flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--line);
    border-radius:8px; margin-bottom:6px; font-size:13px;
  }
  #panel .asset-list .ali .ali-name{ flex:1; font-weight:600; }
  #panel .asset-list .ali .ali-bucket{ font-size:11px; color:var(--ink-soft); }
  #panel .asset-list .ali .rm{ width:24px; height:26px; padding:0; color:#b23a48; }

  /* ===== Fiduciary Roles board ===== */
  #fidBoard{
    position:relative; width:var(--canvas-w); height:var(--canvas-h);
    background:var(--paper); border-radius:8px; overflow:hidden; box-shadow:0 10px 40px rgba(20,30,50,.25);
  }
  .fid-body{
    position:absolute; top:var(--header-h); left:0; right:0; bottom:30px;   /* locked footer below */
    padding:22px 44px 26px; display:flex; flex-direction:column; gap:13px; overflow:hidden;
  }
  .fid-card{ background:#fff; border:1px solid var(--line); border-left:5px solid var(--brand);
    border-radius:12px; padding:12px 20px 14px; box-shadow:0 2px 8px rgba(20,30,50,.06); }
  .fid-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:9px; }
  .fid-title{ font-size:20px; font-weight:700; color:var(--ink); }
  .fid-sub{ font-size:12px; color:var(--ink-soft); font-style:italic; }
  .fid-tag{ margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--brand-deep); background:var(--brand-tint); border:1px solid var(--brand); border-radius:999px; padding:2px 11px; }
  .fid-groups{ display:flex; gap:28px; }
  .fid-group{ flex:1; min-width:0; }
  .fid-owner{ font-size:13px; font-weight:700; color:var(--brand-deep); margin-bottom:5px; }
  .fid-slots{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .fid-slot{ display:flex; align-items:center; gap:7px; flex:1 1 0; min-width:150px; }
  .fid-slot.auto, .fid-slot.static{ flex:0 1 auto; min-width:0; }
  .fid-ord{ font-size:11px; color:#9aa3b2; flex:0 0 auto; }
  .fid-slot input{ flex:1; min-width:0; font-size:15px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; }
  .fid-slot .fid-name{ font-size:16px; color:var(--ink); font-weight:600; }
  .fid-slot.auto .fid-name{ color:var(--brand-deep); background:var(--brand-tint);
    border:1px solid var(--brand); border-radius:8px; padding:6px 12px; }
  .fid-auto{ font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--brand); }
  .fid-empty{ font-size:14px; font-style:italic; color:#a08327; background:#fdf6de;
    border:1px dashed #d9b441; border-radius:8px; padding:8px 14px; }
  .fid-add{ flex:0 0 auto; width:30px; height:34px; border-radius:8px; border:1px dashed var(--line);
    background:#fafbfc; color:var(--brand-deep); font-size:16px; cursor:pointer; }
  .fid-hint{ font-size:12px; color:var(--ink-soft); font-style:italic; margin-top:auto; }

  /* ---------- PDF / print export ---------- */
  @media screen { #printDeck{ display:none; } }
  @media print {
    @page { size: 1280px 720px; margin: 0; }          /* 16:9 pages matching the slides */
    html, body { margin:0; padding:0; background:#fff; }
    body.printing #app { display:none !important; }     /* hide the live app while printing */
    body.printing #printDeck { display:block; }
    /* Chrome drops background colors when printing unless the page opts in. Without this the
       footer color key prints as bare labels, and the tax/charitable tints, the funding column
       shading and highlighted bullets all vanish. */
    #printDeck, #printDeck *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .print-page {
      width:1280px; height:720px; overflow:hidden; position:relative; background:#fff;
      page-break-after:always; break-after:page;
    }
    .print-page:last-child { page-break-after:auto; break-after:auto; }
    /* each cloned 1920x1080 slide scaled to fill a 1280x720 page */
    .print-slide { transform:scale(.66667); transform-origin:top left; box-shadow:none !important; border-radius:0 !important; }
    /* the fold control is an editing affordance — never print it */
    .print-slide .n-collapse{ display:none !important; }
  }

  /* PDF appendix: one page per explanation, linked from the diagram and back again.
     Sized as a full 1920×1080 slide so the print rule's .print-slide scaling applies unchanged. */
  .appendix-slide{
    width:1920px; height:1080px; position:relative; background:#fff; box-sizing:border-box;
    padding:110px 150px 96px; font-family:var(--font);
  }
  .appendix-slide .ap-title{ font-size:44px; font-weight:700; color:var(--ink); margin-bottom:28px; }
  .appendix-slide .ap-body{ font-size:22px; line-height:1.55; color:var(--ink); max-width:1520px; }
  .appendix-slide .ap-body p{ margin:0 0 18px; }
  /* long explanations tighten rather than run off the page */
  .appendix-slide.ap-dense .ap-body{ font-size:18px; line-height:1.5; }
  .appendix-slide.ap-dense .ap-body p{ margin:0 0 14px; }
  /* PDF-only: the printed stand-in for a box's explanation link. Deliberately NOT styled as a
     link — nothing is clickable in a printed PDF, so it reads as a cross-reference. */
  .desc-ref{ font-size:12px; font-style:italic; color:var(--ink-soft); margin-top:5px; line-height:1.3; }
  .appendix-slide .ap-label{
    position:absolute; top:52px; left:150px;
    font-size:16px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  }
  .appendix-slide .ap-from{
    position:absolute; left:150px; bottom:104px; font-size:18px; color:var(--ink-soft); font-style:italic;
  }

  /* ---------- Elements editor ---------- */
  #canvas.build-mode .node.el-selectable{ cursor:pointer; }
  #canvas.build-mode .node.el-selectable:hover{ box-shadow:0 0 0 2px var(--brand-tint), var(--shadow); }
  #canvas.build-mode .node.el-selected{ outline:3px solid var(--brand); outline-offset:2px; }
  /* non-probate rail cards + slide logo are selectable too */
  #canvas.build-mode .rail .asset.el-selectable{ cursor:pointer; }
  #canvas.build-mode .rail .asset.el-selectable:hover{ box-shadow:0 0 0 2px var(--brand-tint), var(--shadow); }
  #canvas.build-mode .rail .asset.el-selected{ outline:3px solid var(--brand); outline-offset:2px; }
  #canvas.build-mode .slide-logo.el-selectable{ cursor:pointer; border-radius:6px; }
  #canvas.build-mode .slide-logo.el-selectable:hover{ outline:2px solid var(--brand-tint); outline-offset:3px; }
  #canvas.build-mode .slide-logo.el-selected{ outline:3px solid var(--brand); outline-offset:3px; }
  /* header title block is selectable too */
  #canvas.build-mode #slHeadText.el-selectable{ cursor:pointer; border-radius:8px; }
  #canvas.build-mode #slHeadText.el-selectable:hover{ outline:2px solid var(--brand-tint); outline-offset:4px; }
  #canvas.build-mode #slHeadText.el-selected{ outline:3px solid var(--brand); outline-offset:4px; }
  .logo-preview{ display:flex; align-items:center; justify-content:center; padding:14px;
    background:#f4f6f8; border:1px solid var(--line); border-radius:10px; }
  .logo-preview img{ max-width:100%; max-height:90px; object-fit:contain; }
  .elem-add{ font-size:12px; padding:6px 12px; border-radius:8px; border:1px dashed var(--line);
    background:#fafbfc; color:var(--brand-deep); }
  .elem-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--brand); margin:-2px 0 12px; font-weight:600; }
  .elem-empty{ margin-top:10px; }
  #panel label .opt{ text-transform:none; letter-spacing:0; color:#9aa3b2; }
  #panel code{ background:#f0f2f5; padding:1px 4px; border-radius:4px; font-size:11px; }
  .elem-bullets .elem-brow{ display:flex; align-items:center; gap:5px; margin-bottom:6px; }
  .elem-bullets .elem-brow input{ flex:1; min-width:0; }
  .elem-bmove{ display:flex; flex-direction:column; gap:2px; flex:0 0 auto; }
  .elem-bmove .bmv{ width:22px; height:15px; padding:0; font-size:9px; line-height:1; border-radius:5px; color:var(--ink-soft); }
  .elem-bmove .bmv:disabled{ opacity:.3; cursor:default; }
  .elem-bullets .rm{ flex:0 0 auto; width:26px; height:30px; padding:0; font-size:15px; line-height:1; border-radius:7px; color:#b23a48; }
  .elem-bullets .add{ font-size:12px; padding:5px 10px; border-radius:7px; border:1px dashed var(--line); background:#fafbfc; color:var(--brand-deep); margin:2px 6px 0 0; }
  .elem-bullets .insert-child{ color:var(--gold); }
  /* per-bullet bold / highlight toggles */
  .elem-brow .bfmt{ flex:0 0 auto; width:24px; height:30px; padding:0; font-size:12px; font-weight:700; line-height:1;
    border-radius:6px; border:1px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer; }
  .elem-brow .bfmt.on{ background:var(--brand-tint); border-color:var(--brand); color:var(--brand-deep); }
  .elem-brow .bfmt.hl.on{ background:#fde6a8; border-color:#d9b441; color:#7a5b00; }
  /* highlighted bullet text on the slide (prints & exports as inline markup) */
  .node .hl, .poa-card .hl{ background:#fde6a8; border-radius:3px; padding:0 3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

  /* ---------- element-description overlay (opened by a box's "explanation" link) ---------- */
  .narr-modal{ position:absolute; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; }
  .narr-backdrop{ position:absolute; inset:0; background:rgba(18,28,46,.55); }
  .narr-card{ position:relative; z-index:1; background:#fff; width:min(680px, calc(100% - 72px)); max-height:82%;
    overflow:auto; border-radius:16px; box-shadow:0 28px 80px rgba(15,25,45,.42); padding:32px 36px 34px; }
  .narr-close{ position:absolute; top:14px; right:16px; width:34px; height:34px; border-radius:9px;
    border:1px solid var(--line); background:#fff; font-size:20px; line-height:1; color:var(--ink-soft); cursor:pointer; }
  .narr-close:hover{ background:#f4f6f8; color:var(--ink); }
  .narr-title{ font-family:Georgia, "Times New Roman", serif; font-size:23px; color:var(--brand-deep); margin:0 42px 16px 0; }
  .narr-body p{ font-size:15px; line-height:1.62; color:var(--ink); margin:0 0 13px; }
  .narr-body p:last-child{ margin-bottom:0; }

  /* ---------- "My defaults" modal (first-run + gear ⚙) ---------- */
  #toolbar .gear{ font-size:17px; padding:5px 11px; line-height:1; }
  .prof-modal{ position:absolute; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; }
  .prof-backdrop{ position:absolute; inset:0; background:rgba(18,28,46,.5); }
  .prof-card{ position:relative; z-index:1; background:#fff; width:min(430px, calc(100% - 60px)); max-height:86%;
    overflow:auto; border-radius:14px; box-shadow:0 24px 70px rgba(15,25,45,.4); padding:22px 24px 20px; }
  .prof-title{ font-size:17px; font-weight:700; color:var(--ink); margin:0 34px 12px 0; }
  .prof-card label{ display:block; font-size:12px; color:var(--ink-soft); margin:0 0 3px; }
  .prof-card label .opt{ color:#9aa3b2; }
  .prof-card .field{ margin-bottom:12px; }
  .prof-card input[type=text]{ width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
  .prof-card .hint{ font-size:11px; color:#8a93a3; line-height:1.4; margin:8px 0 0; }
  .prof-card .xt-row{ display:flex; gap:6px; margin-bottom:6px; }
  .prof-card .xt-row input{ flex:1; min-width:0; }
  .prof-card .rp-role{ flex:0 0 auto; width:122px; font-size:12px; padding:6px 6px; border:1px solid var(--line); border-radius:8px; background:#fff; }
  .prof-card .rm{ flex:0 0 auto; width:26px; height:32px; padding:0; font-size:15px; line-height:1; border-radius:7px; color:#b23a48; }
  .prof-card .add{ font-size:12px; padding:5px 10px; border-radius:7px; border:1px dashed var(--line); background:#fafbfc; color:var(--brand-deep); }
  .prof-actions{ display:flex; gap:8px; margin-top:14px; }
  body.presenting #profileModal, body.exported #profileModal{ display:none !important; }
  .elem-scope{ display:flex; gap:6px; margin-bottom:8px; }
  .elem-scope .scope{ flex:1; font-size:12px; padding:7px 6px; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; }
  .elem-scope .scope.on{ background:var(--brand-tint); border-color:var(--brand); color:var(--brand-deep); font-weight:600; }
  .elem-actions{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 6px; }
  .elem-reset{ font-size:12px; padding:6px 12px; border-radius:8px; border:1px solid var(--line); background:#fff; color:#b23a48; }
  .elem-reset:disabled{ opacity:.4; cursor:default; }
  .elem-del{ font-size:12px; padding:6px 12px; border-radius:8px; border:1px solid #e6b3ba; background:#fcecee; color:#b23a48; font-weight:600; }
  .wire-list{ display:flex; flex-direction:column; gap:4px; max-height:172px; overflow:auto;
    border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:#fafbfc; }
  .wire-row{ display:flex; align-items:center; gap:7px; font-size:12px; text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink); cursor:pointer; }
  .wire-row input{ flex:0 0 auto; }
  .box-add-row{ display:flex; gap:8px; margin:10px 0 6px; }
  .box-add-row .box-preset{ flex:1; min-width:0; font-size:12px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:#fff; }
  .box-add-row .elem-add{ flex:0 0 auto; margin:0; }