.itool{ --i-field:#eef2f7; }
[data-theme="dark"] .itool{ --i-field:#1b2638; }

/* ============================================================
   Invoice generator - tool styles (MagpieToolbox DS tokens)
   Readable in light + dark, roomy, with iconed section headers
   and a theme-aware A4 preview.
   ============================================================ */

/* ---------- tool header ---------- */
.itool-head{ padding-block:clamp(2.25rem,5vw,3.75rem) var(--space-7); max-width:1340px; }
.itool-head__cat{ color:var(--cat-money, var(--brand)); font-weight:700; }
.itool-head h1{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.03em;
  font-size:clamp(2.25rem,1.6rem+2.6vw,3.25rem); line-height:1.04; color:var(--text-strong); margin:var(--space-4) 0 var(--space-4); }
.itool-head p{ font-size:var(--text-lg); line-height:1.55; color:var(--text-muted); max-width:54ch; margin:0; }
.itool-badges{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-6); margin:var(--space-6) 0 0; padding:0; }
.itool-badges li{ display:inline-flex; align-items:center; gap:8px; font-size:var(--text-sm); font-weight:600; color:var(--text-muted); }
.itool-badges svg{ width:17px; height:17px; color:var(--brand); flex:0 0 auto; }

/* ---------- tool layout ---------- */
.itool{ padding-bottom:clamp(2.5rem,5vw,4rem); max-width:1340px; }
.itool__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,0.9fr); gap:clamp(1.75rem,3vw,2.75rem); align-items:stretch; }

/* ---------- form panel ---------- */
.ipanel{ display:flex; flex-direction:column; gap:var(--space-5); min-width:0; container-type:inline-size; }
.ifield{ border:1px solid var(--border-default); border-radius:var(--r-frame); background:var(--surface);
  padding:var(--space-6); margin:0; min-width:0; box-shadow:var(--shadow-xs); }

/* section header: colored icon chip + title */
.ifield__head{ display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-5); }
.ifield__head h2{ font-family:var(--font-body); font-size:var(--text-md); font-weight:700; letter-spacing:-0.01em; color:var(--text-strong); margin:0; }
.ifield__ic{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; }
.ifield__ic svg{ width:18px; height:18px; }
.ifield__ic--brand{ background:var(--brand-soft); color:var(--brand); }
.ifield__ic--blue{ background:var(--cat-time-soft, color-mix(in srgb, var(--blue-500) 14%, transparent)); color:var(--blue-500); }
.ifield__ic--violet{ background:var(--cat-estimates-soft, color-mix(in srgb, var(--violet-500) 14%, transparent)); color:var(--violet-500); }
.ifield__ic--teal{ background:var(--brand-soft); color:var(--brand); }
.ifield__ic--amber{ background:var(--cat-email-soft, color-mix(in srgb, var(--warning) 16%, transparent)); color:var(--warning); }
.ifield__ic--slate{ background:color-mix(in srgb, var(--text-muted) 16%, transparent); color:var(--text-muted); }

