/* Eazy Office: product app, editor, A4 paper, public share/statement pages. Tokens only (paper colours are
   deliberately fixed: a document is printed on white paper whatever the screen theme). */

/* ================================================================ shell */
.office-page .p-app.eo-app { max-width: 1520px; }
.eo-banners:empty { display: none; }
.eo-banners { display: grid; }
.eo-banner {
  display: flex; align-items: center; gap: var(--s-3); padding: 10px clamp(var(--s-4), 3vw, var(--s-6));
  font-size: var(--fs-sm); border-bottom: 1px solid var(--border); background: var(--bg-elevated); color: var(--ink);
}
.eo-banner p { margin: 0; flex: 1; min-width: 0; }
.eo-banner > svg { flex: none; }
.eo-banner--test { background: var(--warn-soft); }
.eo-banner--warn { background: var(--warn-soft); } .eo-banner--warn > svg { color: var(--warn); }
.eo-banner--bad { background: var(--bad-soft); } .eo-banner--bad > svg { color: var(--bad); }
.eo-banner .btn { flex: none; }
.eo-banner-tag {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--warn); color: var(--surface); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.eo-banner-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.eo-side-head { align-items: center; }
.eo-side-logo { width: 40px; height: 40px; object-fit: contain; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--border); padding: 3px; flex: none; }
.eo-side-mono { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: var(--surface-brand); color: var(--on-brand); font-weight: 800; }
.eo-side-foot { margin-top: var(--s-5); padding: var(--s-4) var(--s-3) 0; border-top: 1px solid var(--border); display: grid; gap: 2px; }
.eo-side-plan { margin: 0 0 var(--s-2); font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.eo-side-link { display: flex; align-items: center; gap: var(--s-2); padding: 7px 0; font-size: var(--fs-sm); color: var(--ink-soft); text-decoration: none; }
.eo-side-link:hover { color: var(--primary); }
.eo-side-link svg { color: var(--muted); }
.p-nav-link.is-locked .p-nav-label { color: var(--muted); }
.eo-nav-lock { display: inline-grid; color: var(--muted); }
.p-nav-link.is-active .eo-nav-lock { color: inherit; }
.eo-crumb { margin: 0 0 2px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.eo-h2 { font-size: var(--fs-md); font-weight: 650; margin: 0 0 var(--s-3); letter-spacing: 0; }
.eo-eyebrow { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.eo-stack { display: grid; gap: var(--s-4); }
.eo-stack-sm { display: grid; gap: var(--s-2); }

.eo-loading { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-6) 0; color: var(--muted); font-size: var(--fs-sm); }
.eo-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--primary); animation: eo-spin 800ms linear infinite; flex: none; }
@keyframes eo-spin { to { transform: rotate(360deg); } }

/* full-page states (no workspace, wrong role, public errors) */
.eo-state-wrap { flex: 1 0 auto; display: grid; place-items: center; padding: var(--s-7) var(--s-4); }
.eo-state, .eo-pub-state {
  max-width: 520px; width: 100%; text-align: center; display: grid; justify-items: center; gap: var(--s-3);
  padding: var(--s-7) var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md);
}
.eo-state-icon { width: 60px; height: 60px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); margin-bottom: var(--s-2); }
.eo-state-title { font-size: var(--fs-2xl); margin: 0; }
.eo-state-text { color: var(--muted); margin: 0; max-width: 42ch; }
.eo-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-3); }

/* Editor: the sidebar becomes an icon rail on mid-size screens so the form and A4 preview get the room. */
@media (min-width: 861px) and (max-width: 1439px) {
  .eo-app.is-editor { grid-template-columns: 76px minmax(0, 1fr); }
  .eo-app.is-editor .p-side { padding-inline: var(--s-2); }
  .eo-app.is-editor .p-side-head { justify-content: center; padding-inline: 0; }
  .eo-app.is-editor .p-side-who, .eo-app.is-editor .p-nav-label, .eo-app.is-editor .eo-nav-lock, .eo-app.is-editor .eo-side-foot { display: none; }
  .eo-app.is-editor .p-nav-link { justify-content: center; padding: 11px 0; }
  .eo-app.is-editor .p-main { padding-inline: var(--s-5); }
}