/* two-up groups: side by side only when the panel is wide enough (container query) */
.ifield-row{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
@container (min-width:520px){ .ifield-row{ grid-template-columns:1fr 1fr; } }

/* inputs */
.ilabel{ display:flex; flex-direction:column; gap:7px; font-size:var(--text-sm); font-weight:600; color:var(--text-muted); margin-top:var(--space-4); }
.ifield .ilabel:first-of-type, .ilabel--full, .igrid-4 .ilabel{ margin-top:0; }
.iinput{ width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:var(--text-md); font-weight:500; color:var(--text-strong);
  background:var(--surface); border:1.6px solid var(--border-strong); border-radius:var(--r-ctrl); padding:10px var(--space-3); min-height:44px;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
textarea.iinput{ min-height:unset; line-height:1.55; resize:vertical; }
.iinput::placeholder{ color:var(--text-subtle); font-weight:400; opacity:.9; }
.iinput:hover{ border-color:var(--text-subtle); }
.iinput:focus{ outline:none; border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.iinput[aria-invalid="true"]{ border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft); }
.igrid-4{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
@container (min-width:520px){ .igrid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
select.iinput{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--space-3) center; padding-right:34px; }

/* ---------- logo upload ---------- */
.ilogo__drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center;
  padding:var(--space-7); border:1.5px dashed var(--border-strong); border-radius:var(--r-frame);
  background:var(--i-field); color:var(--text-muted); cursor:pointer; transition:border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.ilogo__drop:hover, .ilogo__drop:focus-visible, .ilogo__drop.is-over{ outline:none; border-color:var(--brand); background:var(--brand-soft); color:var(--text-strong); }
.ilogo__drop svg{ width:28px; height:28px; color:var(--brand); }
.ilogo__hint{ font-size:var(--text-sm); font-weight:600; color:var(--text-strong); }
.ilink{ color:var(--text-link); text-decoration:underline; }
.ilogo__meta{ font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-subtle); }
.ilogo__viewer{ display:none; align-items:center; gap:var(--space-4); padding:var(--space-3); border:1px solid var(--border-default); border-radius:var(--r-frame); }
.ilogo.has-logo .ilogo__drop{ display:none; }
.ilogo.has-logo .ilogo__viewer{ display:flex; }
.ilogo__thumb{ flex:0 0 auto; width:88px; height:56px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:8px; padding:6px; box-shadow:var(--shadow-xs); }
.ilogo__thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.ilogo__vinfo{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.ilogo__vtitle{ font-size:var(--text-sm); font-weight:700; color:var(--text-strong); }
.ilogo__vdim{ font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-subtle); }
.ilogo__vacts{ display:flex; gap:var(--space-2); flex:0 0 auto; }

/* ---------- line items ---------- */
.iitems__head, .iitem{ display:grid; grid-template-columns:1fr 56px 86px 96px 72px; gap:var(--space-3); align-items:center; }
.iitems__head{ padding:0 var(--space-2) var(--space-3); font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle); }
.iitems__head span:nth-child(2), .iitems__head span:nth-child(3), .iitems__head span:nth-child(4){ text-align:right; }
.iitems__rows{ display:flex; flex-direction:column; gap:var(--space-3); }
.iitem{ animation:irow .22s var(--ease-out); }
@keyframes irow{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.iitem .iinput{ min-height:42px; }
.iitem__num{ text-align:right; font-variant-numeric:tabular-nums; }
.iitem__amt{ font-family:var(--font-mono); font-size:var(--text-sm); font-weight:600; color:var(--text-strong); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.iitem__del{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:1px solid transparent; border-radius:10px;
  background:transparent; color:var(--text-subtle); cursor:pointer; transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.iitem__del svg{ width:16px; height:16px; }
.iitem__del:hover{ background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 30%, transparent); }
#addRow{ margin-top:var(--space-5); }

/* ---------- preview column (theme-aware A4) ---------- */
.ipreview-col{ min-width:0; }
.ipreview-stick{ position:sticky; top:88px; display:flex; flex-direction:column; gap:var(--space-4); }
.ipreview-frame{ background:var(--i-field); border:1px solid var(--border-default); border-radius:var(--r-frame); padding:var(--space-4); overflow:hidden; }
.ipreview{ aspect-ratio:210 / 297; width:min(100%, calc((100vh - 22rem) * 210 / 297)); height:auto; margin-inline:auto; border-radius:8px; box-shadow:var(--shadow-md); overflow:hidden; container-type:inline-size;
  /* paper palette - light by default */
  --pp-bg:#ffffff; --pp-ink:#0b1220; --pp-strong:#0b1220; --pp-mut:#5b6577; --pp-faint:#aab3c2; --pp-line:#e6eaf0; --pp-rule:#0b1220;
  background:var(--pp-bg); color:var(--pp-ink); }
[data-theme="dark"] .ipreview{ --pp-bg:#121a2b; --pp-ink:#e7edf6; --pp-strong:#ffffff; --pp-mut:#9aa7bd; --pp-faint:#5b6882; --pp-line:#283450; --pp-rule:#46537a; }

.inv-doc{ height:100%; display:flex; flex-direction:column; padding:7cqw 7cqw 6cqw; font-family:var(--font-body); color:var(--pp-ink); }
.inv-doc__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:4cqw; }
.inv-doc__logo{ max-width:34%; max-height:11cqw; object-fit:contain; }
.inv-doc__logo--ph{ font-family:var(--font-mono); font-size:2.4cqw; letter-spacing:.12em; text-transform:uppercase; color:var(--pp-faint); border:1px dashed var(--pp-line); border-radius:4px; padding:2cqw 3cqw; }
.inv-doc__title h2{ font-family:var(--font-display); font-weight:700; font-size:6cqw; letter-spacing:-0.02em; margin:0; color:var(--pp-strong); text-align:right; }
.inv-doc__title .inv-num{ font-family:var(--font-mono); font-size:2.7cqw; color:var(--pp-mut); margin-top:1cqw; font-variant-numeric:tabular-nums; text-align:right; }
.inv-doc__parties{ display:flex; justify-content:space-between; gap:4cqw; margin-top:6cqw; }
.inv-party{ max-width:46%; }
.inv-party__k{ font-family:var(--font-mono); font-size:2.2cqw; letter-spacing:.1em; text-transform:uppercase; color:var(--pp-faint); margin-bottom:1cqw; }
.inv-party__name{ font-weight:700; font-size:3.1cqw; color:var(--pp-strong); }
.inv-party__line{ font-size:2.7cqw; line-height:1.45; color:var(--pp-mut); white-space:pre-line; }
.inv-meta{ display:flex; gap:6cqw; margin-top:3cqw; }
.inv-meta div{ font-size:2.5cqw; color:var(--pp-mut); }
.inv-meta b{ color:var(--pp-strong); font-variant-numeric:tabular-nums; }
.inv-table{ margin-top:5cqw; }
.inv-table__h, .inv-row{ display:grid; grid-template-columns:1fr 12cqw 18cqw 20cqw; gap:2cqw; }
.inv-table__h{ font-family:var(--font-mono); font-size:2.1cqw; letter-spacing:.06em; text-transform:uppercase; color:var(--pp-faint); padding-bottom:1.6cqw; border-bottom:1.5px solid var(--pp-line); }
.inv-table__h span:nth-child(n+2), .inv-row span:nth-child(n+2){ text-align:right; }
.inv-row{ font-size:2.7cqw; color:var(--pp-ink); padding:1.8cqw 0; border-bottom:1px solid var(--pp-line); font-variant-numeric:tabular-nums; }
.inv-row__desc{ white-space:normal; word-break:break-word; text-align:left !important; }
.inv-row--empty{ color:var(--pp-faint); }
.inv-totals{ margin-top:3cqw; margin-left:auto; width:54%; }
.inv-trow{ display:flex; justify-content:space-between; font-size:2.7cqw; color:var(--pp-mut); padding:1.1cqw 0; font-variant-numeric:tabular-nums; }
.inv-trow--grand{ margin-top:1.4cqw; padding-top:2cqw; border-top:2px solid var(--pp-rule); font-weight:700; font-size:3.6cqw; color:var(--pp-strong); }
.inv-note{ font-size:2cqw; color:var(--danger); margin-top:1cqw; text-align:right; }
.inv-doc__notes{ margin-top:auto; padding-top:5cqw; }
.inv-doc__notes .inv-party__k{ margin-bottom:1cqw; }
.inv-doc__notes p{ font-size:2.5cqw; line-height:1.5; color:var(--pp-mut); margin:0; white-space:pre-line; }

/* ---------- action bar ---------- */
.iactions{ display:flex; flex-direction:column; align-items:stretch; gap:var(--space-3);
  border:1px solid var(--border-default); border-radius:var(--r-frame); background:var(--surface); padding:var(--space-4) var(--space-5); box-shadow:var(--shadow-xs); }
.iactions__status{ margin:0; font-size:var(--text-sm); color:var(--text-muted); display:flex; align-items:center; gap:8px; min-width:0; }
.iactions__status::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--warning); flex:0 0 auto; }
.iactions.is-ready .iactions__status{ color:var(--success); font-weight:600; }
.iactions.is-ready .iactions__status::before{ background:var(--success); }
.iactions__dl{ width:100%; justify-content:center; font-size:var(--text-md); padding:13px 18px; }
.iactions__dl svg{ width:18px; height:18px; }
.iactions__sub{ display:flex; gap:var(--space-3); }
.iactions__sub .btn{ flex:1; justify-content:center; }
.iactions__btns{ display:flex; gap:var(--space-3); flex:0 0 auto; flex-wrap:wrap; }

/* ---------- editorial content (breathing room) ---------- */
.iprose{ padding-block:clamp(3.5rem,7vw,5.5rem); max-width:var(--container-narrow, 760px); }
.iprose__intro .eyebrow{ display:block; margin-bottom:var(--space-4); }
.iprose h2{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.025em; font-size:var(--text-2xl); color:var(--text-strong); margin:clamp(3rem,6vw,4.5rem) 0 var(--space-5); }
.iprose__intro h2{ margin-top:0; }
.iprose p{ font-size:var(--text-md); line-height:1.75; color:var(--text-body); margin:0 0 var(--space-5); }
.ifeatures{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); margin-top:var(--space-8); }
.ifeature{ border:1px solid var(--border-default); border-radius:var(--r-frame); background:var(--surface); padding:var(--space-6); box-shadow:var(--shadow-xs); }
.ifeature h3{ font-family:var(--font-body); font-size:var(--text-md); font-weight:700; color:var(--text-strong); margin:0 0 var(--space-2); }
.ifeature p{ font-size:var(--text-sm); line-height:1.6; color:var(--text-muted); margin:0; }
.isteps{ list-style:none; padding:0; margin:var(--space-7) 0 0; display:flex; flex-direction:column; gap:var(--space-6); }
.isteps li{ display:flex; gap:var(--space-4); align-items:flex-start; }
.isteps__n{ flex:0 0 auto; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-pill);
  background:var(--brand-soft); color:var(--brand); font-family:var(--font-mono); font-weight:600; font-size:var(--text-sm); }
.isteps h3{ font-family:var(--font-body); font-size:var(--text-md); font-weight:700; color:var(--text-strong); margin:5px 0 6px; }
.isteps p{ font-size:var(--text-sm); line-height:1.6; color:var(--text-muted); margin:0; }
.ifaq{ margin-top:var(--space-7); display:flex; flex-direction:column; gap:var(--space-3); }
.ifaq details{ border:1px solid var(--border-default); border-radius:var(--r-frame); background:var(--surface); padding:var(--space-5) var(--space-6); box-shadow:var(--shadow-xs); }
.ifaq summary{ font-weight:700; color:var(--text-strong); cursor:pointer; list-style:none; }
.ifaq summary::-webkit-details-marker{ display:none; }
.ifaq p{ margin:var(--space-3) 0 0; font-size:var(--text-sm); line-height:1.65; color:var(--text-muted); }

/* ---------- toast ---------- */
.itoast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(8px); z-index:60;
  background:var(--surface-inverse, #0b1220); color:var(--text-on-dark, #fff); font-size:var(--text-sm); font-weight:600;
  padding:10px var(--space-5); border-radius:var(--radius-pill); box-shadow:var(--shadow-lg); opacity:0; transition:opacity var(--dur-base), transform var(--dur-base); }
.itoast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- responsive ---------- */
@media (max-width:920px){
  .itool__grid{ grid-template-columns:1fr; }
  .ipreview-col{ order:-1; }
  .ipreview-stick{ position:static; }
  .ipreview{ max-width:520px; margin:0 auto; }
}
@media (max-width:560px){
  .ifeatures{ grid-template-columns:1fr; }
  .iitems__head{ display:none; }
  .iitem{ position:relative; grid-template-columns:1fr 1fr; gap:var(--space-3); padding:var(--space-4); border:1px solid var(--border-default); border-radius:var(--r-ctrl); background:var(--i-field); }
  .iitem .iitem__descwrap{ grid-column:1 / -1; }
  .iitem__amt{ grid-column:1 / -1; text-align:left; padding-top:4px; }
  .iitem__del{ position:absolute; top:6px; right:6px; }
}
@media (prefers-reduced-motion: reduce){ .iitem{ animation:none; } }