/* ================================================================ home */
.eo-setup .p-card-title { font-size: var(--fs-lg); }
.eo-setup-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-4); }
.eo-progress { width: 180px; max-width: 100%; height: 8px; border-radius: var(--r-pill); background: var(--surface-muted); overflow: hidden; display: block; }
.eo-progress-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--good); border-radius: inherit; transition: width 500ms var(--ease); }
.eo-steps { list-style: none; margin: 0; padding: 0 var(--s-3) var(--s-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 4px; }
.eo-step { display: flex; align-items: flex-start; gap: var(--s-3); padding: 10px var(--s-3); border-radius: var(--r-md); text-decoration: none; color: var(--ink); }
.eo-step:hover { background: var(--bg-elevated); color: var(--ink); }
.eo-step-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex: none; margin-top: 1px; background: var(--surface); }
.is-done .eo-step-check { background: var(--good); border-color: var(--good); color: var(--surface); }
.eo-step-text { display: grid; line-height: 1.35; min-width: 0; }
.eo-step-text strong { font-size: var(--fs-sm); }
.eo-step-text span { font-size: var(--fs-xs); color: var(--muted); }
.is-done .eo-step-text strong { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }

.eo-quick { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.eo-quick-item {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.eo-quick-item:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-1px); color: var(--ink); }
.eo-quick-item > svg:last-child { color: var(--muted); flex: none; }
.eo-quick-icon { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.eo-quick-text { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.eo-quick-text strong { font-size: var(--fs-sm); }
.eo-quick-text span { font-size: var(--fs-xs); color: var(--muted); }
.eo-quick-item.is-locked .eo-quick-icon { background: var(--surface-muted); color: var(--muted); }

.eo-home-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); align-items: start; }
.eo-rlist { list-style: none; margin: calc(var(--s-2) * -1) calc(var(--s-3) * -1); padding: 0; }
.eo-ritem { display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-3); border-radius: var(--r-md); text-decoration: none; color: var(--ink); }
.eo-ritem:hover { background: var(--bg-elevated); color: var(--ink); }
.eo-ritem-icon { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-muted); color: var(--ink-soft); flex: none; }
.eo-ritem-main { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.eo-ritem-main > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eo-ritem-main strong { font-size: var(--fs-sm); }
.eo-ritem-main span { font-size: var(--fs-xs); color: var(--muted); }
.eo-ritem-side { display: grid; justify-items: end; gap: 2px; flex: none; }
.eo-ritem-amt { font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums; }

.eo-usage .p-card-body { display: grid; gap: var(--s-4); }
.eo-meter { display: grid; gap: 6px; }
.eo-meter-top { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); color: var(--ink-soft); }
.eo-meter-top strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.eo-meter-track { display: block; height: 8px; border-radius: var(--r-pill); background: var(--surface-muted); overflow: hidden; }
.eo-meter-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--series-1); border-radius: inherit; }
.eo-meter-fill.is-high { background: var(--warn); }

.eo-mini-upsell { display: flex; gap: var(--s-3); align-items: flex-start; }
.eo-mini-upsell > svg { color: var(--primary); flex: none; margin-top: 2px; }
.eo-mini-upsell p { margin: 4px 0 var(--s-2); font-size: var(--fs-sm); color: var(--muted); }
.eo-allclear { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--good-soft); color: var(--ink); }
.eo-allclear > svg { color: var(--good); flex: none; margin-top: 2px; }
.eo-allclear p { margin: 0; font-size: var(--fs-sm); }
.eo-chasers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.eo-chaser { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.eo-chaser-icon { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--warn-soft); color: var(--warn); flex: none; }
.eo-chaser-icon.is-bad { background: var(--bad-soft); color: var(--bad); }
.eo-chaser-main { display: grid; flex: 1; min-width: 160px; line-height: 1.35; }
.eo-chaser-main strong { font-size: var(--fs-sm); }
.eo-chaser-main span { font-size: var(--fs-xs); color: var(--muted); }
.eo-chaser-actions { display: flex; gap: var(--s-2); margin-left: auto; }
.eo-quote { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-elevated); border-left: 3px solid var(--primary); }
.eo-chaser-preview { margin: 0; white-space: pre-wrap; color: var(--ink); font-size: var(--fs-sm); }

/* locked product / upgrade */
.eo-locked { max-width: 640px; margin: var(--s-4) auto; display: grid; justify-items: center; text-align: center; gap: var(--s-3);
  padding: var(--s-7) var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.eo-locked-icon { width: 64px; height: 64px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--surface-brand); color: var(--on-brand); margin-bottom: var(--s-2); }