/* dark-mode field surfaces (explicit, theme-scoped - reliable) */
[data-theme="dark"] .iinput{ background:#18233a; border-color:#3a486b; }
[data-theme="dark"] .iinput::placeholder{ color:#6b7890; }
[data-theme="dark"] .iinput:focus{ background:#212e44; }
[data-theme="dark"] .ilogo__drop{ background:#1b2638; }
[data-theme="dark"] .ipreview-frame{ background:#141d2e; }

/* custom searchable currency dropdown */
.icombo{ position:relative; }
.icombo__btn{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; text-align:left; cursor:pointer; font-weight:500; }
#curLabel{ display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.icombo__sym{ flex:0 0 auto; min-width:1.3em; text-align:center; font-family:var(--font-mono); font-weight:700; color:var(--brand); }
.icombo__txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); font-weight:600; letter-spacing:.02em; }
.icombo__chev{ color:var(--text-subtle); flex:0 0 auto; transition:transform var(--dur-fast) var(--ease-out); }
.icombo__btn[aria-expanded="true"] .icombo__chev{ transform:rotate(180deg); }
.icombo__pop{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; background:var(--surface); border:1.5px solid var(--border-strong); border-radius:var(--r-ctrl); box-shadow:var(--shadow-lg); padding:8px; }
.icombo__search{ width:100%; box-sizing:border-box; font:inherit; font-size:var(--text-sm); color:var(--text-strong); background:var(--surface); border:1.5px solid var(--border-strong); border-radius:var(--r-ctrl); padding:9px 10px; margin-bottom:6px; }
.icombo__search::placeholder{ color:var(--text-subtle); }
.icombo__search:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
[data-theme="dark"] .icombo__search{ background:#18233a; border-color:#3a486b; }
.icombo__list{ list-style:none; margin:0; padding:0; max-height:248px; overflow:auto; scrollbar-width:none; -ms-overflow-style:none; }
.icombo__list::-webkit-scrollbar{ width:0; height:0; display:none; }
.icombo__opt{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:var(--text-sm); color:var(--text-muted); }
.icombo__opt .sym{ flex:0 0 auto; min-width:1.4em; text-align:center; font-family:var(--font-mono); font-weight:700; color:var(--brand); }
.icombo__opt .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.icombo__opt .code{ font-family:var(--font-mono); font-weight:600; color:var(--text-strong); min-width:3.4em; }
.icombo__opt:hover, .icombo__opt.is-active{ background:var(--brand-soft); color:var(--text-strong); }
.icombo__opt[aria-selected="true"]{ color:var(--brand); }
.icombo__opt[aria-selected="true"] .code{ color:var(--brand); }
.icombo__empty{ padding:12px; font-size:var(--text-sm); color:var(--text-muted); text-align:center; }

.iitem__del{ width:34px; height:34px; }
.iitem__acts{ display:flex; gap:2px; justify-content:flex-end; }
.iitem__dup{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--text-subtle); cursor:pointer; transition:background var(--dur-fast), color var(--dur-fast); }
.iitem__dup svg{ width:15px; height:15px; }
.iitem__dup:hover{ background:var(--brand-soft); color:var(--brand); }
.iquick-items{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:var(--space-4); }
.iquick-items__lab{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); }
.iitem-preset{ border:1.5px solid var(--border-strong); background:transparent; border-radius:var(--radius-pill); padding:5px 12px; font-size:var(--text-sm); font-weight:600; color:var(--text-muted); cursor:pointer; transition:var(--transition-colors); }
.iitem-preset:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }

/* ===== custom fields per section + custom sections ===== */
.ifield__addfield{ display:inline-flex; align-items:center; gap:7px; margin-top:var(--space-3); background:transparent; border:none; color:var(--text-link); font:inherit; font-size:var(--text-sm); font-weight:600; cursor:pointer; padding:4px 0; }
.ifield__addfield svg{ width:15px; height:15px; }
.ifield__addfield:hover{ color:var(--brand); }
.ixrow{ display:grid; grid-template-columns:1fr 1fr auto; gap:var(--space-2); margin-top:var(--space-3); align-items:center; }
.ixrow .iinput{ min-height:40px; }
.ix-x{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--text-subtle); cursor:pointer; transition:background var(--dur-fast), color var(--dur-fast); }
.ix-x svg{ width:15px; height:15px; }
.ix-x:hover{ background:var(--danger-soft); color:var(--danger); }
.icustom-secs{ display:flex; flex-direction:column; gap:var(--space-5); }
.icustom-secs:empty{ display:none; }
.iaddsection{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:var(--space-5); border:1.5px dashed var(--border-strong); border-radius:var(--r-frame); background:transparent; color:var(--text-muted); font:inherit; font-size:var(--text-md); font-weight:700; cursor:pointer; transition:var(--transition-colors); }
.iaddsection:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.iaddsection svg{ width:19px; height:19px; }
.icustom-sec__title{ flex:1; min-width:0; font-family:var(--font-body); font-size:var(--text-md); font-weight:700; color:var(--text-strong); background:transparent; border:none; border-bottom:1.5px dashed var(--border-strong); padding:3px 2px 5px; }
.icustom-sec__title::placeholder{ color:var(--text-subtle); font-weight:600; }
.icustom-sec__title:focus{ outline:none; border-bottom-color:var(--brand); }
.icustom-sec__del{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--text-subtle); cursor:pointer; }
.icustom-sec__del svg{ width:16px; height:16px; }
.icustom-sec__del:hover{ background:var(--danger-soft); color:var(--danger); }
.icustom-sec__type{ display:inline-flex; gap:2px; padding:3px; border:1px solid var(--border-default); border-radius:var(--radius-pill); background:rgba(0,0,0,.04); margin-bottom:var(--space-3); }
[data-theme="dark"] .icustom-sec__type{ background:rgba(255,255,255,.05); }
.icustom-sec__type button{ appearance:none; border:none; background:transparent; cursor:pointer; color:var(--text-muted); font:inherit; font-size:var(--text-xs); font-weight:600; padding:6px 13px; border-radius:var(--radius-pill); }
.icustom-sec__type button[aria-pressed="true"]{ background:var(--surface); color:var(--text-strong); box-shadow:var(--shadow-xs); }
.icustom-sec__body textarea.iinput{ margin-top:var(--space-1); }