.eo-locked-title { margin: 0; font-size: var(--fs-2xl); }
.eo-locked-text { margin: 0; color: var(--ink-soft); max-width: 50ch; }
.eo-locked-list { list-style: none; margin: var(--s-2) 0; padding: 0; display: grid; gap: var(--s-2); text-align: left; }
.eo-locked-list li { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-sm); }
.eo-locked-list svg { color: var(--good); flex: none; }
.eo-locked-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.eo-upgrade-body { display: flex; gap: var(--s-4); align-items: flex-start; }
.eo-upgrade-icon { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.eo-upgrade-msg { color: var(--ink); font-weight: 600; }

/* ================================================================ lists */
.eo-toolbar { align-items: center; }
.p-seg-count.is-bad { color: var(--bad); }
.eo-empty-icon { width: 56px; height: 56px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); margin-bottom: var(--s-2); }
.eo-rowlink { display: grid; line-height: 1.35; text-decoration: none; color: var(--ink); min-width: 0; }
.eo-rowlink strong { overflow-wrap: anywhere; }
.eo-rowlink .p-muted { font-size: var(--fs-xs); }
.eo-rowlink:hover strong, tr.is-clickable:hover .eo-rowlink strong { color: var(--primary); }
.p-table tr.is-overdue { background: color-mix(in srgb, var(--bad-soft) 55%, transparent); }
.p-table tr.is-overdue td.is-primary { box-shadow: inset 3px 0 0 var(--bad); }
.eo-overdue-text { color: var(--bad); font-weight: 650; }
.p-kpi.is-bad .p-kpi-value { color: var(--bad); }
.p-kpi-icon.tone-bad { background: var(--bad-soft); color: var(--bad); }

/* template picker */
.eo-picker-bar { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-end; }
.eo-picker-bar .p-filter-grow { flex: 1; }
.eo-chips { margin-top: calc(var(--s-1) * -1); }
.eo-tpl-count { margin: 0; }
.eo-tpl-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.eo-tpl {
  all: unset; box-sizing: border-box; cursor: pointer; height: 100%; width: 100%; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.eo-tpl:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.eo-tpl:focus-visible { box-shadow: var(--ring); border-color: var(--primary); }
.eo-tpl.is-locked { opacity: .82; }
.eo-tpl-thumb { position: relative; display: grid; gap: 7px; align-content: start; height: 118px; padding: 18px 22px 0; background: var(--surface-muted); border-bottom: 1px solid var(--border); overflow: hidden; }
.eo-tpl-thumb > span:not(.eo-tpl-type) { display: block; background: #fff; border-radius: 3px; }
.eo-tpl-bar { height: 10px; width: 40%; background: var(--primary) !important; opacity: .85; }
.eo-tpl-line { height: 6px; }
.eo-tpl-line.w70 { width: 70%; } .eo-tpl-line.w50 { width: 50%; }
.eo-tpl-table { height: 44px; background: repeating-linear-gradient(#fff 0 10px, #e9e3d4 10px 11px) !important; }
.eo-tpl-para { height: 44px; background: repeating-linear-gradient(#fff 0 6px, transparent 6px 11px) !important; width: 92%; }
.eo-tpl-type { position: absolute; right: 12px; top: 12px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); background: var(--surface); padding: 2px 8px; border-radius: var(--r-pill); }
.eo-tpl-body { display: grid; gap: 6px; padding: var(--s-4); flex: 1; align-content: start; }
.eo-tpl-name { font-size: var(--fs-md); line-height: 1.3; color: var(--ink); }
.eo-tpl-desc { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.eo-tpl-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.eo-tpl-none { grid-column: 1 / -1; }
.eo-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: var(--r-pill); background: var(--neutral-soft); color: var(--ink-soft); white-space: nowrap; }
.eo-tag--ke { background: var(--good-soft); color: var(--good); }
.eo-tag--plan { background: var(--primary-soft); color: var(--primary); }
.eo-tag--plan.is-locked { background: var(--surface-brand); color: var(--on-brand); }
.eo-tag--legal, .eo-tag--warn { background: var(--warn-soft); color: var(--warn); }

/* ================================================================ editor */
.eo-save { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2); padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); background: var(--surface-muted); }
.eo-save.is-good { color: var(--good); background: var(--good-soft); }
.eo-save.is-warn { color: var(--warn); background: var(--warn-soft); }
.eo-save.is-bad { color: var(--bad); background: var(--bad-soft); }

.eo-editor { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
.eo-editor.is-locked { grid-template-columns: minmax(0, 1fr) 340px; }
.eo-edit-tabs { display: none; }
.eo-form-pane { min-width: 0; display: grid; gap: var(--s-4); }
.eo-preview-pane { position: sticky; top: calc(var(--head-h) + var(--s-4)); min-width: 0; display: grid; gap: var(--s-3); }
.eo-preview-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.eo-preview-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.eo-side-pane { min-width: 0; }
.eo-side-stack { display: grid; gap: var(--s-4); }

.eo-form { display: grid; gap: var(--s-4); }
.eo-group { margin: 0; min-width: 0; padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); display: grid; gap: var(--s-4); }
.eo-group-title { padding: 0; font-size: var(--fs-md); font-weight: 650; color: var(--ink); float: left; width: 100%; }
.eo-group-title + * { clear: both; }
.eo-group-desc { margin: calc(var(--s-3) * -1) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.eo-label-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.eo-label-row label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.eo-inline-btn { min-height: 28px !important; padding-inline: 8px !important; font-size: var(--fs-xs) !important; }
.eo-wide { grid-column: 1 / -1; }

.eo-lines { display: grid; gap: var(--s-2); container-type: inline-size; container-name: lines; }
.eo-line { display: grid; grid-template-columns: minmax(0, 1fr) 72px 112px 72px 112px 36px; gap: var(--s-2); align-items: center; }
.eo-line-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: 2px; border-bottom: 1px solid var(--border); }
.eo-line-head .num, .eo-line .num { text-align: right; }
.eo-line-cell { min-width: 0; display: block; }
.eo-line-cell .input { min-height: 40px; padding: 8px 10px; }
.eo-line-qty .input, .eo-line-unit_price .input, .eo-line-discount_pct .input { text-align: right; font-variant-numeric: tabular-nums; }
.eo-line-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eo-line-amt { text-align: right; }
.eo-line-amount { font-weight: 650; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.eo-line-rm { width: 36px; height: 36px; color: var(--muted); }
.eo-line-rm:hover { color: var(--bad); background: var(--bad-soft); }
.eo-lines-foot { display: flex; }
/* Stack each line as a small card whenever the items column is narrow (phones, or the split editor). */
@container lines (max-width: 560px) {
  .eo-line { grid-template-columns: repeat(3, minmax(0, 1fr)) 36px; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elevated); }
  .eo-line.eo-line-head { display: none; }
  .eo-line-description { grid-column: 1 / -1; }
  .eo-line-label { position: static; width: auto; height: auto; clip: auto; display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
  .eo-line-amt { grid-column: 1 / 4; display: flex; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px dashed var(--border); }
  .eo-line-amt .eo-line-label { margin: 0; }
  .eo-line-rm { grid-column: 4; grid-row: 3; align-self: center; }
}
.eo-taxes { display: grid; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.eo-toggles { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.eo-switch .p-switch-text { min-width: 0; color: var(--ink); font-weight: 500; }
.eo-switch[hidden] { display: none; }
.eo-totals { margin-left: auto; width: min(100%, 340px); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-elevated); border: 1px solid var(--border); }
.eo-totals dl { margin: 0; display: grid; gap: 6px; }
.eo-totals dl > div { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); color: var(--ink-soft); }
.eo-totals dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.eo-totals .is-total { padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--border-strong); font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.eo-totals-note { display: flex; align-items: center; gap: 6px; margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--muted); }

.eo-sections { display: grid; gap: var(--s-5); }
.eo-sec { display: grid; gap: 6px; }
.eo-sec-head { font-weight: 650; }
.eo-sec-body { min-height: 88px; line-height: 1.55; }
.eo-ai-btn { color: var(--primary) !important; min-height: 30px !important; padding-inline: 10px !important; font-size: var(--fs-xs) !important; font-weight: 650 !important; }
.eo-ai-btn:hover { background: var(--primary-soft) !important; }
.eo-ai-slot:empty { display: none; }
.eo-ai-ask { display: grid; gap: 6px; padding: var(--s-3); border-radius: var(--r-md); background: var(--primary-soft); }
.eo-ai-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.eo-ai-row .input { flex: 1 1 200px; background: var(--surface); }
.eo-ai-review { border: 1px dashed var(--primary); border-radius: var(--r-md); background: var(--surface); overflow: hidden; animation: eo-rise 200ms var(--ease); }
.eo-ai-label { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px var(--s-3); background: var(--primary-soft); color: var(--primary); font-size: var(--fs-xs); font-weight: 750; letter-spacing: .02em; }
.eo-ai-text { padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); color: var(--ink); max-height: 280px; overflow: auto; }
.eo-ai-text p { margin: 0 0 var(--s-2); white-space: pre-wrap; }
.eo-ai-actions { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--border); background: var(--bg-elevated); }
@keyframes eo-rise { from { opacity: 0; transform: translateY(4px); } }

.eo-restore { align-items: flex-start; }
.eo-restore p { margin: 0; }
.eo-restore-actions { display: flex; gap: var(--s-2); margin-top: var(--s-2); }

.eo-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.eo-issue { display: flex; gap: var(--s-2); align-items: flex-start; padding: 10px var(--s-3); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink); }
.eo-issue > svg { flex: none; margin-top: 2px; }
.eo-issue.is-bad { background: var(--bad-soft); } .eo-issue.is-bad > svg { color: var(--bad); }
.eo-issue.is-warn { background: var(--warn-soft); } .eo-issue.is-warn > svg { color: var(--warn); }
.eo-issue.is-info { background: var(--info-soft); } .eo-issue.is-info > svg { color: var(--info); }