/* paper render: bottom foot blocks (notes + custom sections) + custom-field rows */
.inv-doc__foot{ margin-top:auto; padding-top:5cqw; display:flex; flex-direction:column; gap:4cqw; }
.inv-doc__fblock .inv-party__k{ margin-bottom:1cqw; }
.inv-doc__fblock p{ font-size:2.5cqw; line-height:1.5; color:var(--pp-mut); margin:0; white-space:pre-line; }
.inv-cf{ display:flex; flex-direction:column; gap:0.8cqw; }
.inv-cf__row{ display:flex; justify-content:space-between; gap:3cqw; font-size:2.6cqw; color:var(--pp-mut); }
.inv-cf__row span:last-child{ color:var(--pp-ink); font-weight:600; text-align:right; }

/* ===== watermark + signature: form controls ===== */
.iswitch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:var(--text-sm); font-weight:600; color:var(--text-strong); user-select:none; }
.iswitch input{ position:absolute; opacity:0; width:0; height:0; }
.iswitch__tk{ width:42px; height:24px; border-radius:999px; background:var(--border-strong); position:relative; transition:background var(--dur-fast); flex:0 0 auto; }
.iswitch__th{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:var(--shadow-xs); transition:transform var(--dur-base) var(--ease-spring,cubic-bezier(.5,1.4,.5,1)); }
.iswitch input:checked + .iswitch__tk{ background:var(--brand); }
.iswitch input:checked + .iswitch__tk .iswitch__th{ transform:translateX(18px); }
.iswitch input:focus-visible + .iswitch__tk{ box-shadow:var(--ring-focus); }
.iwm{ display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-4); }
.iwm:not([hidden]){ animation:isigReveal .26s var(--ease-out); }
.iwm__row{ display:flex; flex-wrap:wrap; gap:var(--space-5); align-items:flex-end; }
.ifgrp{ display:flex; flex-direction:column; gap:7px; }
.ifgrp__l{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); }
.ichips{ display:flex; flex-wrap:wrap; gap:6px; }
.ichip{ border:1.5px solid var(--border-strong); background:transparent; border-radius:var(--radius-pill); padding:6px 13px; font-size:var(--text-sm); font-weight:600; color:var(--text-muted); cursor:pointer; transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast); }
.ichip--sm{ padding:4px 10px; font-size:var(--text-xs); }
.ichip:hover{ border-color:var(--brand); color:var(--brand); }
.ichip.on{ background:var(--brand); color:var(--on-accent,#fff); border-color:var(--brand); }
.iswatches{ display:flex; gap:8px; }
.isw{ width:28px; height:28px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1.5px var(--border-strong); cursor:pointer; padding:0; }
.isw.on{ box-shadow:0 0 0 2px var(--brand); }
#wmOpacity{ width:100%; max-width:280px; accent-color:var(--brand); }
.iwm__panel{ background:var(--surface-sunken); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:var(--space-4); }
.iwm__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-4) var(--space-5); align-items:start; }
.iwm__grid .full{ grid-column:1 / -1; }
.isig-panel{ margin-top:var(--space-4); display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center;
  background:var(--surface-sunken); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:var(--space-4); }