/* share */
.eo-share-seg { width: 100%; }
.eo-share-seg .p-seg-btn { flex: 1; justify-content: center; }
.eo-share-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; justify-content: space-between; }
.eo-share-box { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-elevated); border: 1px solid var(--border); animation: eo-rise 200ms var(--ease); }
.eo-url-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.eo-url { flex: 1 1 220px; font-family: var(--font-mono); font-size: var(--fs-xs) !important; }
.eo-wa { justify-self: start; }
.eo-shares { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.eo-share { display: flex; align-items: center; gap: var(--s-3); padding: 8px 0; border-bottom: 1px solid var(--border); }
.eo-share:last-child { border-bottom: 0; }
.eo-share > svg { color: var(--muted); flex: none; }
.eo-share-main { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.eo-share-main strong { font-size: var(--fs-sm); }
.eo-share-main span { font-size: var(--fs-xs); color: var(--muted); }
.eo-share.is-off { opacity: .6; }

/* side panel */
.eo-sum-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.eo-sum-amt { margin: var(--s-3) 0 0; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.eo-sum .p-meta { margin-top: var(--s-3); }
.eo-more { display: grid; gap: 2px; }
.eo-more-btn { justify-content: flex-start; width: 100%; }
.eo-linked { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.eo-linked a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.eo-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--s-4); border-left: 2px solid var(--border); display: grid; gap: var(--s-3); }
.eo-timeline li { position: relative; display: grid; font-size: var(--fs-sm); line-height: 1.35; }
.eo-timeline li::before { content: ""; position: absolute; left: calc(var(--s-4) * -1 - 6px); top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--surface); }
.eo-timeline time { font-size: var(--fs-xs); color: var(--muted); }
.eo-sub { margin-top: var(--s-4) !important; }
.eo-test-note { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-xs); color: var(--ink-soft); }