.isig-panel[hidden]{ display:none; }
.isig-panel:not([hidden]){ animation:isigReveal .26s var(--ease-out); }
@keyframes isigReveal{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.isig-2col{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-4); width:100%; }
.isig-2col .ilabel{ margin-top:0; }
@media (prefers-reduced-motion: reduce){ .isig-panel:not([hidden]){ animation:none; } }
.isigpad{ width:100%; height:150px; border:1.5px dashed var(--border-strong); border-radius:var(--radius-md); background:#fff; touch-action:none; cursor:crosshair; display:block; }
.isig-acts{ display:flex; align-items:center; gap:var(--space-3); width:100%; }
.isig-hint{ font-size:var(--text-xs); color:var(--text-subtle); }
.ifilebtn{ position:relative; overflow:hidden; }
.ifilebtn input{ position:absolute; inset:0; opacity:0; cursor:pointer; }

/* ===== watermark + signature: paper render ===== */
.inv-doc{ position:relative; }
.inv-doc > *:not(.inv-wm){ position:relative; z-index:1; }
.inv-wm{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.inv-wm--tile{ display:flex; flex-direction:column; justify-content:center; gap:6cqw; transform:rotate(-30deg) scale(calc(1.5 * var(--wms,1))); transform-origin:center; }
.inv-wm--tile .ln{ white-space:nowrap; font-family:var(--font-display); font-weight:700; font-size:7cqw; letter-spacing:.2em; text-align:center; }
.inv-wm--center{ display:flex; align-items:center; justify-content:center; }
.inv-wm--center span{ font-family:var(--font-display); font-weight:700; font-size:calc(17cqw * var(--wms,1)); letter-spacing:.04em; transform:rotate(-20deg); white-space:nowrap; }
.inv-wm--stamp{ display:flex; align-items:center; justify-content:center; }
.inv-wm--stamp span{ transform:rotate(-13deg); border:0.7cqw solid currentColor; border-radius:2cqw; padding:2cqw 4cqw; font-family:var(--font-display); font-weight:700; font-size:calc(8cqw * var(--wms,1)); letter-spacing:.12em; box-shadow:inset 0 0 0 0.35cqw currentColor; }
.inv-wm--logo{ display:flex; align-items:center; justify-content:center; }
.inv-wm--logo img, .inv-wm--logo svg{ width:calc(54% * var(--wms,1)); height:auto; max-height:calc(54% * var(--wms,1)); object-fit:contain; }
.inv-sig{ margin-top:6cqw; padding-top:2cqw; display:flex; justify-content:flex-end; }
.inv-sig--seal{ color:#db4b5a; justify-content:flex-end; }
.inv-sig--seal .inv-seal{ width:24cqw; height:24cqw; }
.inv-sig__box{ width:46%; text-align:center; }
.inv-sig__ink{ min-height:11cqw; display:flex; align-items:flex-end; justify-content:center; }
.inv-sig__ink img{ max-height:12cqw; max-width:100%; object-fit:contain; }
.inv-sig__hand{ font-family:'Caveat',cursive; font-size:8cqw; line-height:1; color:var(--pp-strong); }
.inv-sig__hand--formal{ font-family:'Dancing Script',cursive; }
/* dark-mode preview: drawn ink is dark-on-dark, so lift it so it stays visible on the dark paper (PDF stays white/dark-ink) */
[data-theme="dark"] .ipreview .inv-sig__img--ink{ filter:invert(1) brightness(1.9); }
.inv-sig__line{ border-top:1.5px solid var(--pp-rule); margin-top:1.5cqw; padding-top:1.2cqw; }
.inv-sig__lbl{ font-family:var(--font-mono); font-size:2cqw; letter-spacing:.08em; text-transform:uppercase; color:var(--pp-faint); }

/* ===== watermark + signature: redesigned editor panels (Gallery, toggle-gated) ===== */
.ifield__head--sw{ align-items:center; margin-bottom:0; }
.ifield__htext{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ifield__head--sw h2{ margin:0; }
.ifield__sub{ font-size:var(--text-xs); color:var(--text-subtle); }
.iswitch--head{ flex:0 0 auto; }

/* animated collapse - folds the controls away when the switch is off */
.ireveal{ display:grid; grid-template-rows:0fr; opacity:0; margin-top:0;
  transition:grid-template-rows var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), margin-top var(--dur-base) var(--ease-out); }
.ireveal__in{ overflow:hidden; min-height:0; display:flex; flex-direction:column; gap:var(--space-5); }
.ipanel-toggle.is-open .ireveal{ grid-template-rows:1fr; opacity:1; margin-top:var(--space-5); }
.ireveal__in .isig-panel{ margin-top:0; }
@media (prefers-reduced-motion: reduce){ .ireveal{ transition:opacity var(--dur-fast); } }

/* visual style thumbnails */
.iwthumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2); }
.iwthumb{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:6px 5px 7px; border:1.5px solid var(--border-default); border-radius:var(--r-ctrl); background:var(--surface); cursor:pointer; transition:border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); }
.iwthumb:hover{ border-color:var(--brand); }
.iwthumb.on{ border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 2.5px color-mix(in srgb,var(--brand) 22%,transparent); }
.iwthumb__n{ font-size:var(--text-2xs); font-weight:600; color:var(--text-muted); }
.iwthumb.on .iwthumb__n{ color:var(--brand); }
.iwthumb__art{ position:relative; width:100%; height:42px; border-radius:5px; overflow:hidden; background:#fff; box-shadow:inset 0 0 0 1px rgba(16,24,38,.08); display:flex; align-items:center; justify-content:center; color:color-mix(in srgb, var(--text-muted) 62%, transparent); }
[data-theme="dark"] .iwthumb__art{ background:#0e1626; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.iwthumb__art b{ font-family:var(--font-display); font-weight:700; line-height:1; white-space:nowrap; }
.iwthumb__art--tile .ta-rot{ display:flex; flex-direction:column; gap:2px; transform:rotate(-20deg) scale(0.84); }
.iwthumb__art--tile b{ font-size:7px; letter-spacing:.08em; line-height:1; }
.iwthumb__art--center b{ font-size:12px; letter-spacing:.02em; transform:rotate(-16deg); }
.iwthumb__art--stamp b{ font-size:8px; letter-spacing:.06em; border:1.5px solid currentColor; border-radius:3px; padding:2px 4px; transform:rotate(-9deg); }
.iwthumb__art--logo svg{ width:auto; height:60%; }

/* text + preset dropdown (single line, never wraps or clips) */
.iwtext{ display:flex; gap:var(--space-3); align-items:center; }
.iwtext .iinput{ flex:1; min-width:0; }
.iwtext .iselect{ flex:0 0 auto; width:auto; min-width:128px; cursor:pointer; }

/* color + opacity side by side */
.iwm-row2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); align-items:start; }
.iwm-row2 .ifgrp{ gap:9px; }
.iwm-row2 .iswatches{ flex-wrap:wrap; gap:10px; padding:3px; }
.isw--custom{ position:relative; padding:0; cursor:pointer; background:conic-gradient(from 90deg,#db4b5a,#d9882b,#15a06b,#2e63e8,#7b5bfb,#db4b5a); }
.ichip--xs{ padding:4px 10px; font-size:var(--text-2xs); font-weight:600; white-space:nowrap; }
#wmSize{ width:100%; max-width:280px; accent-color:var(--brand); }
#wmSizeVal{ color:var(--brand); font-weight:700; }
/* custom color popover (appended to <body>, never clipped) */
.iwmpop{ position:fixed; z-index:80; width:228px; background:var(--surface); border:1.5px solid var(--border-strong); border-radius:var(--r-ctrl); box-shadow:var(--shadow-lg); padding:12px; }
.iwmpop[hidden]{ display:none; }
.iwmpop__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:7px; }
.iwmpop__sw{ width:100%; aspect-ratio:1; border-radius:6px; border:1.5px solid rgba(16,24,38,.12); cursor:pointer; padding:0; transition:transform var(--dur-fast); }
[data-theme="dark"] .iwmpop__sw{ border-color:rgba(255,255,255,.14); }
.iwmpop__sw:hover{ transform:scale(1.12); }
.iwmpop__sw.on{ box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brand); }
.iwmpop__hex{ display:flex; align-items:center; gap:9px; margin-top:11px; padding-top:11px; border-top:1px solid var(--border-default); }
.iwmpop__dot{ width:26px; height:26px; border-radius:7px; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(16,24,38,.18); }
.iwmpop__hexin{ min-height:36px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }
/* adjustments: percent / flat-amount unit toggle */
.iadjf{ display:flex; gap:8px; align-items:stretch; }
.iadjf .iinput{ flex:1; min-width:0; }
.iunit{ display:inline-flex; align-items:stretch; padding:3px; gap:2px; background:var(--surface-sunken); border:1px solid var(--border-default); border-radius:var(--r-ctrl); flex:0 0 auto; }
.iunit button{ min-width:38px; border:none; background:transparent; cursor:pointer; color:var(--text-muted); font:inherit; font-weight:700; font-size:var(--text-sm); border-radius:calc(var(--r-ctrl) - 3px); padding:0 10px; transition:background var(--dur-fast), color var(--dur-fast); }
.iunit button:hover{ color:var(--text-strong); }
.iunit button.on{ background:var(--brand); color:var(--on-accent,#fff); }
#wmOpVal{ color:var(--brand); font-weight:700; }

/* signature method thumbnails */
.imthumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); }
.imthumb{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px 6px; border:1.5px solid var(--border-default); border-radius:var(--r-ctrl); background:var(--surface); color:var(--text-muted); cursor:pointer; transition:border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast); }
.imthumb__ic{ display:inline-flex; }
.imthumb__ic svg{ width:19px; height:19px; }
.imthumb__n{ font-size:var(--text-2xs); font-weight:600; }
.imthumb:hover{ border-color:var(--brand); color:var(--brand); }
.imthumb.on{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand); box-shadow:0 0 0 2.5px color-mix(in srgb,var(--brand) 20%,transparent); }

/* keep everything tidy when the form column gets narrow */
@container (max-width:380px){
  .iwthumbs, .imthumbs{ grid-template-columns:repeat(2,1fr); }
  .iwm-row2{ grid-template-columns:1fr; }
  .iwtext{ flex-wrap:wrap; }
  .iwtext .iselect{ width:100%; min-width:0; }
}