/* ================================================================ A4 paper */
.eo-a4 { position: relative; height: var(--h, auto); overflow: hidden; border-radius: 4px; }
.eo-a4-inner { width: 794px; transform: scale(var(--s, 1)); transform-origin: top left; }
.eo-paper {
  --brand: #1d4f7f; --on-brand-doc: #fff; --p-ink: #1b2733; --p-soft: #4a5866; --p-muted: #7a8794; --p-line: #e4e7eb;
  position: relative; width: 794px; min-height: 1123px; padding: 0 0 56px; background: #fff; color: var(--p-ink);
  font-family: var(--font-sans); font-size: 13px; line-height: 1.55; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 40px -12px rgba(16,48,79,.28);
  overflow: hidden; display: flex; flex-direction: column;
}
.eo-paper::before { content: ""; display: block; height: 8px; background: var(--brand); }
.eo-paper-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding: 36px 56px 24px; }
.eo-paper-from { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.eo-paper-logo { max-width: 150px; max-height: 64px; object-fit: contain; flex: none; }
.eo-paper-mono { width: 52px; height: 52px; border-radius: 10px; background: var(--brand); color: var(--on-brand-doc); display: grid; place-items: center; font-weight: 800; font-size: 20px; flex: none; }
.eo-paper-biz { display: grid; font-size: 11.5px; color: var(--p-soft); line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.eo-paper-bizname { font-size: 15px; color: var(--p-ink); margin-bottom: 2px; }
.eo-paper-title { text-align: right; flex: none; }
.eo-paper-type { margin: 0; font-size: 26px; letter-spacing: -0.01em; color: var(--brand); text-transform: uppercase; font-weight: 800; line-height: 1.1; }
.eo-paper-no { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--p-soft); letter-spacing: .04em; }
.eo-paper-meta { display: flex; justify-content: space-between; gap: 32px; margin: 0 56px; padding: 18px 0; border-top: 1px solid var(--p-line); border-bottom: 1px solid var(--p-line); }
.eo-paper-to { display: grid; font-size: 12px; color: var(--p-soft); line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.eo-paper-to strong { font-size: 14px; color: var(--p-ink); }
.eo-paper-k { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px; }
.eo-paper-ph { color: #b0b8c1 !important; font-style: italic; font-weight: 500; }
.eo-paper-dl { margin: 0; display: grid; gap: 4px; align-content: start; font-size: 12px; flex: none; }
.eo-paper-dl > div { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 16px; }
.eo-paper-dl dt { color: var(--p-muted); }
.eo-paper-dl dd { margin: 0; font-weight: 650; text-align: right; color: var(--p-ink); }
.eo-paper-doctitle { margin: 24px 56px 0; font-size: 18px; color: var(--p-ink); letter-spacing: -0.01em; }
.eo-paper-fields { margin: 16px 56px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; font-size: 12px; }
.eo-paper-fields > div { display: grid; }
.eo-paper-fields dt { color: var(--p-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.eo-paper-fields dd { margin: 0; color: var(--p-ink); overflow-wrap: anywhere; }
.eo-paper-sec { margin: 20px 56px 0; }
.eo-paper-sec h4 { margin: 0 0 6px; font-size: 13px; color: var(--brand); letter-spacing: 0; text-transform: none; font-weight: 750; }
.eo-paper-sec p { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--p-ink); }
.eo-paper-lines { margin: 24px 56px 0; width: calc(100% - 112px); border-collapse: collapse; font-size: 12px; }
.eo-paper-lines th { text-align: left; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-brand-doc); background: var(--brand); padding: 9px 10px; font-weight: 700; }
.eo-paper-lines th:first-child { border-radius: 6px 0 0 6px; } .eo-paper-lines th:last-child { border-radius: 0 6px 6px 0; }
.eo-paper-lines td { padding: 10px; border-bottom: 1px solid var(--p-line); vertical-align: top; overflow-wrap: anywhere; color: var(--p-ink); }
.eo-paper-lines .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eo-paper-lines .eo-n { width: 28px; color: var(--p-muted); }
.eo-paper-empty { text-align: center; padding: 20px !important; }
.eo-paper-totals { display: flex; justify-content: flex-end; margin: 14px 56px 0; }
.eo-paper-totals dl { margin: 0; width: 300px; display: grid; gap: 4px; font-size: 12.5px; }
.eo-paper-totals dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 10px; }
.eo-paper-totals dt { color: var(--p-soft); }
.eo-paper-totals dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--p-ink); }
.eo-paper-totals .is-strong { font-weight: 700; }
.eo-paper-totals .is-total { margin-top: 4px; padding: 10px; border-radius: 6px; background: color-mix(in srgb, var(--brand) 9%, #fff); font-size: 15px; font-weight: 800; }
.eo-paper-totals .is-total dt, .eo-paper-totals .is-total dd { color: var(--p-ink); }
.eo-paper-notes p { color: var(--p-soft); }
.eo-paper-pay { margin: 24px 56px 0; padding: 14px 18px; border-radius: 8px; border: 1px solid var(--p-line); border-left: 4px solid var(--brand); background: #fafbfc; }
.eo-paper-pay h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.eo-paper-pay dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; font-size: 12px; }
.eo-paper-pay dl > div { display: flex; justify-content: space-between; gap: 12px; }
.eo-paper-pay dt { color: var(--p-muted); }
.eo-paper-pay dd { margin: 0; font-weight: 700; font-family: var(--font-mono); color: var(--p-ink); }
.eo-paper-foot { margin: auto 56px 0; padding-top: 32px; display: flex; justify-content: space-between; gap: 16px; font-size: 10.5px; color: var(--p-muted); border-bottom: 0; }
.eo-paper-foot { position: absolute; left: 0; right: 0; bottom: 22px; padding: 10px 0 0; border-top: 1px solid var(--p-line); }
.eo-paper-mark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: 150px; font-weight: 900; letter-spacing: .1em; color: rgba(29, 79, 127, .045); transform: rotate(-28deg); }

#eo-print { display: none; }

/* ================================================================ customers */
.eo-cust-search { max-width: 420px; }
.eo-cust-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.eo-cust { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.eo-cust-top { display: flex; gap: var(--s-3); align-items: center; }
.eo-cust-who { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.eo-cust-who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eo-cust-who .p-muted { font-size: var(--fs-xs); }
.eo-cust-owed { flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--warn); background: var(--warn-soft); padding: 2px 8px; border-radius: var(--r-pill); }
.eo-cust-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--ink-soft); }
.eo-cust-contacts li { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.eo-cust-contacts li > svg { color: var(--muted); flex: none; }
.eo-cust-contacts a, .eo-cust-contacts span { overflow-wrap: anywhere; min-width: 0; }
.eo-cust-actions { display: flex; justify-content: flex-end; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border); }

/* ================================================================ reports */
.eo-report-body { display: grid; gap: var(--s-5); }
.eo-chart-data { margin-top: var(--s-3); font-size: var(--fs-sm); }
.eo-chart-data summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.eo-chart-data table { width: 100%; border-collapse: collapse; margin-top: var(--s-2); font-variant-numeric: tabular-nums; }
.eo-chart-data th, .eo-chart-data td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: right; }
.eo-chart-data th[scope="row"], .eo-chart-data thead th:first-child { text-align: left; }
.eo-cbars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.eo-cbar { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; font-size: var(--fs-sm); }
.eo-cbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.eo-cbar-track { height: 12px; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, var(--series-grid) 1px, transparent 1px); }
.eo-cbar-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--series-1); border-radius: 0 4px 4px 0; }
.eo-cbar-val { display: grid; justify-items: end; line-height: 1.25; font-variant-numeric: tabular-nums; }
.eo-cbar-owed { font-size: var(--fs-xs); color: var(--warn); }

/* ================================================================ settings */
.eo-welcome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface-brand); color: var(--on-brand); }
.eo-welcome p { margin: 2px 0 0; color: var(--cream-300); font-size: var(--fs-sm); }
.eo-welcome > div { flex: 1; min-width: 220px; }
.eo-welcome .btn { --btn-fg: var(--on-brand); }
.eo-welcome-icon { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: rgba(255,253,248,.12); flex: none; }
.eo-wizard { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
.eo-wiz-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.eo-wiz-head > div { flex: 1; min-width: 200px; }
.eo-wiz-title { margin: 0; font-size: var(--fs-lg); color: var(--on-brand); }
.eo-wiz-count { font-weight: 650; color: var(--on-brand); }
.eo-wiz-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.eo-wiz-step { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid rgba(255,253,248,.24); background: rgba(255,253,248,.06); color: var(--on-brand); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.eo-wiz-step:hover { background: rgba(255,253,248,.14); }
.eo-wiz-step:focus-visible { outline: 2px solid var(--on-brand); outline-offset: 2px; }
.eo-wiz-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,253,248,.16); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.eo-wiz-step.is-done .eo-wiz-num { background: var(--good, #2f7d5b); color: #fff; }
.eo-wizard .eo-wiz-steps .btn { margin-inline-start: auto; }
.eo-wizard .eo-wiz-steps .btn--secondary { --btn-fg: var(--ink); }
.eo-wizard .eo-wiz-steps .btn--primary { --btn-bg: #fffdf8; --btn-fg: #132a40; --btn-bd: #fffdf8; }
@media (max-width: 640px) { .eo-wiz-steps > li { flex: 1 1 100%; } .eo-wiz-step { width: 100%; } .eo-wizard .eo-wiz-steps .btn { width: 100%; justify-content: center; } }
.eo-settings { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
.eo-settings-form { display: grid; gap: var(--s-4); }
.eo-settings-preview { position: sticky; top: calc(var(--head-h) + var(--s-4)); display: grid; gap: var(--s-3); }
.eo-logo-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.eo-logo-box { width: 132px; height: 72px; border-radius: var(--r-md); border: 1px dashed var(--border-strong); display: grid; place-items: center; background: #fff; overflow: hidden; flex: none; }
.eo-logo-box img { max-width: 116px; max-height: 60px; object-fit: contain; }
.eo-logo-box .p-muted { color: #7a8794; }
.eo-color-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.eo-color-row .eo-color, .field .eo-color { flex: none; inline-size: 48px; min-inline-size: 0; max-inline-size: 48px; width: 48px; height: 44px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.eo-hex { width: 110px !important; font-family: var(--font-mono); text-transform: lowercase; }
.eo-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.eo-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); background: var(--sw); cursor: pointer; box-shadow: 0 0 0 1px var(--border-strong); }
.eo-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.eo-swatch:focus-visible { box-shadow: var(--ring); border-radius: 50%; }
.eo-save-bar { border-radius: var(--r-md); margin-inline: 0; }
.p-dirty.is-saved { color: var(--good); }
.eo-members-limit { margin: 0 0 var(--s-3); }
.eo-members { list-style: none; margin: 0; padding: 0; display: grid; }
.eo-member { display: flex; align-items: center; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--border); }
.eo-member:last-child { border-bottom: 0; }
.eo-member-main { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.eo-member-main > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eo-member-main span { font-size: var(--fs-xs); color: var(--muted); }

/* ================================================================ public pages */
.eo-public { --brand: var(--primary); background: var(--bg); }
.eo-pub { flex: 1 0 auto; }
.eo-pub > .eo-loading { justify-content: center; padding: var(--s-9) var(--s-4); }
.eo-pub-state { margin: var(--s-8) auto; }
.eo-pub-bar { background: var(--brand); color: var(--on-brand-doc, #fff); }
.eo-pub-bar-in { max-width: 1240px; margin: 0 auto; padding: 14px var(--s-4); display: flex; align-items: center; gap: var(--s-3); }
.eo-pub-logo { height: 40px; max-width: 120px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px 6px; }
.eo-pub-mono { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.18); font-weight: 800; }
.eo-pub-who { display: grid; line-height: 1.3; min-width: 0; }
.eo-pub-who strong { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eo-pub-who span { font-size: var(--fs-xs); opacity: .85; }
.eo-pub-grid { max-width: 1240px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-6); display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; }
.eo-pub-panel { position: sticky; top: var(--s-4); display: grid; gap: var(--s-4); padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--brand); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.eo-pub-sum { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.eo-pub-k { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.eo-pub-title { margin: 4px 0 0; font-size: var(--fs-xl); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.eo-pub-amt { margin: 0; display: grid; gap: 2px; }
.eo-pub-amt strong { font-size: var(--fs-3xl); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.eo-pub-dates { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.eo-pub-note { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: var(--fs-xs); color: var(--warn); }
.eo-pub-note svg { flex: none; margin-top: 2px; }
.eo-pub-actions { display: grid; gap: var(--s-2); }
.eo-pub-actions .btn { width: 100%; justify-content: center; }
.eo-public .btn--primary { --btn-bg: var(--brand); --btn-bd: var(--brand); --btn-fg: var(--on-brand-doc, #fff); }
.eo-public .btn--primary:hover { filter: brightness(.94); --btn-bg: var(--brand); --btn-bd: var(--brand); }
.eo-pub-slot:empty { display: none; }
.eo-pub-done { display: flex; gap: var(--s-2); align-items: center; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-muted); font-size: var(--fs-sm); color: var(--ink); }
.eo-pub-done.is-good { background: var(--good-soft); } .eo-pub-done.is-good svg { color: var(--good); }
.eo-pub-done.is-bad { background: var(--bad-soft); } .eo-pub-done.is-bad svg { color: var(--bad); }
.eo-pub-form { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-elevated); border: 1px solid var(--border); animation: eo-rise 200ms var(--ease); }
.eo-pub-row { display: flex; gap: var(--s-2); justify-content: flex-end; flex-wrap: wrap; }
.eo-pub-doc { min-width: 0; }
.eo-pub-powered { text-align: center; font-size: var(--fs-xs); color: var(--muted); padding: var(--s-4) var(--s-4) var(--s-6); margin: 0; }

/* statement */
.eo-st { max-width: 1040px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-6); display: grid; gap: var(--s-5); }
.eo-st-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-5); }
.eo-st-head p { margin: 4px 0 0; }
.eo-st-kpis { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.eo-st-kpi { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); min-width: 140px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.eo-st-kpi span { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.eo-st-kpi strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.eo-st-kpi.is-due { border-top: 3px solid var(--warn); } .eo-st-kpi.is-clear { border-top: 3px solid var(--good); }
.eo-st-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.eo-st-pay { max-width: 480px; }
.eo-st-how { padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--bg-elevated); border: 1px solid var(--border); border-left: 4px solid var(--brand); }
.eo-st-how h2 { font-size: var(--fs-md); margin: 0 0 var(--s-2); }
.eo-st-how ul { margin: 0; font-size: var(--fs-sm); }
.eo-st-print { justify-self: start; }

/* ================================================================ responsive */
@media (max-width: 1180px) {
  .eo-editor, .eo-editor.is-locked { grid-template-columns: minmax(0, 1fr); }
  .eo-edit-tabs { display: inline-flex; justify-self: start; position: sticky; top: calc(var(--head-h) + 52px); z-index: 6; box-shadow: var(--shadow-sm); }
  .eo-editor.is-draft[data-tab="edit"] .eo-preview-pane { display: none; }
  .eo-editor.is-draft[data-tab="preview"] .eo-form-pane { display: none; }
  .eo-preview-pane { position: static; }
  .eo-editor.is-locked .eo-side-pane { order: -1; }
  .eo-settings { grid-template-columns: minmax(0, 1fr); }
  .eo-settings-preview { position: static; order: -1; max-width: 520px; }
}
@media (max-width: 860px) {
  .eo-side-foot { display: none; }
  .eo-pub-grid { grid-template-columns: minmax(0, 1fr); }
  .eo-pub-panel { position: static; }
  .eo-edit-tabs { top: calc(var(--head-h) + 56px); }
}
@media (max-width: 640px) {
  .eo-group { padding: var(--s-4); }
  .eo-totals { width: 100%; }
  .eo-chaser-actions { width: 100%; justify-content: flex-end; }
  .eo-cbar { grid-template-columns: minmax(0, 1fr) auto; }
  .eo-cbar-track { grid-column: 1 / -1; grid-row: 2; }
  .eo-banner { flex-wrap: wrap; }
  .eo-st-kpi { flex: 1 1 120px; min-width: 0; }
  .eo-paper-mark { font-size: 120px; }
  .eo-tpl-thumb { height: 96px; }
}

/* ================================================================ print: only the A4 document */
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; }
  body:has(> #eo-print) > *:not(#eo-print) { display: none !important; }
  #eo-print { display: block !important; }
  #eo-print .eo-paper { width: 210mm; min-height: 297mm; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .eo-paper-mark { color: rgba(29, 79, 127, .06); }
  /* statement page prints as a clean list */
  .eo-public:not(:has(> #eo-print)) .btn, .eo-public:not(:has(> #eo-print)) .eo-pub-powered { display: none !important; }
  .eo-pub-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (prefers-reduced-motion: reduce) { .eo-spinner { animation-duration: 2s; } }
@media (forced-colors: active) { .eo-progress-fill, .eo-meter-fill, .eo-cbar-fill { background: CanvasText; } }