/* ──────────────────────────────────────────────────────────────────────────
   zap-ui theme — DESIGN TOKENS
   These CSS custom properties are the *contract* between the theme and the
   components. Every zap-ui component styles itself with var(--zap-*) only — it
   never hard-codes a colour. So "theming" = swapping these values. Here we swap
   them with [data-theme]; you could also ship multiple .zap-theme-* classes.
   Light is the default; flip data-theme="dark" on the .zap root to re-skin
   instantly (CSS variables cascade — no component re-render).
   ────────────────────────────────────────────────────────────────────────── */
.zap {
  --zap-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --zap-bg:        #ffffff;
  --zap-surface:   #ffffff;
  --zap-elevated:  #f9fafb;
  --zap-text:      #111827;
  --zap-muted:     #9ca3af;
  --zap-border:    #e5e7eb;

  --zap-primary:          #2563eb;
  --zap-primary-contrast: #ffffff;
  --zap-primary-soft:     #eff6ff;

  --zap-danger:  #dc2626;
  --zap-success: #059669;
  --zap-warning: #d97706;

  --zap-radius:    14px;
  --zap-radius-sm: 9px;
  --zap-space:     8px;
  --zap-shadow:    0 1px 2px rgba(17, 24, 39, .04), 0 10px 30px rgba(17, 24, 39, .07);
  --zap-zebra:     #fafafb;

  /* data-viz: categorical series in FIXED order (validated for colour-blind
     separation as a sequence), plus market up/down */
  --zap-chart-1: #2a78d6; --zap-chart-2: #eb6834; --zap-chart-3: #1baf7a; --zap-chart-4: #eda100;
  --zap-chart-5: #e87ba4; --zap-chart-6: #008300; --zap-chart-7: #4a3aa7; --zap-chart-8: #e34948;
  --zap-up:   #089981;
  --zap-down: #e5484d;

  /* code viewer: syntax colours (GitHub-like) */
  --zap-code-bg:   #f8fafc;
  --zap-code-text: #1f2328;
  --zap-code-hl:   rgba(37, 99, 235, .08);
  --zap-code-ln:   #a0a8b4;
  --zap-code-kw:   #cf222e;
  --zap-code-str:  #0a3069;
  --zap-code-num:  #0550ae;
  --zap-code-com:  #6e7781;
  --zap-code-fn:   #8250df;
  --zap-code-type: #953800;
  --zap-code-prop: #0550ae;
  --zap-code-tag:  #116329;
  --zap-code-attr: #0550ae;
  --zap-code-pun:  #57606a;

  color: var(--zap-text);
  background: var(--zap-bg);
  font-family: var(--zap-font);
  -webkit-font-smoothing: antialiased;
}

.zap[data-theme="dark"] {
  --zap-bg:        #0b0f17;
  --zap-surface:   #111827;
  --zap-elevated:  #0f1623;
  --zap-text:      #e5e7eb;
  --zap-muted:     #6b7280;
  --zap-border:    #1f2937;

  --zap-primary:          #3b82f6;
  --zap-primary-contrast: #ffffff;
  --zap-primary-soft:     #172554;

  --zap-danger:  #ef4444;
  --zap-success: #10b981;
  --zap-warning: #f59e0b;

  --zap-shadow:    0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px rgba(0, 0, 0, .5);
  --zap-zebra:     rgba(255, 255, 255, .025);

  --zap-chart-1: #3987e5; --zap-chart-2: #d95926; --zap-chart-3: #199e70; --zap-chart-4: #c98500;
  --zap-chart-5: #d55181; --zap-chart-6: #008300; --zap-chart-7: #9085e9; --zap-chart-8: #e66767;
  --zap-up:   #22ab94;
  --zap-down: #f7525f;

  --zap-code-bg:   #0d1117;
  --zap-code-text: #e6edf3;
  --zap-code-hl:   rgba(56, 139, 253, .14);
  --zap-code-ln:   #56606b;
  --zap-code-kw:   #ff7b72;
  --zap-code-str:  #a5d6ff;
  --zap-code-num:  #79c0ff;
  --zap-code-com:  #8b949e;
  --zap-code-fn:   #d2a8ff;
  --zap-code-type: #ffa657;
  --zap-code-prop: #79c0ff;
  --zap-code-tag:  #7ee787;
  --zap-code-attr: #79c0ff;
  --zap-code-pun:  #9da7b3;
}

/* ── Button ──────────────────────────────────────────────────────────────────
   Every variant paints with three per-button tokens — --btn-c (the colour),
   --btn-fg (text on it), --btn-soft (a wash of it) — so a tone class only
   re-points those three and recolours any variant. */
.zap-btn {
  --btn-c: var(--zap-primary);
  --btn-fg: var(--zap-primary-contrast);
  --btn-soft: var(--zap-primary-soft);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .005em;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
  padding: 10px 16px;
  border-radius: var(--zap-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .1s ease;
}
.zap-btn:active { transform: translateY(1px) scale(.985); }
.zap-btn:focus-visible { outline: 2px solid var(--btn-c); outline-offset: 2px; }
.zap-btn:disabled, .zap-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none; }
.zap-btn.is-loading { opacity: 1; cursor: progress; }

/* tones */
.zap-btn--danger  { --btn-c: var(--zap-danger, #dc2626);  --btn-fg: #fff; --btn-soft: color-mix(in srgb, var(--btn-c) 12%, transparent); }
.zap-btn--success { --btn-c: var(--zap-success, #059669); --btn-fg: #fff; --btn-soft: color-mix(in srgb, var(--btn-c) 12%, transparent); }
.zap-btn--warning { --btn-c: var(--zap-warning, #d97706); --btn-fg: #1c1917; --btn-soft: color-mix(in srgb, var(--btn-c) 14%, transparent); }
.zap-btn--neutral { --btn-c: var(--zap-text);             --btn-fg: var(--zap-bg); --btn-soft: color-mix(in srgb, var(--btn-c) 8%, transparent); }

/* variants */
.zap-btn--primary {
  background-color: var(--btn-c);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
  color: var(--btn-fg);
  border-color: color-mix(in srgb, var(--btn-c) 80%, #000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(16, 24, 40, .14),
              0 2px 6px color-mix(in srgb, var(--btn-c) 22%, transparent);
}
.zap-btn--primary:hover {
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(16, 24, 40, .14),
              0 6px 16px color-mix(in srgb, var(--btn-c) 30%, transparent);
}
.zap-btn--primary:active { filter: brightness(.96); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18); }
.zap-btn--primary[aria-pressed="true"] { filter: brightness(.9); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .25); }

.zap-btn--secondary {
  background: var(--zap-surface);
  color: var(--zap-text);
  border-color: var(--zap-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.zap-btn--secondary:hover { background: var(--zap-elevated); border-color: color-mix(in srgb, var(--zap-text) 22%, var(--zap-border)); }

.zap-btn--soft { background: var(--btn-soft); color: var(--btn-c); }
.zap-btn--soft:hover { background: color-mix(in srgb, var(--btn-c) 20%, transparent); }

.zap-btn--outline { background: transparent; color: var(--btn-c); border-color: color-mix(in srgb, var(--btn-c) 50%, transparent); }
.zap-btn--outline:hover { background: var(--btn-soft); border-color: var(--btn-c); }

.zap-btn--ghost { background: transparent; color: var(--btn-c); border-color: var(--zap-border); }
.zap-btn--ghost:hover { background: var(--btn-soft); }

.zap-btn--plain { background: transparent; color: var(--btn-c); }
.zap-btn--plain:hover { background: var(--btn-soft); }

.zap-btn--link { background: none; color: var(--btn-c); padding-left: 2px; padding-right: 2px; border-radius: 4px; }
.zap-btn--link:hover { text-decoration: underline; text-underline-offset: 3px; }
.zap-btn--link:active { transform: none; }

/* a pressed toggle, in the variants that are not a solid fill */
.zap-btn:not(.zap-btn--primary)[aria-pressed="true"] {
  background: var(--btn-soft); color: var(--btn-c);
  border-color: color-mix(in srgb, var(--btn-c) 55%, transparent);
}

/* sizes and shapes */
.zap-btn--sm { font-size: 13px; padding: 6px 11px; gap: 6px; border-radius: calc(var(--zap-radius-sm) - 2px); }
.zap-btn--lg { font-size: 16px; padding: 13px 22px; gap: 10px; border-radius: calc(var(--zap-radius-sm) + 2px); }
.zap-btn--pill { border-radius: 999px; }
.zap-btn--block { display: flex; width: 100%; }
.zap-btn--icon { padding: 10px; aspect-ratio: 1; }
.zap-btn--icon.zap-btn--sm { padding: 6px; }
.zap-btn--icon.zap-btn--lg { padding: 13px; }

/* parts */
.zap-btn__in { display: inline-flex; align-items: center; gap: inherit; min-width: 0; }
.zap-btn__label { overflow: hidden; text-overflow: ellipsis; }
.zap-btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1em; flex: none; }
.zap-btn__icon svg { width: 1.15em; height: 1.15em; }
.zap-btn__kbd {
  font: inherit; font-size: .78em; font-weight: 600; line-height: 1;
  padding: 3px 5px; margin-right: -4px; border-radius: 5px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
  opacity: .8;
}
.zap-btn__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.45em; height: 1.45em; padding: 0 .4em; margin-right: -6px; box-sizing: border-box;
  border-radius: 999px; font-size: .75em; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--btn-c); color: var(--btn-fg);
}
.zap-btn__badge:empty { display: none; }
.zap-btn--primary .zap-btn__badge { background: rgba(255, 255, 255, .24); color: inherit; }

/* loading: the spinner sits over a hidden label, so the width holds; with a
   loadingText it goes in line before that text instead */
.zap-btn__spin { display: none; }
.zap-btn.is-loading .zap-btn__spin {
  display: block; position: absolute; left: 50%; top: 50%;
  width: 1em; height: 1em; margin: -.5em 0 0 -.5em; box-sizing: border-box;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: zap-btn-spin .7s linear infinite;
}
.zap-btn.is-loading:not(.has-ltext) .zap-btn__in { visibility: hidden; }
.zap-btn.is-loading.has-ltext .zap-btn__spin { position: static; margin: 0; }
.zap-btn.is-loading.has-ltext .zap-btn__icon--l { display: none; }
@keyframes zap-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .zap-btn { transition: none; }
  .zap-btn:active { transform: none; }
  .zap-btn.is-loading .zap-btn__spin { animation-duration: 1.6s; }
}

/* groups */
.zap-btngroup { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zap-btngroup--vertical { flex-direction: column; align-items: stretch; }
.zap-btngroup--attached { gap: 0; flex-wrap: nowrap; }
.zap-btngroup--attached > .zap-btn { border-radius: 0; box-shadow: none; }
.zap-btngroup--attached > .zap-btn:hover, .zap-btngroup--attached > .zap-btn:focus-visible { z-index: 1; }
.zap-btngroup--attached:not(.zap-btngroup--vertical) > .zap-btn + .zap-btn { margin-left: -1px; }
.zap-btngroup--attached:not(.zap-btngroup--vertical) > .zap-btn:first-child { border-radius: var(--zap-radius-sm) 0 0 var(--zap-radius-sm); }
.zap-btngroup--attached:not(.zap-btngroup--vertical) > .zap-btn:last-child { border-radius: 0 var(--zap-radius-sm) var(--zap-radius-sm) 0; }
.zap-btngroup--attached.zap-btngroup--vertical > .zap-btn + .zap-btn { margin-top: -1px; }
.zap-btngroup--attached.zap-btngroup--vertical > .zap-btn:first-child { border-radius: var(--zap-radius-sm) var(--zap-radius-sm) 0 0; }
.zap-btngroup--attached.zap-btngroup--vertical > .zap-btn:last-child { border-radius: 0 0 var(--zap-radius-sm) var(--zap-radius-sm); }
.zap-btngroup--attached > .zap-btn:only-child { border-radius: var(--zap-radius-sm); }
.zap-btngroup--attached > .zap-btn--primary + .zap-btn--primary { border-left-color: color-mix(in srgb, var(--btn-c) 70%, #000); }

/* ── Form controls ───────────────────────────────────────────────────────── */
.zap-field { display: grid; gap: 6px; }
.zap-label { font-size: 12px; font-weight: 600; color: var(--zap-muted); }
.zap-input, .zap-select {
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border-radius: var(--zap-radius-sm);
  border: 1px solid var(--zap-border);
  background: var(--zap-elevated);
  color: var(--zap-text);
}
.zap-input:focus, .zap-select:focus {
  outline: none;
  border-color: var(--zap-primary);
  box-shadow: 0 0 0 3px var(--zap-primary-soft);
}
.zap input[type="checkbox"], .zap input[type="radio"], .zap input[type="range"] {
  accent-color: var(--zap-primary);
}

/* ── Select / multi-select / combobox ────────────────────────────────────── */
.zap-sel { position: relative; min-width: 0; }
.zap-sel__trigger {
  font: inherit;
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 11px;
  border-radius: var(--zap-radius-sm);
  border: 1px solid var(--zap-border);
  background: var(--zap-elevated);
  color: var(--zap-text);
  cursor: pointer;
  text-align: left;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.zap-sel__trigger:hover { border-color: color-mix(in srgb, var(--zap-primary) 55%, var(--zap-border)); }
.zap-sel__trigger:focus-visible, .zap-sel__trigger:focus-within,
.zap-sel.is-open .zap-sel__trigger { border-color: var(--zap-primary); box-shadow: 0 0 0 3px var(--zap-primary-soft); }
.zap-sel.is-disabled .zap-sel__trigger { opacity: .5; cursor: not-allowed; pointer-events: none; }
.zap-sel__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-sel__val.is-placeholder { color: var(--zap-muted); }
.zap-sel__caret { display: inline-flex; color: var(--zap-muted); flex: none; margin-left: auto; transition: transform .22s cubic-bezier(.3, .7, .2, 1), color .15s ease; }
.zap-sel__caret svg { width: 16px; height: 16px; }
.zap-sel.is-open .zap-sel__caret { transform: rotate(180deg); color: var(--zap-primary); }
.zap-sel__clear {
  display: inline-flex; flex: none; padding: 3px; border-radius: 6px; color: var(--zap-muted); cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.zap-sel__clear:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 8%, transparent); }
.zap-sel__clear svg { width: 14px; height: 14px; }
.zap-sel__clear + .zap-sel__caret { margin-left: 0; }

/* the typable part (searchable / editable) sits in the trigger, borderless */
.zap-sel__q.zap-input {
  flex: 1; min-width: 60px; width: auto; padding: 2px 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; outline: none;
}
.zap-sel__q.zap-input:focus { box-shadow: none; }
.zap-sel--search.has-value:not(.zap-sel--multi):not(.is-open) .zap-sel__q::placeholder { color: var(--zap-text); opacity: 1; }
.zap-sel--search .zap-sel__trigger { cursor: text; }

/* chips (multi) */
.zap-sel__chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.zap-sel__chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; box-sizing: border-box;
  padding: 2px 3px 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 20px;
  color: var(--zap-primary); background: var(--zap-primary-soft);
  border: 1px solid color-mix(in srgb, var(--zap-primary) 22%, transparent);
  animation: zap-chip-in .18s cubic-bezier(.3, 1.3, .5, 1);
}
.zap-sel__chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-sel__chip .zap-sel__icon { width: auto; }
.zap-sel__chip-x { display: inline-flex; padding: 2px; border-radius: 999px; cursor: pointer; opacity: .7; transition: opacity .15s ease, background-color .15s ease; }
.zap-sel__chip-x:hover { opacity: 1; background: color-mix(in srgb, var(--zap-primary) 18%, transparent); }
.zap-sel__chip-x svg { width: 12px; height: 12px; }
.zap-sel__chip--more { padding: 2px 8px; color: var(--zap-muted); background: color-mix(in srgb, var(--zap-text) 6%, transparent); border-color: transparent; }
@keyframes zap-chip-in { from { opacity: 0; transform: scale(.6); } }

/* the panel */
.zap-sel__panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--zap-surface);
  border: 1px solid var(--zap-border);
  border-radius: calc(var(--zap-radius-sm) + 2px);
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .22), 0 4px 10px -4px rgba(16, 24, 40, .1);
  overflow: hidden;
}
.zap-sel__panel.is-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
/* wider than the trigger when the options need it (a virtual list keeps the
   trigger's width — its widest row is not always in the document) */
.zap-sel__panel { right: auto; min-width: 100%; width: max-content; max-width: max(100%, min(380px, calc(100vw - 32px))); }
.zap-sel__panel:has(.zap-sel__list.is-virtual) { width: 100%; }
.zap-sel__panel.is-end { left: auto; right: 0; }
.zap-sel__list { position: relative; max-height: 280px; overflow: auto; padding: 5px; overscroll-behavior: contain; scroll-padding: 5px; }
.zap-sel__list.is-virtual .zap-sel__opt, .zap-sel__list.is-virtual .zap-sel__group { height: var(--zap-sel-row); box-sizing: border-box; }
.zap-sel__win { will-change: transform; }
.zap-sel__tools {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-bottom: 1px solid var(--zap-border); background: var(--zap-elevated); font-size: 12px;
}
.zap-sel__count { flex: 1; text-align: center; color: var(--zap-muted); font-variant-numeric: tabular-nums; }
.zap-sel__tool { font: inherit; font-weight: 600; color: var(--zap-primary); background: none; border: 0; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.zap-sel__tool:hover { background: var(--zap-primary-soft); }
.zap-sel__tool:disabled { color: var(--zap-muted); background: none; cursor: default; }

.zap-sel__opt {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.zap-sel__opt.is-active { background: var(--zap-primary-soft); }
.zap-sel__opt.is-selected { color: var(--zap-primary); font-weight: 600; }
.zap-sel__opt.is-disabled { opacity: .45; cursor: not-allowed; }
.zap-sel__opt.is-disabled.is-active { background: color-mix(in srgb, var(--zap-text) 5%, transparent); }
.zap-sel__group {
  display: flex; align-items: flex-end; padding: 10px 10px 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--zap-muted);
}
.zap-sel__icon { flex: none; width: 1.35em; text-align: center; line-height: 1; }
.zap-sel__txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.zap-sel__lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-sel__desc { font-size: 12px; font-weight: 400; color: var(--zap-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-sel__hit { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--zap-primary) 60%, transparent); text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* the mark: a tick (single) or a checkbox (multi); both animate in */
.zap-sel__mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; color: var(--zap-primary); }
.zap-sel__mark svg { width: 16px; height: 16px; opacity: 0; transform: scale(.4); transition: opacity .15s ease, transform .2s cubic-bezier(.3, 1.5, .5, 1); }
.zap-sel__opt.is-selected .zap-sel__mark svg { opacity: 1; transform: none; }
.zap-sel__mark--box {
  box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--zap-text) 30%, var(--zap-border)); border-radius: 4px;
  transition: background-color .15s ease, border-color .15s ease;
}
.zap-sel__mark--box svg { width: 12px; height: 12px; color: var(--zap-primary-contrast); }
.zap-sel__opt.is-selected .zap-sel__mark--box { background: var(--zap-primary); border-color: var(--zap-primary); }
.zap-sel__mark--add { font-weight: 700; }
.zap-sel__create .zap-sel__lbl { color: var(--zap-primary); }

.zap-sel__empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; text-align: center; color: var(--zap-muted); font-size: 14px; }
.zap-sel__empty:empty { display: none; }
.zap-sel__spin {
  display: inline-block; flex: none; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--zap-primary) 25%, transparent); border-top-color: var(--zap-primary);
  animation: zap-btn-spin .7s linear infinite;
}

.zap-sel--sm .zap-sel__trigger { min-height: 32px; padding: 4px 8px; font-size: 13px; }

/* editable (combobox) mode: the trigger's input is the value */
.zap-sel__input { display: block; }

/* date picker: the panel holds the calendar card (and presets beside it) */
.zap-date__panel {
  right: auto; width: auto; min-width: 0; max-width: none;
  padding: 0; background: transparent; border: 0; box-shadow: none;
  max-height: none; overflow: visible;
}
.zap-date__panel.has-presets { display: flex; background: var(--zap-surface); border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius) + 2px); box-shadow: 0 16px 40px -14px rgba(16, 24, 40, .25); }
.zap-date__panel.has-presets .zap-cal { border: 0; box-shadow: none; border-radius: 0; }
.zap-date__main { display: grid; }
.zap-date__panel:not(.has-presets) .zap-date__main:has(.zap-date__hint) .zap-cal { border-radius: calc(var(--zap-radius) + 2px) calc(var(--zap-radius) + 2px) 0 0; }
.zap-date__presets { display: grid; align-content: start; gap: 2px; min-width: 140px; padding: 10px 8px; border-right: 1px solid var(--zap-border); background: var(--zap-elevated); border-radius: calc(var(--zap-radius) + 2px) 0 0 calc(var(--zap-radius) + 2px); }
.zap-date__preset { font: inherit; font-size: 13px; text-align: left; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--zap-text); cursor: pointer; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.zap-date__preset:hover { background: var(--zap-primary-soft); }
.zap-date__preset.is-on { background: var(--zap-primary-soft); color: var(--zap-primary); font-weight: 600; }
.zap-date__preset:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: -2px; }
.zap-date__icon { display: inline-flex; flex: none; color: var(--zap-muted); }
.zap-date__icon svg { width: 16px; height: 16px; }
.zap-date.is-open .zap-date__icon { color: var(--zap-primary); }
.zap-date__clear { display: inline-flex; margin-left: auto; padding: 3px; border-radius: 6px; color: var(--zap-muted); cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.zap-date__clear svg { width: 14px; height: 14px; }
.zap-date__clear:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 8%, transparent); }
.zap-date .zap-sel__val { flex: 1; }
.zap-date--filled .zap-sel__trigger { background: var(--zap-elevated); border-color: transparent; }
.zap-date.is-disabled .zap-sel__trigger { opacity: .5; cursor: not-allowed; }

/* ── Data grid ───────────────────────────────────────────────────────────── */
.zap-grid {
  border: 1px solid var(--zap-border);
  border-radius: var(--zap-radius);
  overflow: hidden;
  background: var(--zap-surface);
}
.zap-grid__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px;
  border-bottom: 1px solid var(--zap-border);
}
.zap-grid__scroll { overflow: auto; max-height: 440px; }
/* The rows not scrolling inside the grid: as tall as the page, the window
   scrolls, and the header sticks to the top of it. */
.zap-grid--flow .zap-grid__scroll { max-height: none; overflow: visible; }
.zap-grid__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 14px;
}
.zap-grid__table th, .zap-grid__table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--zap-border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zap-grid__table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--zap-elevated);
  color: var(--zap-muted);
  font-weight: 600; font-size: 12px; letter-spacing: .03em; text-transform: uppercase;
  user-select: none;
}
.zap-grid__table .zap-grid__filters th { top: var(--zap-grid-head, 41px); padding: 4px 6px; }
.zap-grid__fcell .zap-input, .zap-grid__fcell .zap-sel__trigger { padding: 4px 8px; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; min-height: 0; }
.zap-grid__fcell .zap-input::-webkit-search-cancel-button { cursor: pointer; }
.zap-grid__th { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* The name gives way before the marks do: a narrow column shows "Sal…" and
   its funnel, not "Salary" under the funnel. */
.zap-grid__th > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-grid__th.is-draggable { cursor: grab; touch-action: none; }
.zap-grid__ghost {
  position: fixed; z-index: 1000; pointer-events: none;
  padding: 6px 12px; border-radius: var(--zap-radius-sm);
  background: var(--zap-surface); color: var(--zap-text); border: 1px solid var(--zap-primary);
  box-shadow: var(--zap-shadow); font-size: 13px; font-weight: 600; white-space: nowrap;
  text-transform: none; letter-spacing: 0;
}
.zap-grid__hcell.is-dragging { opacity: .45; }
.zap-grid__hcell.is-drop-left { box-shadow: inset 3px 0 0 var(--zap-primary); }
.zap-grid__hcell.is-drop-right { box-shadow: inset -3px 0 0 var(--zap-primary); }
.zap-grid__menu {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--zap-muted); font: inherit; cursor: pointer;
  padding: 0 4px; opacity: 0; transition: opacity .12s ease;
}
.zap-grid__hcell:hover .zap-grid__menu, .zap-grid__menu:focus { opacity: 1; }
.zap-grid__menu-panel { min-width: 140px; }
/* The funnel on a header, and the dialog it opens. The mark keeps to
   itself until the header is hovered — a row of seven funnels reads as
   clutter — but stays on once the column is filtered, because that is the
   one thing about it worth seeing from across the table. */
.zap-grid__fmark {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  padding: 0; border: 0; border-radius: 4px; background: transparent;
  color: var(--zap-muted); cursor: pointer; opacity: 0;
  transition: color .12s, background .12s, opacity .12s;
}
.zap-grid__fmark svg { fill: currentColor; display: block; }
.zap-grid__hcell:hover .zap-grid__fmark, .zap-grid__fmark:focus-visible, .zap-grid__fmark.is-on { opacity: 1; }
.zap-grid__fmark:hover { background: var(--zap-primary-soft); color: var(--zap-primary); }
.zap-grid__fmark.is-on { color: var(--zap-primary); }
.zap-grid--marks .zap-grid__hcell { padding-right: 44px; }
.zap-grid--marks.zap-grid--groupable .zap-grid__hcell { padding-right: 62px; }
.zap-grid__hcell .zap-grid__fmark { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
/* The group mark: a little further in than the funnel, always faintly
   there — it says which columns take a grouping — and lit while grouped. */
.zap-grid__gmark {
  position: absolute; right: 42px; top: 50%; transform: translateY(-50%);
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  padding: 0; border: 0; border-radius: 4px; background: transparent;
  color: var(--zap-muted); opacity: .45; cursor: pointer;
  transition: color .12s, background .12s, opacity .12s;
}
.zap-grid__gmark svg { fill: currentColor; display: block; }
.zap-grid__hcell:hover .zap-grid__gmark, .zap-grid__gmark:focus-visible { opacity: 1; }
.zap-grid__gmark:hover { background: var(--zap-primary-soft); color: var(--zap-primary); }
.zap-grid__gmark.is-on { opacity: 1; color: var(--zap-primary); }
.zap-grid--groupable:not(.zap-grid--marks) .zap-grid__hcell { padding-right: 34px; }
.zap-grid--groupable:not(.zap-grid--marks) .zap-grid__gmark { right: 12px; }
.zap-grid__fpanel {
  min-width: 250px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  font-weight: 400; text-transform: none; letter-spacing: normal; font-size: 13px;
  cursor: default;
}
.zap-grid__fmore { display: flex; flex-direction: column; gap: 8px; }
.zap-grid__frow { display: flex; gap: 6px; }
.zap-grid__fop { flex: 0 0 42%; min-width: 0; padding: 7px 9px; font-size: 13px; }
.zap-grid__fval { flex: 1 1 auto; min-width: 0; padding: 7px 9px; font-size: 13px; }
.zap-grid__fjoin { display: flex; gap: 14px; font-size: 12px; color: var(--zap-muted); }
.zap-grid__fjoin label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.zap-grid__fbtns { display: flex; justify-content: flex-end; gap: 6px; }
.zap-grid__fbtn { padding: 7px 12px; font-size: 13px; }
/* The Select inside the dialog: the growing half of its row, its list as
   wide as its longest name, hung from the right so the last column's stays
   on the screen; the one picked is already said, so no tick. */
.zap-grid__fsel { display: block; padding: 0; }
.zap-grid__fsel .zap-sel { width: 100%; }
.zap-grid__fsel .zap-sel__trigger { padding: 7px 9px; font-size: 13px; }
.zap-grid__fsel .zap-sel__panel { left: auto; right: 0; width: max-content; min-width: 100%; max-width: 250px; overflow-x: hidden; }
.zap-grid__fsel .zap-sel__mark { display: none; }
.zap-sel__opt .zap-sel__lbl { white-space: nowrap; }
/* A rule the box cannot hold, said in words instead: readable, and plainly
   not a box you type a value into. */
.zap-grid__fcell .is-said, .zap-grid__fbox.is-said { background: var(--zap-primary-soft); color: var(--zap-primary); cursor: pointer; }
.zap-grid__fbox.is-said { border: 1px solid var(--zap-border); border-radius: var(--zap-radius-sm); padding: 4px 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zap-grid__pick { display: flex; flex-direction: row; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--zap-text); text-align: left; }
.zap-grid__pick input { accent-color: var(--zap-primary); margin: 0; }
.zap-grid__columns { padding: 5px 10px; font-size: 12px; }
.zap-grid__table th.is-pinned, .zap-grid__table td.is-pinned { position: sticky; z-index: 1; background: var(--zap-surface); }
.zap-grid__table thead th.is-pinned { z-index: 3; }
.zap-grid__table .is-pinned-end { box-shadow: inset -1px 0 0 var(--zap-border); }
.zap-grid__table .is-pinned-start { box-shadow: inset 1px 0 0 var(--zap-border); }
.zap-grid__table .zap-grid__check.is-pinned { left: 0; }
.zap-grid__th.is-sortable { cursor: pointer; }
.zap-grid__th:focus { outline: none; }
.zap-grid__th:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 2px; border-radius: 4px; }
.zap-grid__th.is-sortable:hover { color: var(--zap-text); }
.zap-grid__caret { color: var(--zap-primary); font-size: 11px; }
.zap-grid__table tbody tr.is-odd td { background: var(--zap-zebra); }
.zap-grid__pad { pointer-events: none; }
.zap-grid__skel td { line-height: 20px; }
/* The panel a header is dragged onto, lit while one that can be dropped is
   over it; the chips in it are the grouping, outermost first. */
.zap-grid__groups {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  min-height: 42px; padding: 6px 10px;
  border-bottom: 1px solid var(--zap-border);
  background: var(--zap-elevated);
  color: var(--zap-muted); font-size: 12px;
}
.zap-grid__groups.is-over { background: var(--zap-primary-soft); box-shadow: inset 0 0 0 1px var(--zap-primary); }
.zap-grid__groups-in { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.zap-grid__groups .zap-grid__tally { margin-left: auto; }
.zap-grid__groups-hint { font-style: italic; user-select: none; }
/* The filter box in the panel: its height sets the strip's, and the chips
   start a step after it. */
.zap-grid__groups .zap-grid__filter { flex: 0 1 240px; margin-right: 6px; font-size: 14px; }
.zap-grid__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px 3px 10px;
  border: 1px solid var(--zap-border); border-radius: 999px;
  background: var(--zap-surface); color: var(--zap-text);
  font-weight: 600; cursor: grab; user-select: none; touch-action: none;
}
.zap-grid__chip.is-dragging { opacity: .45; }
.zap-grid__chip-x { border: 0; background: transparent; color: var(--zap-muted); cursor: pointer; font: inherit; line-height: 1; padding: 0 2px; }
.zap-grid__chip-x:hover { color: var(--zap-danger, #dc2626); }
.zap-grid__chip-sep { color: var(--zap-muted); }
/* A group row: the key with its count in front, and under the other columns
   what the group comes to. After the zebra rule on purpose: the one written
   last wins. */
.zap-grid__table tbody tr.zap-grid__grow td { background: var(--zap-elevated); font-weight: 600; cursor: pointer; }
.zap-grid__table tbody tr.zap-grid__grow:hover td { background: var(--zap-primary-soft); }
.zap-grid__twist { display: inline-block; width: 14px; color: var(--zap-primary); }
.zap-grid__gcount { color: var(--zap-muted); font-weight: 400; margin-left: 4px; }
.zap-grid__agg { color: var(--zap-muted); font-weight: 500; }
.zap-grid__gutter { border-right: 1px solid var(--zap-border); }
.zap-grid__table tbody tr.zap-grid__more td { background: var(--zap-surface); color: var(--zap-muted); font-size: 12px; padding-top: 6px; padding-bottom: 6px; }
.zap-grid__more-range { margin-right: 12px; font-variant-numeric: tabular-nums; }
.zap-grid__more .zap-pg { display: inline-flex; vertical-align: middle; }
.zap-grid__bad { color: var(--zap-danger, #dc2626); font-weight: 400; }
.zap-grid__bone { display: inline-block; height: 12px; border-radius: 6px; background: var(--zap-border); animation: zap-bone 1.2s ease-in-out infinite; }
@keyframes zap-bone { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.zap-grid__pad td { padding: 0; border: 0; height: inherit; }
.zap-grid__table tbody tr:hover td { background: var(--zap-primary-soft); }
.zap-grid__table tbody tr.is-selected td { background: var(--zap-primary-soft); }
.zap-grid__check { width: 44px; text-align: center; }
.zap-grid__check input { accent-color: var(--zap-primary); }
/* Named with the table, or `.zap-grid__table td` above outranks it and the
   figures stay on the left. */
.zap-grid__table .zap-grid__num { text-align: right; font-variant-numeric: tabular-nums; }
.zap-grid__resize {
  position: absolute; top: 0; right: 0; width: 9px; height: 100%;
  cursor: col-resize; user-select: none;
}
.zap-grid__resize::after {
  content: ""; position: absolute; right: 3px; top: 25%; height: 50%; width: 2px;
  background: var(--zap-border);
}
.zap-grid th { position: sticky; }
.zap-grid__hcell { position: relative; }
.zap-grid__empty { padding: 36px; text-align: center; color: var(--zap-muted); }
.zap-grid__editable { cursor: cell; }
.zap-grid__editable:hover { box-shadow: inset 0 0 0 1px var(--zap-border); }
/* A cell being edited is the same height as a cell being read. The editor
   is given the line the text stood on and no more — the same box, drawn
   with a border — so the row does not jump when you type into it and the
   rows under it do not move down the screen. The number spinners go: they
   would not fit the line, and the arrow keys already do what they do. */
.zap-grid__table tbody td { line-height: 23px; }
.zap-grid__edit {
  font: inherit;
  box-sizing: border-box;
  display: block; width: 100%;
  height: 23px; line-height: 21px;
  padding: 0 6px !important;
}
.zap-grid__edit::-webkit-outer-spin-button, .zap-grid__edit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zap-grid__edit[type="number"] { -moz-appearance: textfield; }
.zap-grid__editor { display: block; height: 23px; }
.zap-grid__editor .zap-sel__trigger, .zap-grid__editor .zap-input {
  box-sizing: border-box; height: 23px; min-height: 0; line-height: 21px; padding: 0 6px; font-size: 14px;
}
.zap-grid__tally { display: flex; align-items: center; gap: 12px; }
.zap-grid__foot-right { display: flex; align-items: center; gap: 12px; }
.zap-grid__per { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 12px; color: var(--zap-muted); white-space: nowrap; }
.zap-grid__per .zap-sel { min-width: 78px; }
.zap-pg__step { font-size: 13px; }
.zap-grid__note { color: var(--zap-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* A switch in a cell is cut to the cell's line — 23px, the same as an
   editor's — so a row of switches is no taller than a row of text; the dot
   and its travel shrink with it, and the box sits on the line rather than
   on the baseline, which would leave a descender's gap under it. */
.zap-grid__bool { display: inline-flex; align-items: center; height: 23px; vertical-align: top; }
.zap-grid__bool .zap-switch { width: 38px; height: 22px; }
.zap-grid__bool .zap-switch__dot { width: 16px; height: 16px; top: 3px; left: 3px; }
.zap-grid__bool .zap-switch.is-on .zap-switch__dot { transform: translateX(16px); }
.zap-grid__table td:focus { outline: none; }
.zap-grid__table td.is-focused { box-shadow: inset 0 0 0 2px var(--zap-primary); }
.zap-grid__table td.is-saving { opacity: .55; }
/* The row being edited while scrolled out of the window: in the table, so
   its editor keeps the focus and the text, but nowhere the eye can see. */
.zap-grid__table tbody tr.is-parked { position: absolute; left: -100000px; top: 0; pointer-events: none; }
/* A value that changed while you were looking at it, because somebody else
   changed it. It holds its colour for a moment before fading, which is what
   makes it read as a blink rather than as a slow stain — a wash of the theme's
   own accent, strong enough to catch the eye on a white row and gone before it
   can nag. */
@keyframes zap-fresh {
  0%   { background: color-mix(in srgb, var(--zap-primary) 42%, transparent); }
  35%  { background: color-mix(in srgb, var(--zap-primary) 42%, transparent); }
  100% { background: transparent; }
}
/* The same thing under another name, so that a cell told twice in a row
   starts over rather than carrying on: a browser restarts an animation when
   its name changes, not when a class it already had comes back. */
@keyframes zap-fresh-b {
  0%   { background: color-mix(in srgb, var(--zap-primary) 42%, transparent); }
  35%  { background: color-mix(in srgb, var(--zap-primary) 42%, transparent); }
  100% { background: transparent; }
}
.zap-grid__table td.is-fresh { animation: zap-fresh 1.6s ease-out; }
.zap-grid__table td.is-fresh-b { animation: zap-fresh-b 1.6s ease-out; }
.zap-grid__table td.is-invalid { box-shadow: inset 0 0 0 2px var(--zap-danger, #dc2626); }
.zap-grid__td-flash-up { animation: zap-flash-up .6s ease; }
.zap-grid__td-flash-down { animation: zap-flash-down .6s ease; }
@keyframes zap-flash-up { 0% { background: rgba(16,185,129,.45); } 100% { background: transparent; } }
@keyframes zap-flash-down { 0% { background: rgba(239,68,68,.45); } 100% { background: transparent; } }
.zap-up { color: #10b981; font-weight: 600; }
.zap-down { color: #ef4444; font-weight: 600; }
.zap-ticker__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.zap-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--zap-elevated); border: 1px solid var(--zap-border); border-radius: var(--zap-radius-sm); }
.zap-seg__btn { font: inherit; font-weight: 600; font-size: 13px; border: 0; background: transparent; color: var(--zap-muted); padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.zap-seg__btn:hover { color: var(--zap-text); }
.zap-seg__btn.is-active { background: var(--zap-surface); color: var(--zap-primary); box-shadow: var(--zap-shadow); }
.zap-ticker__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--zap-muted); }
.zap-ticker__dot.is-live { background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: zap-pulse 1.6s infinite; }
@keyframes zap-pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.zap-grid__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--zap-border);
  color: var(--zap-muted); font-size: 13px;
}
.zap-grid__pager { display: flex; align-items: center; gap: 8px; }

/* ── Modal ───────────────────────────────────────────────────────────────────
   Hidden until .is-open (so both ways animate); --md-depth is how many
   dialogs sit on top of this one — they step it back. */
.zap-modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 24px 16px; overflow-y: auto;
  background: rgba(2, 6, 23, 0); backdrop-filter: blur(0);
  transition: background-color .22s ease, backdrop-filter .22s ease;
}
.zap-modal.is-open { background: rgba(2, 6, 23, .5); backdrop-filter: blur(3px); }
.zap-modal.is-behind { background: transparent; backdrop-filter: none; }
.zap-modal__dialog {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 480px; max-height: calc(100vh - 48px); box-sizing: border-box;
  background: var(--zap-surface); color: var(--zap-text);
  border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius) + 2px);
  box-shadow: 0 30px 70px -20px rgba(2, 6, 23, .45), 0 0 0 1px rgba(255, 255, 255, .02);
  overflow: hidden; outline: none;
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .2s ease, transform .26s cubic-bezier(.2, .9, .3, 1.1), filter .25s ease;
}
.zap-modal.is-open .zap-modal__dialog { opacity: 1; transform: translateY(calc(var(--md-depth, 0) * -14px)) scale(calc(1 - var(--md-depth, 0) * .04)); }
.zap-modal.is-behind .zap-modal__dialog { filter: brightness(.94); }
.zap-modal__dialog.is-nod { animation: zap-md-nod .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes zap-md-nod { 50% { transform: scale(1.025); } }
.zap-modal__dialog--sm { max-width: 380px; }
.zap-modal__dialog--lg { max-width: 680px; }
.zap-modal__dialog--xl, .zap-modal__dialog--wide { max-width: 920px; }
.zap-modal__dialog--full { max-width: none; height: calc(100vh - 48px); }
@media (max-width: 560px) { .zap-modal__dialog--full { height: 100vh; max-height: 100vh; border-radius: 0; } .zap-modal:has(.zap-modal__dialog--full) { padding: 0; } }

.zap-modal__head, .zap-modal__foot { flex: none; user-select: none; transition: border-color .2s ease, box-shadow .2s ease; }
.zap-modal__head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px 12px 20px; border-bottom: 1px solid transparent; }
.zap-modal__dialog.is-scrolled-top .zap-modal__head { border-color: var(--zap-border); box-shadow: 0 8px 14px -12px rgba(2, 6, 23, .35); }
.zap-modal__titles { flex: 1; min-width: 0; display: grid; gap: 4px; padding-top: 2px; }
.zap-modal__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.zap-modal__desc { margin: 0; font-size: 14px; color: var(--zap-muted); line-height: 1.5; }
.zap-modal__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; --mi: var(--zap-primary); color: var(--mi); background: color-mix(in srgb, var(--mi) 14%, var(--zap-surface)); animation: zap-code-pop .4s cubic-bezier(.3, 1.6, .5, 1) .08s backwards; }
.zap-modal__icon svg { width: 21px; height: 21px; }
.zap-modal__icon--danger { --mi: var(--zap-danger, #dc2626); }
.zap-modal__icon--success { --mi: var(--zap-success, #059669); }
.zap-modal__icon--warning { --mi: var(--zap-warning, #d97706); }
.zap-modal__x {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -4px -6px 0 0; padding: 0;
  border: 0; border-radius: 9px; background: transparent; color: var(--zap-muted); cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .2s ease;
}
.zap-modal__x svg { width: 17px; height: 17px; }
.zap-modal__x:hover { background: color-mix(in srgb, var(--zap-text) 8%, transparent); color: var(--zap-text); transform: rotate(90deg); }
.zap-modal__x:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 1px; }
.zap-modal__body { flex: 1; min-height: 0; padding: 4px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
.zap-modal__head + .zap-modal__body { padding-top: 4px; }
.zap-modal__body:first-child { padding-top: 20px; }
.zap-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid transparent; background: color-mix(in srgb, var(--zap-elevated) 60%, var(--zap-surface)); }
.zap-modal__dialog.is-scrolled-bottom .zap-modal__foot { border-color: var(--zap-border); box-shadow: 0 -8px 14px -12px rgba(2, 6, 23, .35); }

/* alert: the icon over centred text, the buttons shared across */
.zap-modal__dialog--alert { max-width: 420px; text-align: center; }
.zap-modal__dialog--alert .zap-modal__head { flex-direction: column; align-items: center; gap: 12px; padding: 26px 24px 8px; }
.zap-modal__dialog--alert .zap-modal__icon { width: 52px; height: 52px; }
.zap-modal__dialog--alert .zap-modal__icon svg { width: 26px; height: 26px; }
.zap-modal__dialog--alert .zap-modal__x { position: absolute; top: 12px; right: 12px; margin: 0; }
.zap-modal__dialog--alert .zap-modal__body { padding: 4px 24px 20px; color: var(--zap-muted); font-size: 14px; }
.zap-modal__dialog--alert .zap-modal__foot { background: none; padding: 0 24px 24px; }
.zap-modal__dialog--alert .zap-modal__foot > * { flex: 1; }
.zap-modal__dialog--alert .zap-modal__foot > span[style*="contents"] > * { flex: 1; }
@media (prefers-reduced-motion: reduce) { .zap-modal, .zap-modal__dialog { transition: opacity .15s ease; } .zap-modal__dialog { transform: none !important; } }

@keyframes zap-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zap-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── Switch ──────────────────────────────────────────────────────────────────
   Sized by --sw-w / --sw-h / --sw-pad; --sw-c is the colour when on. The thumb
   slides with an overshoot and stretches toward where it is going while pressed. */
.zap-switch {
  --sw-w: 44px; --sw-h: 26px; --sw-pad: 3px; --sw-c: var(--zap-primary);
  --sw-thumb: calc(var(--sw-h) - 2 * var(--sw-pad));
  position: relative; flex: none; display: inline-block; vertical-align: middle;
  width: var(--sw-w); height: var(--sw-h); box-sizing: border-box;
  border: 0; border-radius: 999px; padding: 0;
  background: color-mix(in srgb, var(--zap-text) 16%, var(--zap-border));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, box-shadow .2s ease, opacity .2s ease;
}
.zap-switch:hover { background: color-mix(in srgb, var(--zap-text) 24%, var(--zap-border)); }
.zap-switch.is-on { background: var(--sw-c); }
.zap-switch.is-on:hover { background: color-mix(in srgb, var(--sw-c) 88%, #000); }
.zap-switch:focus-visible { outline: 2px solid var(--sw-c); outline-offset: 2px; }
.zap-switch:disabled { opacity: .45; cursor: not-allowed; }
.zap-switch.is-loading { cursor: progress; }
.zap-switch.is-readonly { cursor: default; }
.zap-switch__dot {
  position: absolute; top: var(--sw-pad); left: var(--sw-pad);
  width: var(--sw-thumb); height: var(--sw-thumb); box-sizing: border-box; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, .08);
  transition: transform .34s cubic-bezier(.34, 1.45, .5, 1), width .18s ease, left .18s ease;
}
.zap-switch.is-on .zap-switch__dot { transform: translateX(calc(var(--sw-w) - var(--sw-h))); }
.zap-switch:active:not(:disabled):not(.is-loading):not(.is-readonly) .zap-switch__dot { width: calc(var(--sw-thumb) + var(--sw-h) * .25); }
.zap-switch.is-on:active:not(:disabled):not(.is-loading):not(.is-readonly) .zap-switch__dot { left: calc(var(--sw-pad) - var(--sw-h) * .25); }

/* ✓ / ✕ in the thumb */
.zap-switch__ic { position: absolute; width: 62%; height: 62%; transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.45, .5, 1); }
.zap-switch__ic--on { color: var(--sw-c); opacity: 0; transform: scale(.4) rotate(-45deg); }
.zap-switch__ic--off { color: var(--zap-muted); }
.zap-switch.is-on .zap-switch__ic--on { opacity: 1; transform: none; }
.zap-switch.is-on .zap-switch__ic--off { opacity: 0; transform: scale(.4) rotate(45deg); }

/* ON / OFF in the track */
.zap-switch.has-text { --sw-w: 60px; }
.zap-switch__text {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
  font: 700 10px/1 var(--zap-font, inherit); letter-spacing: .04em; text-transform: uppercase;
  transition: opacity .2s ease, transform .3s ease;
}
.zap-switch__text--on { left: calc(var(--sw-pad) + 6px); color: #fff; opacity: 0; transform: translateX(-4px); }
.zap-switch__text--off { right: calc(var(--sw-pad) + 6px); color: color-mix(in srgb, var(--zap-text) 60%, transparent); }
.zap-switch.is-on .zap-switch__text--on { opacity: 1; transform: none; }
.zap-switch.is-on .zap-switch__text--off { opacity: 0; transform: translateX(4px); }

/* pending (an async onChange): a spinner in the thumb */
.zap-switch__spin { display: none; }
.zap-switch.is-loading .zap-switch__spin {
  display: block; width: 58%; height: 58%; box-sizing: border-box; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--sw-c) 25%, transparent); border-top-color: var(--sw-c);
  animation: zap-btn-spin .7s linear infinite;
}
.zap-switch.is-loading .zap-switch__ic { opacity: 0; }

/* sizes and tones */
.zap-switch--sm { --sw-w: 34px; --sw-h: 20px; --sw-pad: 2px; }
.zap-switch--sm.has-text { --sw-w: 48px; }
.zap-switch--sm .zap-switch__text { font-size: 8px; }
.zap-switch--lg { --sw-w: 56px; --sw-h: 32px; }
.zap-switch--lg.has-text { --sw-w: 76px; }
.zap-switch--lg .zap-switch__text { font-size: 11px; }
.zap-switch--success { --sw-c: var(--zap-success, #059669); }
.zap-switch--danger  { --sw-c: var(--zap-danger, #dc2626); }
.zap-switch--warning { --sw-c: var(--zap-warning, #d97706); }

/* with a label */
.zap-switch-field { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.zap-switch-field--bare { display: inline-flex; }
.zap-switch-field--end { flex-direction: row-reverse; justify-content: flex-end; gap: 12px; }
.zap-switch-field__text { display: grid; gap: 2px; min-width: 0; }
.zap-switch-field__label { font-weight: 600; cursor: pointer; line-height: 1.4; }
.zap-switch-field__desc { font-size: 13px; color: var(--zap-muted); line-height: 1.45; }
.zap-switch-field .zap-switch { margin-top: 0; }
.zap-switch-field.is-disabled .zap-switch-field__label { cursor: not-allowed; opacity: .55; }
.zap-switch-field.is-disabled .zap-switch-field__desc { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .zap-switch, .zap-switch__dot, .zap-switch__ic, .zap-switch__text { transition: none; }
}

/* ── Text field (Input / Textarea / FormField) ───────────────────────────────
   .zap-tf is the field (label, box, the line under it); .zap-tf__box is what
   looks like the input — the real <input> inside is borderless. */
.zap-tf { --tf-c: var(--zap-primary); --tf-h: 40px; display: grid; gap: 6px; min-width: 0; align-content: start; }
.zap-tf__label { display: flex; align-items: baseline; gap: 4px; font-size: 13px; font-weight: 600; color: var(--zap-text); }
.zap-tf__req { color: var(--zap-danger, #dc2626); }
.zap-tf__opt { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--zap-muted); }
.zap-tf__box {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: var(--tf-h); box-sizing: border-box;
  padding: 0 10px 0 12px; border: 1px solid var(--zap-border); border-radius: var(--zap-radius-sm);
  background: var(--zap-surface); color: var(--zap-text); cursor: text;
  transition: border-color .15s ease, box-shadow .2s ease, background-color .15s ease;
}
.zap-tf__box:hover { border-color: color-mix(in srgb, var(--zap-text) 25%, var(--zap-border)); }
.zap-tf__box:focus-within { border-color: var(--tf-c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tf-c) 22%, transparent); }
.zap-tf__input {
  flex: 1; min-width: 0; width: 100%; box-sizing: border-box; padding: 9px 0; border: 0; outline: none;
  background: transparent; color: inherit; font: inherit; font-size: 14px;
}
.zap-tf__input::placeholder { color: color-mix(in srgb, var(--zap-muted) 85%, transparent); }
.zap-tf__area { resize: vertical; line-height: 1.5; padding: 9px 0; min-height: calc(var(--tf-h) - 2px); }
.zap-tf__box:has(.zap-tf__area) { align-items: stretch; padding-right: 12px; }
.zap-tf__icon, .zap-tf__affix { flex: none; display: inline-flex; align-items: center; color: var(--zap-muted); font-size: 14px; }
.zap-tf__icon svg { width: 16px; height: 16px; }
.zap-tf__affix { padding-right: 2px; font-variant-numeric: tabular-nums; }
.zap-tf__input ~ .zap-tf__affix { padding: 0 0 0 2px; }
.zap-tf__tool {
  flex: none; display: inline-flex; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: var(--zap-muted); cursor: pointer;
  transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
.zap-tf__tool:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 7%, transparent); }
.zap-tf__tool:focus-visible { outline: 2px solid var(--tf-c); outline-offset: 0; }
.zap-tf__tool svg { width: 16px; height: 16px; }
.zap-tf__tool[hidden] { display: none; }
.zap-tf__clear:not([hidden]) { animation: zap-code-pop .25s cubic-bezier(.3, 1.6, .5, 1); }
.zap-tf__spin { flex: none; width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--tf-c) 25%, transparent); border-top-color: var(--tf-c); animation: zap-btn-spin .7s linear infinite; }
.zap-tf__ok { flex: none; display: inline-flex; color: var(--zap-success, #059669); animation: zap-code-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.zap-tf__ok svg { width: 16px; height: 16px; }

/* number − / + */
.zap-tf__stepper { flex: none; display: inline-flex; margin-right: -6px; border-left: 1px solid var(--zap-border); }
.zap-tf__stepper button { display: inline-grid; place-items: center; width: 30px; height: calc(var(--tf-h) - 2px); padding: 0; border: 0; background: none; color: var(--zap-muted); cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.zap-tf__stepper button + button { border-left: 1px solid var(--zap-border); }
.zap-tf__stepper button:hover:not(:disabled) { color: var(--tf-c); background: color-mix(in srgb, var(--tf-c) 8%, transparent); }
.zap-tf__stepper button:active:not(:disabled) svg { transform: scale(.8); }
.zap-tf__stepper button:disabled { opacity: .35; cursor: not-allowed; }
.zap-tf__stepper svg { width: 14px; height: 14px; transition: transform .1s ease; }
.zap-tf:has(.zap-tf__stepper) .zap-tf__input { font-variant-numeric: tabular-nums; }

/* the line under it */
.zap-tf__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 0; font-size: 12px; }
.zap-tf__foot:empty { display: none; }
.zap-tf__msg { display: inline-flex; align-items: flex-start; gap: 5px; color: var(--zap-muted); line-height: 1.4; animation: zap-tf-msg .25s cubic-bezier(.2, .8, .2, 1); }
.zap-tf__msg svg { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.zap-tf__msg.is-error { color: var(--zap-danger, #dc2626); }
.zap-tf__msg.is-success { color: var(--zap-success, #059669); }
@keyframes zap-tf-msg { from { opacity: 0; transform: translateY(-4px); } }
.zap-tf__count { margin-left: auto; color: var(--zap-muted); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .2s ease; }
.zap-tf__count.is-near { color: var(--zap-warning, #d97706); }
.zap-tf__count.is-full { color: var(--zap-danger, #dc2626); font-weight: 600; }

/* states */
.zap-tf.is-invalid { --tf-c: var(--zap-danger, #dc2626); }
.zap-tf.is-invalid .zap-tf__box { border-color: var(--zap-danger, #dc2626); }
.zap-tf.is-valid .zap-tf__box:not(:focus-within) { border-color: color-mix(in srgb, var(--zap-success, #059669) 60%, var(--zap-border)); }
.zap-tf.is-disabled .zap-tf__box { opacity: .55; cursor: not-allowed; background: var(--zap-elevated); }
.zap-tf.is-disabled .zap-tf__input { cursor: not-allowed; }
.zap-tf.is-shake .zap-tf__box, .zap-tf--bare.is-shake > :not(.zap-tf__label):not(.zap-tf__foot) { animation: zap-tf-shake .4s cubic-bezier(.36, .07, .19, .97); }
@keyframes zap-tf-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* sizes, variants */
.zap-tf--sm { --tf-h: 32px; } .zap-tf--sm .zap-tf__input { font-size: 13px; padding: 6px 0; }
.zap-tf--lg { --tf-h: 48px; } .zap-tf--lg .zap-tf__input { font-size: 16px; }
.zap-tf--filled .zap-tf__box { background: var(--zap-elevated); border-color: transparent; }
.zap-tf--filled .zap-tf__box:hover { background: color-mix(in srgb, var(--zap-text) 6%, var(--zap-elevated)); }
.zap-tf--filled .zap-tf__box:focus-within { background: var(--zap-surface); }
.zap-tf--underline .zap-tf__box { border-width: 0 0 1px; border-radius: 0; padding-left: 0; padding-right: 0; background: transparent; }
.zap-tf--underline .zap-tf__box::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--tf-c); transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.zap-tf--underline .zap-tf__box:focus-within { box-shadow: none; }
.zap-tf--underline .zap-tf__box:focus-within::after, .zap-tf--underline.is-invalid .zap-tf__box::after { transform: none; }

/* floating label: in the box as a placeholder, up on the border once there is text or focus */
.zap-tf--floating .zap-tf__box { --tf-h: 48px; }
.zap-tf--floating .zap-tf__label {
  position: absolute; left: 12px; top: 50%; z-index: 1; padding: 0 4px; margin-left: -4px; pointer-events: none;
  font-weight: 500; font-size: 14px; color: var(--zap-muted); background: transparent;
  transform: translateY(-50%); transform-origin: left center;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), color .2s ease, background-color .2s ease;
}
.zap-tf--floating .zap-tf__box:has(.zap-tf__icon) .zap-tf__label { left: 36px; }
.zap-tf--floating:is(.has-value, :focus-within) .zap-tf__label { transform: translate(0, calc(-50% - var(--tf-h) / 2)) scale(.82); color: var(--tf-c); background: var(--zap-surface); left: 12px; }
.zap-tf--floating.has-value:not(:focus-within) .zap-tf__label { color: var(--zap-muted); }
.zap-tf--floating .zap-tf__input::placeholder { color: transparent; }

/* password strength */
.zap-tf__strength { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--zap-muted); }
.zap-tf__bars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.zap-tf__bars i { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--zap-text) 10%, var(--zap-border)); transition: background-color .3s ease, transform .3s ease; }
.zap-tf__bars i.is-on { transform: scaleY(1.25); }
.zap-tf__strength.is-1 .is-on { background: var(--zap-danger, #dc2626); }
.zap-tf__strength.is-2 .is-on { background: var(--zap-warning, #d97706); }
.zap-tf__strength.is-3 .is-on { background: var(--zap-primary); }
.zap-tf__strength.is-4 .is-on { background: var(--zap-success, #059669); }
.zap-tf__slabel { min-width: 44px; text-align: right; font-weight: 600; }
.zap-tf__strength.is-0 { visibility: hidden; }

/* forms */
.zap-form { display: grid; gap: 16px; }
.zap-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.zap-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .zap-tf__msg, .zap-tf.is-shake .zap-tf__box { animation: none; }
  .zap-tf--floating .zap-tf__label, .zap-tf--underline .zap-tf__box::after { transition: none; }
}

/* ── Checkbox / Radio ────────────────────────────────────────────────────────
   A real input, invisible, under a drawn box / dot; :checked, :indeterminate
   and :focus-visible on the input drive the drawing. --ck-c is the colour. */
.zap-check {
  --ck-c: var(--zap-primary); --ck-s: 18px;
  position: relative; display: inline-flex; align-items: flex-start; gap: 10px;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; line-height: 1.4;
}
.zap-check__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.zap-check__box {
  position: relative; flex: none; display: grid; place-items: center; box-sizing: border-box;
  width: var(--ck-s); height: var(--ck-s); margin-top: calc((1.4em - var(--ck-s)) / 2);
  border: 1.5px solid color-mix(in srgb, var(--zap-text) 30%, var(--zap-border)); border-radius: calc(var(--ck-s) * .28);
  background: var(--zap-surface); color: #fff;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .15s ease;
}
.zap-check:hover .zap-check__box { border-color: var(--ck-c); }
.zap-check:active:not(.is-disabled) .zap-check__box { transform: scale(.9); }
.zap-check__input:focus-visible + .zap-check__box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-c) 30%, transparent); border-color: var(--ck-c); }
.zap-check__input:checked + .zap-check__box, .zap-check__input:indeterminate + .zap-check__box { background: var(--ck-c); border-color: var(--ck-c); }
.zap-check.is-ready .zap-check__input:checked + .zap-check__box, .zap-check.is-ready .zap-check__input:indeterminate + .zap-check__box { animation: zap-check-pop .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes zap-check-pop { 40% { transform: scale(1.15); } }
.zap-check__box svg { grid-area: 1 / 1; width: 78%; height: 78%; }
.zap-check__tick path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .25s cubic-bezier(.6, 0, .3, 1) .05s; }
.zap-check__input:checked:not(:indeterminate) + .zap-check__box .zap-check__tick path { stroke-dashoffset: 0; }
.zap-check__dash { opacity: 0; transform: scaleX(.3); transition: opacity .15s ease, transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.zap-check__input:indeterminate + .zap-check__box .zap-check__dash { opacity: 1; transform: none; }
.zap-check__input:indeterminate + .zap-check__box .zap-check__tick { opacity: 0; }

.zap-check__text { display: grid; gap: 1px; min-width: 0; }
.zap-check__label { font-size: 14px; font-weight: 500; color: var(--zap-text); }
.zap-check__desc { font-size: 13px; color: var(--zap-muted); }
.zap-check__error { font-size: 12px; color: var(--zap-danger, #dc2626); animation: zap-crumb-in .25s ease; }
.zap-check.is-invalid .zap-check__box { border-color: var(--zap-danger, #dc2626); }
.zap-check.is-disabled { cursor: not-allowed; opacity: .5; }
.zap-check.is-disabled .zap-check__box { transform: none; }
.zap-check.is-readonly { cursor: default; }

/* the radio: a round box and a dot that springs in */
.zap-radio__dot { border-radius: 50%; }
.zap-radio__dot::after {
  content: ""; width: 42%; height: 42%; border-radius: 50%; background: #fff;
  transform: scale(0); transition: transform .28s cubic-bezier(.3, 1.6, .5, 1);
}
.zap-check__input:checked + .zap-radio__dot::after { transform: scale(1); }

/* sizes, tones */
.zap-check--sm { --ck-s: 15px; } .zap-check--sm .zap-check__label { font-size: 13px; }
.zap-check--lg { --ck-s: 22px; } .zap-check--lg .zap-check__label { font-size: 15px; }
.zap-check--success { --ck-c: var(--zap-success, #059669); }
.zap-check--danger  { --ck-c: var(--zap-danger, #dc2626); }
.zap-check--warning { --ck-c: var(--zap-warning, #d97706); }

/* cards: each option a tile, the chosen one outlined in the colour */
.zap-check--card {
  display: flex; padding: 12px 14px; border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius-sm) + 2px);
  background: var(--zap-surface); transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.zap-check--card:hover:not(.is-disabled) { border-color: color-mix(in srgb, var(--ck-c) 45%, var(--zap-border)); }
.zap-check--card.is-checked { border-color: var(--ck-c); background: color-mix(in srgb, var(--ck-c) 6%, var(--zap-surface)); box-shadow: 0 0 0 1px var(--ck-c); }
.zap-check--card .zap-check__label { font-weight: 600; }
.zap-check--card:has(.zap-check__input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-c) 30%, transparent); }

/* groups */
.zap-choices { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.zap-choices__legend { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 0; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--zap-text); }
.zap-choices__hint { font-weight: 500; color: var(--zap-muted); font-variant-numeric: tabular-nums; }
.zap-choices__desc { margin: -4px 0 0; font-size: 13px; color: var(--zap-muted); }
.zap-choices__error { margin: 0; font-size: 12px; color: var(--zap-danger, #dc2626); }
.zap-choices__list { position: relative; display: flex; flex-direction: column; gap: 10px; }
.zap-choices--row .zap-choices__list { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
.zap-choices--cards .zap-choices__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.zap-choices--cards.zap-choices--column .zap-choices__list { grid-template-columns: 1fr; }
.zap-check--all { padding-bottom: 10px; border-bottom: 1px solid var(--zap-border); }

/* segmented: a row of options on a tray, the chosen one on a sliding pill */
.zap-choices--segmented .zap-choices__list {
  display: inline-flex; flex-direction: row; gap: 2px; width: max-content; max-width: 100%; padding: 3px;
  border-radius: calc(var(--zap-radius-sm) + 3px); background: var(--zap-elevated); box-shadow: inset 0 0 0 1px var(--zap-border);
}
.zap-choices--segmented .zap-check { z-index: 1; align-items: center; padding: 6px 14px; border-radius: var(--zap-radius-sm); color: var(--zap-muted); transition: color .2s ease; }
.zap-choices--segmented .zap-check__box { display: none; }
.zap-choices--segmented .zap-check__label { color: inherit; font-weight: 600; font-size: 13px; }
.zap-choices--segmented .zap-check:hover:not(.is-disabled) { color: var(--zap-text); }
.zap-choices--segmented .zap-check.is-checked { color: var(--zap-text); }
.zap-choices--segmented:not(.is-ready) .zap-check.is-checked { background: var(--zap-surface); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.zap-choices--segmented .zap-check:has(.zap-check__input:focus-visible) { outline: 2px solid var(--zap-primary); outline-offset: -2px; }
.zap-seg2__ind { position: absolute; left: 0; top: 3px; bottom: 3px; border-radius: var(--zap-radius-sm); background: var(--zap-surface); box-shadow: 0 1px 3px rgba(16, 24, 40, .14), 0 0 0 1px color-mix(in srgb, var(--zap-border) 60%, transparent); opacity: 0; }
.zap-choices--segmented.is-anim .zap-seg2__ind { transition: transform .3s cubic-bezier(.3, .7, .2, 1), width .3s cubic-bezier(.3, .7, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  .zap-check__box, .zap-check__tick path, .zap-check__dash, .zap-radio__dot::after, .zap-seg2__ind { transition: none !important; animation: none !important; }
}

/* ── Tabs ────────────────────────────────────────────────────────────────────
   One indicator (the ink) slides under / behind the active tab; tabs.js sets
   its width and x. Until it has (no JS yet, server markup), the active tab
   carries its own underline. */
.zap-tabs__list {
  position: relative; display: flex; gap: 4px; margin-bottom: 14px;
  border-bottom: 1px solid var(--zap-border);
  overflow-x: auto; scrollbar-width: none;
}
.zap-tabs__list::-webkit-scrollbar { display: none; }
.zap-tabs__tab {
  position: relative; z-index: 1; flex: none;
  font: inherit; font-weight: 600; font-size: 14px; white-space: nowrap;
  border: 0; background: transparent; color: var(--zap-muted);
  padding: 9px 13px; cursor: pointer; border-radius: var(--zap-radius-sm) var(--zap-radius-sm) 0 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, background-color .2s ease;
}
.zap-tabs__tab:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 4%, transparent); }
.zap-tabs__tab:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: -2px; }
.zap-tabs__tab.is-active { color: var(--zap-primary); border-bottom-color: var(--zap-primary); }
.zap-tabs.is-ready .zap-tabs__tab.is-active { border-bottom-color: transparent; }
.zap-tabs__ink {
  position: absolute; left: 0; bottom: 0; width: 0; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--zap-primary); opacity: 0; pointer-events: none;
}
.zap-tabs.is-ready .zap-tabs__ink { opacity: 1; }
.zap-tabs.is-anim .zap-tabs__ink { transition: transform .32s cubic-bezier(.3, .7, .2, 1), width .32s cubic-bezier(.3, .7, .2, 1); }

/* pills: the ink is a raised chip behind the tab, in a tray */
.zap-tabs--pills .zap-tabs__list {
  display: inline-flex; max-width: 100%; box-sizing: border-box; gap: 2px; padding: 4px;
  border: 0; border-radius: calc(var(--zap-radius-sm) + 4px); background: var(--zap-elevated);
  box-shadow: inset 0 0 0 1px var(--zap-border);
}
.zap-tabs--pills .zap-tabs__tab { padding: 7px 14px; border: 0; border-radius: var(--zap-radius-sm); }
.zap-tabs--pills .zap-tabs__tab:hover { background: transparent; }
.zap-tabs--pills .zap-tabs__tab.is-active { color: var(--zap-text); background: var(--zap-surface); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.zap-tabs--pills.is-ready .zap-tabs__tab.is-active { background: transparent; box-shadow: none; }
.zap-tabs--pills .zap-tabs__ink {
  top: 4px; bottom: 4px; height: auto; border-radius: var(--zap-radius-sm);
  background: var(--zap-surface); box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 0 0 1px color-mix(in srgb, var(--zap-border) 70%, transparent);
}

/* enclosed: folder tabs over a bordered panel */
.zap-tabs--enclosed .zap-tabs__list { gap: 2px; margin-bottom: 0; }
.zap-tabs--enclosed .zap-tabs__tab { border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
.zap-tabs--enclosed .zap-tabs__tab.is-active { background: var(--zap-surface); border-color: var(--zap-border); color: var(--zap-text); }
.zap-tabs--enclosed .zap-tabs__ink { height: 2px; top: 0; bottom: auto; border-radius: 2px; }
.zap-tabs--enclosed .zap-tabs__panel { border: 1px solid var(--zap-border); border-top: 0; padding: 14px; border-radius: 0 0 var(--zap-radius-sm) var(--zap-radius-sm); }

.zap-tabs--stretch .zap-tabs__list { display: flex; }
.zap-tabs--stretch .zap-tabs__tab { flex: 1; }

/* panels: the incoming one eases in from the side it was picked on */
.zap-tabs__panel.is-hidden { display: none; }
.zap-tabs__panel.is-from-r { animation: zap-tab-in-r .3s cubic-bezier(.2, .7, .2, 1); }
.zap-tabs__panel.is-from-l { animation: zap-tab-in-l .3s cubic-bezier(.2, .7, .2, 1); }
@keyframes zap-tab-in-r { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes zap-tab-in-l { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .zap-tabs.is-anim .zap-tabs__ink { transition: none; }
  .zap-tabs__panel.is-from-r, .zap-tabs__panel.is-from-l { animation: zap-tab-fade .15s ease; }
  @keyframes zap-tab-fade { from { opacity: 0; } }
}

/* ── Code viewer ─────────────────────────────────────────────────────────────
   Token colours are --zap-code-* (see the token blocks at the top). */
.zap-code {
  position: relative; margin: 0; min-width: 0;
  border: 1px solid var(--zap-border); border-radius: var(--zap-radius-sm);
  background: var(--zap-code-bg); color: var(--zap-code-text);
  overflow: hidden;
}
.zap-code__bar {
  display: flex; align-items: center; gap: 10px; min-height: 38px; box-sizing: border-box; padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--zap-border);
  background: color-mix(in srgb, var(--zap-code-bg) 70%, var(--zap-elevated));
  font: 600 12px/1 var(--zap-font, inherit);
}
.zap-code__lang {
  padding: 3px 7px; border-radius: 6px; letter-spacing: .02em;
  color: var(--zap-primary); background: var(--zap-primary-soft);
}
.zap-code__title { color: var(--zap-muted); font-weight: 500; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-code__sp { flex: 1; }
.zap-code__copy {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font: 600 12px/1 var(--zap-font, inherit); color: var(--zap-muted);
  padding: 6px 9px; border-radius: 7px; border: 1px solid transparent; background: transparent; cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.zap-code__copy:hover { color: var(--zap-text); background: var(--zap-surface); border-color: var(--zap-border); }
.zap-code__copy:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 1px; }
.zap-code__copy.is-done { color: var(--zap-success, #059669); }
.zap-code__copy-ic { display: inline-flex; width: 14px; height: 14px; }
.zap-code__copy-ic svg { width: 14px; height: 14px; }
.zap-code__copy.is-done .zap-code__copy-ic { animation: zap-code-pop .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes zap-code-pop { from { transform: scale(.4); opacity: 0; } }
.zap-code.no-head .zap-code__copy { position: absolute; top: 8px; right: 8px; z-index: 1; background: var(--zap-surface); border-color: var(--zap-border); opacity: 0; }
.zap-code.no-head:hover .zap-code__copy, .zap-code.no-head .zap-code__copy:focus-visible, .zap-code.no-head .zap-code__copy.is-done { opacity: 1; }

.zap-code__pre { margin: 0; padding: 12px 0; overflow: auto; outline: none; }
.zap-code__pre:focus-visible { box-shadow: inset 0 0 0 2px var(--zap-primary); }
.zap-code__code {
  display: inline-block; min-width: 100%; box-sizing: border-box;
  font: 12.5px/1.65 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  tab-size: 2; white-space: pre; font-variant-ligatures: none;
}
.zap-code__line { display: block; padding: 0 16px; }
.zap-code__line.is-hl { background: var(--zap-code-hl); box-shadow: inset 3px 0 0 var(--zap-primary); }
.zap-code.has-ln .zap-code__line { padding-left: 0; }
.zap-code.has-ln .zap-code__line::before {
  counter-increment: zl; content: counter(zl);
  display: inline-block; width: 2.6em; padding-right: 1.1em; margin-right: .2em; text-align: right;
  color: var(--zap-code-ln); user-select: none;
}
.zap-code.is-wrap .zap-code__code { white-space: pre-wrap; word-break: break-word; display: block; }

.tk-kw   { color: var(--zap-code-kw); }
.tk-str  { color: var(--zap-code-str); }
.tk-num, .tk-lit { color: var(--zap-code-num); }
.tk-com  { color: var(--zap-code-com); font-style: italic; }
.tk-fn   { color: var(--zap-code-fn); }
.tk-type { color: var(--zap-code-type); }
.tk-prop { color: var(--zap-code-prop); }
.tk-tag  { color: var(--zap-code-tag); }
.tk-attr { color: var(--zap-code-attr); }
.tk-rx   { color: var(--zap-code-str); }
.tk-op, .tk-pun { color: var(--zap-code-pun); }

/* ── Accordion ───────────────────────────────────────────────────────────────
   The panel is a one-row grid: 0fr closed, 1fr open, and the row's size is
   what animates — the content's height is never measured. */
.zap-acc { --zap-acc-ease: cubic-bezier(.3, .7, .2, 1); }
.zap-acc__item { border-bottom: 1px solid var(--zap-border); }
.zap-acc__item:last-child { border-bottom: 0; }
.zap-acc__h { margin: 0; }
.zap-acc__head {
  font: inherit; font-weight: 600; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
  background: transparent; border: 0; color: var(--zap-text);
  padding: 14px 6px; cursor: pointer; text-align: left; border-radius: var(--zap-radius-sm);
  transition: color .15s ease, background-color .15s ease;
}
.zap-acc__head:hover { color: var(--zap-primary); }
.zap-acc__head:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: -2px; }
.zap-acc__head:disabled { opacity: .45; cursor: not-allowed; color: var(--zap-text); }
.zap-acc__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; font-size: 16px;
  background: var(--zap-primary-soft); color: var(--zap-primary);
  transition: transform .3s var(--zap-acc-ease);
}
.zap-acc__icon svg { width: 17px; height: 17px; }
.zap-acc__item.is-open .zap-acc__icon { transform: scale(1.06); }
.zap-acc__titles { flex: 1; min-width: 0; display: grid; gap: 2px; }
.zap-acc__sub { font-size: 13px; font-weight: 400; color: var(--zap-muted); }
.zap-acc__extra { flex: none; font-size: 12px; font-weight: 600; color: var(--zap-muted); }
.zap-acc__chev {
  flex: none; display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--zap-muted);
  transition: transform .3s var(--zap-acc-ease), color .2s ease, background-color .2s ease;
}
.zap-acc__chev svg { width: 16px; height: 16px; }
.zap-acc__chev.is-open { transform: rotate(180deg); color: var(--zap-primary); background: var(--zap-primary-soft); }
/* plus → minus: the vertical stroke turns flat */
.zap-acc__chev--plus.is-open { transform: rotate(180deg); }
.zap-acc__plus-v { transform-origin: 8px 8px; transition: transform .3s var(--zap-acc-ease); }
.zap-acc__chev--plus.is-open .zap-acc__plus-v { transform: rotate(90deg); }
.zap-acc--start .zap-acc__chev { order: -1; }
.zap-acc--start .zap-acc__chev:not(.zap-acc__chev--plus) svg { transform: rotate(-90deg); }
.zap-acc--start .zap-acc__chev.is-open:not(.zap-acc__chev--plus) { transform: rotate(90deg); }

.zap-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--zap-acc-ease), visibility 0s .32s; visibility: hidden; }
.zap-acc__item.is-open > .zap-acc__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .32s var(--zap-acc-ease); }
.zap-acc__inner { overflow: hidden; min-height: 0; }
.zap-acc__body {
  padding: 0 6px 16px; color: var(--zap-muted); font-size: 14px; line-height: 1.6;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .2s ease, transform .32s var(--zap-acc-ease);
}
.zap-acc__item.is-open .zap-acc__body { opacity: 1; transform: none; transition-delay: .06s; }
.zap-acc__text { margin: 0; }
.zap-acc--start .zap-acc__body { padding-left: 44px; }
.zap-acc__item.has-icon .zap-acc__body { padding-left: 50px; }
.zap-acc--card .zap-acc__item.has-icon .zap-acc__body, .zap-acc--contained .zap-acc__item.has-icon .zap-acc__body { padding-left: 60px; }

/* card: each section a card of its own */
.zap-acc--card { display: grid; gap: 10px; }
.zap-acc--card .zap-acc__item {
  border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius-sm) + 2px);
  background: var(--zap-surface); transition: border-color .2s ease, box-shadow .25s ease;
}
.zap-acc--card .zap-acc__item:last-child { border-bottom: 1px solid var(--zap-border); }
.zap-acc--card .zap-acc__item.is-open { border-color: color-mix(in srgb, var(--zap-primary) 40%, var(--zap-border)); box-shadow: 0 8px 24px -12px rgba(16, 24, 40, .25); }
.zap-acc--card .zap-acc__head { padding: 14px 16px; }
.zap-acc--card .zap-acc__body { padding: 0 16px 16px; }
.zap-acc--card.zap-acc--start .zap-acc__body { padding-left: 54px; }

/* contained: one box, sections divided inside it */
.zap-acc--contained { border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius-sm) + 2px); overflow: hidden; background: var(--zap-surface); }
.zap-acc--contained .zap-acc__head { padding: 14px 16px; border-radius: 0; }
.zap-acc--contained .zap-acc__head:hover { background: color-mix(in srgb, var(--zap-text) 3%, transparent); color: var(--zap-text); }
.zap-acc--contained .zap-acc__item.is-open > .zap-acc__h .zap-acc__head { background: var(--zap-elevated); }
.zap-acc--contained .zap-acc__body { padding: 12px 16px 16px; }

@media (prefers-reduced-motion: reduce) {
  .zap-acc__panel, .zap-acc__item.is-open > .zap-acc__panel, .zap-acc__body, .zap-acc__chev, .zap-acc__icon, .zap-acc__plus-v { transition: none; }
}

/* ── Progress ────────────────────────────────────────────────────────────────
   --pg-c is the bar's colour; tones re-point it. */
.zap-progress {
  --pg-c: var(--zap-primary); --pg-h: 10px;
  position: relative; display: flex; gap: 0; height: var(--pg-h); border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--zap-text) 9%, var(--zap-border));
}
.zap-progress__bar {
  position: relative; height: 100%; border-radius: inherit; flex: none;
  background-color: var(--pg-c);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
  transition: width .6s cubic-bezier(.3, .7, .2, 1), background-color .3s ease;
}
/* a soft sheen that runs along a filling bar */
.zap-progress:not(.is-indeterminate):not(.is-complete):not(.has-segments) > .zap-progress__bar::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: zap-pg-sheen 2.2s ease-in-out infinite;
}
@keyframes zap-pg-sheen { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.zap-progress__buffer {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit;
  background: color-mix(in srgb, var(--pg-c) 28%, transparent);
  transition: width .6s cubic-bezier(.3, .7, .2, 1);
}
.zap-progress__buffer + .zap-progress__bar { z-index: 1; }

.zap-progress--xs { --pg-h: 4px; }
.zap-progress--sm { --pg-h: 6px; }
.zap-progress--lg { --pg-h: 20px; }
.zap-progress--success { --pg-c: var(--zap-success, #059669); }
.zap-progress--warning { --pg-c: var(--zap-warning, #d97706); }
.zap-progress--danger  { --pg-c: var(--zap-danger, #dc2626); }
.zap-progress--neutral { --pg-c: var(--zap-text); }

/* stripes, moving */
.zap-progress.is-striped .zap-progress__bar {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .22) 25%, transparent 25%, transparent 50%,
    rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .22) 75%, transparent 75%, transparent);
  background-size: 16px 16px;
}
.zap-progress.is-striped.is-animated .zap-progress__bar { animation: zap-pg-stripes .8s linear infinite; }
@keyframes zap-pg-stripes { to { background-position: 16px 0; } }

/* no value: a sweep that never ends */
.zap-progress.is-indeterminate .zap-progress__bar { position: absolute; left: 0; width: 40%; animation: zap-pg-sweep 1.4s cubic-bezier(.45, 0, .3, 1) infinite; }
@keyframes zap-pg-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* the value inside a large bar */
.zap-progress__in {
  position: absolute; right: 8px; top: 0; bottom: 0; display: flex; align-items: center;
  font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* steps: separate cells */
.zap-progress.has-steps { gap: 4px; background: none; border-radius: 0; overflow: visible; }
.zap-progress__cell { flex: 1; height: 100%; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--zap-text) 9%, var(--zap-border)); }

/* segments: parts of one whole, with a hairline between them */
.zap-progress.has-segments .zap-progress__seg { border-radius: 0; }
.zap-progress.has-segments .zap-progress__seg + .zap-progress__seg { box-shadow: inset 2px 0 0 var(--zap-surface); }
.zap-progress__seg--success { background-color: var(--zap-success, #059669); }
.zap-progress__seg--warning { background-color: var(--zap-warning, #d97706); }
.zap-progress__seg--danger  { background-color: var(--zap-danger, #dc2626); }
.zap-progress__seg--neutral { background-color: var(--zap-muted); }
.zap-progress__seg--c2 { background-color: var(--zap-chart-2); }
.zap-progress__seg--c3 { background-color: var(--zap-chart-3); }
.zap-progress__seg--c5 { background-color: var(--zap-chart-5); }
.zap-progress__seg--c7 { background-color: var(--zap-chart-7); }

/* label + value line, legend */
.zap-progress-field { display: grid; gap: 7px; }
.zap-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.zap-progress__label { font-weight: 600; }
.zap-progress__value { color: var(--zap-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.zap-progress__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--zap-muted); }
.zap-progress__key { display: inline-flex; align-items: center; gap: 6px; }
.zap-progress__key b { color: var(--zap-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.zap-progress__dot { width: 8px; height: 8px; border-radius: 3px; }
.zap-progress__dot:not([class*="seg--"]) { background: var(--zap-primary); }

/* ── Progress ring ──────────────────────────────────────────────────────── */
.zap-ring {
  --pg-c: var(--zap-primary);
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--ring-size); height: var(--ring-size);
}
.zap-ring > svg { width: 100%; height: 100%; display: block; }
.zap-ring__track { stroke: color-mix(in srgb, var(--zap-text) 9%, var(--zap-border)); }
.zap-ring__bar { stroke: var(--pg-c); transition: stroke-dasharray .6s cubic-bezier(.3, .7, .2, 1), stroke .3s ease; }
.zap-ring--success { --pg-c: var(--zap-success, #059669); }
.zap-ring--warning { --pg-c: var(--zap-warning, #d97706); }
.zap-ring--danger  { --pg-c: var(--zap-danger, #dc2626); }
.zap-ring.is-complete { --pg-c: var(--zap-success, #059669); }
.zap-ring.is-indeterminate > svg { animation: zap-btn-spin 1s linear infinite; }
.zap-ring__center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; line-height: 1.1; }
.zap-ring__value { font-size: calc(var(--ring-size) * .24); font-weight: 700; font-variant-numeric: tabular-nums; }
.zap-ring__label { font-size: calc(var(--ring-size) * .12); color: var(--zap-muted); margin-top: 2px; }
.zap-ring__check { display: none; width: calc(var(--ring-size) * .38); height: calc(var(--ring-size) * .38); color: var(--pg-c); }
.zap-ring.is-complete .zap-ring__check { display: block; animation: zap-code-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.zap-ring.is-complete .zap-ring__value { display: none; }

@media (prefers-reduced-motion: reduce) {
  .zap-progress__bar, .zap-progress__buffer, .zap-ring__bar { transition: none; }
  .zap-progress__bar::after { animation: none !important; display: none; }
  .zap-progress.is-striped.is-animated .zap-progress__bar { animation: none; }
  .zap-progress.is-indeterminate .zap-progress__bar { animation-duration: 3s; }
}

/* ── Alert ───────────────────────────────────────────────────────────────────
   --al-c is the kind's colour; every variant is mixed from it. The wrapper is
   a one-row grid, so a dismissed alert folds its height away (1fr → 0fr). */
.zap-alert-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s cubic-bezier(.3, .7, .2, 1), opacity .25s ease, margin .32s ease; }
.zap-alert-wrap.is-closed { grid-template-rows: 0fr; opacity: 0; }
.zap-alert-wrap.is-gone { display: none; }
.zap-alert-fold { min-height: 0; overflow: hidden; }
.zap-alert-wrap.is-closed .zap-alert { transform: scale(.98); }
.zap-alert {
  --al-c: var(--zap-primary);
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: var(--zap-radius-sm);
  border: 1px solid color-mix(in srgb, var(--al-c) 26%, transparent);
  background: color-mix(in srgb, var(--al-c) 9%, var(--zap-surface));
  color: var(--zap-text); font-size: 14px; line-height: 1.5;
  transition: transform .32s cubic-bezier(.3, .7, .2, 1);
  animation: zap-alert-in .35s cubic-bezier(.3, .7, .2, 1);
}
@keyframes zap-alert-in { from { opacity: 0; transform: translateY(-6px); } }
.zap-alert--success { --al-c: var(--zap-success, #059669); }
.zap-alert--warn    { --al-c: var(--zap-warning, #d97706); }
.zap-alert--error   { --al-c: var(--zap-danger, #dc2626); }
.zap-alert--neutral { --al-c: var(--zap-muted); }

.zap-alert__icon { flex: none; display: inline-flex; margin-top: 1px; color: var(--al-c); }
.zap-alert__icon svg { width: 20px; height: 20px; }
.zap-alert__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.zap-alert__title { margin: 0; font-weight: 650; color: color-mix(in srgb, var(--al-c) 55%, var(--zap-text)); }
.zap-alert.has-title .zap-alert__text { color: color-mix(in srgb, var(--zap-text) 78%, transparent); }
.zap-alert__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.zap-alert__x {
  flex: none; display: inline-flex; margin: -3px -5px 0 0; padding: 5px; border: 0; border-radius: 7px;
  background: transparent; color: inherit; cursor: pointer; opacity: .55;
  transition: opacity .15s ease, background-color .15s ease;
}
.zap-alert__x:hover { opacity: 1; background: color-mix(in srgb, var(--al-c) 14%, transparent); }
.zap-alert__x:focus-visible { outline: 2px solid var(--al-c); outline-offset: 1px; opacity: 1; }
.zap-alert__x svg { width: 16px; height: 16px; }

/* details behind a toggle */
.zap-alert__toggle {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--al-c); cursor: pointer;
}
.zap-alert__toggle svg { width: 14px; height: 14px; transition: transform .25s ease; }
.zap-alert__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.zap-alert__details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.3, .7, .2, 1); }
.zap-alert__details.is-open { grid-template-rows: 1fr; }
.zap-alert__details > div { min-height: 0; overflow: hidden; }
.zap-alert__details pre {
  margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; overflow: auto; max-height: 180px;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap;
  background: color-mix(in srgb, var(--al-c) 7%, var(--zap-surface)); border: 1px solid color-mix(in srgb, var(--al-c) 18%, transparent);
}

/* autoClose: a line that runs out; hovering or focusing holds it */
.zap-alert__timer {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: color-mix(in srgb, var(--al-c) 55%, transparent); transform-origin: left;
  animation: zap-alert-timer linear forwards;
}
.zap-alert:hover .zap-alert__timer, .zap-alert:focus-within .zap-alert__timer { animation-play-state: paused; }
@keyframes zap-alert-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* variants */
.zap-alert--outline { background: var(--zap-surface); border-color: color-mix(in srgb, var(--al-c) 45%, var(--zap-border)); }
.zap-alert--accent { border-radius: 4px var(--zap-radius-sm) var(--zap-radius-sm) 4px; box-shadow: inset 4px 0 0 var(--al-c); padding-left: 18px; }
.zap-alert--solid { background: var(--al-c); border-color: transparent; color: #fff; }
.zap-alert--solid .zap-alert__icon, .zap-alert--solid .zap-alert__title, .zap-alert--solid .zap-alert__toggle { color: #fff; }
.zap-alert--solid.has-title .zap-alert__text { color: rgba(255, 255, 255, .88); }
.zap-alert--solid .zap-alert__x:hover { background: rgba(255, 255, 255, .18); }
.zap-alert--solid .zap-alert__timer { background: rgba(255, 255, 255, .55); }
.zap-alert--solid .zap-alert__details pre { background: rgba(0, 0, 0, .15); border-color: rgba(255, 255, 255, .2); color: #fff; }
.zap-alert--solid.zap-alert--warn { color: #1c1917; }
.zap-alert--solid.zap-alert--warn :is(.zap-alert__icon, .zap-alert__title, .zap-alert__toggle) { color: #1c1917; }
.zap-alert--solid.zap-alert--warn.has-title .zap-alert__text { color: rgba(28, 25, 23, .85); }

.zap-alert--sm { padding: 8px 11px; gap: 9px; font-size: 13px; }
.zap-alert--sm .zap-alert__icon svg { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
  .zap-alert, .zap-alert-wrap, .zap-alert__details { animation: none; transition: none; }
}

/* ── Tooltip ─────────────────────────────────────────────────────────────────
   The bubble is position: fixed in a layer of its own (tooltip.js places it);
   data-side says which side of the trigger it's on — the arrow and the
   direction it grows from follow; --tip-arrow is where along the edge the
   arrow sits. */
.zap-tip { position: relative; display: inline-flex; }
.zap-tip > :disabled { pointer-events: none; }      /* so a disabled button still shows why */
.zap-tip:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 2px; border-radius: 4px; }
.zap-tip__pop {
  --tip-bg: #111827; --tip-fg: #f9fafb; --tip-border: transparent;
  position: fixed; left: 0; top: 0; z-index: 400; box-sizing: border-box;
  max-width: 260px; width: max-content; padding: 6px 10px; border-radius: 8px;
  background: var(--tip-bg); color: var(--tip-fg); border: 1px solid var(--tip-border);
  font: 500 12.5px/1.45 var(--zap-font, inherit); text-align: left; overflow-wrap: anywhere;
  box-shadow: 0 10px 24px -8px rgba(2, 6, 23, .35), 0 2px 6px -2px rgba(2, 6, 23, .2);
  pointer-events: none; animation: zap-tip-in .16s cubic-bezier(.2, .8, .2, 1);
}
.zap[data-theme="dark"] .zap-tip__pop--dark { --tip-bg: #f3f4f6; --tip-fg: #111827; }
.zap-tip__pop.is-interactive { pointer-events: auto; }
.zap-tip__pop.is-leaving { animation: zap-tip-out .12s ease-in forwards; }
.zap-tip__pop[data-side="top"] { transform-origin: var(--tip-arrow, 50%) bottom; }
.zap-tip__pop[data-side="bottom"] { transform-origin: var(--tip-arrow, 50%) top; }
.zap-tip__pop[data-side="left"] { transform-origin: right var(--tip-arrow, 50%); }
.zap-tip__pop[data-side="right"] { transform-origin: left var(--tip-arrow, 50%); }
@keyframes zap-tip-in { from { opacity: 0; transform: scale(.9); } }
@keyframes zap-tip-out { to { opacity: 0; transform: scale(.94); } }

.zap-tip__arrow { position: absolute; width: 10px; height: 10px; background: var(--tip-bg); border: 1px solid var(--tip-border); box-sizing: border-box; transform: rotate(45deg); }
.zap-tip__pop[data-side="top"] .zap-tip__arrow { bottom: -5px; left: calc(var(--tip-arrow, 50%) - 5px); border-top-color: transparent; border-left-color: transparent; }
.zap-tip__pop[data-side="bottom"] .zap-tip__arrow { top: -5px; left: calc(var(--tip-arrow, 50%) - 5px); border-bottom-color: transparent; border-right-color: transparent; }
.zap-tip__pop[data-side="left"] .zap-tip__arrow { right: -5px; top: calc(var(--tip-arrow, 50%) - 5px); border-bottom-color: transparent; border-left-color: transparent; }
.zap-tip__pop[data-side="right"] .zap-tip__arrow { left: -5px; top: calc(var(--tip-arrow, 50%) - 5px); border-top-color: transparent; border-right-color: transparent; }

.zap-tip__title { display: block; font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.zap-tip__pop.has-title { padding: 9px 12px; }
.zap-tip__pop.has-title .zap-tip__body { opacity: .85; }
.zap-tip__body { display: inline; }
.zap-tip__keys { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: 1px; }
.zap-tip__pop.has-title .zap-tip__keys { display: flex; margin: 6px 0 0; }
.zap-tip__keys kbd {
  min-width: 16px; padding: 1px 5px; border-radius: 4px; box-sizing: border-box; text-align: center;
  font: 600 11px/16px var(--zap-font, inherit); background: color-mix(in srgb, var(--tip-fg) 16%, transparent); color: inherit;
}
.zap-tip__pop a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.zap-tip__pop--light { --tip-bg: var(--zap-surface); --tip-fg: var(--zap-text); --tip-border: var(--zap-border); }
.zap-tip__pop--danger { --tip-bg: var(--zap-danger, #dc2626); --tip-fg: #fff; }
.zap-tip__pop--success { --tip-bg: var(--zap-success, #059669); --tip-fg: #fff; }
@media (prefers-reduced-motion: reduce) { .zap-tip__pop, .zap-tip__pop.is-leaving { animation: none; } }

/* ── Toaster ─────────────────────────────────────────────────────────────────
   Toasts sit on top of each other at the stack's edge; toast.js sets each
   one's --y (its place in the deck), --s (its scale) and --swipe. */
.zap-toaster { position: fixed; z-index: 200; width: 360px; max-width: calc(100vw - 32px); }
.zap-toaster--bottom { bottom: 20px; }
.zap-toaster--top { top: 20px; }
.zap-toaster--right { right: 20px; }
.zap-toaster--left { left: 20px; }
.zap-toaster--center { left: 50%; transform: translateX(-50%); }
.zap-toaster__list { position: relative; margin: 0; padding: 0; list-style: none; transition: height .4s cubic-bezier(.2, .8, .2, 1); }
/* hovering the stack fans it out; a gap-filler keeps the pointer "inside" between cards */
.zap-toaster.is-expanded .zap-toaster__list::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; z-index: -1; }

.zap-toast {
  --t-c: var(--zap-primary);
  position: absolute; left: 0; right: 0; box-sizing: border-box;
  border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius-sm) + 3px);
  background: var(--zap-surface); color: var(--zap-text);
  box-shadow: 0 10px 30px -10px rgba(16, 24, 40, .28), 0 4px 10px -6px rgba(16, 24, 40, .12);
  overflow: hidden; touch-action: pan-y; cursor: default;
  transform: translateY(var(--y, 0)) translateX(var(--swipe, 0px)) scale(var(--s, 1));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .4s ease, height .4s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease;
}
.zap-toaster--bottom .zap-toast { bottom: 0; transform-origin: center top; }
.zap-toaster--top .zap-toast { top: 0; transform-origin: center bottom; }
.zap-toast.is-swiping { transition: none; cursor: grabbing; }
.zap-toast.is-leaving { pointer-events: none; }
.zap-toast--success { --t-c: var(--zap-success, #059669); }
.zap-toast--warning { --t-c: var(--zap-warning, #d97706); }
.zap-toast--error   { --t-c: var(--zap-danger, #dc2626); }
.zap-toast--neutral, .zap-toast--loading { --t-c: var(--zap-muted); }

.zap-toast__content { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; font-size: 14px; line-height: 1.45; transition: opacity .3s ease; }
.zap-toast.is-behind .zap-toast__content { opacity: 0; }
.zap-toast__icon { flex: none; display: inline-flex; margin-top: 1px; color: var(--t-c); }
.zap-toast__icon svg { width: 19px; height: 19px; }
.zap-toast.is-mounted .zap-toast__icon svg { animation: zap-code-pop .4s cubic-bezier(.3, 1.6, .5, 1) .1s backwards; }
.zap-toast__spin {
  display: block; width: 17px; height: 17px; margin: 1px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--zap-text) 15%, transparent); border-top-color: var(--zap-text);
  animation: zap-btn-spin .7s linear infinite;
}
.zap-toast__body { flex: 1; min-width: 0; }
.zap-toast__msg { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.zap-toast__desc { margin: 2px 0 0; font-size: 13px; color: var(--zap-muted); overflow-wrap: anywhere; }
.zap-toast__actions { flex: none; display: inline-flex; gap: 6px; align-self: center; }
.zap-toast__x {
  flex: none; display: inline-flex; margin: -4px -6px 0 0; padding: 5px; border: 0; border-radius: 7px;
  background: transparent; color: var(--zap-muted); cursor: pointer;
  opacity: 0; transition: opacity .15s ease, color .15s ease, background-color .15s ease;
}
.zap-toast__x svg { width: 15px; height: 15px; }
.zap-toaster:hover .zap-toast__x, .zap-toast__x:focus-visible, .zap-toast__x.is-always { opacity: 1; }
.zap-toast__x:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 8%, transparent); }
.zap-toast__x:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 1px; }

/* rich colours: the kind tints the whole card */
.zap-toaster.is-rich .zap-toast:not(.zap-toast--neutral):not(.zap-toast--loading) {
  background: color-mix(in srgb, var(--t-c) 10%, var(--zap-surface));
  border-color: color-mix(in srgb, var(--t-c) 32%, var(--zap-border));
}
.zap-toaster.is-rich .zap-toast:not(.zap-toast--neutral):not(.zap-toast--loading) .zap-toast__msg { color: color-mix(in srgb, var(--t-c) 60%, var(--zap-text)); }

@media (max-width: 520px) {
  .zap-toaster { left: 16px; right: 16px; width: auto; max-width: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zap-toast { transition: opacity .2s ease; }
  .zap-toaster__list { transition: none; }
}

/* ── Dropdown menu ───────────────────────────────────────────────────────────
   .zap-menu__panel / __item are shared with the data grid's own menus. */
.zap-menu { position: relative; display: inline-flex; }
.zap-menu__trigger { display: inline-flex; align-items: center; gap: 6px; }
.zap-menu__ticon { display: inline-flex; }
.zap-menu__caret { display: inline-flex; color: var(--zap-muted); transition: transform .2s ease; }
.zap-menu__caret svg { width: 14px; height: 14px; }
.zap-menu.is-open .zap-menu__caret { transform: rotate(180deg); }
.zap-menu__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 210px; max-width: 320px; box-sizing: border-box;
  background: var(--zap-surface); border: 1px solid var(--zap-border);
  border-radius: calc(var(--zap-radius-sm) + 2px);
  box-shadow: 0 16px 40px -12px rgba(16, 24, 40, .28), 0 4px 12px -6px rgba(16, 24, 40, .12);
  padding: 5px; transform-origin: top left; animation: zap-drop-in .16s cubic-bezier(.2, .7, .2, 1);
}
.zap-menu__panel.is-leaving { animation: zap-drop-out .13s ease-in forwards; pointer-events: none; }
.zap-menu--right > .zap-menu__panel { left: auto; right: 0; transform-origin: top right; }
.zap-menu__panel.is-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; animation-name: zap-drop-up-in; }
.zap-menu__panel.is-up.is-leaving { animation-name: zap-drop-up-out; }
.zap-menu__item {
  position: relative; font: inherit; font-size: 14px; width: 100%; text-align: left; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border: 0; background: transparent; color: var(--zap-text);
  border-radius: 7px; cursor: pointer; outline: none;
  transition: background-color .12s ease, color .12s ease;
}
.zap-menu__item:hover, .zap-menu__item:focus-visible, .zap-menu__item:focus, .zap-menu__item.is-open { background: var(--zap-primary-soft); }
.zap-menu__item:disabled { opacity: .45; cursor: not-allowed; background: none; }
.zap-menu__item.is-danger { color: var(--zap-danger, #dc2626); }
.zap-menu__item.is-danger:hover, .zap-menu__item.is-danger:focus { background: color-mix(in srgb, var(--zap-danger, #dc2626) 12%, transparent); }
.zap-menu__icon { width: 18px; display: inline-flex; justify-content: center; flex: none; }
.zap-menu__text { flex: 1; min-width: 0; display: grid; }
.zap-menu__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-menu__desc { font-size: 12px; color: var(--zap-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-menu__kbd { flex: none; font: 500 11px/1 var(--zap-font, inherit); color: var(--zap-muted); letter-spacing: .04em; }
.zap-menu__sub-caret { display: inline-flex; color: var(--zap-muted); margin-right: -4px; }
.zap-menu__sub-caret svg { width: 14px; height: 14px; }
.zap-menu__check, .zap-menu__radio { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--zap-primary); }
.zap-menu__check svg { width: 15px; height: 15px; opacity: 0; transform: scale(.4); transition: opacity .15s ease, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.zap-menu__check.is-on svg { opacity: 1; transform: none; }
.zap-menu__radio::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.zap-menu__radio.is-on::after { transform: scale(1); }
.zap-menu__divider { height: 1px; background: var(--zap-border); margin: 5px 4px; }
.zap-menu__group { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--zap-muted); }
.zap-menu__subwrap { position: relative; }
.zap-menu__panel--sub { top: -6px; left: calc(100% + 4px); transform-origin: top left; }
.zap-menu__panel--sub.is-left { left: auto; right: calc(100% + 4px); transform-origin: top right; }
.zap-menu__panel--ctx { transform-origin: top left; z-index: 160; }
.zap-ctx { outline: none; }
.zap-ctx:focus-visible { box-shadow: 0 0 0 2px var(--zap-primary); border-radius: var(--zap-radius-sm); }

/* ── Breadcrumb ──────────────────────────────────────────────────────────────
   One line: crumbs don't wrap; what doesn't fit folds into "…", and the
   current (last) crumb ellipsises if even that is too wide. */
.zap-crumbs { font-size: 14px; min-width: 0; }
.zap-crumbs__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.zap-crumbs__li { display: inline-flex; align-items: center; gap: 2px; flex: 0 1 auto; min-width: 0; }
.zap-crumbs__li:last-child { flex-shrink: .3; }
.zap-crumbs__sep, .zap-crumbs__drop, .zap-crumbs__icon { flex: none; }
.zap-crumbs.is-measuring .zap-crumbs__li { flex: none; }
.zap-crumbs__li.is-new { animation: zap-crumb-in .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes zap-crumb-in { from { opacity: 0; transform: translateX(-8px); } }
.zap-crumbs__sep { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; color: color-mix(in srgb, var(--zap-muted) 75%, transparent); }
.zap-crumbs__sep:not(:has(svg)) { font-weight: 700; font-size: 1.05em; }
.zap-crumbs__sep svg { width: 14px; height: 14px; }
.zap-crumbs__item {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 220px;
  padding: 4px 6px; border-radius: 7px; color: var(--zap-muted); text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.zap-crumbs__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s ease; }
a.zap-crumbs__item:hover { color: var(--zap-text); }
a.zap-crumbs__item:hover .zap-crumbs__label { background-size: 100% 1px; }
a.zap-crumbs__item:focus-visible, .zap-crumbs__trigger:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 1px; }
.zap-crumbs__item.is-current { color: var(--zap-text); font-weight: 600; }
.zap-crumbs__li:last-child .zap-crumbs__item { max-width: none; }
.zap-crumbs__icon { display: inline-flex; flex: none; }
.zap-crumbs__icon svg { width: 16px; height: 16px; }
.zap-crumbs__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "…" and a crumb's ▾ open a small menu */
.zap-crumbs__drop { position: relative; display: inline-flex; }
.zap-crumbs__trigger {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 26px; padding: 0 4px;
  border: 0; border-radius: 7px; background: transparent; color: var(--zap-muted); font: inherit; font-weight: 700; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.zap-crumbs__trigger svg { width: 14px; height: 14px; transition: transform .2s ease; }
.zap-crumbs__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.zap-crumbs__trigger:hover, .zap-crumbs__trigger[aria-expanded="true"] { background: color-mix(in srgb, var(--zap-text) 7%, transparent); color: var(--zap-text); }
.zap-crumbs__more { letter-spacing: 1px; }
.zap-crumbs__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 190px; max-width: 280px; padding: 5px;
  background: var(--zap-surface); border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius-sm) + 2px);
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .22), 0 4px 10px -4px rgba(16, 24, 40, .1);
  transform-origin: top left; animation: zap-drop-in .16s cubic-bezier(.2, .7, .2, 1);
}
.zap-crumbs__menu.is-leaving { animation: zap-drop-out .15s ease-in forwards; pointer-events: none; }
.zap-crumbs__mitem {
  display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0; border-radius: 7px;
  background: none; color: var(--zap-text); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.zap-crumbs__mitem > span:not(.zap-crumbs__micon) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-crumbs__mitem svg { width: 15px; height: 15px; color: var(--zap-primary); }
.zap-crumbs__mitem:hover, .zap-crumbs__mitem:focus-visible { background: var(--zap-primary-soft); outline: none; }
.zap-crumbs__mitem.is-current { font-weight: 600; }
.zap-crumbs__micon { flex: none; width: 1.3em; text-align: center; }

/* looks */
.zap-crumbs--pill .zap-crumbs__item { background: color-mix(in srgb, var(--zap-text) 5%, transparent); border-radius: 999px; padding: 4px 11px; }
.zap-crumbs--pill a.zap-crumbs__item:hover { background: var(--zap-primary-soft); color: var(--zap-primary); }
.zap-crumbs--pill .zap-crumbs__item.is-current { background: var(--zap-primary); color: var(--zap-primary-contrast); }
.zap-crumbs--pill .zap-crumbs__sep { min-width: 14px; }
.zap-crumbs--contained { padding: 6px 8px; border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius-sm) + 2px); background: var(--zap-elevated); }
.zap-crumbs--sm { font-size: 13px; }
.zap-crumbs--sm .zap-crumbs__item { padding: 2px 5px; }
@media (prefers-reduced-motion: reduce) { .zap-crumbs__li.is-new, .zap-crumbs__menu { animation: none; } }

/* ── Avatar ──────────────────────────────────────────────────────────────────
   Sized by --av-size, coloured from --av-h (a hue from the name). The face
   clips the image; the status dot and badge sit outside it. */
.zap-avatar {
  --av-bg: linear-gradient(135deg, hsl(var(--av-h) 72% 62%), hsl(calc(var(--av-h) + 38) 68% 46%));
  --av-fg: #fff;
  --av-radius: 50%;
  position: relative; display: inline-flex; flex: none; vertical-align: middle;
  width: var(--av-size); height: var(--av-size); padding: 0; border: 0; margin: 0;
  font: 700 calc(var(--av-size) * .38) / 1 var(--zap-font, inherit); letter-spacing: .01em;
  background: none; color: var(--av-fg); border-radius: var(--av-radius);
}
.zap-avatar--rounded { --av-radius: 28%; }
.zap-avatar--square { --av-radius: 12%; }
.zap-avatar--soft { --av-bg: hsl(var(--av-h) 75% 92%); --av-fg: hsl(var(--av-h) 55% 34%); }
.zap[data-theme="dark"] .zap-avatar--soft { --av-bg: hsl(var(--av-h) 35% 22%); --av-fg: hsl(var(--av-h) 75% 78%); }
.zap-avatar__face {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden;
  border-radius: var(--av-radius); background: var(--av-bg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.zap-avatar__initials { user-select: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.zap-avatar--soft .zap-avatar__initials { text-shadow: none; }
.zap-avatar__icon { display: inline-flex; width: 58%; height: 58%; }
.zap-avatar__icon svg { width: 100%; height: 100%; }
.zap-avatar:not([style*="--av-h"]) .zap-avatar__face, .zap-avatar__face:has(.zap-avatar__icon) { background: color-mix(in srgb, var(--zap-text) 10%, var(--zap-surface)); color: var(--zap-muted); }
.zap-avatar__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.zap-avatar.is-loaded .zap-avatar__img { opacity: 1; transform: none; }
.zap-avatar.is-failed .zap-avatar__img { display: none; }

/* a ring: the theme's colour, or any colour / gradient given */
.zap-avatar.has-ring { padding: calc(var(--av-size) * .07); width: calc(var(--av-size) * 1.14); height: calc(var(--av-size) * 1.14);
  background: var(--av-ring, linear-gradient(45deg, #f59e0b, #ef4444 45%, #a855f7)); border-radius: var(--av-radius); }
.zap-avatar.has-ring .zap-avatar__face { box-shadow: 0 0 0 calc(var(--av-size) * .045) var(--zap-surface); }

/* speaking: a ring that breathes while someone talks (and follows their voice with --av-level) */
.zap-avatar.can-speak .zap-avatar__face { transition: box-shadow .12s ease; }
.zap-avatar.is-speaking .zap-avatar__face {
  box-shadow: 0 0 0 2px var(--zap-surface), 0 0 0 calc(3px + var(--av-level, .5) * 3px) var(--zap-success);
  animation: zap-av-speak 1.1s ease-in-out infinite;
}
@keyframes zap-av-speak { 50% { box-shadow: 0 0 0 2px var(--zap-surface), 0 0 0 calc(4px + var(--av-level, .5) * 4px) color-mix(in srgb, var(--zap-success) 70%, transparent); } }
@media (prefers-reduced-motion: reduce) { .zap-avatar.is-speaking .zap-avatar__face { animation: none; } }

/* status dot, badge */
.zap-avatar__status {
  position: absolute; right: 0; bottom: 0; width: max(8px, calc(var(--av-size) * .26)); height: max(8px, calc(var(--av-size) * .26));
  box-sizing: border-box; border-radius: 50%; border: max(2px, calc(var(--av-size) * .05)) solid var(--zap-surface); background: var(--zap-muted);
}
.zap-avatar--rounded .zap-avatar__status, .zap-avatar--square .zap-avatar__status { right: -2px; bottom: -2px; }
.zap-avatar__status.is-online { background: var(--zap-success, #10b981); }
.zap-avatar__status.is-away { background: var(--zap-warning, #f59e0b); }
.zap-avatar__status.is-busy { background: var(--zap-danger, #ef4444); }
.zap-avatar__status.is-offline { background: color-mix(in srgb, var(--zap-muted) 60%, var(--zap-surface)); }
.zap-avatar__status.is-pulse::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid currentColor; color: var(--zap-success, #10b981);
  animation: zap-av-pulse 1.8s ease-out infinite;
}
@keyframes zap-av-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.zap-avatar__badge {
  position: absolute; top: -3px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--zap-danger, #ef4444); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--zap-surface); animation: zap-code-pop .35s cubic-bezier(.3, 1.6, .5, 1);
}

/* a clickable one */
.zap-avatar.is-button { cursor: pointer; transition: transform .2s cubic-bezier(.3, 1.4, .5, 1); }
.zap-avatar.is-button:hover { transform: translateY(-2px) scale(1.04); }
.zap-avatar.is-button:active { transform: scale(.96); }
.zap-avatar.is-button:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 2px; }

/* groups: overlapping, spread on hover; the hovered one comes forward */
.zap-avatars { --av-overlap: calc(var(--av-size) * -.28); display: inline-flex; align-items: center; padding-left: calc(var(--av-overlap) * -1); }
.zap-avatars--tight { --av-overlap: calc(var(--av-size) * -.42); }
.zap-avatars__item { position: relative; display: inline-flex; margin-left: var(--av-overlap); transition: margin .3s cubic-bezier(.2, .8, .2, 1), transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.zap-avatars__item > .zap-avatar > .zap-avatar__face, .zap-avatars__item > .zap-avatar--more > .zap-avatar__face { box-shadow: 0 0 0 2px var(--zap-surface); }
.zap-avatars:hover .zap-avatars__item { margin-left: calc(var(--av-overlap) * .25); }
.zap-avatars__item:hover { transform: translateY(-3px); z-index: 50 !important; }
.zap-avatar--more { cursor: pointer; }
.zap-avatar--more .zap-avatar__face { background: color-mix(in srgb, var(--zap-text) 9%, var(--zap-surface)); color: var(--zap-text); font-size: calc(var(--av-size) * .32); }
.zap-avatar--more:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 2px; }
.zap-avatars__pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; display: grid; gap: 4px; min-width: 210px; max-height: 260px; overflow: auto; padding: 8px;
  background: var(--zap-surface); border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius-sm) + 2px);
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .22); transform-origin: top left; animation: zap-drop-in .16s cubic-bezier(.2, .7, .2, 1);
}
.zap-avatars__pop.is-leaving { animation: zap-drop-out .15s ease-in forwards; }
.zap-avatars__pop .zap-avatar-label { padding: 4px 6px; border-radius: 8px; }
.zap-avatars__pop .zap-avatar-label:hover { background: color-mix(in srgb, var(--zap-text) 5%, transparent); }
.zap-avatars__also { margin: 4px 6px 2px; font-size: 12px; color: var(--zap-muted); }

/* an avatar with a name */
.zap-avatar-label { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.zap-avatar-label__text { display: grid; min-width: 0; line-height: 1.3; }
.zap-avatar-label__name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-avatar-label__desc { font-size: 12px; color: var(--zap-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-avatar-label.is-small .zap-avatar-label__name { font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .zap-avatar__status.is-pulse::after { animation: none; }
  .zap-avatars__item, .zap-avatar.is-button, .zap-avatar__img { transition: none; }
}

/* ── Pagination ──────────────────────────────────────────────────────────────
   Fixed cells (blank ones keep their place); the numbers roll inside them and
   one highlight (.zap-pg__ind) slides to the current page's cell. */
.zap-pg { --pg-h: 34px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.zap-pg__row { display: inline-flex; align-items: center; gap: 4px; }
.zap-pg__nums { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.zap-pg__num {
  position: relative; z-index: 1; font: inherit; min-width: var(--pg-h); height: var(--pg-h); padding: 0 8px; box-sizing: border-box;
  display: inline-grid; place-items: center; overflow: hidden; font-variant-numeric: tabular-nums;
  border: 1px solid var(--zap-border); background: var(--zap-surface); color: var(--zap-text);
  border-radius: var(--zap-radius-sm); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .2s ease, transform .15s ease;
}
.zap-pg__num:hover:not(:disabled):not(.is-active) { border-color: var(--zap-primary); color: var(--zap-primary); }
.zap-pg__num:active:not(:disabled) { transform: scale(.94); }
.zap-pg__num:focus-visible, .zap-pg__gap:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 2px; }
.zap-pg__num.is-active { background: var(--zap-primary); border-color: var(--zap-primary); color: var(--zap-primary-contrast); font-weight: 600; }
.zap-pg__num:disabled { opacity: .4; cursor: not-allowed; }
.zap-pg__blank { visibility: hidden; pointer-events: none; }
.zap-pg__step svg { width: 15px; height: 15px; }
.zap-pg__n { display: inline-block; }
.zap-pg__n.is-up { animation: zap-pg-up .28s cubic-bezier(.2, .8, .2, 1); }
.zap-pg__n.is-down { animation: zap-pg-down .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes zap-pg-up { from { transform: translateY(70%); opacity: 0; } }
@keyframes zap-pg-down { from { transform: translateY(-70%); opacity: 0; } }

/* the sliding highlight — once it has been placed, the active cell lets it show */
.zap-pg__ind {
  position: absolute; left: 0; top: 0; height: 100%; z-index: 0; border-radius: var(--zap-radius-sm);
  background: var(--zap-primary); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--zap-primary) 60%, transparent);
  opacity: 0; pointer-events: none;
}
.zap-pg.is-ready .zap-pg__ind { opacity: 1; }
.zap-pg.is-anim .zap-pg__ind { transition: transform .3s cubic-bezier(.3, .7, .2, 1), width .3s cubic-bezier(.3, .7, .2, 1), opacity .2s ease; }
.zap-pg.is-ready :where(.zap-pg__num.is-active) { background: transparent; border-color: transparent; }

/* "…" jumps a window's width; on hover it shows which way */
.zap-pg__gap {
  position: relative; display: inline-grid; place-items: center; min-width: 24px; height: var(--pg-h); padding: 0; border: 0; border-radius: var(--zap-radius-sm);
  background: none; color: var(--zap-muted); font: inherit; cursor: pointer;
}
.zap-pg__gap > span { grid-area: 1 / 1; transition: opacity .15s ease, transform .2s ease; }
.zap-pg__skip { display: inline-flex; opacity: 0; transform: scale(.6); color: var(--zap-primary); }
.zap-pg__skip svg { width: 15px; height: 15px; }
.zap-pg__gap:hover .zap-pg__dots, .zap-pg__gap:focus-visible .zap-pg__dots { opacity: 0; }
.zap-pg__gap:hover .zap-pg__skip, .zap-pg__gap:focus-visible .zap-pg__skip { opacity: 1; transform: none; }
.zap-pg__gap.is-blank { visibility: hidden; pointer-events: none; }

/* looks and sizes */
.zap-pg--ghost .zap-pg__num:not(.is-active) { border-color: transparent; background: transparent; }
.zap-pg--ghost .zap-pg__num:hover:not(:disabled):not(.is-active) { background: color-mix(in srgb, var(--zap-text) 6%, transparent); border-color: transparent; color: var(--zap-text); }
.zap-pg--pills .zap-pg__num, .zap-pg--pills .zap-pg__ind { border-radius: 999px; }
.zap-pg--pills .zap-pg__row { padding: 4px; border-radius: 999px; background: var(--zap-elevated); box-shadow: inset 0 0 0 1px var(--zap-border); }
.zap-pg--pills .zap-pg__num:not(.is-active) { border-color: transparent; background: transparent; }
.zap-pg--sm { --pg-h: 28px; font-size: 13px; }
.zap-pg--sm .zap-pg__num { padding: 0 6px; }
.zap-pg--lg { --pg-h: 42px; font-size: 15px; }
.zap-pg--simple .zap-pg__row { gap: 10px; }
.zap-pg__simple { font-size: 14px; color: var(--zap-muted); font-variant-numeric: tabular-nums; }
.zap-pg__simple b { color: var(--zap-text); }

/* totals, page size, jump box */
.zap-pg__info { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: var(--zap-muted); font-variant-numeric: tabular-nums; }
.zap-pg__size .zap-sel { min-width: 110px; }
.zap-pg__jump { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 12px; color: var(--zap-muted); white-space: nowrap; }
.zap-pg__jump input { height: var(--pg-h); padding: 0 6px; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; box-sizing: border-box; -moz-appearance: textfield; }
.zap-pg__jump input::-webkit-outer-spin-button, .zap-pg__jump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .zap-pg__n.is-up, .zap-pg__n.is-down { animation: none; }
  .zap-pg.is-anim .zap-pg__ind { transition: none; }
}

/* ── Slider ──────────────────────────────────────────────────────────────────
   --sl-c is the colour; the fill and handles glide when the track is pressed
   (.is-jump), and follow the pointer exactly while dragged. */
.zap-slider { --sl-c: var(--zap-primary); --sl-h: 6px; --sl-t: 20px; position: relative; padding: 14px calc(var(--sl-t) / 2) 10px; touch-action: none; user-select: none; }
.zap-slider.has-labels { padding-bottom: 30px; }
.zap-slider__track { position: relative; height: var(--sl-h); border-radius: 999px; background: color-mix(in srgb, var(--zap-text) 10%, var(--zap-border)); cursor: pointer; }
.zap-slider__track::before { content: ""; position: absolute; inset: -10px 0; }   /* a taller hit area */
.zap-slider__fill { position: absolute; top: 0; height: 100%; border-radius: 999px; background: var(--sl-c); }
.zap-slider.is-jump .zap-slider__fill, .zap-slider.is-jump .zap-slider__handle { transition: left .2s cubic-bezier(.2, .8, .2, 1), right .2s cubic-bezier(.2, .8, .2, 1); }
.zap-slider__mark { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: color-mix(in srgb, var(--zap-text) 30%, transparent); pointer-events: none; transition: background-color .2s ease; }
.zap-slider__mark.is-in { background: rgba(255, 255, 255, .7); }
.zap-slider__handle {
  position: absolute; top: 50%; z-index: 1; width: var(--sl-t); height: var(--sl-t); box-sizing: border-box; padding: 0;
  transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--sl-c); background: var(--zap-surface);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .25); cursor: grab; outline: none;
  transition: box-shadow .2s ease, transform .15s ease;
}
.zap-slider__handle:hover { box-shadow: 0 1px 3px rgba(16, 24, 40, .25), 0 0 0 6px color-mix(in srgb, var(--sl-c) 16%, transparent); }
.zap-slider__handle:focus-visible, .zap-slider__handle.is-dragging { box-shadow: 0 1px 3px rgba(16, 24, 40, .25), 0 0 0 7px color-mix(in srgb, var(--sl-c) 24%, transparent); }
.zap-slider__handle.is-dragging { cursor: grabbing; transform: translate(-50%, -50%) scale(1.12); z-index: 2; }
.zap-slider__tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; padding: 4px 8px; border-radius: 7px; white-space: nowrap;
  background: var(--zap-text); color: var(--zap-bg); font: 600 12px/1.2 var(--zap-font, inherit); font-variant-numeric: tabular-nums;
  transform: translate(-50%, 4px) scale(.85); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .2s cubic-bezier(.3, 1.4, .5, 1);
}
.zap-slider__tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--zap-text); }
.zap-slider__handle:hover .zap-slider__tip, .zap-slider__handle:focus-visible .zap-slider__tip, .zap-slider__handle.is-dragging .zap-slider__tip, .zap-slider.tip-always .zap-slider__tip { opacity: 1; transform: translate(-50%, 0) scale(1); }
.zap-slider.tip-always { padding-top: 40px; }
.zap-slider__labels { position: absolute; left: calc(var(--sl-t) / 2); right: calc(var(--sl-t) / 2); bottom: 4px; height: 18px; }
.zap-slider__label { position: absolute; transform: translateX(-50%); padding: 0 2px; border: 0; background: none; font: inherit; font-size: 12px; color: var(--zap-muted); cursor: pointer; white-space: nowrap; transition: color .2s ease; }
.zap-slider__label.is-in { color: var(--zap-text); font-weight: 600; }
.zap-slider--sm { --sl-h: 4px; --sl-t: 16px; }
.zap-slider--lg { --sl-h: 10px; --sl-t: 26px; }
.zap-slider--success { --sl-c: var(--zap-success, #059669); }
.zap-slider--danger { --sl-c: var(--zap-danger, #dc2626); }
.zap-slider--warning { --sl-c: var(--zap-warning, #d97706); }
.zap-slider.is-disabled { opacity: .5; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .zap-slider.is-jump .zap-slider__fill, .zap-slider.is-jump .zap-slider__handle, .zap-slider__tip { transition: none; } }

/* ── Stepper ─────────────────────────────────────────────────────────────────
   Each step is a dot + text; the bar to the next fills (scaleX) once it's passed. */
.zap-stepper-wrap { display: grid; gap: 22px; }
.zap-stepper { --st-c: var(--zap-primary); display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.zap-step { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.zap-step.is-last { flex: none; }
.zap-step__head { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px; margin: -4px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
.zap-step.is-clickable .zap-step__head { cursor: pointer; }
.zap-step.is-clickable .zap-step__head:hover .zap-step__label { color: var(--st-c); }
.zap-step__head:focus-visible { outline: 2px solid var(--st-c); outline-offset: 2px; }
.zap-step__head:disabled { color: inherit; opacity: 1; }
.zap-step__dot {
  position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--zap-surface); border: 2px solid var(--zap-border); color: var(--zap-muted);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.zap-step__dot svg { width: 16px; height: 16px; }
.zap-step__tick { stroke-dasharray: 16; stroke-dashoffset: 16; animation: zap-step-tick .35s cubic-bezier(.6, 0, .3, 1) .1s forwards; }
@keyframes zap-step-tick { to { stroke-dashoffset: 0; } }
.zap-step.is-active .zap-step__dot { border-color: var(--st-c); color: var(--st-c); transform: scale(1.08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-c) 16%, transparent); }
.zap-step.is-active .zap-step__dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--st-c); animation: zap-step-pulse 2s ease-out infinite; }
@keyframes zap-step-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(1.6); opacity: 0; } }
.zap-step.is-done .zap-step__dot { background: var(--st-c); border-color: var(--st-c); color: var(--zap-primary-contrast); }
.zap-step.is-error .zap-step__dot { background: var(--zap-danger, #dc2626); border-color: var(--zap-danger, #dc2626); color: #fff; }
.zap-step__text { display: grid; min-width: 0; }
.zap-step__label { font-size: 14px; font-weight: 600; color: var(--zap-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s ease; }
.zap-step.is-active .zap-step__label, .zap-step.is-done .zap-step__label { color: var(--zap-text); }
.zap-step.is-error .zap-step__label { color: var(--zap-danger, #dc2626); }
.zap-step__desc { font-size: 12px; color: var(--zap-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zap-step__desc em { font-style: normal; opacity: .8; }
.zap-step__bar { flex: 1; min-width: 20px; height: 2px; margin: 0 6px; border-radius: 2px; background: var(--zap-border); overflow: hidden; }
.zap-step__bar i { display: block; height: 100%; background: var(--st-c); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.6, 0, .3, 1); }
.zap-step.is-done .zap-step__bar i { transform: none; }

/* vertical: bars run down between the dots */
.zap-stepper-wrap.is-vertical { grid-template-columns: auto 1fr; align-items: start; gap: 28px; }
.zap-stepper--vertical { flex-direction: column; }
.zap-stepper--vertical .zap-step { flex-direction: column; align-items: flex-start; gap: 0; flex: none; }
.zap-stepper--vertical .zap-step__bar { width: 2px; height: 26px; min-width: 0; margin: 4px 0 4px 15px; flex: none; }
.zap-stepper--vertical .zap-step__bar i { width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; }
.zap-stepper--vertical .zap-step.is-done .zap-step__bar i { transform: none; }

/* compact: small dots, only the current label */
.zap-stepper--compact .zap-step__dot { width: 12px; height: 12px; font-size: 0; }
.zap-stepper--compact .zap-step__dot svg { display: none; }
.zap-stepper--compact .zap-step.is-done .zap-step__dot, .zap-stepper--compact .zap-step.is-active .zap-step__dot { background: var(--st-c); }
.zap-stepper--compact .zap-step:not(.is-active) .zap-step__text { display: none; }
.zap-stepper--compact .zap-step.is-active .zap-step__dot::after { inset: -4px; }

/* panels: the current one slides in from the side it was reached from */
.zap-stepper__panels { min-width: 0; }
.zap-stepper__panel:not(.is-active) { display: none; }
.zap-stepper__panel.is-from-r { animation: zap-tab-in-r .32s cubic-bezier(.2, .7, .2, 1); }
.zap-stepper__panel.is-from-l { animation: zap-tab-in-l .32s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .zap-step.is-active .zap-step__dot::after { animation: none; }
  .zap-step__bar i, .zap-step__dot { transition: none; }
}

/* ── Command palette ─────────────────────────────────────────────────────────
   The active row's highlight is one element that slides between rows; the
   list's height follows its rows (command.js sets it). */
.zap-cmd {
  position: fixed; inset: 0; z-index: 150;
  display: flex; justify-content: center; align-items: flex-start; padding: 13vh 16px 16px;
  background: rgba(2, 6, 23, .45); backdrop-filter: blur(3px);
  animation: zap-fade .18s ease;
}
.zap-cmd.is-leaving { animation: zap-cmd-fade-out .16s ease forwards; }
.zap-cmd__panel {
  width: 100%; max-width: 620px; display: flex; flex-direction: column;
  background: var(--zap-surface); border: 1px solid var(--zap-border);
  border-radius: calc(var(--zap-radius) + 2px);
  box-shadow: 0 30px 80px -20px rgba(2, 6, 23, .45), 0 0 0 1px rgba(255, 255, 255, .02);
  overflow: hidden; transform-origin: top center;
  animation: zap-cmd-in .22s cubic-bezier(.2, .9, .3, 1.15);
}
.zap-cmd.is-leaving .zap-cmd__panel { animation: zap-cmd-out .16s ease forwards; }
@keyframes zap-cmd-in { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
@keyframes zap-cmd-out { to { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes zap-cmd-fade-out { to { opacity: 0; } }

.zap-cmd__top { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--zap-border); }
.zap-cmd__search { flex: none; width: 19px; height: 19px; color: var(--zap-muted); }
.zap-cmd__crumb {
  flex: none; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 7px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--zap-primary) 25%, transparent);
  background: var(--zap-primary-soft); color: var(--zap-primary);
  animation: zap-chip-in .2s cubic-bezier(.3, 1.3, .5, 1);
}
.zap-cmd__input {
  flex: 1; min-width: 0; box-sizing: border-box; font: inherit; font-size: 16px;
  padding: 17px 4px; border: 0; background: transparent; color: var(--zap-text); outline: none;
}
.zap-cmd__input::placeholder { color: var(--zap-muted); }
.zap-cmd__spin {
  flex: none; width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--zap-primary) 25%, transparent); border-top-color: var(--zap-primary);
  animation: zap-btn-spin .7s linear infinite;
}
.zap-cmd kbd, .zap-cmd__esc {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 20px; box-sizing: border-box;
  padding: 0 5px; border-radius: 5px; font: 600 11px/1 var(--zap-font, inherit); color: var(--zap-muted);
  background: var(--zap-elevated); border: 1px solid var(--zap-border); border-bottom-width: 2px;
}
.zap-cmd__esc { flex: none; }

.zap-cmd__list { overflow: auto; overscroll-behavior: contain; transition: height .22s cubic-bezier(.2, .8, .2, 1); max-height: 360px; }
.zap-cmd__inner { position: relative; padding: 6px; }
.zap-cmd__hl {
  position: absolute; left: 6px; right: 6px; top: 0; border-radius: 9px; pointer-events: none;
  background: var(--zap-primary-soft);
  box-shadow: inset 2px 0 0 var(--zap-primary);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), height .18s ease, opacity .15s ease;
}
.zap-cmd__group { position: relative; padding: 10px 10px 5px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--zap-muted); }
.zap-cmd__item {
  position: relative; display: flex; align-items: center; gap: 11px; min-height: 42px; box-sizing: border-box;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; color: var(--zap-text);
}
.zap-cmd__item.is-disabled { opacity: .45; cursor: not-allowed; }
.zap-cmd__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 8px; background: color-mix(in srgb, var(--zap-text) 5%, transparent); font-size: 15px;
  transition: background-color .15s ease, transform .2s ease;
}
.zap-cmd__item.is-active .zap-cmd__icon { background: var(--zap-surface); transform: scale(1.06); }
.zap-cmd__icon:empty { visibility: hidden; }
.zap-cmd__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.zap-cmd__label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-cmd__label mark { background: none; color: var(--zap-primary); font-weight: 700; }
.zap-cmd__desc { font-size: 12px; color: var(--zap-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-cmd__keys { flex: none; display: inline-flex; gap: 3px; }
.zap-cmd__hint { flex: none; font-size: 12px; color: var(--zap-muted); }
.zap-cmd__more { flex: none; width: 16px; height: 16px; color: var(--zap-muted); }
.zap-cmd__item.is-active .zap-cmd__more { color: var(--zap-primary); transform: translateX(2px); transition: transform .15s ease; }
.zap-cmd__empty { padding: 32px 16px; text-align: center; color: var(--zap-muted); font-size: 14px; }
.zap-cmd__empty b { color: var(--zap-text); }

.zap-cmd__foot {
  display: flex; align-items: center; gap: 16px; padding: 9px 14px;
  border-top: 1px solid var(--zap-border); color: var(--zap-muted); font-size: 12px; background: var(--zap-elevated);
}
.zap-cmd__foot span { display: inline-flex; align-items: center; gap: 4px; }
.zap-cmd__count { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .zap-cmd { padding-top: 16px; } .zap-cmd__foot span:not(.zap-cmd__count):nth-child(n+3) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .zap-cmd, .zap-cmd__panel, .zap-cmd.is-leaving, .zap-cmd.is-leaving .zap-cmd__panel { animation-duration: .01s; }
  .zap-cmd__hl, .zap-cmd__list { transition: none; }
}

.zap-kbd {
  font: inherit; font-size: 12px; font-weight: 600;
  border: 1px solid var(--zap-border); border-bottom-width: 2px;
  border-radius: 6px; padding: 2px 6px; color: var(--zap-muted);
  background: var(--zap-elevated);
}

/* ── Drawer ──────────────────────────────────────────────────────────────────
   The panel sits off-screen until .is-open, and transitions both ways (so a
   panel let go mid-drag closes from where it is). --dw-drag is the drag,
   --dw-depth how many drawers are stacked on top of this one. */
.zap-drawer { position: fixed; inset: 0; z-index: 110; --dw-ease: cubic-bezier(.32, .72, 0, 1); }
.zap-drawer--inline { pointer-events: none; }
.zap-drawer__backdrop {
  position: absolute; inset: 0; background: rgba(2, 6, 23, .5); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .34s ease;
}
.zap-drawer.is-open .zap-drawer__backdrop { opacity: calc(1 - var(--dw-p, 0)); }
.zap-drawer.is-nested .zap-drawer__backdrop { background: rgba(2, 6, 23, .25); backdrop-filter: none; }
.zap-drawer__panel {
  position: absolute; display: flex; flex-direction: column; box-sizing: border-box;
  background: var(--zap-surface); color: var(--zap-text); outline: none; pointer-events: auto;
  box-shadow: 0 0 0 1px var(--zap-border), 0 24px 60px -12px rgba(2, 6, 23, .35);
  transition: transform .38s var(--dw-ease), border-radius .3s ease, filter .3s ease;
  will-change: transform;
}
.zap-drawer__panel.is-dragging { transition: none; user-select: none; }
.zap-drawer.is-behind .zap-drawer__panel { filter: brightness(.96); }

.zap-drawer--right .zap-drawer__panel, .zap-drawer--left .zap-drawer__panel { top: 0; bottom: 0; width: min(var(--dw-size), 100vw); }
.zap-drawer--right .zap-drawer__panel { right: 0; transform: translateX(100%); }
.zap-drawer--left .zap-drawer__panel { left: 0; transform: translateX(-100%); }
.zap-drawer--right.is-open .zap-drawer__panel { transform: translateX(calc(var(--dw-drag) - var(--dw-depth) * 32px)) scale(calc(1 - var(--dw-depth) * .03)); }
.zap-drawer--left.is-open .zap-drawer__panel { transform: translateX(calc(var(--dw-drag) + var(--dw-depth) * 32px)) scale(calc(1 - var(--dw-depth) * .03)); }

.zap-drawer--bottom .zap-drawer__panel, .zap-drawer--top .zap-drawer__panel {
  left: 0; right: 0; margin: 0 auto; width: min(100%, 720px); height: var(--dw-size); max-height: 92vh;
}
.zap-drawer--bottom .zap-drawer__panel { bottom: 0; border-radius: 18px 18px 0 0; transform: translateY(100%); }
.zap-drawer--top .zap-drawer__panel { top: 0; border-radius: 0 0 18px 18px; transform: translateY(-100%); }
.zap-drawer--bottom.is-open .zap-drawer__panel { transform: translateY(calc(var(--dw-drag) - var(--dw-depth) * 14px)) scale(calc(1 - var(--dw-depth) * .04)); }
.zap-drawer--top.is-open .zap-drawer__panel { transform: translateY(calc(var(--dw-drag) + var(--dw-depth) * 14px)) scale(calc(1 - var(--dw-depth) * .04)); }

.zap-drawer__handle { flex: none; display: flex; justify-content: center; padding: 10px 0 2px; cursor: grab; touch-action: none; }
.zap-drawer--top .zap-drawer__handle { padding: 2px 0 10px; }
.zap-drawer__handle span { width: 40px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--zap-text) 22%, transparent); transition: background-color .2s ease, width .2s ease; }
.zap-drawer__handle:hover span { background: color-mix(in srgb, var(--zap-text) 38%, transparent); width: 48px; }
.zap-drawer__panel.is-dragging .zap-drawer__handle { cursor: grabbing; }

.zap-drawer__head, .zap-drawer__foot { flex: none; user-select: none; transition: border-color .2s ease, box-shadow .2s ease; }
.zap-drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px 14px; border-bottom: 1px solid transparent; touch-action: pan-y;
}
.zap-drawer--left .zap-drawer__head, .zap-drawer--right .zap-drawer__head { touch-action: pan-y; }
.zap-drawer--bottom .zap-drawer__head, .zap-drawer--top .zap-drawer__head { padding-top: 8px; touch-action: none; }
.zap-drawer__panel.is-scrolled-top .zap-drawer__head { border-color: var(--zap-border); box-shadow: 0 8px 14px -12px rgba(2, 6, 23, .35); }
.zap-drawer__titles { display: grid; gap: 3px; min-width: 0; }
.zap-drawer__title { margin: 0; font-size: 17px; font-weight: 700; }
.zap-drawer__desc { margin: 0; font-size: 13px; color: var(--zap-muted); }
.zap-drawer__x {
  flex: none; display: inline-flex; align-items: center; justify-content: center; margin: -4px -6px 0 0;
  width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--zap-muted); cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .2s ease;
}
.zap-drawer__x svg { width: 17px; height: 17px; }
.zap-drawer__x:hover { background: color-mix(in srgb, var(--zap-text) 8%, transparent); color: var(--zap-text); transform: rotate(90deg); }
.zap-drawer__x:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 1px; }
.zap-drawer__body { flex: 1; min-height: 0; padding: 4px 18px 18px; overflow: auto; overscroll-behavior: contain; }
.zap-drawer--bottom .zap-drawer__body, .zap-drawer--top .zap-drawer__body { padding-top: 4px; }
.zap-drawer__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid transparent; }
.zap-drawer__panel.is-scrolled-bottom .zap-drawer__foot { border-color: var(--zap-border); box-shadow: 0 -8px 14px -12px rgba(2, 6, 23, .35); }

@media (prefers-reduced-motion: reduce) {
  .zap-drawer__panel { transition: opacity .2s ease; }
  .zap-drawer:not(.is-open) .zap-drawer__panel { opacity: 0; }
}

/* ── Charts ──────────────────────────────────────────────────────────────── */
.zap-spark { display: block; width: 100%; height: auto; }
.zap-bars { display: flex; align-items: flex-end; gap: 8px; }
.zap-bar { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.zap-bar__fill { width: 100%; max-width: 38px; min-height: 2px; background: var(--zap-primary); border-radius: 6px 6px 0 0; transition: height .3s ease; }
.zap-bar__label { font-size: 11px; color: var(--zap-muted); }

.zap-viz { position: relative; min-width: 0; }
.zap-viz__plot { position: relative; }
.zap-viz__svg { display: block; width: 100%; overflow: visible; user-select: none; -webkit-user-select: none; }
.zap-viz__svg text { font-family: var(--zap-font); font-size: 11px; }
.zap-viz__svg .zc-ax { fill: var(--zap-muted); font-variant-numeric: tabular-nums; }
.zap-viz__svg .zc-val, .zap-viz__svg .zc-lab { fill: var(--zap-text); font-weight: 600; }
.zap-viz__svg .zc-lab { font-weight: 500; }
.zap-viz__svg .zc-grid { stroke: var(--zap-border); stroke-width: 1; shape-rendering: crispEdges; }
.zap-viz__svg .zc-zero { stroke: var(--zap-muted); opacity: .6; }
.zap-viz__svg .zc-link { stroke: var(--zap-muted); stroke-width: 1; stroke-dasharray: 2 3; }
.zap-viz__svg .zc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zap-viz__svg .zc-dot { stroke: var(--zap-surface); stroke-width: 2; }
.zap-viz__svg .zc-bubble { fill-opacity: .72; }
.zap-viz__svg .zc-cross { stroke: var(--zap-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.zap-viz__svg .zc-hit { fill: transparent; }
.zap-viz__svg .zc-slice { stroke: var(--zap-surface); stroke-width: 2; stroke-linejoin: round; transition: transform .2s ease; transform-origin: center; transform-box: view-box; }
.zap-viz__svg .zc-center { fill: var(--zap-text); font-size: 20px; font-weight: 700; }
.zap-viz__svg .zc-big { font-size: 28px; }
.zap-viz__svg .zc-cell { fill: var(--zap-text); font-size: 10px; }
.zap-viz__svg .zc-cell.is-dark { fill: #fff; }
.zap-viz__svg .zc-tile { fill: #fff; font-weight: 600; paint-order: stroke; stroke: rgba(0,0,0,.28); stroke-width: 2.5px; stroke-linejoin: round; }
.zap-viz__svg .zc-tile--v { font-weight: 400; }
.zap-viz__svg [data-i] { transition: opacity .15s ease; }
.zap-viz__svg.has-hot [data-i]:not(.is-hot):not(.zc-hit) { opacity: .45; }
.zap-viz__svg .zc-slice.is-hot { transform: scale(1.03); }
.zap-viz__tip {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  min-width: 120px; padding: 8px 10px; border-radius: var(--zap-radius-sm);
  background: var(--zap-surface); color: var(--zap-text); border: 1px solid var(--zap-border);
  box-shadow: var(--zap-shadow); font-size: 12px; line-height: 1.5; white-space: nowrap;
}
.zap-viz__tip-h { font-weight: 600; margin-bottom: 2px; }
.zap-viz__tip-r { display: flex; align-items: center; gap: 6px; }
.zap-viz__tip-r i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.zap-viz__tip-r span { color: var(--zap-muted); }
.zap-viz__tip-r b { margin-left: auto; padding-left: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.zap-viz__legend { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; }
.zap-viz__key {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px;
  color: var(--zap-text); background: transparent; border: 0; border-radius: 6px; padding: 3px 7px; cursor: pointer;
}
.zap-viz__key:hover { background: var(--zap-elevated); }
.zap-viz__key i { width: 10px; height: 10px; border-radius: 3px; }
.zap-viz__key b { color: var(--zap-muted); font-weight: 500; }
.zap-viz__key.is-off { color: var(--zap-muted); text-decoration: line-through; }
.zap-viz__key.is-off i { opacity: .3; }

/* ── Live market (canvas) ─────────────────────────────────────────────────── */
.zap-stock { position: relative; min-width: 0; border: 1px solid var(--zap-border); border-radius: var(--zap-radius-sm); background: var(--zap-surface); overflow: hidden; }
.zap-stock canvas { position: absolute; inset: 0; display: block; }
.zap-stock__over { cursor: crosshair; touch-action: pan-y; }
.zap-stock.is-drag .zap-stock__over { cursor: grabbing; }
.zap-stock__badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 6px 12px; border-radius: 999px; font-size: 12px; color: var(--zap-muted);
  background: var(--zap-elevated); border: 1px solid var(--zap-border); pointer-events: none;
}
.zap-stock__badge[hidden] { display: none; }
.zap-depth { position: relative; min-width: 0; }
.zap-depth canvas { display: block; }
.zap-scard {
  display: grid; gap: 4px; text-align: left; font: inherit; color: var(--zap-text); cursor: pointer;
  padding: 10px 12px 8px; border-radius: var(--zap-radius-sm); min-width: 0;
  background: var(--zap-surface); border: 1px solid var(--zap-border);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.zap-scard:hover { border-color: color-mix(in oklab, var(--zap-primary) 45%, var(--zap-border)); }
.zap-scard.is-active { border-color: var(--zap-primary); box-shadow: 0 0 0 3px var(--zap-primary-soft); }
.zap-scard__top { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13px; }
.zap-scard__name { color: var(--zap-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.zap-scard__src { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--zap-muted); background: var(--zap-elevated); border-radius: 4px; padding: 1px 5px; }
.zap-scard__mid { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.zap-scard__px { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 4px; padding: 0 2px; margin: 0 -2px; }
.zap-scard__px[data-flash="up"] { animation: zap-flash-up .6s ease; }
.zap-scard__px[data-flash="up2"] { animation: zap-flash-up2 .6s ease; }
.zap-scard__px[data-flash="down"] { animation: zap-flash-down .6s ease; }
.zap-scard__px[data-flash="down2"] { animation: zap-flash-down2 .6s ease; }
@keyframes zap-flash-up2 { 0% { background: rgba(16,185,129,.45); } 100% { background: transparent; } }
@keyframes zap-flash-down2 { 0% { background: rgba(239,68,68,.45); } 100% { background: transparent; } }
.zap-scard__chg { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.zap-scard__chg.is-up { color: var(--zap-up); }
.zap-scard__chg.is-down { color: var(--zap-down); }
.zap-scard__spark { width: 100%; height: 44px; display: block; }
.zap-scard__foot { font-size: 11px; color: var(--zap-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Badge / Tag / TagInput / Indicator ───────────────────────────────────
   A tone sets --t; soft, solid and outline mix it with the surface. */
.zap-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zap-badge, .zap-tag, .zap-ind__b, .zap-stat, .zap-empty, .zap-spin {
  --t: var(--zap-muted);
}
:is(.zap-badge, .zap-tag, .zap-ind__b, .zap-stat, .zap-empty, .zap-spin).is-primary { --t: var(--zap-primary); }
:is(.zap-badge, .zap-tag, .zap-ind__b, .zap-stat, .zap-empty, .zap-spin).is-success { --t: var(--zap-success, #059669); }
:is(.zap-badge, .zap-tag, .zap-ind__b, .zap-stat, .zap-empty, .zap-spin).is-warning { --t: var(--zap-warning, #d97706); }
:is(.zap-badge, .zap-tag, .zap-ind__b, .zap-stat, .zap-empty, .zap-spin).is-danger { --t: var(--zap-danger, #dc2626); }
:is(.zap-badge, .zap-tag, .zap-ind__b, .zap-stat, .zap-empty, .zap-spin).is-info { --t: #0891b2; }
.zap-badge.is-neutral, .zap-tag.is-neutral { --t: color-mix(in srgb, var(--zap-text) 62%, var(--zap-muted)); }
.zap-badge {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; box-sizing: border-box; white-space: nowrap;
  height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid transparent;
  font: 600 12px/1 var(--zap-font, inherit); letter-spacing: .01em;
}
.zap-badge--sm { height: 18px; padding: 0 7px; font-size: 11px; gap: 4px; }
.zap-badge--lg { height: 26px; padding: 0 11px; font-size: 13px; }
.zap-badge.is-square { border-radius: 6px; }
.zap-badge--soft { color: var(--t); background: color-mix(in srgb, var(--t) 13%, var(--zap-surface)); border-color: color-mix(in srgb, var(--t) 18%, transparent); }
.zap-badge--solid { color: #fff; background: var(--t); }
.zap-badge--outline { color: var(--t); border-color: color-mix(in srgb, var(--t) 55%, transparent); }
.zap-badge__icon { display: inline-flex; } .zap-badge__icon svg { width: 1.1em; height: 1.1em; }
.zap-badge__dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.zap-badge--solid .zap-badge__dot { background: #fff; }
.zap-badge__dot.is-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: zap-badge-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes zap-badge-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

.zap-tag {
  display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; max-width: 100%; vertical-align: middle;
  height: 30px; padding: 0 11px; border-radius: 999px; font: 500 13px/1 var(--zap-font, inherit);
  color: var(--zap-text); background: var(--zap-surface); border: 1px solid var(--zap-border);
  animation: zap-chip-in .2s cubic-bezier(.3, 1.3, .5, 1);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, max-width .16s ease, padding .16s ease;
}
.zap-tag--sm { height: 24px; padding: 0 9px; font-size: 12px; }
.zap-tag.is-removable { padding-right: 4px; }
.zap-tag:not(.is-neutral) { color: var(--t); background: color-mix(in srgb, var(--t) 10%, var(--zap-surface)); border-color: color-mix(in srgb, var(--t) 24%, transparent); }
.zap-tag__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-tag__icon { display: inline-flex; } .zap-tag__icon svg { width: 14px; height: 14px; }
.zap-tag__av { width: 20px; height: 20px; margin-left: -6px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; font-size: 11px; background: var(--zap-elevated); }
.zap-tag__x {
  display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; opacity: .6; cursor: pointer; transition: opacity .12s ease, background-color .12s ease;
}
.zap-tag__x:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.zap-tag__x svg { width: 12px; height: 12px; }
.zap-tag.is-clickable { cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; }
.zap-tag.is-clickable:hover { border-color: color-mix(in srgb, var(--t) 50%, var(--zap-border)); }
.zap-tag.is-clickable:active { transform: scale(.96); }
.zap-tag:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 2px; }
.zap-tag__check { display: inline-grid; place-items: center; width: 0; margin-right: -6px; overflow: hidden; transition: width .18s cubic-bezier(.3, 1.3, .5, 1), margin .18s ease; }
.zap-tag__check svg { width: 13px; height: 13px; flex: none; }
.zap-tag.is-on { color: #fff; background: var(--t); border-color: var(--t); }
.zap-tag.is-on.is-neutral { --t: var(--zap-text); color: var(--zap-surface); }
.zap-tag.is-on .zap-tag__check { width: 13px; margin-right: 0; }
.zap-tag.is-disabled { opacity: .5; cursor: not-allowed; }
.zap-tag.is-leaving { opacity: 0; transform: scale(.7); max-width: 0; padding-left: 0; padding-right: 0; border-width: 0; margin-right: -6px; }
.zap-tag.is-armed { box-shadow: 0 0 0 2px var(--zap-danger, #dc2626); }
.zap-tag.is-blink { animation: zap-tag-blink .5s ease 2; }
@keyframes zap-tag-blink { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 45%, transparent); transform: scale(1.06); } }

.zap-tags-field { display: grid; gap: 6px; min-width: 0; }
.zap-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; box-sizing: border-box; padding: 5px 8px;
  border: 1px solid var(--zap-border); border-radius: var(--zap-radius-sm); background: var(--zap-surface); cursor: text;
  transition: border-color .15s ease, box-shadow .2s ease;
}
.zap-tags:focus-within { border-color: var(--zap-primary); box-shadow: 0 0 0 3px var(--zap-primary-soft); }
.zap-tags.is-invalid { border-color: var(--zap-danger, #dc2626); box-shadow: 0 0 0 3px color-mix(in srgb, var(--zap-danger, #dc2626) 16%, transparent); }
.zap-tags .zap-tag { height: 26px; font-size: 12.5px; }
.zap-tags__input { flex: 1; min-width: 90px; border: 0; outline: none; background: none; color: var(--zap-text); font: inherit; font-size: 14px; padding: 4px 2px; }
.zap-tags-field.is-shake .zap-tags { animation: zap-tags-shake .35s ease; }
@keyframes zap-tags-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.zap-tags__err { font-size: 12px; color: var(--zap-danger, #dc2626); animation: zap-tf-msg .25s ease; }
.zap-tags__sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--zap-muted); }
.zap-tags__s { font: inherit; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--zap-border); background: none; color: var(--zap-text); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.zap-tags__s:hover { border-color: var(--zap-primary); color: var(--zap-primary); }

.zap-ind { position: relative; display: inline-flex; vertical-align: middle; }
.zap-ind__b {
  --t: var(--zap-danger, #dc2626);
  position: absolute; top: 0; right: 0; z-index: 1; transform: translate(40%, -40%);
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  display: grid; place-items: center; font: 700 11px/1 var(--zap-font, inherit); font-variant-numeric: tabular-nums;
  color: #fff; background: var(--t); box-shadow: 0 0 0 2px var(--zap-surface);
  transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), opacity .2s ease;
}
.zap-ind__b.is-primary { --t: var(--zap-primary); } .zap-ind__b.is-success { --t: var(--zap-success); } .zap-ind__b.is-warning { --t: var(--zap-warning); }
.zap-ind__b.is-dot { min-width: 10px; width: 10px; height: 10px; padding: 0; transform: translate(25%, -25%); }
.zap-ind__b.is-bottom-right { top: auto; bottom: 0; transform: translate(25%, 25%); }
.zap-ind__b.is-hidden { opacity: 0; transform: translate(40%, -40%) scale(0); }
.zap-ind__b.is-bump { animation: zap-ind-bump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes zap-ind-bump { 0% { scale: 1; } 35% { scale: 1.35; } 100% { scale: 1; } }
.zap-ind__b.is-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--t); z-index: -1; animation: zap-badge-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }

/* ── Card (the component) ─────────────────────────────────────────────────
   .zap-card.zap-card--x is the component; plain .zap-card stays the page's surface. */
.zap-card.zap-card--x { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; min-width: 0; box-shadow: none; --cp: 18px;
  transition: box-shadow .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1), border-color .2s ease, background-color .2s ease; }
.zap-card--sm { --cp: 12px; } .zap-card--lg { --cp: 24px; }
.zap-card--x.zap-card--elevated { border-color: transparent; box-shadow: var(--zap-shadow); }
.zap-card--x.zap-card--filled { background: var(--zap-elevated); border-color: transparent; }
.zap-card--x.zap-card--ghost { background: none; border-color: transparent; }
.zap-card.zap-card--x.is-horizontal { flex-direction: row; }
.zap-card__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.zap-card__media { position: relative; overflow: hidden; background: var(--zap-elevated); flex: none; }
.zap-card.zap-card--x.is-horizontal .zap-card__media { width: 38%; max-width: 220px; }
.zap-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.zap-card__media > :not(img):not(.zap-card__mbadge) { width: 100%; height: 100%; }
.zap-card__mbadge { position: absolute; top: 10px; left: 10px; }
.zap-card__head { display: flex; align-items: flex-start; gap: 12px; padding: var(--cp) var(--cp) 0; }
.zap-card__head:last-child { padding-bottom: var(--cp); }
.zap-card__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--zap-primary); background: var(--zap-primary-soft); font-size: 18px; }
.zap-card__icon svg { width: 19px; height: 19px; }
.zap-card__titles { flex: 1; min-width: 0; display: grid; gap: 3px; }
.zap-card__title { margin: 0; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; color: var(--zap-text); text-decoration: none; }
a.zap-card__title::after { content: ""; position: absolute; inset: 0; }
.zap-card__sub { margin: 0; font-size: 13px; color: var(--zap-muted); }
.zap-card__badge { flex: none; }
.zap-card__actions { flex: none; display: flex; gap: 4px; margin: -4px -6px 0 0; position: relative; z-index: 1; }
.zap-card__body { padding: 12px var(--cp) var(--cp); font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--zap-text) 85%, var(--zap-muted)); }
.zap-card__main > .zap-card__body:first-child { padding-top: var(--cp); }
.zap-card__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding: 12px var(--cp); border-top: 1px solid var(--zap-border); background: color-mix(in srgb, var(--zap-elevated) 60%, transparent); position: relative; z-index: 1; }
.zap-card.zap-card--x.is-interactive, .zap-card.zap-card--x.is-selectable { cursor: pointer; }
.zap-card.zap-card--x.is-interactive:hover, .zap-card.zap-card--x.is-selectable:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -12px rgba(16, 24, 40, .25); border-color: color-mix(in srgb, var(--zap-primary) 30%, var(--zap-border)); }
.zap-card.zap-card--x.is-interactive:hover .zap-card__media img { transform: scale(1.05); }
.zap-card.zap-card--x.is-interactive:active { transform: translateY(-1px); }
.zap-card.zap-card--x:focus-visible, .zap-card.zap-card--x:has(.zap-card__link:focus-visible) { outline: 2px solid var(--zap-primary); outline-offset: 2px; }
.zap-card__link:focus-visible { outline: none; }
.zap-card__tick { flex: none; display: grid; place-items: center; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--zap-text) 25%, var(--zap-border)); color: #fff; transition: background-color .15s ease, border-color .15s ease; }
.zap-card__tick.is-float { position: absolute; top: 12px; right: 12px; z-index: 1; }
.zap-card__tick svg { width: 12px; height: 12px; transform: scale(0); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.zap-card.zap-card--x.is-selected { border-color: var(--zap-primary); box-shadow: 0 0 0 1px var(--zap-primary), 0 8px 24px -12px color-mix(in srgb, var(--zap-primary) 60%, transparent); background: color-mix(in srgb, var(--zap-primary) 4%, var(--zap-surface)); }
.zap-card.zap-card--x.is-selected .zap-card__tick { background: var(--zap-primary); border-color: var(--zap-primary); }
.zap-card.zap-card--x.is-selected .zap-card__tick svg { transform: none; }
.zap-card__fold { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -3px -6px 0 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--zap-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.zap-card__fold:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 7%, transparent); }
.zap-card__fold svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
.zap-card.zap-card--x.is-closed .zap-card__fold svg { transform: rotate(-90deg); }
.zap-card__fold-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s cubic-bezier(.3, .7, .2, 1); }
.zap-card.zap-card--x.is-closed .zap-card__fold-wrap { grid-template-rows: 0fr; }
.zap-card__fold-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; }
.zap-card.zap-card--x.is-closed .zap-card__head { padding-bottom: var(--cp); }
.zap-card__bones { display: grid; gap: 9px; }
.zap-card__bones i { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--zap-skel-a) 25%, var(--zap-skel-b) 50%, var(--zap-skel-a) 75%) 0 0 / 300% 100%; animation: zap-skel-shimmer 1.4s ease-in-out infinite; }
.zap-card__bones.is-stat { padding: 6px 0 4px; }

/* stat */
.zap-stat {
  position: relative; display: grid; gap: 10px; padding: 16px 18px; box-sizing: border-box; min-width: 0;
  border: 1px solid var(--zap-border); border-radius: var(--zap-radius); background: var(--zap-surface);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.zap-stat.is-interactive { cursor: pointer; } .zap-stat.is-interactive:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(16, 24, 40, .28); }
.zap-stat:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 2px; }
.zap-stat__top { display: flex; align-items: center; gap: 10px; }
.zap-stat__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--t); background: color-mix(in srgb, var(--t) 12%, var(--zap-surface)); }
.zap-stat__icon svg { width: 17px; height: 17px; }
.zap-stat__label { font-size: 13px; font-weight: 600; color: var(--zap-muted); }
.zap-stat__mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.zap-stat__num { font-size: 28px; font-weight: 750; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.zap-stat__spark { width: 110px; max-width: 45%; height: 36px; flex: none; color: var(--t); overflow: visible; }
.zap-stat__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zap-stat-draw 1s cubic-bezier(.3, .7, .2, 1) .1s forwards; }
@keyframes zap-stat-draw { to { stroke-dashoffset: 0; } }
.zap-stat__foot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.zap-stat__delta { display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px 2px 5px; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--zap-muted); background: var(--zap-elevated); }
.zap-stat__delta svg { width: 13px; height: 13px; transition: transform .3s ease; }
.zap-stat__delta.is-good { color: var(--zap-up, #089981); background: color-mix(in srgb, var(--zap-up, #089981) 12%, transparent); }
.zap-stat__delta.is-bad { color: var(--zap-down, #e5484d); background: color-mix(in srgb, var(--zap-down, #e5484d) 12%, transparent); }
.zap-stat__dl { color: var(--zap-muted); }

/* ── Skeleton / Spinner / Loading ───────────────────────────────────────── */
.zap { --zap-skel-a: color-mix(in srgb, var(--zap-text) 7%, transparent); --zap-skel-b: color-mix(in srgb, var(--zap-text) 13%, transparent); }
.zap-skel { display: block; flex: none; max-width: 100%; border-radius: 6px; background: var(--zap-skel-a); }
.zap-skel--circle { border-radius: 50%; }
.zap-skel--rect { border-radius: 10px; }
.zap-skel.is-shimmer { background: linear-gradient(90deg, var(--zap-skel-a) 25%, var(--zap-skel-b) 50%, var(--zap-skel-a) 75%) 0 0 / 300% 100%; animation: zap-skel-shimmer 1.4s ease-in-out infinite; animation-delay: var(--d, 0ms); }
.zap-skel.is-pulse { animation: zap-skel-pulse 1.5s ease-in-out infinite; animation-delay: var(--d, 0ms); }
@keyframes zap-skel-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes zap-skel-pulse { 50% { opacity: .45; } }
.zap-skel-lines { display: grid; gap: 9px; } .zap-skel-lines .zap-skel { height: 11px; }
.zap-skel-row { display: flex; align-items: center; gap: 12px; }
.zap-skel-col { display: grid; gap: 8px; flex: 1; min-width: 0; }
.zap-skel-col .zap-skel:not(.zap-skel--rect) { height: 11px; }
.zap-skel-col.is-article { gap: 14px; }
.zap-skel-list { display: grid; gap: 16px; }
.zap-skel-card { display: grid; gap: 14px; padding: 12px; border: 1px solid var(--zap-border); border-radius: var(--zap-radius); }
.zap-skel-card__b { display: grid; gap: 10px; padding: 0 4px 4px; }
.zap-skel-table { display: grid; border: 1px solid var(--zap-border); border-radius: var(--zap-radius-sm); overflow: hidden; }
.zap-skel-tr { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 16px; padding: 13px 14px; border-top: 1px solid var(--zap-border); }
.zap-skel-tr.is-head { border-top: 0; background: var(--zap-elevated); }
.zap-ph__content { animation: zap-ph-in .4s cubic-bezier(.2, .8, .2, 1); }
.zap-ph__skel { animation: zap-ph-in .2s ease; }
@keyframes zap-ph-in { from { opacity: 0; transform: translateY(4px); } }

.zap-spin { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; color: var(--t); }
.zap-spin.is-neutral { --t: var(--zap-muted); }
.zap-spin__g { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--s) * .12); width: var(--s); height: var(--s); flex: none; }
.zap-spin__label { font-size: 13px; font-weight: 600; color: var(--zap-muted); }
.zap-spin--ring svg { width: 100%; height: 100%; animation: zap-btn-spin 1.4s linear infinite; }
.zap-spin__track { stroke: color-mix(in srgb, var(--t) 18%, transparent); }
.zap-spin__arc { stroke: currentColor; stroke-dasharray: 90 150; stroke-dashoffset: 0; animation: zap-spin-dash 1.4s ease-in-out infinite; }
@keyframes zap-spin-dash { 0% { stroke-dasharray: 1 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90 150; stroke-dashoffset: -124; } }
.zap-spin--dots i { width: calc(var(--s) * .24); height: calc(var(--s) * .24); border-radius: 50%; background: currentColor; animation: zap-spin-dot 1s ease-in-out infinite; }
.zap-spin--dots i:nth-child(2) { animation-delay: .15s; } .zap-spin--dots i:nth-child(3) { animation-delay: .3s; }
@keyframes zap-spin-dot { 0%, 80%, 100% { transform: scale(.5); opacity: .35; } 40% { transform: scale(1); opacity: 1; } }
.zap-spin--bars i { width: calc(var(--s) * .12); height: 100%; border-radius: 2px; background: currentColor; animation: zap-spin-bar 1s ease-in-out infinite; }
.zap-spin--bars i:nth-child(2) { animation-delay: .1s; } .zap-spin--bars i:nth-child(3) { animation-delay: .2s; } .zap-spin--bars i:nth-child(4) { animation-delay: .3s; } .zap-spin--bars i:nth-child(5) { animation-delay: .4s; }
@keyframes zap-spin-bar { 0%, 40%, 100% { transform: scaleY(.35); opacity: .5; } 20% { transform: scaleY(1); opacity: 1; } }
.zap-spin--pulse i { position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0; animation: zap-spin-pulse 1.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.zap-spin--pulse i:nth-child(2) { animation-delay: .8s; }
@keyframes zap-spin-pulse { 0% { transform: scale(.1); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.zap-spin--orbit .zap-spin__g { animation: zap-btn-spin 1.2s linear infinite; }
.zap-spin--orbit i { position: absolute; width: calc(var(--s) * .26); height: calc(var(--s) * .26); border-radius: 50%; background: currentColor; }
.zap-spin--orbit i:nth-child(1) { top: 0; left: 50%; translate: -50% 0; }
.zap-spin--orbit i:nth-child(2) { bottom: 6%; left: 8%; opacity: .6; scale: .8; }
.zap-spin--orbit i:nth-child(3) { bottom: 6%; right: 8%; opacity: .3; scale: .6; }
@media (prefers-reduced-motion: reduce) {
  .zap-skel, .zap-card__bones i { animation: none !important; }
  .zap-spin--ring svg, .zap-spin--orbit .zap-spin__g { animation-duration: 3s; }
}
.zap-loading { position: relative; }
.zap-loading__content { transition: filter .25s ease, opacity .25s ease; }
.zap-loading.is-on .zap-loading__content { opacity: .55; }
.zap-loading.is-on.is-blur .zap-loading__content { filter: blur(2px); }
.zap-loading__veil { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border-radius: inherit;
  background: color-mix(in srgb, var(--zap-surface) 45%, transparent); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
.zap-loading.is-on .zap-loading__veil { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.zap-loading__veil .zap-spin { flex-direction: column; gap: 8px; padding: 14px 18px; border-radius: 12px; background: var(--zap-surface); box-shadow: 0 10px 30px -10px rgba(16, 24, 40, .3); }

/* ── Empty state / result ─────────────────────────────────────────────── */
.zap-empty { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 28px 20px; --art: 120px; }
.zap-empty--sm { --art: 80px; gap: 10px; padding: 18px 14px; }
.zap-empty--lg { --art: 168px; padding: 44px 24px; }
.zap-empty.is-bordered { border: 1.5px dashed var(--zap-border); border-radius: var(--zap-radius); }
.zap-empty.is-compact { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; --art: 72px; gap: 18px; }
.zap-empty__media { color: var(--t); }
.zap-empty__art { width: var(--art); height: var(--art); display: block; overflow: visible; }
.zap-empty__art .bg { fill: color-mix(in srgb, var(--t) 9%, transparent); animation: zap-empty-breathe 4s ease-in-out infinite; transform-origin: 60px 60px; }
.zap-empty__art .obj { animation: zap-empty-float 3.6s ease-in-out infinite; }
.zap-empty__art .f { fill: var(--zap-surface); stroke: currentColor; stroke-width: 3; }
.zap-empty__art .w { fill: color-mix(in srgb, var(--zap-surface) 70%, transparent); stroke: currentColor; stroke-width: 4; }
.zap-empty__art .l { stroke: color-mix(in srgb, currentColor 40%, transparent); stroke-width: 4; stroke-linecap: round; }
.zap-empty__art .s { stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.zap-empty__art .d { fill: currentColor; }
.zap-empty__art .t { fill: currentColor; font: 800 34px/1 var(--zap-font, sans-serif); letter-spacing: -.04em; }
.zap-empty__art .m { animation: zap-empty-search 3.2s ease-in-out infinite; transform-origin: 76px 72px; }
.zap-empty__art .ck { stroke-dasharray: 50; stroke-dashoffset: 50; animation: zap-empty-check .6s cubic-bezier(.3, .7, .2, 1) .25s forwards; }
.zap-empty__art .x { stroke: var(--zap-danger, #dc2626); }
.zap-empty__art .sp { fill: currentColor; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: .5; }
.zap-empty__art .sp > * { animation: zap-empty-twinkle 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.zap-empty__art .sp > :nth-child(2) { animation-delay: .6s; } .zap-empty__art .sp > :nth-child(3) { animation-delay: 1.2s; } .zap-empty__art .sp > :nth-child(4) { animation-delay: 1.8s; }
.zap-empty.k-success .zap-empty__art .obj { animation: zap-empty-pop .5s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes zap-empty-float { 50% { transform: translateY(-5px); } }
@keyframes zap-empty-breathe { 50% { transform: scale(1.05); } }
@keyframes zap-empty-search { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-14px, -6px); } 60% { transform: translate(-4px, -16px); } }
@keyframes zap-empty-check { to { stroke-dashoffset: 0; } }
@keyframes zap-empty-twinkle { 50% { opacity: .15; transform: scale(.6); } }
@keyframes zap-empty-pop { from { transform: scale(.4); opacity: 0; } }
.zap-empty__icon { display: grid; place-items: center; width: calc(var(--art) * .6); height: calc(var(--art) * .6); border-radius: 50%; font-size: calc(var(--art) * .28); color: var(--t); background: color-mix(in srgb, var(--t) 11%, transparent); }
.zap-empty__icon svg { width: 45%; height: 45%; }
.zap-empty__text { display: grid; justify-items: inherit; gap: 6px; max-width: 420px; }
.zap-empty__title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--zap-text); }
.zap-empty--lg .zap-empty__title { font-size: 21px; }
.zap-empty--sm .zap-empty__title { font-size: 15px; }
.zap-empty__desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--zap-muted); }
.zap-empty__actions { display: flex; flex-wrap: wrap; justify-content: inherit; gap: 8px; margin-top: 8px; }
.zap-empty:not(.is-compact) .zap-empty__actions { justify-content: center; }
.zap-empty__secondary { font-size: 13px; color: var(--zap-muted); margin-top: 2px; }
.zap-empty__secondary a { color: var(--zap-primary); font-weight: 600; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .zap-empty__art * { animation: none !important; } .zap-empty__art .ck { stroke-dashoffset: 0; } }

/* ── OTP input ────────────────────────────────────────────────────────────
   One real input lies over the boxes (transparent, no pointer), the boxes
   draw its characters and a blinking caret in the active one. */
.zap-otp { --otp-w: 48px; --otp-h: 56px; --otp-f: 22px; --otp-c: var(--zap-primary); display: grid; gap: 8px; justify-items: start; }
.zap-otp--sm { --otp-w: 38px; --otp-h: 44px; --otp-f: 18px; }
.zap-otp--lg { --otp-w: 58px; --otp-h: 68px; --otp-f: 28px; }
.zap-otp.is-error { --otp-c: var(--zap-danger, #dc2626); }
.zap-otp.is-success { --otp-c: var(--zap-success, #059669); }
.zap-otp__box { position: relative; display: flex; align-items: center; gap: 12px; }
.zap-otp__group { display: flex; gap: 8px; }
.zap-otp__sep { width: 10px; height: 2px; border-radius: 2px; background: var(--zap-border); }
.zap-otp__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; font-size: 16px; caret-color: transparent; }
.zap-otp__slot {
  position: relative; display: grid; place-items: center; width: var(--otp-w); height: var(--otp-h); box-sizing: border-box; cursor: text;
  border: 1.5px solid var(--zap-border); border-radius: 12px; background: var(--zap-surface);
  font: 650 var(--otp-f)/1 var(--zap-font, inherit); font-variant-numeric: tabular-nums; color: var(--zap-text);
  transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease, background-color .2s ease;
}
.zap-otp__slot:hover { border-color: color-mix(in srgb, var(--zap-text) 25%, var(--zap-border)); }
.zap-otp__slot.is-filled { border-color: color-mix(in srgb, var(--otp-c) 45%, var(--zap-border)); }
.zap-otp__slot.is-filled .zap-otp__ch { animation: zap-otp-in .2s cubic-bezier(.3, 1.5, .5, 1); }
.zap-otp__ch:empty::before { content: ""; }
.zap-otp__slot .zap-otp__ch { color: inherit; }
.zap-otp__slot:not(.is-filled) .zap-otp__ch { color: color-mix(in srgb, var(--zap-muted) 60%, transparent); }
.zap-otp__slot.is-active { border-color: var(--otp-c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--otp-c) 18%, transparent); transform: translateY(-1px); }
.zap-otp__slot.has-caret::after { content: ""; position: absolute; width: 2px; height: 42%; border-radius: 2px; background: var(--otp-c); animation: zap-otp-caret 1s steps(1) infinite; }
.zap-otp__slot.has-caret .zap-otp__ch { display: none; }
@keyframes zap-otp-caret { 50% { opacity: 0; } }
@keyframes zap-otp-in { from { transform: translateY(6px) scale(.6); opacity: 0; } }
.zap-otp.is-error .zap-otp__slot { border-color: var(--otp-c); background: color-mix(in srgb, var(--otp-c) 5%, var(--zap-surface)); }
.zap-otp.is-success .zap-otp__slot { border-color: var(--otp-c); background: color-mix(in srgb, var(--otp-c) 7%, var(--zap-surface)); color: var(--otp-c); animation: zap-otp-ok .45s cubic-bezier(.3, 1.5, .5, 1) backwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes zap-otp-ok { 40% { transform: translateY(-5px); } }
.zap-otp.is-shake .zap-otp__box { animation: zap-tags-shake .4s ease; }
.zap-otp.is-disabled .zap-otp__slot { opacity: .5; cursor: not-allowed; }
.zap-otp__msg { margin: 0; min-height: 18px; font-size: 13px; color: var(--otp-c); }
.zap-otp:not(.is-error):not(.is-success) .zap-otp__msg { min-height: 0; }
.zap-otp__resend { margin: 0; font-size: 13px; color: var(--zap-muted); }
.zap-otp__resend b { color: var(--zap-text); font-variant-numeric: tabular-nums; }
.zap-otp__link { font: inherit; font-weight: 600; padding: 0; border: 0; background: none; color: var(--zap-primary); cursor: pointer; }
.zap-otp__link:hover { text-decoration: underline; }
@media (max-width: 480px) { .zap-otp { --otp-w: 40px; --otp-h: 48px; } .zap-otp__group { gap: 6px; } }

/* ── Rating ─────────────────────────────────────────────────────────────── */
.zap-rate { --rc: #f5a524; display: grid; gap: 6px; justify-items: start; }
.zap-rate.is-danger { --rc: #f43f5e; } .zap-rate.is-primary { --rc: var(--zap-primary); } .zap-rate.is-success { --rc: var(--zap-success); }
.zap-rate__row { display: flex; align-items: center; gap: 10px; }
.zap-rate__stars { display: inline-flex; gap: calc(var(--rs) * .12); border-radius: 8px; outline: none; }
.zap-rate__stars:focus-visible { box-shadow: 0 0 0 3px var(--zap-primary-soft); }
.zap-rate__item { position: relative; display: inline-block; width: var(--rs); height: var(--rs); cursor: pointer; transition: transform .15s cubic-bezier(.3, 1.5, .5, 1); }
.zap-rate.is-readonly .zap-rate__item, .zap-rate.is-disabled .zap-rate__item { cursor: default; }
.zap-rate.is-disabled { opacity: .5; }
.zap-rate:not(.is-readonly):not(.is-disabled) .zap-rate__item:hover { transform: scale(1.18); }
.zap-rate__bg, .zap-rate__fg { position: absolute; inset: 0; display: block; }
.zap-rate__bg { color: color-mix(in srgb, var(--zap-text) 14%, transparent); }
.zap-rate__fg { color: var(--rc); clip-path: inset(0 calc(100% - var(--f)) 0 0); transition: clip-path .12s ease; }
.zap-rate svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.zap-rate__char { display: grid; place-items: center; width: 100%; height: 100%; font-size: calc(var(--rs) * .9); line-height: 1; }
.zap-rate__bg .zap-rate__char { filter: grayscale(1); opacity: .35; }
.zap-rate.is-hovering .zap-rate__fg { color: color-mix(in srgb, var(--rc) 80%, #fff); }
.zap-rate.is-picked .zap-rate__item { animation: zap-rate-pop .4s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--i) * 40ms); }
.zap-rate.is-picked .zap-rate__item:not(.is-full):not(.is-part) { animation: none; }
@keyframes zap-rate-pop { 40% { transform: scale(1.35) rotate(-8deg); } }
.zap-rate__num { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--zap-text); }
.zap-rate__label { font-size: 13px; font-weight: 600; color: var(--zap-muted); min-width: 60px; transition: color .15s ease; }
.zap-rate__label.is-preview { color: var(--rc); }
@media (prefers-reduced-motion: reduce) { .zap-rate__item, .zap-rate.is-picked .zap-rate__item { animation: none; transition: none; } }
.zap-rsum { display: grid; gap: 14px; min-width: 240px; }
.zap-rsum__head { display: flex; align-items: center; gap: 14px; }
.zap-rsum__avg { font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.zap-rsum__meta { display: grid; gap: 4px; }
.zap-rsum__count { font-size: 13px; color: var(--zap-muted); }
.zap-rsum__bars { display: grid; gap: 6px; }
.zap-rsum__row { display: grid; grid-template-columns: 28px 1fr 40px; align-items: center; gap: 10px; font: 600 12.5px/1 var(--zap-font, inherit); color: var(--zap-muted); padding: 2px 4px; margin: 0 -4px; border: 0; border-radius: 6px; background: none; text-align: left; }
button.zap-rsum__row { cursor: pointer; } button.zap-rsum__row:hover { background: var(--zap-elevated); color: var(--zap-text); }
.zap-rsum__track { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--zap-text) 8%, transparent); overflow: hidden; }
.zap-rsum__fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: #f5a524; transform-origin: left; animation: zap-rsum-grow .8s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes zap-rsum-grow { from { transform: scaleX(0); } }
.zap-rsum__pct { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Time picker ────────────────────────────────────────────────────────── */
.zap-time__input { font-variant-numeric: tabular-nums; }
.zap-time__btn.is-on { color: var(--tf-c); background: color-mix(in srgb, var(--tf-c) 10%, transparent); }
.zap-time__pop {
  position: fixed; left: 0; top: 0; z-index: 300; display: grid; gap: 10px; padding: 10px; box-sizing: border-box;
  background: var(--zap-surface); border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius-sm) + 4px);
  box-shadow: 0 18px 40px -12px rgba(16, 24, 40, .28), 0 4px 12px -4px rgba(16, 24, 40, .12);
}
.zap-time__pop:not([data-side]) { visibility: hidden; }
.zap-time__pop[data-side="bottom"] { transform-origin: top left; animation: zap-drop-in .16s cubic-bezier(.2, .7, .2, 1); }
.zap-time__pop[data-side="top"] { transform-origin: bottom left; animation: zap-drop-up-in .16s cubic-bezier(.2, .7, .2, 1); }
.zap-time__pop.is-leaving { animation: zap-drop-out .13s ease-in forwards; pointer-events: none; }
.zap-time__presets { display: flex; flex-wrap: wrap; gap: 6px; max-width: 260px; }
.zap-time__chip { font: 600 12px/1 var(--zap-font, inherit); padding: 6px 9px; border-radius: 999px; border: 1px solid var(--zap-border); background: none; color: var(--zap-text); cursor: pointer; font-variant-numeric: tabular-nums; }
.zap-time__chip:hover:not(:disabled) { border-color: var(--zap-primary); color: var(--zap-primary); }
.zap-time__chip.is-on { background: var(--zap-primary); border-color: var(--zap-primary); color: var(--zap-primary-contrast); }
.zap-time__chip:disabled { opacity: .4; cursor: not-allowed; }
.zap-time__cols { --row: 34px; position: relative; display: flex; align-items: stretch; gap: 2px; height: calc(var(--row) * 7); }
.zap-time__band { position: absolute; left: 0; right: 0; top: calc(50% - var(--row) / 2); height: var(--row); border-radius: 8px; background: var(--zap-primary-soft); pointer-events: none; z-index: 0; }
.zap-time__col {
  position: relative; z-index: 1; width: 52px; overflow-y: auto; scrollbar-width: none; outline: none; border-radius: 8px;
  padding: calc(var(--row) * 3) 0; box-sizing: border-box; scroll-snap-type: y mandatory;
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}
.zap-time__col::-webkit-scrollbar { display: none; }
.zap-time__col:focus-visible { box-shadow: inset 0 0 0 2px var(--zap-primary); mask-image: none; }
.zap-time__opt {
  display: grid; place-items: center; width: 100%; height: var(--row); padding: 0; border: 0; border-radius: 8px; scroll-snap-align: center;
  background: none; color: var(--zap-muted); font: 500 15px/1 var(--zap-font, inherit); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: color .15s ease, transform .2s ease, font-weight .15s ease;
}
.zap-time__opt:hover:not(:disabled) { color: var(--zap-text); }
.zap-time__opt.is-on { color: var(--zap-primary); font-weight: 750; transform: scale(1.12); }
.zap-time__opt:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.zap-time__colon { position: relative; z-index: 1; align-self: center; font-weight: 700; color: var(--zap-muted); }
.zap-time__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--zap-border); }
.zap-time__now { font: 600 13px/1 var(--zap-font, inherit); padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--zap-primary); cursor: pointer; }
.zap-time__now:hover { background: var(--zap-primary-soft); }

/* ── File upload ────────────────────────────────────────────────────────── */
.zap-up { display: grid; gap: 10px; min-width: 0; }
.zap-up__file { display: none; }
.zap-up__zone {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 28px 20px; text-align: center; cursor: pointer; outline: none;
  border: 2px dashed color-mix(in srgb, var(--zap-text) 16%, var(--zap-border)); border-radius: var(--zap-radius);
  background: var(--zap-elevated); transition: border-color .2s ease, background-color .2s ease, transform .2s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s ease;
}
.zap-up__zone:hover { border-color: color-mix(in srgb, var(--zap-primary) 55%, var(--zap-border)); }
.zap-up__zone:focus-visible { border-color: var(--zap-primary); box-shadow: 0 0 0 3px var(--zap-primary-soft); }
.zap-up__zone.is-hint { border-color: color-mix(in srgb, var(--zap-primary) 60%, var(--zap-border)); background: color-mix(in srgb, var(--zap-primary) 4%, var(--zap-elevated)); animation: zap-up-hint 1.2s ease-in-out infinite; }
.zap-up__zone.is-over { border-color: var(--zap-primary); border-style: solid; background: var(--zap-primary-soft); transform: scale(1.015); animation: none; }
@keyframes zap-up-hint { 50% { border-color: var(--zap-primary); } }
.zap-up__zicon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: var(--zap-primary); background: var(--zap-surface); border: 1px solid var(--zap-border); box-shadow: 0 4px 12px -6px rgba(16, 24, 40, .2); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.zap-up__zicon svg { width: 22px; height: 22px; }
.zap-up__zone:hover .zap-up__zicon, .zap-up__zone.is-over .zap-up__zicon { transform: translateY(-4px); }
.zap-up__zone.is-over .zap-up__zicon svg { animation: zap-up-bob .8s ease-in-out infinite; }
@keyframes zap-up-bob { 50% { transform: translateY(-3px); } }
.zap-up__title { margin: 6px 0 0; font-size: 14px; color: var(--zap-text); }
.zap-up__hint { margin: 0; font-size: 12.5px; color: var(--zap-muted); }
.zap-up__link { font: inherit; font-weight: 650; padding: 0; border: 0; background: none; color: var(--zap-primary); cursor: pointer; }
.zap-up__link:hover { text-decoration: underline; }
.zap-up__link.is-danger { color: var(--zap-danger, #dc2626); font-size: 13px; }
.zap-up__zone.is-compact { display: flex; align-items: center; justify-items: start; text-align: left; gap: 12px; padding: 12px 14px; border-radius: var(--zap-radius-sm); font-size: 14px; }
.zap-up__zone.is-compact .zap-up__zicon { width: 34px; height: 34px; border-radius: 9px; } .zap-up__zone.is-compact .zap-up__zicon svg { width: 17px; height: 17px; }
.zap-up__zone.is-compact .zap-up__hint { margin-left: auto; }
.zap-up__zone.is-compact b { color: var(--zap-primary); }
.zap-up.is-disabled { opacity: .55; } .zap-up.is-disabled .zap-up__zone { cursor: not-allowed; }
.zap-up.is-shake .zap-up__zone, .zap-up.is-shake .zap-up__avatar { animation: zap-tags-shake .4s ease; }
.zap-up__rejects { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--zap-radius-sm); font-size: 13px;
  color: var(--zap-danger, #dc2626); background: color-mix(in srgb, var(--zap-danger, #dc2626) 7%, var(--zap-surface)); border: 1px solid color-mix(in srgb, var(--zap-danger, #dc2626) 25%, transparent); animation: zap-tf-msg .25s ease; }
.zap-up__rejects > svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.zap-up__rejects > div { flex: 1; display: grid; gap: 2px; } .zap-up__rejects b { font-weight: 650; }
.zap-up__summary { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--zap-muted); }
.zap-up__summary > span { flex: 1; }
.zap-up__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zap-up__list:empty { display: none; }
.zap-up__item {
  --p: 0; position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; overflow: hidden;
  border: 1px solid var(--zap-border); border-radius: var(--zap-radius-sm); background: var(--zap-surface);
  animation: zap-up-in .3s cubic-bezier(.2, .8, .2, 1);
}
@keyframes zap-up-in { from { opacity: 0; transform: translateY(-6px); } }
.zap-up__item.is-error, .zap-up__item.is-cancelled { border-color: color-mix(in srgb, var(--zap-danger, #dc2626) 35%, var(--zap-border)); }
.zap-up__thumb { position: relative; flex: none; width: 42px; height: 42px; border-radius: 8px; overflow: hidden; background: var(--zap-elevated); display: grid; place-items: center; }
.zap-up__img { width: 100%; height: 100%; object-fit: cover; }
.zap-up__ext { font: 800 10px/1 var(--zap-font, inherit); letter-spacing: .03em; color: #fff; padding: 5px 4px; border-radius: 4px; background: #64748b; }
.zap-up__ext.k-pdf { background: #e11d48; } .zap-up__ext.k-video { background: #7c3aed; } .zap-up__ext.k-audio { background: #db2777; }
.zap-up__ext.k-zip { background: #d97706; } .zap-up__ext.k-sheet { background: #059669; } .zap-up__ext.k-doc { background: #2563eb; } .zap-up__ext.k-image { background: #0891b2; }
.zap-up__ok { position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; background: var(--zap-success, #059669); box-shadow: 0 0 0 2px var(--zap-surface); animation: zap-code-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.zap-up__ok svg { width: 10px; height: 10px; stroke-width: 3.5; }
.zap-up__meta { flex: 1; min-width: 0; display: grid; gap: 3px; }
.zap-up__name { font-size: 13.5px; font-weight: 600; color: var(--zap-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-up__sub { font-size: 12px; color: var(--zap-muted); font-variant-numeric: tabular-nums; }
.zap-up__err { color: var(--zap-danger, #dc2626); }
.zap-up__bar { height: 4px; margin-top: 3px; border-radius: 99px; background: color-mix(in srgb, var(--zap-text) 8%, transparent); overflow: hidden; transition: opacity .3s ease .4s, height .3s ease .4s, margin .3s ease .4s; }
.zap-up__bar > span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--zap-primary); transform: scaleX(var(--p)); transform-origin: left; transition: transform .25s ease, background-color .2s ease; }
.zap-up__item.is-uploading .zap-up__bar > span { background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: zap-up-sheen 1.1s linear infinite; }
@keyframes zap-up-sheen { from { background-position: -100% 0; } to { background-position: 200% 0; } }
.zap-up__item.is-done .zap-up__bar { opacity: 0; height: 0; margin-top: 0; }
.zap-up__item.is-done .zap-up__bar > span { background-color: var(--zap-success, #059669); }
.zap-up__item.is-error .zap-up__bar > span, .zap-up__item.is-cancelled .zap-up__bar > span { background: var(--zap-danger, #dc2626); }
.zap-up__acts { flex: none; display: flex; gap: 2px; }
.zap-up__act { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--zap-muted); cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.zap-up__act:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 7%, transparent); }
.zap-up__act.is-danger:hover { color: var(--zap-danger, #dc2626); background: color-mix(in srgb, var(--zap-danger, #dc2626) 10%, transparent); }
.zap-up__act svg { width: 16px; height: 16px; }
/* avatar */
.zap-up--avatar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.zap-up__avatar {
  --p: 0; position: relative; flex: none; width: 88px; height: 88px; padding: 0; border-radius: 50%; overflow: visible; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--zap-text) 18%, var(--zap-border)); background: var(--zap-elevated); color: var(--zap-muted);
  transition: border-color .2s ease, transform .2s cubic-bezier(.3, 1.4, .5, 1);
}
.zap-up__avatar:not(.is-empty) { border-style: solid; border-color: transparent; }
.zap-up__avatar:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 3px; }
.zap-up.is-over .zap-up__avatar { border-color: var(--zap-primary); transform: scale(1.05); }
.zap-up__avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; animation: zap-ph-in .35s ease; }
.zap-up__avph { display: grid; place-items: center; } .zap-up__avph svg { width: 28px; height: 28px; }
.zap-up__avhover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; border-radius: 50%; color: #fff; font: 600 11px/1 var(--zap-font, inherit); background: rgba(15, 23, 42, .55); opacity: 0; transition: opacity .2s ease; }
.zap-up__avhover svg { width: 20px; height: 20px; }
.zap-up__avatar:hover .zap-up__avhover, .zap-up__avatar:focus-visible .zap-up__avhover { opacity: 1; }
.zap-up__avatar.is-empty .zap-up__avhover { display: none; }
.zap-up__ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.zap-up__ring circle { fill: none; stroke: var(--zap-primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); transition: stroke-dashoffset .25s ease; }
.zap-up__avatar.is-uploading .zap-up__ring { opacity: 1; }
.zap-up__avatar.is-done .zap-up__ring { opacity: 0; transition-delay: .5s; }
.zap-up__avatar.is-done .zap-up__ring circle { stroke: var(--zap-success, #059669); }
.zap-up__avatar.is-error { border: 2px solid var(--zap-danger, #dc2626); }
.zap-up__avtext { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.zap-up__avtext b { font-size: 14px; }
.zap-up--avatar .zap-up__rejects { flex-basis: 100%; }

/* ── SideMenu ─────────────────────────────────────────────────────────────
   Wide: a sticky column (or a 64px icon rail). Small (.is-small): a top bar
   with ☰, and the panel slides in over a scrim. A marker glides to the
   current link. */
.zap-side { --side-w: 260px; --side-rail: 68px; --side-ease: cubic-bezier(.22, .8, .2, 1); position: relative; flex: none; }
.zap-side__panel {
  position: sticky; top: 0; z-index: 40; display: flex; flex-direction: column; box-sizing: border-box;
  width: var(--side-w); height: 100vh; height: 100dvh; padding: 18px 12px 12px; gap: 12px; outline: none;
  background: var(--zap-surface); border-right: 1px solid var(--zap-border);
  transition: width .28s var(--side-ease), transform .32s var(--side-ease), box-shadow .3s ease;
}
.zap-side.is-contained .zap-side__panel { height: 100%; }
.zap-side__top { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 4px; }
.zap-side__brand { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.zap-side__railbtn, .zap-side__close, .zap-side__burger {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--zap-muted); cursor: pointer; transition: color .15s ease, background-color .15s ease;
}
.zap-side__railbtn:hover, .zap-side__close:hover, .zap-side__burger:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 7%, transparent); }
.zap-side__railbtn:focus-visible, .zap-side__close:focus-visible, .zap-side__burger:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 1px; }
.zap-side__railbtn svg, .zap-side__close svg, .zap-side__burger svg { width: 18px; height: 18px; }
.zap-side__close { display: none; }
.zap-side__header { display: grid; gap: 8px; padding: 0 4px; }
.zap-side__search {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 10px; margin: 0 2px; box-sizing: border-box;
  border: 1px solid var(--zap-border); border-radius: var(--zap-radius-sm); background: var(--zap-elevated); color: var(--zap-muted); cursor: text;
  transition: border-color .15s ease, box-shadow .2s ease, background-color .15s ease;
}
.zap-side__search:focus-within { border-color: var(--zap-primary); box-shadow: 0 0 0 3px var(--zap-primary-soft); background: var(--zap-surface); }
.zap-side__search svg { width: 15px; height: 15px; flex: none; }
.zap-side__search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--zap-text); font: inherit; font-size: 13.5px; }
.zap-side__search input::-webkit-search-cancel-button { display: none; }
.zap-side__search kbd { flex: none; min-width: 18px; padding: 1px 5px; border: 1px solid var(--zap-border); border-radius: 5px; font: 600 11px/16px var(--zap-font, inherit); text-align: center; color: var(--zap-muted); background: var(--zap-surface); }
.zap-side__search:focus-within kbd { opacity: 0; }
.zap-side__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -12px; padding: 0 12px 12px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--zap-text) 18%, transparent) transparent; }
.zap-side__nav { position: relative; display: grid; gap: 10px; }
.zap-side__ind { position: absolute; top: 0; left: 0; z-index: 0; border-radius: var(--zap-radius-sm); background: var(--zap-primary); opacity: 0; pointer-events: none;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--zap-primary) 70%, transparent);
  transition: transform .34s var(--side-ease), height .34s var(--side-ease), width .28s var(--side-ease), opacity .2s ease; }
.zap-side.is-still .zap-side__ind, .zap-side.is-still .zap-side__panel { transition: none; }
.zap-side__group { display: grid; }
.zap-side__gtitle {
  display: flex; align-items: center; gap: 6px; width: 100%; margin: 0; padding: 6px 8px; border: 0; border-radius: 6px; background: none; cursor: pointer; text-align: left;
  font: 700 11px/1.2 var(--zap-font, inherit); letter-spacing: .06em; text-transform: uppercase; color: var(--zap-muted); white-space: nowrap;
}
.zap-side__gtitle:hover { color: var(--zap-text); }
.zap-side__gtitle:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: -2px; }
.zap-side__gtitle.is-static { cursor: default; }
.zap-side__gtitle > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.zap-side__count { font-weight: 600; letter-spacing: 0; opacity: 0; transition: opacity .15s ease; }
.zap-side__gtitle:hover .zap-side__count, .zap-side__gtitle[aria-expanded="false"] .zap-side__count { opacity: .8; }
.zap-side__gtitle svg { width: 13px; height: 13px; flex: none; transition: transform .25s var(--side-ease); }
.zap-side__gtitle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.zap-side__gbody, .zap-side__kids { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--side-ease); }
.zap-side__gbody.is-open, .zap-side__kids.is-open { grid-template-rows: 1fr; }
.zap-side__list, .zap-side__sublist { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.zap-side__sublist { position: relative; margin-left: 20px; padding-left: 10px; }
.zap-side__sublist::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--zap-border); }
.zap-side__li[hidden] { display: none; }
.zap-side__link {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; box-sizing: border-box; border-radius: var(--zap-radius-sm);
  font-size: 14px; color: var(--zap-text); text-decoration: none; white-space: nowrap; outline: none;
  transition: background-color .15s ease, color .2s ease;
}
.zap-side__link:hover { background: color-mix(in srgb, var(--zap-primary) 9%, transparent); }
.zap-side__link:focus-visible { box-shadow: inset 0 0 0 2px var(--zap-primary); }
.zap-side__link.is-active { color: var(--zap-primary-contrast); font-weight: 600; background: none; }
.zap-side__link.is-active:hover { background: none; }
.zap-side__link.is-active:focus-visible { box-shadow: inset 0 0 0 2px var(--zap-primary-contrast); }
.zap-side.is-still .zap-side__link.is-active, .zap-side:not(:has(.zap-side__ind[style*="opacity: 1"])) .zap-side__link.is-active { background: var(--zap-primary); }
.zap-side__link.is-sub { min-height: 30px; font-size: 13.5px; }
.zap-side__link.is-disabled { opacity: .45; cursor: not-allowed; }
.zap-side__icon { flex: none; display: grid; place-items: center; width: 20px; font-size: 15px; line-height: 1; transition: transform .2s var(--side-ease); }
.zap-side__icon svg { width: 17px; height: 17px; }
.zap-side__link:hover .zap-side__icon { transform: scale(1.12); }
.zap-side__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s ease; }
.zap-side__hit { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--zap-primary) 60%, transparent); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.zap-side__badge { flex: none; display: inline-flex; }
.zap-side__badge:not(:has(*)) { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--zap-primary); background: var(--zap-primary-soft); }
.zap-side__link.is-active .zap-side__badge .zap-badge, .zap-side__link.is-active .zap-side__badge:not(:has(*)) { color: var(--zap-primary); background: var(--zap-primary-contrast); border-color: transparent; }
.zap-side__chev { flex: none; display: inline-flex; color: var(--zap-muted); transition: transform .25s var(--side-ease); }
.zap-side__chev svg { width: 14px; height: 14px; }
.zap-side__link.is-open .zap-side__chev { transform: rotate(180deg); }
.zap-side__empty { margin: 8px; font-size: 13px; color: var(--zap-muted); }
.zap-side__footer { margin: 0 -12px -12px; padding: 10px 12px; border-top: 1px solid var(--zap-border); }

/* the icon rail */
.zap-side.is-rail .zap-side__panel { width: var(--side-rail); }
.zap-side.is-rail .zap-side__brand, .zap-side.is-rail .zap-side__header, .zap-side.is-rail .zap-side__search,
.zap-side.is-rail .zap-side__label, .zap-side.is-rail .zap-side__badge, .zap-side.is-rail .zap-side__chev,
.zap-side.is-rail .zap-side__gtitle, .zap-side.is-rail .zap-side__kids, .zap-side.is-rail .zap-side__footer > :not(.zap-side__keep) { display: none; }
.zap-side.is-rail .zap-side__top { justify-content: center; padding: 0; }
.zap-side.is-rail .zap-side__railbtn svg { transform: scaleX(-1); }
.zap-side.is-rail .zap-side__link { justify-content: center; padding: 6px 0; }
.zap-side.is-rail .zap-side__group + .zap-side__group { padding-top: 8px; border-top: 1px solid var(--zap-border); }
.zap-side.is-rail .zap-side__gbody { grid-template-rows: 1fr; }
.zap-side.is-rail .zap-side__list { overflow: visible; }

/* small screens: a top bar, the panel as a drawer */
.zap-side__bar { display: none; }
.zap-side__scrim { display: none; }
.zap-side.is-small { width: 100%; }
.zap-side.is-small .zap-side__bar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 10px; box-sizing: border-box;
  background: color-mix(in srgb, var(--zap-surface) 85%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--zap-border);
}
.zap-side.is-contained.is-small .zap-side__bar { position: absolute; left: 0; right: 0; }
.zap-side__bartitle { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.zap-side__baractions { flex: none; display: flex; gap: 6px; }
.zap-side.is-small .zap-side__panel {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000; height: auto; width: min(86vw, 300px);
  transform: translateX(-102%); visibility: hidden; box-shadow: none;
  transition: transform .32s var(--side-ease), visibility 0s .32s, box-shadow .3s ease;
}
.zap-side.is-small .zap-side__close { display: grid; }
.zap-side.is-small .zap-side__railbtn { display: none; }
.zap-side.is-small.is-open .zap-side__panel, .zap-side.is-small.is-peek .zap-side__panel { transform: none; visibility: visible; box-shadow: 24px 0 60px -20px rgba(2, 6, 23, .45); transition: transform .32s var(--side-ease), box-shadow .3s ease; }
.zap-side.is-small .zap-side__scrim {
  position: fixed; inset: 0; z-index: 999; display: block; background: rgba(2, 6, 23, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s;
}
.zap-side.is-small.is-open .zap-side__scrim, .zap-side.is-small.is-peek .zap-side__scrim { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.zap-side.is-swiping .zap-side__panel, .zap-side.is-swiping .zap-side__scrim { transition: none !important; }
.zap-side.is-contained.is-small { position: static; }   /* the frame around it holds the drawer */
.zap-side.is-contained.is-small .zap-side__panel, .zap-side.is-contained.is-small .zap-side__scrim { position: absolute; }
.zap-side.is-contained.is-small .zap-side__panel { height: auto; }
.zap-side.is-contained.is-small .zap-side__panel { width: min(86%, 280px); }
@media (prefers-reduced-motion: reduce) { .zap-side__panel, .zap-side__ind, .zap-side__gbody, .zap-side__kids, .zap-side__scrim { transition: none !important; } }

/* ── Sortable ───────────────────────────────────────────────────────────── */
.zap-sort { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-height: 8px; }
.zap-sort--horizontal { flex-direction: row; align-items: flex-start; }
.zap-sort--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--sort-min, 120px), 1fr)); }
.zap-sort__item { position: relative; transition: transform .22s cubic-bezier(.2, .8, .2, 1); touch-action: auto; }
.zap-sort__item.is-grab { cursor: grab; outline: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.zap-sort__item.is-grab:focus-visible { box-shadow: 0 0 0 2px var(--zap-primary); border-radius: var(--zap-radius-sm); }
.zap-sort__item.is-pinned { cursor: default; }
.zap-sort__item.is-placeholder > * { opacity: 0; }
.zap-sort__item.is-placeholder::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--zap-radius-sm); pointer-events: none;
  border: 2px dashed color-mix(in srgb, var(--zap-primary) 55%, transparent); background: color-mix(in srgb, var(--zap-primary) 6%, transparent);
}
.zap-sort__item.is-grabbed { z-index: 2; }
.zap-sort__item.is-grabbed > * { box-shadow: 0 0 0 2px var(--zap-primary), 0 12px 24px -12px rgba(16, 24, 40, .35); transform: scale(1.02); transition: transform .15s ease, box-shadow .15s ease; border-radius: var(--zap-radius-sm); }
.zap-sort__handle {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 28px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--zap-muted); cursor: grab; touch-action: none; transition: color .15s ease, background-color .15s ease;
}
.zap-sort__handle:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 7%, transparent); }
.zap-sort__handle:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 0; }
.zap-sort__handle[aria-pressed="true"] { color: var(--zap-primary-contrast); background: var(--zap-primary); }
.zap-sort__handle:disabled { opacity: .3; cursor: not-allowed; }
.zap-sort__handle svg { width: 14px; height: 14px; }
.zap-sort__empty { display: none; }
.zap-sort.is-empty .zap-sort__empty { display: grid; place-items: center; min-height: 70px; border: 2px dashed var(--zap-border); border-radius: var(--zap-radius-sm); color: var(--zap-muted); font-size: 13px; }
.zap-sort__ghost { z-index: 2000; pointer-events: none; list-style: none; box-sizing: border-box; transition: box-shadow .2s ease, rotate .2s ease, scale .2s ease; will-change: transform; }
.zap-sort__ghost > * { box-shadow: 0 22px 44px -14px rgba(16, 24, 40, .45), 0 4px 10px -4px rgba(16, 24, 40, .2); }
.zap-sort__ghost.is-lifted { scale: 1.03; rotate: -1.2deg; }
.zap-sort__ghost.is-dropping { transition: transform .2s cubic-bezier(.2, .8, .2, 1), scale .2s ease, rotate .2s ease; scale: 1; rotate: 0deg; }
html.zap-sorting, html.zap-sorting * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .zap-sort__item { transition: none; } .zap-sort__ghost.is-lifted { rotate: 0deg; scale: 1; } }

/* ── Kanban ─────────────────────────────────────────────────────────────── */
.zap-kb { --kb-w: 290px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.zap-kb__cols.zap-sort { flex-direction: row; align-items: flex-start; gap: 14px; width: max-content; }
.zap-kb__cols > .zap-sort__item { width: var(--kb-w); flex: none; }
.zap-kb__col {
  --col: var(--zap-muted); display: flex; flex-direction: column; max-height: var(--kb-h); box-sizing: border-box;
  background: var(--zap-elevated); border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius) - 2px);
  transition: border-color .2s ease, background-color .2s ease;
}
.zap-kb__col.is-over { border-color: color-mix(in srgb, var(--zap-danger, #dc2626) 50%, var(--zap-border)); }
.zap-kb__head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 8px 6px; }
.zap-kb__head .zap-sort__handle { opacity: .5; } .zap-kb__col:hover .zap-kb__head .zap-sort__handle { opacity: 1; }
.zap-kb__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--col); flex: none; margin-left: 2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--col) 20%, transparent); }
.zap-kb__ctitle { flex: 1; min-width: 0; margin: 0 0 0 4px; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-kb__count { font-size: 12px; font-weight: 700; color: var(--zap-muted); font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--zap-text) 6%, transparent); }
.zap-kb__col.is-over .zap-kb__count { color: #fff; background: var(--zap-danger, #dc2626); }
.zap-kb__iconbtn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--zap-muted); cursor: pointer; }
.zap-kb__iconbtn:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 8%, transparent); }
.zap-kb__iconbtn svg { width: 16px; height: 16px; }
.zap-kb__warn { display: flex; align-items: center; gap: 6px; margin: 0 10px 6px; padding: 6px 8px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--zap-danger, #dc2626); background: color-mix(in srgb, var(--zap-danger, #dc2626) 9%, transparent); animation: zap-tf-msg .25s ease; }
.zap-kb__warn svg { width: 14px; height: 14px; flex: none; }
.zap-kb__body { flex: 1; min-height: 60px; overflow-y: auto; padding: 2px 8px 8px; scrollbar-width: thin; }
.zap-kb__list.zap-sort { gap: 8px; min-height: 60px; }
.zap-kb__list .zap-sort__item.is-grab:focus-visible { box-shadow: none; }
.zap-kb__list .zap-sort__item.is-grab:focus-visible .zap-kb__card { box-shadow: 0 0 0 2px var(--zap-primary); }
.zap-kb__card {
  --pri: transparent; position: relative; display: grid; gap: 8px; padding: 11px 12px; box-sizing: border-box; overflow: hidden;
  background: var(--zap-surface); border: 1px solid var(--zap-border); border-radius: var(--zap-radius-sm);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05); transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.zap-kb__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pri); }
.zap-sort__item:not(.is-placeholder) .zap-kb__card:hover { border-color: color-mix(in srgb, var(--zap-primary) 35%, var(--zap-border)); box-shadow: 0 8px 20px -10px rgba(16, 24, 40, .28); transform: translateY(-1px); }
.zap-kb__card.is-done .zap-kb__title { text-decoration: line-through; color: var(--zap-muted); }
.zap-kb__cover { height: 64px; margin: -11px -12px 0; }
.zap-kb__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.zap-kb__tag { --t: var(--zap-muted); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; color: var(--t); background: color-mix(in srgb, var(--t) 13%, transparent); }
.zap-kb__tag.is-primary { --t: var(--zap-primary); } .zap-kb__tag.is-success { --t: var(--zap-success, #059669); } .zap-kb__tag.is-warning { --t: var(--zap-warning, #d97706); } .zap-kb__tag.is-danger { --t: var(--zap-danger, #dc2626); } .zap-kb__tag.is-info { --t: #0891b2; } .zap-kb__tag.is-violet { --t: #8b5cf6; }
.zap-kb__title { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--zap-text); }
.zap-kb__desc { margin: -3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--zap-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zap-kb__meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--zap-muted); font-weight: 600; }
.zap-kb__meta > span { display: inline-flex; align-items: center; gap: 4px; }
.zap-kb__meta svg { width: 13px; height: 13px; }
.zap-kb__pri i { width: 7px; height: 7px; border-radius: 2px; background: var(--pri); }
.zap-kb__due.is-soon { color: var(--zap-warning, #d97706); } .zap-kb__due.is-late { color: var(--zap-danger, #dc2626); }
.zap-kb__chk.is-full { color: var(--zap-success, #059669); }
.zap-kb__av { margin-left: auto; display: grid !important; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--h) 70% 60%), hsl(calc(var(--h) + 45) 70% 45%)); box-shadow: 0 0 0 2px var(--zap-surface); }
.zap-kb__add { padding: 0 8px 8px; }
.zap-kb__addbtn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--zap-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.zap-kb__addbtn:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 6%, transparent); }
.zap-kb__addbtn svg { width: 15px; height: 15px; }
.zap-kb__form { display: grid; gap: 6px; animation: zap-tf-msg .2s ease; }
.zap-kb__input { width: 100%; box-sizing: border-box; resize: none; padding: 9px 10px; border: 1px solid var(--zap-primary); border-radius: var(--zap-radius-sm); background: var(--zap-surface); color: var(--zap-text); font: inherit; font-size: 13.5px; outline: none; box-shadow: 0 0 0 3px var(--zap-primary-soft); }
.zap-kb__formrow { display: flex; align-items: center; gap: 6px; }
.zap-kb .zap-sort.is-empty .zap-sort__empty { min-height: 90px; }

/* ── Tree ───────────────────────────────────────────────────────────────── */
.zap-tree { --tree-indent: 18px; --tree-row: 30px; display: grid; gap: 1px; overflow: auto; padding: 4px; outline: none; font-size: 13.5px; -webkit-user-select: none; user-select: none; scrollbar-width: thin; }
.zap-tree__row {
  position: relative; display: flex; align-items: center; gap: 4px; min-height: var(--tree-row); padding: 0 8px 0 4px; box-sizing: border-box;
  border-radius: 7px; color: var(--zap-text); cursor: pointer; outline: none; white-space: nowrap;
  animation: zap-tree-in .2s cubic-bezier(.2, .8, .2, 1); transition: background-color .12s ease;
}
@keyframes zap-tree-in { from { opacity: 0; transform: translateY(-4px); } }
.zap-tree__row:hover { background: color-mix(in srgb, var(--zap-text) 5%, transparent); }
.zap-tree__row.is-focus:focus-visible { box-shadow: inset 0 0 0 2px var(--zap-primary); }
.zap-tree__row.is-selected { background: var(--zap-primary-soft); color: var(--zap-primary); font-weight: 600; }
.zap-tree:focus-within .zap-tree__row.is-selected { background: color-mix(in srgb, var(--zap-primary) 16%, transparent); }
.zap-tree.is-check .zap-tree__row.is-selected { background: none; color: var(--zap-text); font-weight: 400; }
.zap-tree__row.is-disabled { opacity: .45; cursor: not-allowed; }
.zap-tree__guides { display: flex; align-self: stretch; flex: none; }
.zap-tree__guides i { position: relative; width: var(--tree-indent); flex: none; }
.zap-tree__guides i.is-line::before, .zap-tree__guides i.is-mid::before, .zap-tree__guides i.is-last::before { content: ""; position: absolute; left: 50%; top: -1px; width: 1px; background: var(--zap-border); }
.zap-tree__guides i.is-line::before, .zap-tree__guides i.is-mid::before { bottom: -1px; }
.zap-tree__guides i.is-last::before { height: 50%; }
.zap-tree__guides i.is-mid::after, .zap-tree__guides i.is-last::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 1px; background: var(--zap-border); }
.zap-tree.no-guides .zap-tree__indent { width: calc(var(--d) * var(--tree-indent)); flex: none; }
.zap-tree__twist { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 5px; color: var(--zap-muted); transition: transform .2s cubic-bezier(.3, .7, .2, 1), background-color .12s ease, color .12s ease; }
.zap-tree__twist:not(.is-leaf):hover { background: color-mix(in srgb, var(--zap-text) 9%, transparent); color: var(--zap-text); }
.zap-tree__twist svg { width: 14px; height: 14px; }
.zap-tree__twist.is-open { transform: rotate(90deg); }
.zap-tree__check {
  display: grid; place-items: center; width: 16px; height: 16px; flex: none; margin: 0 2px; box-sizing: border-box; border-radius: 4px;
  border: 1.5px solid color-mix(in srgb, var(--zap-text) 30%, var(--zap-border)); color: transparent; transition: background-color .15s ease, border-color .15s ease;
}
.zap-tree__check svg { width: 12px; height: 12px; stroke-width: 3; transform: scale(.4); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.zap-tree__check.is-on, .zap-tree__check.is-mixed { background: var(--zap-primary); border-color: var(--zap-primary); color: var(--zap-primary-contrast); }
.zap-tree__check.is-on svg, .zap-tree__check.is-mixed svg { transform: none; }
.zap-tree__icon { display: grid; place-items: center; width: 20px; flex: none; font-size: 14px; line-height: 1; }
.zap-tree__icon svg { width: 16px; height: 16px; }
.zap-tree__icon.is-folder { color: #e2a33b; }
.zap-tree__icon.is-file { color: var(--zap-muted); }
.zap-tree__row.is-selected .zap-tree__icon.is-folder { color: var(--zap-primary); }
.zap-tree__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; }
.zap-tree__hit { background: color-mix(in srgb, #facc15 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.zap-tree__badge { flex: none; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; color: var(--zap-primary); background: var(--zap-primary-soft); }
.zap-tree__meta { flex: none; margin-left: 8px; font-size: 12px; color: var(--zap-muted); font-variant-numeric: tabular-nums; font-weight: 400; }
.zap-tree__edit { flex: 1; min-width: 60px; height: 24px; padding: 0 6px; border: 1px solid var(--zap-primary); border-radius: 5px; outline: none; box-shadow: 0 0 0 3px var(--zap-primary-soft); background: var(--zap-surface); color: var(--zap-text); font: inherit; }
.zap-tree__row.is-loading { cursor: default; color: var(--zap-muted); }
.zap-tree__spin { width: 13px; height: 13px; margin: 0 6px 0 3px; box-sizing: border-box; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--zap-primary) 25%, transparent); border-top-color: var(--zap-primary); animation: zap-btn-spin .7s linear infinite; }
.zap-tree__muted { font-size: 12.5px; }
.zap-tree__empty { margin: 10px; font-size: 13px; color: var(--zap-muted); }
.zap-tree.is-dragging .zap-tree__row { cursor: grabbing; }
.zap-tree__row.is-drop-inside { background: color-mix(in srgb, var(--zap-primary) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--zap-primary); }
.zap-tree__row.is-drop-before::after, .zap-tree__row.is-drop-after::after { content: ""; position: absolute; left: calc(var(--d) * var(--tree-indent) + 26px); right: 6px; height: 2px; border-radius: 2px; background: var(--zap-primary); pointer-events: none; }
.zap-tree__row.is-drop-before::after { top: -1px; } .zap-tree__row.is-drop-after::after { bottom: -1px; }
.zap-tree__row.is-drop-before::before, .zap-tree__row.is-drop-after::before { content: ""; position: absolute; left: calc(var(--d) * var(--tree-indent) + 22px); width: 6px; height: 6px; border-radius: 50%; border: 2px solid var(--zap-primary); background: var(--zap-surface); box-sizing: border-box; }
.zap-tree__row.is-drop-before::before { top: -3px; } .zap-tree__row.is-drop-after::before { bottom: -3px; }
.zap-tree__row.is-drop-no { cursor: not-allowed; }
.zap-tree__ghost { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; padding: 5px 10px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--zap-primary-contrast); background: var(--zap-primary); box-shadow: 0 10px 24px -8px rgba(16, 24, 40, .4); }
@media (prefers-reduced-motion: reduce) { .zap-tree__row { animation: none; } }

/* ── Tour ───────────────────────────────────────────────────────────────── */
.zap-tour { position: fixed; inset: 0; z-index: 1500; pointer-events: none; animation: zap-tour-in .25s ease; }
.zap-tour.is-leaving { opacity: 0; transition: opacity .2s ease; }
@keyframes zap-tour-in { from { opacity: 0; } }
.zap-tour__block { position: fixed; pointer-events: auto; }
.zap-tour__hole {
  position: fixed; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(2, 6, 23, .58);
}
.zap-tour.is-gliding .zap-tour__hole { transition: left .45s cubic-bezier(.3, .7, .2, 1), top .45s cubic-bezier(.3, .7, .2, 1), width .45s cubic-bezier(.3, .7, .2, 1), height .45s cubic-bezier(.3, .7, .2, 1), border-radius .45s ease; }
.zap-tour__ring { position: absolute; inset: -2px; border-radius: inherit; border: 2px solid color-mix(in srgb, var(--zap-primary) 80%, #fff); animation: zap-tour-ring 1.8s ease-out infinite; }
.zap-tour.is-center .zap-tour__ring { display: none; }
@keyframes zap-tour-ring { 0% { opacity: .9; inset: -2px; } 100% { opacity: 0; inset: -12px; } }
.zap-tour__card {
  --pop-bg: var(--zap-surface); position: fixed; left: 0; top: 0; z-index: 1; pointer-events: auto; box-sizing: border-box;
  width: min(340px, calc(100vw - 24px)); padding: 14px 16px 12px; outline: none;
  background: var(--pop-bg); color: var(--zap-text); border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius) + 2px);
  box-shadow: 0 24px 60px -18px rgba(2, 6, 23, .5), 0 4px 14px -6px rgba(2, 6, 23, .2);
}
.zap-tour.is-gliding .zap-tour__card { transition: left .45s cubic-bezier(.3, .7, .2, 1), top .45s cubic-bezier(.3, .7, .2, 1); }
.zap-tour__card.is-nudge { animation: zap-tags-shake .35s ease; }
.zap-tour__step { animation: zap-tour-step .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes zap-tour-step { from { opacity: 0; transform: translateY(6px); } }
.zap-tour__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.zap-tour__count { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--zap-primary); }
.zap-tour__x { display: grid; place-items: center; width: 26px; height: 26px; margin: -4px -6px 0 0; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--zap-muted); cursor: pointer; }
.zap-tour__x:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 7%, transparent); }
.zap-tour__x svg { width: 15px; height: 15px; }
.zap-tour__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.zap-tour__content { font-size: 13.5px; line-height: 1.55; color: color-mix(in srgb, var(--zap-text) 82%, var(--zap-muted)); }
.zap-tour__content p { margin: 0 0 6px; } .zap-tour__content kbd { padding: 1px 5px; border: 1px solid var(--zap-border); border-radius: 4px; font-size: 11.5px; background: var(--zap-elevated); }
.zap-tour__foot { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.zap-tour__dots { display: flex; gap: 5px; margin-right: auto; }
.zap-tour__dots i { width: 6px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--zap-text) 18%, transparent); transition: width .3s cubic-bezier(.3, .7, .2, 1), background-color .2s ease; }
.zap-tour__dots i.is-done { background: color-mix(in srgb, var(--zap-primary) 45%, transparent); }
.zap-tour__dots i.is-on { width: 18px; background: var(--zap-primary); }
.zap-tour__skip { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: var(--zap-muted); cursor: pointer; }
.zap-tour__skip:hover { color: var(--zap-text); }
.zap-tour__skip[hidden], .zap-tour__foot .zap-btn[hidden] { display: none; }
.zap-tour__arrow { position: absolute; width: 12px; height: 12px; background: var(--pop-bg); border: 1px solid var(--zap-border); box-sizing: border-box; transform: rotate(45deg); display: none; }
.zap-tour__card[data-side] .zap-tour__arrow { display: block; }
.zap-tour__card[data-side="top"] .zap-tour__arrow { bottom: -6.5px; left: calc(var(--arrow, 50%) - 6px); border-top-color: transparent; border-left-color: transparent; }
.zap-tour__card[data-side="bottom"] .zap-tour__arrow { top: -6.5px; left: calc(var(--arrow, 50%) - 6px); border-bottom-color: transparent; border-right-color: transparent; }
.zap-tour__card[data-side="left"] .zap-tour__arrow { right: -6.5px; top: calc(var(--arrow, 50%) - 6px); border-bottom-color: transparent; border-left-color: transparent; }
.zap-tour__card[data-side="right"] .zap-tour__arrow { left: -6.5px; top: calc(var(--arrow, 50%) - 6px); border-top-color: transparent; border-right-color: transparent; }
@media (prefers-reduced-motion: reduce) { .zap-tour__hole, .zap-tour__card { transition: none !important; } .zap-tour__ring { animation: none; } }

/* ── DateTimePicker ─────────────────────────────────────────────────────── */
.zap-dtp { display: grid; gap: 6px; }
.zap-dtp__trigger { font-variant-numeric: tabular-nums; }
.zap-dtp__icon { display: inline-flex; color: var(--zap-muted); flex: none; } .zap-dtp__icon svg { width: 17px; height: 17px; }
.zap-dtp.is-open .zap-dtp__icon { color: var(--zap-primary); }
.zap-dtp__hint { font-size: 12px; color: var(--zap-muted); }
.zap-dtp__pop {
  position: fixed; left: 0; top: 0; z-index: 300; display: grid; grid-template-columns: auto auto; grid-template-areas: "cal time" "foot foot"; box-sizing: border-box;
  background: var(--zap-surface); border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius) + 2px); overflow: hidden;
  box-shadow: 0 20px 48px -16px rgba(16, 24, 40, .3), 0 4px 12px -4px rgba(16, 24, 40, .12);
}
.zap-dtp__pop:has(.zap-dtp__presets) { grid-template-columns: auto auto auto; grid-template-areas: "pre cal time" "foot foot foot"; }
.zap-dtp__pop:not([data-side]) { visibility: hidden; }
.zap-dtp__pop[data-side="bottom"] { transform-origin: top left; animation: zap-drop-in .16s cubic-bezier(.2, .7, .2, 1); }
.zap-dtp__pop[data-side="top"] { transform-origin: bottom left; animation: zap-drop-up-in .16s cubic-bezier(.2, .7, .2, 1); }
.zap-dtp__pop.is-leaving { animation: zap-drop-out .13s ease-in forwards; pointer-events: none; }
.zap-dtp__presets { grid-area: pre; display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-right: 1px solid var(--zap-border); background: var(--zap-elevated); min-width: 140px; }
.zap-dtp__preset { text-align: left; font: inherit; font-size: 13px; padding: 7px 10px; border: 0; border-radius: 7px; background: none; color: var(--zap-text); cursor: pointer; white-space: nowrap; }
.zap-dtp__preset:hover { background: var(--zap-primary-soft); color: var(--zap-primary); }
.zap-dtp__cal { grid-area: cal; }
.zap-dtp__cal .zap-cal { border: 0; box-shadow: none; border-radius: 0; }
.zap-dtp__right { grid-area: time; position: relative; width: 118px; border-left: 1px solid var(--zap-border); min-height: 240px; }
.zap-dtp__thead { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 12px 8px; font-size: 13px; font-weight: 700; }
.zap-dtp__thead span { font-size: 11px; font-weight: 600; color: var(--zap-muted); }
/* the times scroll inside the calendar's height (they never make the panel taller) */
.zap-dtp__times { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; overflow-y: auto; padding: 0 8px 10px; outline: none; scrollbar-width: thin; display: grid; align-content: start; gap: 2px; }
.zap-dtp__times:focus-visible { box-shadow: inset 0 0 0 2px var(--zap-primary); }
.zap-dtp__slot { font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; padding: 7px 8px; border: 0; border-radius: 7px; background: none; color: var(--zap-text); cursor: pointer; text-align: center; transition: background-color .12s ease, color .12s ease; }
.zap-dtp__slot:hover:not(:disabled) { background: var(--zap-primary-soft); color: var(--zap-primary); }
.zap-dtp__slot.is-on { background: var(--zap-primary); color: var(--zap-primary-contrast); font-weight: 700; }
.zap-dtp__slot.is-near { box-shadow: inset 0 0 0 1.5px var(--zap-primary); }
.zap-dtp__slot:disabled { opacity: .3; cursor: not-allowed; }
.zap-dtp__foot { grid-area: foot; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--zap-border); background: var(--zap-elevated); }
.zap-dtp__sum { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-dtp__now { font: 600 13px/1 var(--zap-font, inherit); padding: 7px 8px; border: 0; border-radius: 6px; background: none; color: var(--zap-primary); cursor: pointer; }
.zap-dtp__now:hover { background: var(--zap-primary-soft); }
@media (max-width: 560px) {
  .zap-dtp__pop, .zap-dtp__pop:has(.zap-dtp__presets) { grid-template-columns: 1fr; grid-template-areas: "pre" "cal" "time" "foot"; max-height: calc(100vh - 24px); overflow-y: auto; }
  .zap-dtp__presets { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--zap-border); }
  .zap-dtp__right { width: auto; border-left: 0; border-top: 1px solid var(--zap-border); }
  .zap-dtp__right { min-height: 0; }
  .zap-dtp__times { position: static; display: flex; overflow-x: auto; overflow-y: hidden; }
}

/* ── Timeline ───────────────────────────────────────────────────────────── */
.zap-tl { --tl-dot: 28px; --tl-gap: 16px; display: grid; gap: 8px; }
.zap-tl.is-dense { --tl-gap: 8px; --tl-dot: 22px; }
.zap-tl__list { list-style: none; margin: 0; padding: 0; display: grid; }
.zap-tl__item { --t: var(--zap-muted); position: relative; display: grid; grid-template-columns: var(--tl-dot) 1fr; gap: 14px; padding-bottom: var(--tl-gap); }
.zap-tl__item.is-primary { --t: var(--zap-primary); } .zap-tl__item.is-success { --t: var(--zap-success, #059669); } .zap-tl__item.is-warning { --t: var(--zap-warning, #d97706); } .zap-tl__item.is-danger { --t: var(--zap-danger, #dc2626); } .zap-tl__item.is-info { --t: #0891b2; }
.zap-tl__item.is-neutral { --t: color-mix(in srgb, var(--zap-text) 35%, var(--zap-muted)); }
/* the line down, from this dot to the next */
.zap-tl__rail { position: relative; display: flex; justify-content: center; }
.zap-tl__rail::after { content: ""; position: absolute; top: calc(var(--tl-dot) + 4px); bottom: calc(-1 * var(--tl-gap) + 4px); left: 50%; width: 2px; translate: -1px 0; border-radius: 2px; background: var(--zap-border); }
.zap-tl__item.st-done .zap-tl__rail::after { background: color-mix(in srgb, var(--t) 45%, var(--zap-border)); }
.zap-tl__list > .zap-tl__item:last-child .zap-tl__rail::after, .zap-tl__item:has(+ .zap-tl__day) .zap-tl__rail::after { display: none; }
.zap-tl__pip { width: 12px; height: 12px; margin-top: calc((var(--tl-dot) - 12px) / 2); box-sizing: border-box; border-radius: 50%; border: 2.5px solid var(--t); background: var(--zap-surface); }
.zap-tl__item.st-current .zap-tl__pip { background: var(--t); box-shadow: 0 0 0 5px color-mix(in srgb, var(--t) 20%, transparent); animation: zap-tl-pulse 2s ease-in-out infinite; }
@keyframes zap-tl-pulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--t) 8%, transparent); } }
.zap-tl__item.st-upcoming { opacity: .6; } .zap-tl__item.st-upcoming .zap-tl__pip { border-style: dashed; }
.zap-tl__icon { display: grid; place-items: center; width: var(--tl-dot); height: var(--tl-dot); border-radius: 50%; font-size: calc(var(--tl-dot) * .5); line-height: 1; color: var(--t); background: color-mix(in srgb, var(--t) 13%, var(--zap-surface)); box-shadow: 0 0 0 3px var(--zap-surface); }
.zap-tl__icon svg { width: 55%; height: 55%; }
.zap-tl__icon.is-check { color: #fff; background: var(--t); }
.zap-tl__av { display: grid; place-items: center; width: var(--tl-dot); height: var(--tl-dot); border-radius: 50%; object-fit: cover; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--h) 70% 60%), hsl(calc(var(--h) + 45) 70% 45%)); box-shadow: 0 0 0 3px var(--zap-surface); }
.zap-tl__body { min-width: 0; padding-top: calc((var(--tl-dot) - 20px) / 2); }
.zap-tl__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.zap-tl__title { font-size: 14px; font-weight: 600; color: var(--zap-text); }
.zap-tl__meta { font-size: 12px; color: var(--zap-muted); }
.zap-tl__time { margin-left: auto; font-size: 12px; color: var(--zap-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zap-tl__desc { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--zap-text) 75%, var(--zap-muted)); }
.zap-tl__content { margin-top: 8px; }
.zap-tl__item.is-clickable { cursor: pointer; border-radius: var(--zap-radius-sm); }
.zap-tl__item.is-clickable:hover .zap-tl__title { color: var(--zap-primary); }
.zap-tl__item.is-clickable:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 2px; }
.zap-tl__day { list-style: none; margin: 4px 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--zap-muted); display: flex; align-items: center; gap: 10px; }
.zap-tl__day::after { content: ""; flex: 1; height: 1px; background: var(--zap-border); }
.zap-tl__day:not(:first-child) { margin-top: 10px; }
/* entrances: scrolling into view, and live arrivals */
.zap-tl__item:not(.is-in) { opacity: 0; transform: translateY(10px); }
.zap-tl__item.is-in { transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.zap-tl__item.is-live { animation: zap-tl-live .5s cubic-bezier(.2, .8, .2, 1); }
.zap-tl__item.is-live .zap-tl__icon, .zap-tl__item.is-live .zap-tl__av, .zap-tl__item.is-live .zap-tl__pip { animation: zap-code-pop .45s cubic-bezier(.3, 1.6, .5, 1) .1s backwards; }
@keyframes zap-tl-live { from { opacity: 0; transform: translateY(-12px); max-height: 0; } to { max-height: 400px; } }
.zap-tl__spin { width: 14px; height: 14px; margin-top: calc((var(--tl-dot) - 14px) / 2); box-sizing: border-box; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--zap-primary) 25%, transparent); border-top-color: var(--zap-primary); animation: zap-btn-spin .8s linear infinite; }
.zap-tl__item.is-pending .zap-tl__title { color: var(--zap-muted); font-weight: 500; }
.zap-tl__more { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-left: calc(var(--tl-dot) + 14px); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 10px; border: 1px solid var(--zap-border); border-radius: 999px; background: var(--zap-surface); color: var(--zap-text); cursor: pointer; }
.zap-tl__more:hover { border-color: var(--zap-primary); color: var(--zap-primary); }
.zap-tl__more svg { width: 14px; height: 14px; }
/* alternate: both sides of a centre line */
.zap-tl--alternate .zap-tl__item { grid-template-columns: 1fr var(--tl-dot) 1fr; }
.zap-tl--alternate .zap-tl__rail { grid-column: 2; grid-row: 1; }
.zap-tl--alternate .zap-tl__body { grid-column: 3; grid-row: 1; }
.zap-tl--alternate .zap-tl__item:nth-child(even of .zap-tl__item) .zap-tl__body { grid-column: 1; text-align: right; }
.zap-tl--alternate .zap-tl__item:nth-child(even of .zap-tl__item) .zap-tl__head { justify-content: flex-end; }
.zap-tl--alternate .zap-tl__time { margin: 2px 0 0; display: block; }
.zap-tl--alternate .zap-tl__item:not(.is-in):nth-child(odd of .zap-tl__item) { transform: translateX(14px); }
.zap-tl--alternate .zap-tl__item:not(.is-in):nth-child(even of .zap-tl__item) { transform: translateX(-14px); }
@media (max-width: 640px) {
  .zap-tl--alternate .zap-tl__item { grid-template-columns: var(--tl-dot) 1fr; }
  .zap-tl--alternate .zap-tl__rail { grid-column: 1; }
  .zap-tl--alternate .zap-tl__body, .zap-tl--alternate .zap-tl__item:nth-child(even of .zap-tl__item) .zap-tl__body { grid-column: 2; text-align: left; }
  .zap-tl--alternate .zap-tl__item:nth-child(even of .zap-tl__item) .zap-tl__head { justify-content: flex-start; }
}
/* horizontal: steps along a line */
.zap-tl--horizontal .zap-tl__list { grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); overflow-x: auto; padding-bottom: 4px; }
.zap-tl--horizontal .zap-tl__item { grid-template-columns: none; grid-template-rows: var(--tl-dot) auto; gap: 10px; padding: 0 12px 0 0; justify-items: start; }
.zap-tl--horizontal .zap-tl__rail { width: 100%; justify-content: flex-start; }
.zap-tl--horizontal .zap-tl__rail::after { top: 50%; bottom: auto; left: calc(var(--tl-dot) + 6px); right: -6px; width: auto; height: 2px; translate: 0 -1px; }
.zap-tl--horizontal .zap-tl__body { padding-top: 0; }
.zap-tl--horizontal .zap-tl__time { margin-left: 0; display: block; flex-basis: 100%; }
.zap-tl--horizontal .zap-tl__item.st-done .zap-tl__rail::after { background: var(--t); }
@media (prefers-reduced-motion: reduce) { .zap-tl__item, .zap-tl__item:not(.is-in) { transition: none; opacity: 1; transform: none; animation: none; } }

/* ── Lightbox / Gallery ─────────────────────────────────────────────────── */
.zap-gallery { display: grid; grid-template-columns: repeat(var(--cols), minmax(140px, 1fr)); gap: var(--gap); }
.zap-gallery[style*="--cols:auto-fill"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.zap-gallery__item { position: relative; display: block; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: zoom-in; aspect-ratio: var(--ar); background: var(--zap-elevated); }
.zap-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .3s ease; }
.zap-gallery__item:hover img { transform: scale(1.06); }
.zap-gallery__item:focus-visible { outline: 3px solid var(--zap-primary); outline-offset: 2px; }
.zap-gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; font-size: 12px; font-weight: 600; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.zap-gallery__item:hover .zap-gallery__cap, .zap-gallery__item:focus-visible .zap-gallery__cap { opacity: 1; transform: none; }
.zap-lb { position: fixed; inset: 0; z-index: 1600; display: grid; grid-template-rows: auto 1fr auto; color: #f8fafc; outline: none; -webkit-user-select: none; user-select: none; }
.zap-lb__bg { position: absolute; inset: 0; background: rgba(4, 6, 12, .94); animation: zap-lb-fade .25s ease; transition: opacity .2s ease; }
.zap-lb.is-leaving .zap-lb__bg, .zap-lb.is-leaving .zap-lb__top, .zap-lb.is-leaving .zap-lb__bottom, .zap-lb.is-leaving .zap-lb__nav { opacity: 0; transition: opacity .22s ease; }
@keyframes zap-lb-fade { from { opacity: 0; } }
.zap-lb__top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 14px; animation: zap-lb-fade .3s ease; }
.zap-lb__count { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .8; }
.zap-lb__tools { margin-left: auto; display: flex; gap: 4px; }
.zap-lb__btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); color: inherit; cursor: pointer; text-decoration: none; transition: background-color .15s ease, transform .15s ease; }
.zap-lb__btn:hover { background: rgba(255, 255, 255, .16); }
.zap-lb__btn:active { transform: scale(.94); }
.zap-lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.zap-lb__btn svg { width: 19px; height: 19px; }
.zap-lb__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--zap-primary); transform: scaleX(0); transform-origin: left; }
.zap-lb__bar.is-run { animation: zap-lb-bar var(--show) linear forwards; }
@keyframes zap-lb-bar { to { transform: scaleX(1); } }
.zap-lb__stage { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; touch-action: none; padding: 0 64px; }
.zap-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); cursor: zoom-in; transform-origin: center; will-change: transform; -webkit-user-drag: none; }
.zap-lb.is-zoomed .zap-lb__img { cursor: grab; }
.zap-lb.is-zoomed .zap-lb__img:active { cursor: grabbing; }
.zap-lb__img.enter-r { animation: zap-lb-in-r .35s cubic-bezier(.2, .8, .2, 1); }
.zap-lb__img.enter-l { animation: zap-lb-in-l .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes zap-lb-in-r { from { opacity: 0; translate: 60px 0; } }
@keyframes zap-lb-in-l { from { opacity: 0; translate: -60px 0; } }
.zap-lb__spin { position: absolute; width: 34px; height: 34px; box-sizing: border-box; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: zap-btn-spin .8s linear infinite; }
.zap-lb__nav { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.zap-lb__nav.is-prev { left: 12px; } .zap-lb__nav.is-next { right: 12px; }
.zap-lb__nav svg { width: 22px; height: 22px; }
.zap-lb.is-zoomed .zap-lb__nav { opacity: .25; }
.zap-lb__bottom { position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; padding: 10px 14px 14px; animation: zap-lb-fade .3s ease; }
.zap-lb__cap { margin: 0; max-width: 680px; font-size: 14px; line-height: 1.5; text-align: center; opacity: .9; animation: zap-lb-fade .3s ease; }
.zap-lb__thumbs { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.zap-lb__thumbs::-webkit-scrollbar { display: none; }
.zap-lb__thumb { flex: none; width: 56px; height: 42px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; opacity: .45; background: #111; transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; }
.zap-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zap-lb__thumb:hover { opacity: .8; }
.zap-lb__thumb.is-on { opacity: 1; box-shadow: 0 0 0 2px #fff; transform: scale(1.06); }
@media (max-width: 640px) { .zap-lb__stage { padding: 0; } .zap-lb__nav { display: none; } .zap-lb__tools .zap-lb__btn:nth-child(-n + 2) { display: none; } }
@media (prefers-reduced-motion: reduce) { .zap-lb__img.enter-r, .zap-lb__img.enter-l { animation: none; } }

/* ── Notification center ───────────────────────────────────────────────── */
.zap-nc { display: inline-flex; }
.zap-nc__bell { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--zap-border); border-radius: 12px; background: var(--zap-surface); color: var(--zap-text); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.zap-nc__bell:hover { background: var(--zap-elevated); }
.zap-nc__bell[aria-expanded="true"] { border-color: var(--zap-primary); color: var(--zap-primary); box-shadow: 0 0 0 3px var(--zap-primary-soft); }
.zap-nc__bell:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 2px; }
.zap-nc__bell > svg { width: 19px; height: 19px; transform-origin: 50% 3px; }
.zap-nc__bell.is-ringing > svg { animation: zap-nc-ring .9s ease; }
@keyframes zap-nc-ring { 10%, 30% { rotate: 16deg; } 20%, 40% { rotate: -14deg; } 50% { rotate: 8deg; } 60% { rotate: -5deg; } 70% { rotate: 0deg; } }
.zap-nc__count { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; display: grid; place-items: center; font: 800 11px/1 var(--zap-font, inherit); font-variant-numeric: tabular-nums; color: #fff; background: var(--zap-danger, #dc2626); box-shadow: 0 0 0 2px var(--zap-surface); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), opacity .2s ease; }
.zap-nc__count.is-hidden { opacity: 0; transform: scale(0); }
.zap-nc__bell.is-ringing .zap-nc__count { animation: zap-ind-bump .45s cubic-bezier(.3, 1.6, .5, 1); }
.zap-nc__pop { position: fixed; left: 0; top: 0; z-index: 300; display: flex; flex-direction: column; max-width: calc(100vw - 16px); max-height: min(560px, calc(100vh - 80px)); box-sizing: border-box;
  background: var(--zap-surface); border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius) + 2px); overflow: hidden;
  box-shadow: 0 24px 56px -18px rgba(16, 24, 40, .35), 0 4px 12px -4px rgba(16, 24, 40, .12); }
.zap-nc__pop:not([data-side]) { visibility: hidden; }
.zap-nc__pop[data-side="bottom"] { transform-origin: top right; animation: zap-drop-in .18s cubic-bezier(.2, .7, .2, 1); }
.zap-nc__pop[data-side="top"] { transform-origin: bottom right; animation: zap-drop-up-in .18s cubic-bezier(.2, .7, .2, 1); }
.zap-nc__pop.is-leaving { animation: zap-drop-out .13s ease-in forwards; pointer-events: none; }
.zap-nc__head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px 16px; }
.zap-nc__head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.zap-nc__pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--zap-primary); background: var(--zap-primary-soft); animation: zap-chip-in .2s ease; }
.zap-nc__link { margin-left: auto; font: 600 12.5px/1 var(--zap-font, inherit); padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--zap-primary); cursor: pointer; }
.zap-nc__link:hover:not(:disabled) { background: var(--zap-primary-soft); }
.zap-nc__link:disabled { color: var(--zap-muted); cursor: default; }
.zap-nc__tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--zap-border); overflow-x: auto; scrollbar-width: none; }
.zap-nc__tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 8px 11px; border: 0; background: none; font: 600 13px/1 var(--zap-font, inherit); color: var(--zap-muted); cursor: pointer; white-space: nowrap; }
.zap-nc__tab span { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--zap-text) 7%, transparent); }
.zap-nc__tab:hover { color: var(--zap-text); }
.zap-nc__tab.is-on { color: var(--zap-text); }
.zap-nc__tab.is-on::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--zap-primary); animation: zap-nc-tab .25s cubic-bezier(.2, .8, .2, 1); }
.zap-nc__tab.is-on span { color: var(--zap-primary); background: var(--zap-primary-soft); }
.zap-nc__tab:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: -2px; border-radius: 6px; }
@keyframes zap-nc-tab { from { transform: scaleX(.3); opacity: 0; } }
.zap-nc__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.zap-nc__group { padding: 4px 0; }
.zap-nc__glabel { margin: 0; padding: 8px 16px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--zap-muted); }
.zap-nc__item { position: relative; display: flex; gap: 12px; padding: 10px 36px 10px 16px; cursor: pointer; outline: none; overflow: hidden; transition: background-color .15s ease, transform .26s cubic-bezier(.4, 0, .2, 1), opacity .26s ease, height .26s ease .1s, padding .26s ease .1s; }
.zap-nc__item:hover { background: var(--zap-elevated); }
.zap-nc__item:focus-visible { box-shadow: inset 0 0 0 2px var(--zap-primary); }
.zap-nc__item.is-unread { background: color-mix(in srgb, var(--zap-primary) 4%, transparent); }
.zap-nc__item.is-unread:hover { background: color-mix(in srgb, var(--zap-primary) 8%, transparent); }
.zap-nc__item.is-new { animation: zap-nc-new .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes zap-nc-new { from { opacity: 0; transform: translateY(-10px); background: var(--zap-primary-soft); } }
.zap-nc__item.is-leaving { transform: translateX(100%); opacity: 0; height: 0 !important; padding-top: 0; padding-bottom: 0; pointer-events: none; }
.zap-nc__av, .zap-nc__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.zap-nc__av { object-fit: cover; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--h) 70% 60%), hsl(calc(var(--h) + 45) 70% 45%)); }
.zap-nc__icon { --t: var(--zap-primary); font-size: 16px; color: var(--t); background: color-mix(in srgb, var(--t) 12%, var(--zap-surface)); }
.zap-nc__icon.is-success { --t: var(--zap-success, #059669); } .zap-nc__icon.is-warning { --t: var(--zap-warning, #d97706); } .zap-nc__icon.is-danger { --t: var(--zap-danger, #dc2626); } .zap-nc__icon.is-info { --t: #0891b2; }
.zap-nc__icon svg { width: 17px; height: 17px; }
.zap-nc__text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.zap-nc__title { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--zap-text); }
.zap-nc__item.is-unread .zap-nc__title { font-weight: 650; }
.zap-nc__body { margin: 0; font-size: 13px; line-height: 1.45; color: var(--zap-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zap-nc__actions { display: flex; gap: 6px; margin: 4px 0 2px; }
.zap-nc__meta { font-size: 12px; color: var(--zap-muted); }
.zap-nc__dot { position: absolute; right: 14px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--zap-primary); transition: opacity .15s ease; }
.zap-nc__tools { position: absolute; right: 8px; top: 8px; display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--zap-surface); box-shadow: 0 2px 8px -2px rgba(16, 24, 40, .2); opacity: 0; transform: translateY(-2px); transition: opacity .15s ease, transform .15s ease; }
.zap-nc__item:hover .zap-nc__tools, .zap-nc__item:focus-within .zap-nc__tools { opacity: 1; transform: none; }
.zap-nc__item:hover .zap-nc__dot, .zap-nc__item:focus-within .zap-nc__dot { opacity: 0; }
.zap-nc__tool { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--zap-muted); cursor: pointer; }
.zap-nc__tool:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 8%, transparent); }
.zap-nc__tool svg { width: 15px; height: 15px; }
.zap-nc__empty { display: grid; justify-items: center; gap: 4px; padding: 40px 20px; text-align: center; font-size: 13px; color: var(--zap-muted); animation: zap-ph-in .3s ease; }
.zap-nc__empty b { color: var(--zap-text); font-size: 14.5px; }
.zap-nc__emptyart { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%; color: var(--zap-success, #059669); background: color-mix(in srgb, var(--zap-success, #059669) 12%, transparent); animation: zap-code-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.zap-nc__emptyart svg { width: 24px; height: 24px; }
.zap-nc__foot { padding: 10px 16px; border-top: 1px solid var(--zap-border); text-align: center; font-size: 13px; }
.zap-nc__foot a, .zap-nc__foot button { color: var(--zap-primary); font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; font: inherit; }
@media (prefers-reduced-motion: reduce) { .zap-nc__bell.is-ringing > svg, .zap-nc__item.is-new { animation: none; } }

/* ── Scheduler ─────────────────────────────────────────────────────────────
   Events are tinted with their colour (--ev): a soft fill, a solid edge. */
.zap-sch { --sch-line: var(--zap-border); --sch-soft: color-mix(in srgb, var(--zap-text) 3%, transparent); display: grid; gap: 12px; min-width: 0; -webkit-user-select: none; user-select: none; }
.zap-sch__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.zap-sch__nav { display: flex; align-items: center; gap: 6px; }
.zap-sch__today { font: 600 13px/1 var(--zap-font, inherit); padding: 8px 12px; border: 1px solid var(--zap-border); border-radius: 8px; background: var(--zap-surface); color: var(--zap-text); cursor: pointer; }
.zap-sch__today:hover { border-color: var(--zap-primary); color: var(--zap-primary); }
.zap-sch__arrow { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--zap-text); cursor: pointer; }
.zap-sch__arrow:hover { background: color-mix(in srgb, var(--zap-text) 7%, transparent); }
.zap-sch__arrow svg { width: 18px; height: 18px; }
.zap-sch__title { margin: 0 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.zap-sch__views { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--zap-elevated); border: 1px solid var(--zap-border); }
.zap-sch__view { font: 600 13px/1 var(--zap-font, inherit); padding: 7px 12px; border: 0; border-radius: 7px; background: none; color: var(--zap-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.zap-sch__view:hover { color: var(--zap-text); }
.zap-sch__view.is-on { background: var(--zap-surface); color: var(--zap-text); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.zap-sch__stage { border: 1px solid var(--zap-border); border-radius: var(--zap-radius); background: var(--zap-surface); overflow: hidden; animation: zap-ph-in .25s ease; }

/* an event */
.zap-sch__ev {
  --ev: var(--zap-primary); position: relative; box-sizing: border-box; min-width: 0; overflow: hidden; outline: none; cursor: grab;
  display: flex; flex-direction: column; gap: 1px; padding: 3px 7px; border-radius: 6px; font-size: 12px; line-height: 1.3;
  color: color-mix(in srgb, var(--ev) 55%, var(--zap-text)); background: color-mix(in srgb, var(--ev) 16%, var(--zap-surface));
  border-left: 3px solid var(--ev); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ev) 22%, transparent);
  transition: box-shadow .15s ease, background-color .15s ease, opacity .15s ease;
}
.zap-sch__ev:hover { background: color-mix(in srgb, var(--ev) 24%, var(--zap-surface)); z-index: 2; }
.zap-sch__ev:focus-visible { box-shadow: 0 0 0 2px var(--zap-surface), 0 0 0 4px var(--ev); z-index: 3; }
.zap-sch__ev.is-dragging { z-index: 5; cursor: grabbing; box-shadow: 0 10px 24px -8px rgba(16, 24, 40, .35), 0 0 0 1px var(--ev); background: color-mix(in srgb, var(--ev) 28%, var(--zap-surface)); }
.zap-sch__ev.is-new { border-left-style: dashed; background: color-mix(in srgb, var(--zap-primary) 12%, var(--zap-surface)); opacity: .9; }
.zap-sch__et { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-sch__etime { font-size: 11px; opacity: .8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zap-sch__ev.is-short { flex-direction: row; align-items: center; gap: 6px; padding-top: 1px; padding-bottom: 1px; }
.zap-sch__ev.is-bar { flex-direction: row; align-items: center; gap: 6px; height: 24px; padding: 0 8px; }
.zap-sch__ev.is-bar.cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.zap-sch__ev.is-bar.cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.zap-sch__ev.is-dot { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 6px; height: 22px; padding: 0 6px; border-left: 0; background: none; box-shadow: none; color: var(--zap-text); }
.zap-sch__ev.is-dot::before { content: ""; order: 3; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ev); }
.zap-sch__ev.is-dot .zap-sch__etime { color: var(--zap-muted); }
.zap-sch__ev.is-dot:hover { background: color-mix(in srgb, var(--ev) 12%, transparent); }
.zap-sch__grip { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.zap-sch__grip::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 18px; height: 3px; margin-left: -9px; border-radius: 2px; background: currentColor; opacity: 0; transition: opacity .15s ease; }
.zap-sch__ev:hover .zap-sch__grip::after { opacity: .4; }
.zap-sch__grip.is-l, .zap-sch__grip.is-r { top: 0; bottom: 0; height: auto; width: 8px; cursor: ew-resize; }
.zap-sch__grip.is-l { left: 0; right: auto; } .zap-sch__grip.is-r { right: 0; left: auto; }
.zap-sch__grip.is-l::after, .zap-sch__grip.is-r::after { left: 3px; top: 50%; bottom: auto; width: 2px; height: 12px; margin: -6px 0 0; }
.zap-sch.is-readonly .zap-sch__ev { cursor: pointer; }

/* month */
.zap-sch__mhead { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--sch-line); }
.zap-sch__mhead div { padding: 8px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--zap-muted); }
.zap-sch__mbody { display: grid; grid-template-rows: repeat(6, minmax(124px, 1fr)); }
.zap-sch__mweek { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--sch-line); overflow: hidden; min-height: 124px; }
.zap-sch__mweek:last-child { border-bottom: 0; }
.zap-sch__mcell { position: relative; border-right: 1px solid var(--sch-line); padding: 4px 6px; cursor: cell; transition: background-color .15s ease; }
.zap-sch__mcell:nth-child(7) { border-right: 0; }
.zap-sch__mcell:hover { background: var(--sch-soft); }
.zap-sch__mcell.is-out { background: color-mix(in srgb, var(--zap-text) 2.5%, transparent); }
.zap-sch__mcell.is-out .zap-sch__mnum { color: var(--zap-muted); opacity: .6; }
.zap-sch__mcell.is-off { background: color-mix(in srgb, var(--zap-text) 2%, transparent); }
.zap-sch__mnum { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border: 0; border-radius: 999px; background: none; font: 600 13px/1 var(--zap-font, inherit); color: var(--zap-text); cursor: pointer; }
.zap-sch__mnum:hover { background: color-mix(in srgb, var(--zap-text) 8%, transparent); }
.zap-sch__mcell.is-today .zap-sch__mnum { background: var(--zap-primary); color: var(--zap-primary-contrast); }
.zap-sch__mlayer { position: absolute; left: 0; right: 0; top: 32px; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 20px; row-gap: 2px; pointer-events: none; padding: 0 3px; }
.zap-sch__mlayer > * { pointer-events: auto; margin: 0 2px; }
.zap-sch__mlayer > .zap-sch__ev.is-bar, .zap-sch__mlayer > .zap-sch__ev.is-dot { height: 20px; font-size: 11.5px; }
.zap-sch__more { font: 600 11.5px/1 var(--zap-font, inherit); text-align: left; padding: 0 6px; border: 0; border-radius: 5px; background: none; color: var(--zap-muted); cursor: pointer; }
.zap-sch__more:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 7%, transparent); }

/* week / day */
.zap-sch__thead { display: grid; border-bottom: 1px solid var(--sch-line); padding-right: var(--sbw, 0px); }
.zap-sch__dhead { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 0; background: none; color: var(--zap-muted); cursor: pointer; font: inherit; }
.zap-sch__dhead span { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.zap-sch__dhead b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 17px; color: var(--zap-text); transition: background-color .15s ease; }
.zap-sch__dhead:hover b { background: color-mix(in srgb, var(--zap-text) 7%, transparent); }
.zap-sch__dhead.is-today span { color: var(--zap-primary); }
.zap-sch__dhead.is-today b { background: var(--zap-primary); color: var(--zap-primary-contrast); }
.zap-sch__allday { display: grid; border-bottom: 1px solid var(--sch-line); min-height: 30px; padding-right: var(--sbw, 0px); }
.zap-sch__alabel { align-self: center; padding: 0 6px; font-size: 10.5px; color: var(--zap-muted); text-align: right; }
.zap-sch__alayer { display: grid; grid-auto-rows: 24px; row-gap: 2px; padding: 3px 0; }
.zap-sch__alayer > * { margin: 0 2px; }
.zap-sch__tbody { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.zap-sch__tgrid { position: relative; display: grid; height: calc(24 * var(--hh)); }
.zap-sch__gutter { display: grid; grid-template-rows: repeat(24, var(--hh)); }
.zap-sch__hour { position: relative; }
.zap-sch__hour span { position: absolute; right: 8px; top: -7px; font-size: 10.5px; color: var(--zap-muted); font-variant-numeric: tabular-nums; }
.zap-sch__col { position: relative; border-left: 1px solid var(--sch-line); cursor: cell;
  background-image: linear-gradient(to bottom, var(--sch-line) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--sch-line) 55%, transparent) 1px, transparent 1px);
  background-size: 100% var(--hh), 100% calc(var(--hh) / 2); background-position: 0 0, 0 calc(var(--hh) / 2); }
.zap-sch__col.is-today { background-color: color-mix(in srgb, var(--zap-primary) 3.5%, transparent); }
.zap-sch__off { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--zap-text) 3.5%, transparent); pointer-events: none; }
.zap-sch__elayer { position: absolute; inset: 0; pointer-events: none; }
.zap-sch__elayer > .zap-sch__ev { position: absolute; pointer-events: auto; }
.zap-sch__now { position: absolute; left: -1px; right: 0; height: 2px; background: var(--zap-danger, #dc2626); z-index: 4; pointer-events: none; }
.zap-sch__now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: inherit; }

/* timeline */
.zap-sch__tl { --rh: 220px; position: relative; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.zap-sch__tlhead { position: sticky; top: 0; z-index: 6; display: flex; background: var(--zap-surface); border-bottom: 1px solid var(--sch-line); }
.zap-sch__tlcorner { position: sticky; left: 0; z-index: 2; flex: none; width: var(--rh); box-sizing: border-box; display: flex; align-items: flex-end; padding: 8px 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--zap-muted); background: var(--zap-surface); border-right: 1px solid var(--sch-line); }
.zap-sch__tlday { position: relative; flex: none; width: var(--dw); display: grid; justify-items: center; align-content: center; gap: 1px; padding: 6px 0; border-left: 1px solid var(--sch-line); color: var(--zap-muted); box-sizing: border-box; }
.zap-sch__tlday span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.zap-sch__tlday b { font-size: 15px; color: var(--zap-text); }
.zap-sch__tlday em { position: absolute; left: 6px; top: 4px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--zap-primary); }
.zap-sch__tlday.is-off { background: color-mix(in srgb, var(--zap-text) 3%, transparent); }
.zap-sch__tlday.is-today b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--zap-primary); color: var(--zap-primary-contrast); }
.zap-sch__tlgrid { position: relative; }
.zap-sch__tlbg { position: absolute; top: 0; bottom: 0; left: var(--rh); display: flex; pointer-events: none; }
.zap-sch__tlbg i { width: var(--dw); flex: none; border-left: 1px solid var(--sch-line); box-sizing: border-box; }
.zap-sch__tlbg i.is-off { background: color-mix(in srgb, var(--zap-text) 3%, transparent); }
.zap-sch__tlbg i.is-today { background: color-mix(in srgb, var(--zap-primary) 5%, transparent); }
.zap-sch__trows { position: relative; }
.zap-sch__tslot { display: contents; }
.zap-sch__trow { position: relative; display: flex; border-bottom: 1px solid var(--sch-line); transition: height .2s ease; }
.zap-sch__rhead { position: sticky; left: 0; z-index: 4; flex: none; width: var(--rh); box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--zap-surface); border-right: 1px solid var(--sch-line); }
.zap-sch__rav { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--h) 70% 60%), hsl(calc(var(--h) + 45) 70% 45%)); }
.zap-sch__rname { flex: 1; min-width: 0; display: grid; font-size: 13px; }
.zap-sch__rname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-sch__rname small { color: var(--zap-muted); font-size: 11.5px; }
.zap-sch__load { flex: none; width: 34px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--zap-text) 9%, transparent); overflow: hidden; }
.zap-sch__load i { display: block; height: 100%; border-radius: inherit; background: var(--zap-success, #059669); transition: width .3s ease; }
.zap-sch__load.is-high i { background: var(--zap-danger, #dc2626); }
.zap-sch__rcells { position: relative; flex: none; cursor: cell; }
.zap-sch__rcells > .zap-sch__ev { position: absolute; height: 28px; }
.zap-sch__tnow { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--zap-danger, #dc2626); z-index: 3; pointer-events: none; opacity: .7; }
.zap-sch__empty { padding: 30px; text-align: center; color: var(--zap-muted); }
@media (max-width: 700px) { .zap-sch__tl { --rh: 150px; } .zap-sch__mbody { grid-template-rows: repeat(6, minmax(84px, 1fr)); } .zap-sch__title { font-size: 15px; } }

/* ── Tag / chip ──────────────────────────────────────────────────────────── */
.zap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--zap-primary-soft);
  color: var(--zap-primary);
}

/* ── Card (generic surface) ──────────────────────────────────────────────── */
.zap-card {
  background: var(--zap-surface);
  border: 1px solid var(--zap-border);
  border-radius: var(--zap-radius);
  box-shadow: var(--zap-shadow);
  padding: calc(var(--zap-space) * 2);
}

/* ── Calendar ────────────────────────────────────────────────────────────────
   42 fixed day buttons per month; a range is a band behind them (no column
   gap, so it runs unbroken), its ends rounded pills on top. */
.zap-cal {
  --cal-c: var(--zap-primary); --cal-cell: 38px;
  display: inline-block; box-sizing: border-box; padding: 12px;
  background: var(--zap-surface); border: 1px solid var(--zap-border);
  border-radius: calc(var(--zap-radius) + 2px);
  box-shadow: 0 16px 40px -14px rgba(16, 24, 40, .25), 0 3px 8px -4px rgba(16, 24, 40, .1);
  user-select: none;
}
.zap-cal__header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.zap-cal__hspace { flex: 1; }
.zap-cal__title { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: 15px; }
.zap-cal__tbtn { font: inherit; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--zap-text); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.zap-cal__tbtn:hover, .zap-cal__tbtn[aria-pressed="true"] { background: var(--zap-primary-soft); color: var(--cal-c); }
.zap-cal__tbtn:focus-visible, .zap-cal__nav:focus-visible, .zap-cal__today:focus-visible { outline: 2px solid var(--cal-c); outline-offset: 1px; }
.zap-cal__nav {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--zap-border); border-radius: 9px; background: var(--zap-surface); color: var(--zap-text); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.zap-cal__nav svg { width: 15px; height: 15px; }
.zap-cal__nav:hover:not(:disabled) { background: var(--zap-primary-soft); border-color: color-mix(in srgb, var(--cal-c) 40%, var(--zap-border)); }
.zap-cal__nav:active:not(:disabled) { transform: scale(.92); }
.zap-cal__nav:disabled { opacity: .35; cursor: not-allowed; }
.zap-cal__today { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--cal-c); cursor: pointer; }
.zap-cal__today:hover { background: var(--zap-primary-soft); }

.zap-cal__body { position: relative; }
.zap-cal__months { display: flex; gap: 20px; }
.zap-cal__pane { display: grid; gap: 6px; overflow: hidden; }
.zap-cal__ptitle { text-align: center; }
.zap-cal__ptitle .zap-cal__title { font-size: 14px; }
.zap-cal__grid { display: grid; grid-template-columns: repeat(7, var(--cal-cell)); row-gap: 2px; }
.zap-cal__grid.has-weeks { grid-template-columns: 28px repeat(7, var(--cal-cell)); }
.zap-cal__grid.is-from-r { animation: zap-cal-in-r .28s cubic-bezier(.2, .8, .2, 1); }
.zap-cal__grid.is-from-l { animation: zap-cal-in-l .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes zap-cal-in-r { from { opacity: 0; transform: translateX(18px); } }
@keyframes zap-cal-in-l { from { opacity: 0; transform: translateX(-18px); } }
.zap-cal__weekday { display: grid; place-items: center; height: 26px; font-size: 11px; font-weight: 600; color: var(--zap-muted); text-transform: uppercase; letter-spacing: .02em; }
.zap-cal__wk { display: grid; place-items: center; font-size: 10px; font-weight: 600; color: color-mix(in srgb, var(--zap-muted) 70%, transparent); font-variant-numeric: tabular-nums; }

.zap-cal__day {
  position: relative; font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums;
  width: var(--cal-cell); height: var(--cal-cell); padding: 0; border: 0; background: transparent; color: var(--zap-text); cursor: pointer; outline: none;
}
.zap-cal__day > span {
  position: relative; z-index: 1; display: grid; place-items: center; width: calc(var(--cal-cell) - 4px); height: calc(var(--cal-cell) - 4px); margin: 2px;
  border-radius: 10px; transition: background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.zap-cal__day:hover:not(:disabled) > span { background: var(--zap-primary-soft); }
.zap-cal__day:focus-visible > span { box-shadow: 0 0 0 2px var(--cal-c); }
.zap-cal__day.is-muted { color: var(--zap-muted); }
.zap-cal__day.is-muted > span { opacity: .55; }
.zap-cal__day.is-today > span { font-weight: 700; color: var(--cal-c); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cal-c) 55%, transparent); }
.zap-cal__day.is-selected > span { background: var(--cal-c); color: var(--zap-primary-contrast); font-weight: 600; box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--cal-c) 70%, transparent); animation: zap-cal-pick .28s cubic-bezier(.3, 1.6, .5, 1); }
.zap-cal__day.is-selected:hover > span { background: var(--cal-c); filter: brightness(1.07); }
@keyframes zap-cal-pick { 40% { transform: scale(1.12); } }
.zap-cal__day:disabled { cursor: not-allowed; }
.zap-cal__day:disabled > span { opacity: .35; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--zap-muted) 70%, transparent); }
/* a checkout on a booked day is fine — once chosen it shows as chosen */
.zap-cal__day.is-selected:disabled > span { opacity: 1; text-decoration: none; }
/* side by side, each month shows only its own days (the neighbours' belong to the next pane) */
.zap-cal--multi .zap-cal__day.is-muted { visibility: hidden; pointer-events: none; }
.zap-cal__mark { position: absolute; z-index: 2; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--cal-c); }
.zap-cal__day.is-selected .zap-cal__mark { background: var(--zap-primary-contrast); }

/* a range: the band (::before) behind the days between, and behind half of each end */
.zap-cal__day::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; right: 0; background: transparent; transition: background-color .15s ease; }
.zap-cal__day.is-in-range::before, .zap-cal__day.is-preview::before { background: color-mix(in srgb, var(--cal-c) 13%, transparent); }
.zap-cal__day.is-preview::before { background: color-mix(in srgb, var(--cal-c) 8%, transparent); }
.zap-cal__day.is-range-start.has-end:not(.is-range-end)::before, .zap-cal__day.has-preview::before { left: 50%; background: color-mix(in srgb, var(--cal-c) 13%, transparent); }
.zap-cal__day.is-range-end:not(.is-range-start)::before, .zap-cal__day.is-preview-end::before { right: 50%; background: color-mix(in srgb, var(--cal-c) 13%, transparent); }
.zap-cal__day.has-preview::before, .zap-cal__day.is-preview-end::before { background: color-mix(in srgb, var(--cal-c) 8%, transparent); }
.zap-cal__day.is-preview-end > span { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cal-c) 60%, transparent); }
.zap-cal__day.is-muted.is-in-range::before, .zap-cal__day.is-muted.is-preview::before { opacity: .5; }
.zap-cal__grid > .zap-cal__day:nth-child(7n + 8)::before { border-radius: 10px 0 0 10px; }   /* row starts */
.zap-cal__grid > .zap-cal__day:nth-child(7n + 14)::before { border-radius: 0 10px 10px 0; }  /* row ends */

/* month / year pickers, over the days */
.zap-cal__picker {
  position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: center;
  background: var(--zap-surface); animation: zap-cal-zoom .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes zap-cal-zoom { from { opacity: 0; transform: scale(.94); } }
.zap-cal__pick { font: inherit; font-size: 14px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--zap-text); cursor: pointer; transition: background-color .15s ease; }
.zap-cal__pick:hover:not(:disabled) { background: var(--zap-primary-soft); }
.zap-cal__pick.is-today { color: var(--cal-c); font-weight: 700; }
.zap-cal__pick.is-selected { background: var(--cal-c); color: var(--zap-primary-contrast); font-weight: 600; }
.zap-cal__pick:disabled { opacity: .35; cursor: not-allowed; }
.zap-cal__pick:focus-visible { outline: 2px solid var(--cal-c); outline-offset: 1px; }
.zap-cal.is-months .zap-cal__months, .zap-cal.is-years .zap-cal__months { visibility: hidden; }
@media (max-width: 520px) { .zap-cal--multi .zap-cal__months { flex-direction: column; } .zap-cal { --cal-cell: 36px; } }
@media (prefers-reduced-motion: reduce) { .zap-cal__grid.is-from-r, .zap-cal__grid.is-from-l, .zap-cal__picker, .zap-cal__day.is-selected > span { animation: none; } }

/* ── Image cropper ───────────────────────────────────────────────────────────
   The stage shows the image under a crop box whose huge box-shadow dims the
   rest; .is-anim makes button-driven changes glide, dragging stays exact. */
.zap-crop { --cr-c: var(--zap-primary); display: grid; gap: 12px; }
.zap-crop__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.zap-crop__aspects { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: calc(var(--zap-radius-sm) + 3px); background: var(--zap-elevated); box-shadow: inset 0 0 0 1px var(--zap-border); }
.zap-crop__chip { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 11px; border: 0; border-radius: var(--zap-radius-sm); background: transparent; color: var(--zap-muted); cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.zap-crop__chip:hover { color: var(--zap-text); }
.zap-crop__chip.is-on { background: var(--zap-surface); color: var(--zap-text); box-shadow: 0 1px 3px rgba(16, 24, 40, .14); }
.zap-crop__chip:focus-visible, .zap-crop__tool:focus-visible { outline: 2px solid var(--cr-c); outline-offset: 1px; }
.zap-crop__spacer { flex: 1 1 auto; }
.zap-crop__tools, .zap-crop__zoom { display: inline-flex; align-items: center; gap: 2px; }
.zap-crop__zoom { gap: 6px; }
.zap-crop__tool {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--zap-text); cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.zap-crop__tool svg { width: 17px; height: 17px; }
.zap-crop__tool:hover { background: color-mix(in srgb, var(--zap-text) 7%, transparent); }
.zap-crop__tool:active { transform: scale(.9); }
.zap-crop__zoom input[type="range"], .zap-crop__opt input[type="range"] { width: 120px; accent-color: var(--cr-c); }
.zap-crop__pct { min-width: 42px; font-size: 12px; font-weight: 600; color: var(--zap-muted); font-variant-numeric: tabular-nums; text-align: right; }

.zap-crop__main { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; align-items: start; }
.zap-crop__main:not(:has(.zap-crop__side)) { grid-template-columns: 1fr; }
@media (max-width: 760px) { .zap-crop__main { grid-template-columns: 1fr; } }
.zap-crop__col { display: grid; gap: 10px; min-width: 0; }
.zap-crop__stage {
  position: relative; width: 100%; height: 400px; overflow: hidden;
  border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius) + 2px);
  background-color: var(--zap-elevated);
  background-image:
    linear-gradient(45deg, var(--zap-border) 25%, transparent 25%),
    linear-gradient(-45deg, var(--zap-border) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--zap-border) 75%),
    linear-gradient(-45deg, transparent 75%, var(--zap-border) 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  user-select: none; touch-action: none; cursor: grab;
}
.zap-crop.is-pan .zap-crop__stage { cursor: grabbing; }
.zap-crop__img { position: absolute; display: block; pointer-events: none; -webkit-user-drag: none; max-width: none; }
.zap-crop.is-anim .zap-crop__img { transition: transform .3s cubic-bezier(.2, .8, .2, 1), left .3s cubic-bezier(.2, .8, .2, 1), top .3s cubic-bezier(.2, .8, .2, 1); }
.zap-crop__stage.is-empty .zap-crop__img, .zap-crop__stage.is-empty .zap-crop__box { display: none; }

.zap-crop__box {
  position: absolute; box-sizing: border-box; cursor: move; outline: none;
  border: 1.5px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 9999px rgba(2, 6, 23, .55), 0 0 0 1px rgba(0, 0, 0, .25);
  transition: border-radius .3s ease;
}
.zap-crop.is-anim .zap-crop__box { transition: left .3s cubic-bezier(.2, .8, .2, 1), top .3s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1), height .3s cubic-bezier(.2, .8, .2, 1), border-radius .3s ease; }
.zap-crop.is-circle .zap-crop__box { border-radius: 50%; }
.zap-crop__box:focus-visible { border-color: var(--cr-c); box-shadow: 0 0 0 9999px rgba(2, 6, 23, .55), 0 0 0 3px color-mix(in srgb, var(--cr-c) 50%, transparent); }
/* rule of thirds: faint at rest, clear while something moves */
.zap-crop__grid {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .35; transition: opacity .2s ease;
  background-image:
    linear-gradient(to right, transparent calc(33.333% - .5px), rgba(255,255,255,.7) calc(33.333% - .5px), rgba(255,255,255,.7) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.7) calc(66.666% - .5px), rgba(255,255,255,.7) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(to bottom, transparent calc(33.333% - .5px), rgba(255,255,255,.7) calc(33.333% - .5px), rgba(255,255,255,.7) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.7) calc(66.666% - .5px), rgba(255,255,255,.7) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}
.zap-crop.is-busy .zap-crop__grid { opacity: 1; }
.zap-crop.is-circle .zap-crop__grid { overflow: hidden; }
.zap-crop__h {
  position: absolute; width: 12px; height: 12px; box-sizing: border-box;
  background: #fff; border: 1.5px solid var(--cr-c); border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .12s ease;
}
.zap-crop__h:hover { transform: translate(-50%, -50%) scale(1.25) !important; }
.zap-crop__h--nw { left: 0;    top: 0;    transform: translate(-50%, -50%); cursor: nwse-resize; }
.zap-crop__h--n  { left: 50%;  top: 0;    transform: translate(-50%, -50%); cursor: ns-resize; }
.zap-crop__h--ne { left: 100%; top: 0;    transform: translate(-50%, -50%); cursor: nesw-resize; }
.zap-crop__h--e  { left: 100%; top: 50%;  transform: translate(-50%, -50%); cursor: ew-resize; }
.zap-crop__h--se { left: 100%; top: 100%; transform: translate(-50%, -50%); cursor: nwse-resize; }
.zap-crop__h--s  { left: 50%;  top: 100%; transform: translate(-50%, -50%); cursor: ns-resize; }
.zap-crop__h--sw { left: 0;    top: 100%; transform: translate(-50%, -50%); cursor: nesw-resize; }
.zap-crop__h--w  { left: 0;    top: 50%;  transform: translate(-50%, -50%); cursor: ew-resize; }
.zap-crop__size {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  background: rgba(2, 6, 23, .82); color: #fff; font: 600 11px/1.3 var(--zap-font, inherit); font-variant-numeric: tabular-nums;
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .2s ease;
}
.zap-crop.is-resize .zap-crop__size, .zap-crop.is-move .zap-crop__size, .zap-crop__box:focus-visible .zap-crop__size { opacity: 1; transform: translate(-50%, 0); }

.zap-crop__droplayer {
  position: absolute; inset: 10px; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 8px;
  border: 2px dashed var(--cr-c); border-radius: var(--zap-radius); background: color-mix(in srgb, var(--cr-c) 12%, rgba(255, 255, 255, .6));
  color: var(--cr-c); font-weight: 700; opacity: 0; transform: scale(.98); pointer-events: none; transition: opacity .15s ease, transform .2s ease;
}
.zap-crop__droplayer svg { width: 34px; height: 34px; }
.zap-crop__stage.is-drop .zap-crop__droplayer { opacity: 1; transform: none; }
.zap-crop__drop {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  color: var(--zap-muted); text-align: center; padding: 20px;
}
.zap-crop__stage.is-empty .zap-crop__drop { display: flex; }
.zap-crop__dropicon svg { width: 42px; height: 42px; }

/* the straightening ruler */
.zap-crop__ruler { position: relative; height: 38px; overflow: hidden; border-radius: var(--zap-radius-sm); background: var(--zap-elevated); box-shadow: inset 0 0 0 1px var(--zap-border); }
.zap-crop__ruler::after { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--cr-c); pointer-events: none; }
.zap-crop__ruler input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.zap-crop__ticks { position: absolute; left: 50%; top: 0; bottom: 0; display: flex; align-items: center; gap: 5px; margin-left: -270.5px; pointer-events: none; transition: transform .05s linear; }
.zap-crop.is-anim .zap-crop__ticks { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.zap-crop__ticks i { flex: none; width: 1px; height: 8px; background: color-mix(in srgb, var(--zap-text) 30%, transparent); }
.zap-crop__ticks i.is-major { height: 16px; background: color-mix(in srgb, var(--zap-text) 55%, transparent); }
.zap-crop__deg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 1; font-size: 12px; font-weight: 700; color: var(--zap-text); font-variant-numeric: tabular-nums; pointer-events: none; }

/* the side: live preview, output options, the result */
.zap-crop__side { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius) + 2px); background: var(--zap-surface); }
.zap-crop__phead { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--zap-muted); }
.zap-crop__dims { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--zap-text); font-variant-numeric: tabular-nums; }
.zap-crop__pbox { display: grid; place-items: center; min-height: 120px; padding: 8px; border-radius: var(--zap-radius-sm);
  background-color: var(--zap-elevated); background-image: linear-gradient(45deg, var(--zap-border) 25%, transparent 25%, transparent 75%, var(--zap-border) 75%), linear-gradient(45deg, var(--zap-border) 25%, transparent 25%, transparent 75%, var(--zap-border) 75%); background-size: 14px 14px; background-position: 0 0, 7px 7px; }
.zap-crop__pcanvas { display: block; max-width: 100%; max-height: 180px; border-radius: 6px; box-shadow: 0 4px 14px -6px rgba(2, 6, 23, .4); }
.zap-crop.is-circle .zap-crop__pcanvas { border-radius: 50%; }
.zap-crop__opts { display: grid; gap: 10px; }
.zap-crop__opt { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--zap-muted); }
.zap-crop__opt input[type="range"] { width: 100%; }
.zap-crop__result { display: grid; gap: 6px; justify-items: start; font-size: 12px; color: var(--zap-success, #059669); font-weight: 600; animation: zap-tf-msg .3s ease; }
.zap-crop__preview { height: 64px; max-width: 100%; object-fit: contain; border: 1px solid var(--zap-border); border-radius: var(--zap-radius-sm); background-color: var(--zap-elevated); }

.zap-crop__footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zap-crop__footer .zap-btn svg { width: 16px; height: 16px; }
.zap-crop__file { cursor: pointer; }
.zap-crop__hint { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--zap-muted); font-size: 13px; }
.zap-crop__footer > .zap-crop__spacer { display: none; }
@media (prefers-reduced-motion: reduce) { .zap-crop.is-anim .zap-crop__img, .zap-crop.is-anim .zap-crop__box { transition: none; } }

/* ── Carousel ─────────────────────────────────────────────────────────────
   The track slides by transform (or the slides cross-fade); the active dot
   stretches into a pill whose bar is the autoplay countdown. */
.zap-carousel { --car-ease: cubic-bezier(.22, .8, .2, 1); position: relative; outline: none; min-width: 0; }
.zap-carousel:focus-visible .zap-carousel__viewport { box-shadow: 0 0 0 3px var(--zap-primary-soft), 0 0 0 1px var(--zap-primary); }
.zap-carousel__viewport {
  position: relative; overflow: hidden; border-radius: var(--zap-radius, 12px); min-height: 60px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  transition: box-shadow .15s ease;
}
.zap-carousel.is-dragging .zap-carousel__viewport { cursor: grabbing; }
.zap-carousel__track { display: flex; height: 100%; will-change: transform; transition: transform .55s var(--car-ease); }
.zap-carousel.is-dragging .zap-carousel__track, .zap-carousel.is-resizing .zap-carousel__track { transition: none; }
.zap-carousel__slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; box-sizing: border-box; }
.zap-carousel__slide img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.zap-carousel.has-peek .zap-carousel__slide { transition: transform .55s var(--car-ease), opacity .55s var(--car-ease); }
.zap-carousel.has-peek .zap-carousel__slide:not(.is-active) { transform: scale(.92); opacity: .55; }
/* fade: the slides stacked, the front one fades in (and settles from a touch of zoom) */
.zap-carousel--fade .zap-carousel__track { display: grid; }
.zap-carousel--fade .zap-carousel__slide { grid-area: 1 / 1; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 1.2s var(--car-ease), visibility 0s .7s; visibility: hidden; }
.zap-carousel--fade .zap-carousel__slide.is-front { opacity: 1; transform: none; z-index: 1; visibility: visible; transition: opacity .7s ease, transform 1.2s var(--car-ease); }

.zap-carousel__nav {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid color-mix(in srgb, #fff 40%, transparent); border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--zap-surface) 78%, transparent); color: var(--zap-text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px -6px rgba(2, 6, 23, .35);
  opacity: 0; transform: translateY(-50%) scale(.85);
  transition: opacity .2s ease, transform .2s var(--car-ease), background-color .15s ease;
}
.zap-carousel__nav.is-prev { left: 12px; }
.zap-carousel__nav.is-next { right: 12px; }
.zap-carousel__nav svg { width: 16px; height: 16px; }
.zap-carousel:hover .zap-carousel__nav, .zap-carousel:focus-within .zap-carousel__nav { opacity: 1; transform: translateY(-50%); }
.zap-carousel__nav:hover { background: var(--zap-surface); }
.zap-carousel__nav:active { transform: translateY(-50%) scale(.92); }
.zap-carousel__nav:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 2px; }
.zap-carousel__nav:disabled { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .zap-carousel__nav { opacity: 1; transform: translateY(-50%); } }

.zap-carousel__dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; }
.zap-carousel__dot {
  position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; overflow: hidden; cursor: pointer;
  background: color-mix(in srgb, var(--zap-text) 22%, transparent);
  transition: width .35s var(--car-ease), background-color .2s ease;
}
.zap-carousel__dot::before { content: ""; position: absolute; inset: -8px -3px; }
.zap-carousel__dot:hover { background: color-mix(in srgb, var(--zap-text) 40%, transparent); }
.zap-carousel__dot:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 2px; }
.zap-carousel__dot.is-on { width: 28px; background: color-mix(in srgb, var(--zap-primary) 28%, transparent); }
.zap-carousel__bar { position: absolute; inset: 0; border-radius: inherit; background: var(--zap-primary); transform: scaleX(0); transform-origin: left; }
.zap-carousel__dot.is-on .zap-carousel__bar { animation: zap-car-bar var(--interval, 5s) linear forwards; }
.zap-carousel.is-static .zap-carousel__dot.is-on .zap-carousel__bar { animation: none !important; transform: none; }
.zap-carousel.is-paused .zap-carousel__bar { animation-play-state: paused !important; }
@keyframes zap-car-bar { to { transform: scaleX(1); } }

.zap-carousel__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding: 3px; scrollbar-width: none; }
.zap-carousel__thumbs::-webkit-scrollbar { display: none; }
.zap-carousel__thumb {
  flex: none; width: 76px; height: 50px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--zap-elevated);
  opacity: .5; transform: scale(.96); transition: opacity .2s ease, transform .25s var(--car-ease), box-shadow .2s ease;
}
.zap-carousel__thumb > * { width: 100%; height: 100%; }
.zap-carousel__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zap-carousel__thumb:hover { opacity: .85; }
.zap-carousel__thumb.is-on { opacity: 1; transform: none; box-shadow: 0 0 0 2px var(--zap-surface), 0 0 0 4px var(--zap-primary); }
.zap-carousel__thumb:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .zap-carousel__track, .zap-carousel--fade .zap-carousel__slide { transition-duration: .01s; }
}

/* ── Popover / HoverCard ──────────────────────────────────────────────────
   floating.js places the panel (position: fixed) and names its side; until
   then it stays unseen, so it never flashes at the corner. */
.zap-popover { display: inline-flex; }
.zap-popover__panel {
  --pop-bg: var(--zap-surface);
  position: fixed; left: 0; top: 0; z-index: 300; box-sizing: border-box;
  width: max-content; max-width: min(360px, calc(100vw - 16px));
  background: var(--pop-bg); color: var(--zap-text);
  border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius-sm) + 4px);
  box-shadow: 0 18px 40px -12px rgba(16, 24, 40, .28), 0 4px 12px -4px rgba(16, 24, 40, .12);
  outline: none; font-size: 14px; line-height: 1.5;
}
.zap-popover__panel:not([data-side]) { visibility: hidden; }
.zap-popover__panel[data-side] { animation: zap-pop-in .18s cubic-bezier(.2, .8, .2, 1); }
.zap-popover__panel.is-leaving { animation: zap-pop-out .13s ease-in forwards; pointer-events: none; }
.zap-popover__panel[data-side="top"] { transform-origin: var(--arrow, 50%) bottom; }
.zap-popover__panel[data-side="bottom"] { transform-origin: var(--arrow, 50%) top; }
.zap-popover__panel[data-side="left"] { transform-origin: right var(--arrow, 50%); }
.zap-popover__panel[data-side="right"] { transform-origin: left var(--arrow, 50%); }
@keyframes zap-pop-in { from { opacity: 0; transform: scale(.94); } }
@keyframes zap-pop-out { to { opacity: 0; transform: scale(.96); } }
.zap-popover__head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 0 14px; }
.zap-popover__titles { flex: 1; min-width: 0; display: grid; gap: 2px; }
.zap-popover__title { margin: 0; font-weight: 650; font-size: 14.5px; }
.zap-popover__desc { margin: 0; font-size: 13px; color: var(--zap-muted); }
.zap-popover__x {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -3px -2px 0 0; padding: 0;
  border: 0; border-radius: 7px; background: none; color: var(--zap-muted); cursor: pointer; transition: color .15s ease, background-color .15s ease;
}
.zap-popover__x:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 7%, transparent); }
.zap-popover__x svg { width: 15px; height: 15px; }
.zap-popover__body { padding: 12px 14px 14px; }
.zap-popover__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--zap-border); background: var(--zap-elevated); border-radius: 0 0 inherit inherit; }
.zap-popover__panel.is-hover .zap-popover__body { padding: 14px; }
.zap-popover__arrow { position: absolute; width: 12px; height: 12px; background: var(--pop-bg); border: 1px solid var(--zap-border); box-sizing: border-box; transform: rotate(45deg); }
.zap-popover__panel[data-side="top"] .zap-popover__arrow { bottom: -6.5px; left: calc(var(--arrow, 50%) - 6px); border-top-color: transparent; border-left-color: transparent; }
.zap-popover__panel[data-side="bottom"] .zap-popover__arrow { top: -6.5px; left: calc(var(--arrow, 50%) - 6px); border-bottom-color: transparent; border-right-color: transparent; }
.zap-popover__panel[data-side="left"] .zap-popover__arrow { right: -6.5px; top: calc(var(--arrow, 50%) - 6px); border-bottom-color: transparent; border-left-color: transparent; }
.zap-popover__panel[data-side="right"] .zap-popover__arrow { left: -6.5px; top: calc(var(--arrow, 50%) - 6px); border-top-color: transparent; border-right-color: transparent; }
@media (prefers-reduced-motion: reduce) { .zap-popover__panel[data-side], .zap-popover__panel.is-leaving { animation: none; } }

/* ── ColorPicker ──────────────────────────────────────────────────────────
   A saturation × brightness square over the hue, strips for hue and opacity,
   the fields, and swatches. The checkerboard shows through transparency. */
.zap-cp {
  --cp-check: repeating-conic-gradient(#d4d4d8 0 25%, #fff 0 50%) 0 0 / 8px 8px;
  width: 264px; max-width: 100%; display: grid; gap: 12px; box-sizing: border-box;
}
.zap-cp__area {
  position: relative; height: 164px; border-radius: 10px; cursor: crosshair; touch-action: none; outline: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--hue, 0) 100% 50%));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.zap-cp__area:focus-visible { box-shadow: 0 0 0 3px var(--zap-primary-soft), inset 0 0 0 1px rgba(0, 0, 0, .08); }
.zap-cp__knob {
  position: absolute; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 2px 6px rgba(0, 0, 0, .35); transform: translate(-50%, -50%);
  transition: transform .15s cubic-bezier(.3, 1.5, .5, 1); pointer-events: none;
}
.zap-cp__area.is-dragging .zap-cp__knob, .zap-cp__area:focus-visible .zap-cp__knob { transform: translate(-50%, -50%) scale(1.2); }
.zap-cp__row { display: flex; align-items: center; gap: 10px; }
.zap-cp__strips { flex: 1; min-width: 0; display: grid; gap: 10px; }
.zap-cp__strip { position: relative; height: 12px; border-radius: 999px; cursor: pointer; touch-action: none; outline: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.zap-cp__strip--hue { background: linear-gradient(to right, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); }
.zap-cp__strip--alpha { background: linear-gradient(to right, transparent, var(--solid)), var(--cp-check); }
.zap-cp__thumb {
  position: absolute; top: 50%; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 2px 5px rgba(0, 0, 0, .3); transform: translate(-50%, -50%); pointer-events: none;
  transition: transform .15s cubic-bezier(.3, 1.5, .5, 1);
}
.zap-cp__strip--alpha .zap-cp__thumb { background: linear-gradient(var(--c), var(--c)), var(--cp-check); }
.zap-cp__strip.is-dragging .zap-cp__thumb, .zap-cp__strip:focus-visible .zap-cp__thumb { transform: translate(-50%, -50%) scale(1.2); }
.zap-cp__strip:focus-visible { box-shadow: 0 0 0 3px var(--zap-primary-soft); }
.zap-cp__chip {
  position: relative; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(var(--c), var(--c)), var(--cp-check); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
  transition: transform .15s ease;
}
.zap-cp__chip:hover { transform: scale(1.06); }
.zap-cp__chip:active { transform: scale(.94); }
.zap-cp__copied { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.zap-cp__copied:not(:empty) { animation: zap-code-pop .3s cubic-bezier(.3, 1.6, .5, 1); }
.zap-cp__tool {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--zap-border); border-radius: 8px;
  background: var(--zap-surface); color: var(--zap-muted); cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.zap-cp__tool:hover { color: var(--zap-primary); border-color: var(--zap-primary); }
.zap-cp__tool svg { width: 16px; height: 16px; }
.zap-cp__fields { display: flex; align-items: flex-start; gap: 6px; }
.zap-cp__fmt {
  flex: none; display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 6px 0 8px; border: 1px solid var(--zap-border); border-radius: 7px;
  background: var(--zap-elevated); color: var(--zap-text); font: 700 11px/1 var(--zap-font, inherit); letter-spacing: .03em; cursor: pointer;
}
.zap-cp__fmt:hover { border-color: var(--zap-primary); color: var(--zap-primary); }
.zap-cp__fmt svg { width: 12px; height: 12px; }
.zap-cp__fset { flex: 1; min-width: 0; display: flex; gap: 6px; animation: zap-tf-msg .2s cubic-bezier(.2, .8, .2, 1); }
.zap-cp__f { flex: 1 1 0; min-width: 0; display: grid; gap: 3px; }
.zap-cp__f .zap-input { height: 32px; box-sizing: border-box; padding: 4px 4px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.zap-cp__f span { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--zap-muted); text-align: center; }
.zap-cp__sws { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.zap-cp__sw {
  aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: linear-gradient(var(--c), var(--c)), var(--cp-check); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
  transition: transform .15s cubic-bezier(.3, 1.5, .5, 1), box-shadow .15s ease;
}
.zap-cp__sw:hover { transform: scale(1.15); }
.zap-cp__sw:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: 2px; }
.zap-cp__sw.is-on { box-shadow: 0 0 0 2px var(--zap-surface), 0 0 0 4px var(--zap-primary); }
.zap-cp__recent { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--zap-border); }
.zap-cp__recent > span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--zap-muted); }
.zap-cp__recent .zap-cp__sw { animation: zap-chip-in .2s cubic-bezier(.3, 1.3, .5, 1); }
/* as a field */
.zap-cp-field { display: grid; gap: 6px; }
.zap-cp__trigger { font-variant-numeric: tabular-nums; }
.zap-cp__tsw { flex: none; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(var(--c), var(--c)), repeating-conic-gradient(#d4d4d8 0 25%, #fff 0 50%) 0 0 / 8px 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: background .15s ease; }
.zap-cp-pop {
  position: fixed; left: 0; top: 0; z-index: 300; padding: 12px; box-sizing: border-box;
  background: var(--zap-surface); border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius-sm) + 4px);
  box-shadow: 0 18px 40px -12px rgba(16, 24, 40, .28), 0 4px 12px -4px rgba(16, 24, 40, .12);
}
.zap-cp-pop:not([data-side]) { visibility: hidden; }
.zap-cp-pop[data-side="bottom"] { transform-origin: top left; animation: zap-drop-in .16s cubic-bezier(.2, .7, .2, 1); }
.zap-cp-pop[data-side="top"] { transform-origin: bottom left; animation: zap-drop-up-in .16s cubic-bezier(.2, .7, .2, 1); }
.zap-cp-pop.is-leaving { animation: zap-drop-out .13s ease-in forwards; pointer-events: none; }

/* ── Autocomplete ─────────────────────────────────────────────────────────
   The field is a .zap-tf; the grey completion sits under the input, the
   typed part of it transparent so only the rest shows. */
.zap-ac__anchor { position: relative; }
.zap-ac__line { position: relative; flex: 1; min-width: 0; display: flex; }
.zap-ac__input { position: relative; z-index: 1; }
.zap-ac__ghost {
  position: absolute; inset: 0; padding: 9px 0; overflow: hidden; white-space: pre; pointer-events: none;
  font: inherit; font-size: 14px; color: color-mix(in srgb, var(--zap-muted) 75%, transparent);
}
.zap-ac__typed { color: transparent; }
.zap-ac__panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; box-sizing: border-box;
  max-height: 320px; overflow: auto; padding: 5px; overscroll-behavior: contain;
  background: var(--zap-surface); border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius-sm) + 2px);
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .22), 0 4px 10px -4px rgba(16, 24, 40, .1);
  transform-origin: top center; animation: zap-drop-in .16s cubic-bezier(.2, .7, .2, 1);
}
.zap-ac__panel.is-leaving { animation: zap-drop-out .13s ease-in forwards; pointer-events: none; }
.zap-ac__panel.is-loading .zap-ac__opt { opacity: .6; }
.zap-ac__opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer; transition: background-color .12s ease, opacity .15s ease; }
.zap-ac__opt.is-active { background: var(--zap-primary-soft); }
.zap-ac__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--zap-elevated); font-size: 15px; line-height: 1; }
.zap-ac__icon svg { width: 15px; height: 15px; }
.zap-ac__icon.is-recent { width: 20px; height: 20px; background: none; color: var(--zap-muted); }
.zap-ac__txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.zap-ac__lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-ac__desc { font-size: 12px; color: var(--zap-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-ac__meta { flex: none; margin-left: auto; font-size: 12px; color: var(--zap-muted); font-variant-numeric: tabular-nums; }
.zap-ac__hit { background: none; color: var(--zap-primary); font-weight: 700; }
.zap-ac__forget {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--zap-muted); cursor: pointer; opacity: 0; transition: opacity .12s ease, background-color .12s ease;
}
.zap-ac__opt:hover .zap-ac__forget, .zap-ac__opt.is-active .zap-ac__forget { opacity: 1; }
.zap-ac__forget:hover { color: var(--zap-text); background: color-mix(in srgb, var(--zap-text) 8%, transparent); }
.zap-ac__forget svg { width: 13px; height: 13px; }
.zap-ac__group {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--zap-muted);
}
.zap-ac__clearall, .zap-ac__retry { font: inherit; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 2px 6px; border: 0; border-radius: 5px; background: none; color: var(--zap-primary); cursor: pointer; }
.zap-ac__clearall:hover, .zap-ac__retry:hover { background: var(--zap-primary-soft); }
.zap-ac__state { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; color: var(--zap-muted); font-size: 14px; text-align: center; }
.zap-ac__state b { color: var(--zap-text); }
.zap-ac__state.is-error { color: var(--zap-danger, #dc2626); }

/* ---- the grid's own columns in front: handle, number, checkbox, twist ---- */
.zap-grid__lead { text-align: center; padding-left: 0 !important; padding-right: 0 !important; }
.zap-grid__table .zap-grid__lead.is-pinned { position: sticky; z-index: 1; background: var(--zap-surface); }
.zap-grid__table thead .zap-grid__lead.is-pinned { z-index: 3; }
.zap-grid__rownum { color: var(--zap-muted); font-variant-numeric: tabular-nums; font-size: 12px; }
td.zap-grid__rownum { text-align: right; padding-right: 8px !important; }
.zap-grid__handle { cursor: grab; color: var(--zap-muted); user-select: none; font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.zap-grid__handle:hover { background: var(--zap-primary-soft); color: var(--zap-primary); }
.zap-grid__twist-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--zap-muted); cursor: pointer; font-size: 11px; line-height: 1;
}
.zap-grid__twist-btn:hover { background: var(--zap-primary-soft); color: var(--zap-primary); }
.zap-grid__twist-btn.is-leaf { cursor: default; background: none; }
.zap-grid__tree { display: inline-flex; align-items: center; margin-right: 4px; vertical-align: middle; }
.zap-grid__table tr.is-drop-above td { box-shadow: inset 0 2px 0 var(--zap-primary); }
.zap-grid__table tr.is-drop-below td { box-shadow: inset 0 -2px 0 var(--zap-primary); }

/* ---- a row's detail, and a row drawn across the table ---- */
.zap-grid__table tr.zap-grid__detail > td, .zap-grid__table tr.zap-grid__full > td { padding: 0; background: var(--zap-bg); }
.zap-grid__detail-in {
  position: sticky; left: 0; box-sizing: border-box;
  width: var(--zap-grid-view, 100%); max-width: 100%;
  overflow: auto; padding: 12px 16px;
}

/* ---- a range of cells, the fill handle, what the range comes to ---- */
/* Only the cell with the fill handle is a box for it: position on every cell
   of a table costs every repaint. A pinned cell is sticky, which is one. */
.zap-grid__table td.has-fill:not(.is-pinned) { position: relative; }
.zap-grid__table tbody tr td.is-in-range { background: color-mix(in srgb, var(--zap-primary) 12%, var(--zap-surface)); }
.zap-grid__table td.is-range-top { box-shadow: inset 0 1px 0 var(--zap-primary); }
.zap-grid__table td.is-range-bottom { box-shadow: inset 0 -1px 0 var(--zap-primary); }
.zap-grid__table td.is-range-left { box-shadow: inset 1px 0 0 var(--zap-primary); }
.zap-grid__table td.is-range-right { box-shadow: inset -1px 0 0 var(--zap-primary); }
.zap-grid__table td.is-range-top.is-range-left { box-shadow: inset 1px 1px 0 var(--zap-primary); }
.zap-grid__table td.is-range-top.is-range-right { box-shadow: inset -1px 1px 0 var(--zap-primary); }
.zap-grid__table td.is-range-bottom.is-range-left { box-shadow: inset 1px -1px 0 var(--zap-primary); }
.zap-grid__table td.is-range-bottom.is-range-right { box-shadow: inset -1px -1px 0 var(--zap-primary); }
.zap-grid__table td.is-range-top.is-range-bottom.is-range-left { box-shadow: inset 1px 1px 0 var(--zap-primary), inset 0 -1px 0 var(--zap-primary); }
.zap-grid__table td.is-range-top.is-range-bottom.is-range-right { box-shadow: inset -1px 1px 0 var(--zap-primary), inset 0 -1px 0 var(--zap-primary); }
.zap-grid__table td.is-range-left.is-range-right.is-range-top { box-shadow: inset 1px 1px 0 var(--zap-primary), inset -1px 0 0 var(--zap-primary); }
.zap-grid__table td.is-range-left.is-range-right.is-range-bottom { box-shadow: inset 1px -1px 0 var(--zap-primary), inset -1px 0 0 var(--zap-primary); }
.zap-grid__table td.is-range-left.is-range-right:not(.is-range-top):not(.is-range-bottom) { box-shadow: inset 1px 0 0 var(--zap-primary), inset -1px 0 0 var(--zap-primary); }
.zap-grid__table tbody tr td.is-fill { background-color: color-mix(in srgb, var(--zap-primary) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zap-primary) 45%, transparent); }
.zap-grid__fill {
  position: absolute; right: -3px; bottom: -3px; z-index: 2;
  width: 7px; height: 7px; box-sizing: border-box;
  background: var(--zap-primary); border: 1px solid var(--zap-surface);
  cursor: crosshair;
}
.zap-grid__table tbody td { user-select: none; }
.zap-grid__table tbody td input, .zap-grid__table tbody td textarea { user-select: text; }
.zap-grid__stats { display: inline-flex; gap: 12px; margin-left: 16px; font-size: 12px; font-variant-numeric: tabular-nums; }
.zap-grid__stats b { font-weight: 600; }
.zap-grid__status { display: flex; justify-content: flex-end; padding: 6px 10px; border-top: 1px solid var(--zap-border); }

/* ---- find ---- */
.zap-grid__find { display: inline-flex; align-items: center; gap: 4px; }
.zap-grid__find-in { width: 150px; }
.zap-grid__find-n { font-size: 12px; min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.zap-grid__find-go { padding: 2px 6px !important; min-height: 0 !important; }
.zap-grid__bar-l { display: inline-flex; align-items: center; gap: 8px; }
.zap-grid__table tbody tr td.is-match { background: color-mix(in srgb, #facc15 32%, var(--zap-surface)); }
.zap-grid__table tbody tr td.is-match-now { background: color-mix(in srgb, #f59e0b 55%, var(--zap-surface)); }

/* ---- the set filter: a search and a list of values with a box each ---- */
.zap-grid__set { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.zap-grid__set-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--zap-muted); }
.zap-grid__set-q { width: 100%; box-sizing: border-box; }
.zap-grid__set-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; border: 1px solid var(--zap-border); border-radius: var(--zap-radius-sm, 6px); padding: 4px 0; }
.zap-grid__set-item { display: flex; align-items: center; gap: 8px; padding: 3px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.zap-grid__set-item:hover { background: var(--zap-primary-soft); }
.zap-grid__set-item.is-all { border-bottom: 1px solid var(--zap-border); margin-bottom: 2px; padding-bottom: 5px; }
.zap-grid__set-item input { accent-color: var(--zap-primary); }
.zap-grid__set-icon { width: 1.2em; text-align: center; }

/* ---- the advanced filter's line ---- */
.zap-grid__adv { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--zap-border); background: var(--zap-elevated); }
.zap-grid__adv-in { flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.zap-grid__adv-err { color: var(--zap-danger, #dc2626); font-size: 12px; }
.zap-grid__columns.is-on { color: var(--zap-primary); box-shadow: inset 0 0 0 1px var(--zap-primary); }

/* ---- menus: a line between groups, a key on the right, one at the pointer ---- */
.zap-grid__menu-sep { height: 1px; margin: 4px 0; background: var(--zap-border); }
/* A key beside an item's name, at the far end — for the items that are
   buttons; the Columns list's rows are a box and a name, side by side. */
.zap-grid__menu-panel button.zap-menu__item { display: flex; justify-content: space-between; gap: 24px; }
.zap-grid__key { color: var(--zap-muted); font-size: 11px; }
.zap-grid__ctx { z-index: 1000; min-width: 220px; }

/* ---- the side bar: the table and a strip of tabs, a panel between them ---- */
.zap-grid__body { display: flex; align-items: stretch; min-width: 0; }
.zap-grid__body > .zap-grid__scroll { flex: 1 1 auto; min-width: 0; }
.zap-grid__side { display: flex; flex: 0 0 auto; border-left: 1px solid var(--zap-border); background: var(--zap-surface); }
.zap-grid__side-tabs { display: flex; flex-direction: column; width: 28px; background: var(--zap-elevated); }
.zap-grid__side-tab {
  writing-mode: vertical-rl; padding: 12px 0; border: 0; border-bottom: 1px solid var(--zap-border);
  background: transparent; color: var(--zap-muted); font: inherit; font-size: 12px; cursor: pointer; letter-spacing: .03em;
}
.zap-grid__side-tab:hover { color: var(--zap-text); }
.zap-grid__side-tab.is-on { color: var(--zap-primary); background: var(--zap-surface); box-shadow: inset 2px 0 0 var(--zap-primary); }
.zap-grid__side-body { width: 250px; display: flex; flex-direction: column; gap: 6px; padding: 10px; overflow: auto; border-right: 1px solid var(--zap-border); box-sizing: border-box; }
.zap-grid__side-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--zap-muted); margin-top: 4px; }
.zap-grid__side-groups { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 28px; font-size: 12px; }
.zap-grid__side-list { display: flex; flex-direction: column; flex: 1 1 auto; overflow: auto; }
.zap-grid__side-col { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 4px; border-radius: 4px; font-size: 13px; }
.zap-grid__side-col:hover { background: var(--zap-primary-soft); }
.zap-grid__side-col label { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.zap-grid__side-col input { accent-color: var(--zap-primary); }
.zap-grid__side-acts { display: inline-flex; gap: 2px; }
.zap-grid__side-act { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--zap-muted); cursor: pointer; }
.zap-grid__side-act:hover { color: var(--zap-text); background: var(--zap-surface); }
.zap-grid__side-act.is-on { color: var(--zap-primary); }
.zap-grid__side-filter { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.zap-grid__side-filter:hover { background: var(--zap-primary-soft); }
.zap-grid__side-fname { font-size: 13px; font-weight: 600; }
.zap-grid__side-fsaid { font-size: 12px; color: var(--zap-muted); }
.zap-grid__side-filter.is-on .zap-grid__side-fsaid { color: var(--zap-primary); }
.zap-grid__side-foot { display: flex; flex-direction: column; border-top: 1px solid var(--zap-border); padding-top: 6px; }

/* ---- a batch of edits waiting, pivoting, calculated columns ---- */
.zap-grid__table tbody tr td.is-pending { background: color-mix(in srgb, #f59e0b 16%, var(--zap-surface)); box-shadow: inset 3px 0 0 #f59e0b; }
.zap-grid__batch { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--zap-border); background: color-mix(in srgb, #f59e0b 10%, var(--zap-surface)); font-size: 13px; }
.zap-grid__batch[hidden] { display: none; }
.zap-grid__pivot-at { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--zap-border); }
.zap-grid__chip.is-pivot { background: color-mix(in srgb, #8b5cf6 16%, var(--zap-surface)); }
.zap-grid__grow.is-end { cursor: default; }
.zap-grid__grow.is-end .zap-grid__twist { visibility: hidden; }
.zap-grid__fx { display: flex; flex-direction: column; gap: 8px; min-width: 320px; }

/* ---- the chart palette: eight hues in a fixed order, each stepped for its
   mode (validated against both surfaces; see the grid's chart) ---- */
.zap {
  --zap-series-1: #2a78d6; --zap-series-2: #eb6834; --zap-series-3: #1baf7a; --zap-series-4: #eda100;
  --zap-series-5: #e87ba4; --zap-series-6: #008300; --zap-series-7: #4a3aa7; --zap-series-8: #e34948;
}
.zap[data-theme="dark"] {
  --zap-series-1: #3987e5; --zap-series-2: #d95926; --zap-series-3: #199e70; --zap-series-4: #c98500;
  --zap-series-5: #d55181; --zap-series-6: #008300; --zap-series-7: #9085e9; --zap-series-8: #e66767;
}

/* ---- a chart of the range ---- */
.zap-chart__overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(0,0,0,.35); padding: 16px; }
.zap-chart__dialog { width: min(780px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--zap-surface); color: var(--zap-text); border: 1px solid var(--zap-border); border-radius: var(--zap-radius, 10px); box-shadow: var(--zap-shadow); padding: 14px 16px; }
.zap-chart__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.zap-chart__kinds { display: inline-flex; gap: 4px; margin-left: auto; }
.zap-chart__kinds .is-on { color: var(--zap-primary); box-shadow: inset 0 0 0 1px var(--zap-primary); }
.zap-chart__x { border: 0; background: transparent; color: var(--zap-muted); cursor: pointer; font-size: 16px; }
.zap-chart__plot { position: relative; }
.zap-chart__svg { display: block; width: 100%; height: auto; font-family: var(--zap-font); }
.zap-chart__grid { stroke: var(--zap-border); stroke-width: 1; }
.zap-chart__axis { stroke: var(--zap-muted); stroke-width: 1; }
.zap-chart__tick, .zap-chart__cat { fill: var(--zap-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.zap-chart__band { fill: var(--zap-text); opacity: .05; }
.zap-chart__bar { stroke: var(--zap-surface); stroke-width: 0; }
.zap-chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.zap-chart__dot { stroke: var(--zap-surface); stroke-width: 2; }
.zap-chart__tip { position: absolute; top: 8px; transform: translateX(-50%); pointer-events: none; background: var(--zap-surface); border: 1px solid var(--zap-border); border-radius: 6px; box-shadow: var(--zap-shadow); padding: 6px 8px; font-size: 12px; white-space: nowrap; display: flex; flex-direction: column; gap: 2px; }
.zap-chart__key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.zap-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--zap-text); margin-top: 6px; }
.zap-chart__table { max-height: 320px; overflow: auto; }
.zap-chart__note { font-size: 12px; margin: 8px 0 0; }

/* ---- sparklines in cells ---- */
.zap-grid__spark { display: block; overflow: visible; }
.zap-grid__spark path { fill: none; stroke: var(--zap-series-1); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.zap-grid__spark circle { fill: var(--zap-series-1); }
.zap-grid__spark rect { fill: var(--zap-series-1); }

/* ---- a value the row above has too, not said again ---- */
.zap-grid__table tbody tr td.is-span-cont { color: transparent; border-top-color: transparent; }
.zap-grid__table tbody tr td.is-span-cont > * { visibility: hidden; }

/* ---- the row of column groups, and rows pinned top and bottom ---- */
.zap-grid__table thead tr.zap-grid__heads th { top: var(--zap-grid-gh, 0px); }
.zap-grid__table thead tr.zap-grid__colgroups th { top: 0; text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--zap-muted); padding-top: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--zap-border); }
.zap-grid__table thead tr.zap-grid__colgroups th:not(.is-empty) { box-shadow: inset 1px 0 0 var(--zap-border), inset -1px 0 0 var(--zap-border); }
.zap-grid__table thead tr.zap-grid__pinrow td { position: sticky; top: var(--zap-grid-pintop, 80px); z-index: 2; background: var(--zap-elevated); font-weight: 600; }
.zap-grid__table tfoot tr.zap-grid__pinrow td { position: sticky; bottom: 0; z-index: 2; background: var(--zap-elevated); font-weight: 600; border-top: 1px solid var(--zap-border); }
.zap-grid__table tr.zap-grid__pinrow td.is-pinned { z-index: 3; }
.zap-grid__adv[hidden], .zap-grid__status[hidden] { display: none; }

/* ---- the date picker's span mode ---- */
.zap-date__hint { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 11px; color: var(--zap-muted); text-align: center; padding: 6px 8px 8px; }
.zap-date__panel:not(.has-presets) .zap-date__hint { background: var(--zap-surface); border: 1px solid var(--zap-border); border-top: 0; border-radius: 0 0 calc(var(--zap-radius) + 2px) calc(var(--zap-radius) + 2px); }
.zap-date__panel:not(.has-presets) .zap-date__main:has(.zap-date__hint) .zap-cal { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; }
.zap-grid__fbox .zap-date--range .zap-sel__val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- the side bar's panel slides open and shut ---- */
.zap-grid__side-wrap { width: 0; overflow: hidden; transition: width .24s cubic-bezier(.2, .7, .2, 1); display: flex; }
.zap-grid__side.is-open .zap-grid__side-wrap { width: 250px; }
.zap-grid__side-wrap > .zap-grid__side-body { flex: 0 0 250px; opacity: 0; transition: opacity .18s ease; }
.zap-grid__side.is-open .zap-grid__side-wrap > .zap-grid__side-body { opacity: 1; transition-delay: .06s; }
@media (prefers-reduced-motion: reduce) {
  .zap-grid__side-wrap, .zap-grid__side-wrap > .zap-grid__side-body { transition: none; }
}

/* ---- lists and calendars open and close with a little motion ---- */
@keyframes zap-drop-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes zap-drop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-4px) scale(.97); } }
.zap-sel__panel { transform-origin: top center; animation: zap-drop-in .16s cubic-bezier(.2, .7, .2, 1); }
.zap-sel__panel.is-leaving { animation: zap-drop-out .15s ease-in forwards; pointer-events: none; }
.zap-sel__panel.is-up { animation-name: zap-drop-up-in; }
.zap-sel__panel.is-up.is-leaving { animation-name: zap-drop-up-out; }
@keyframes zap-drop-up-in { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes zap-drop-up-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(4px) scale(.97); } }
.zap-grid__menu-panel { transform-origin: top center; animation: zap-drop-in .14s cubic-bezier(.2, .7, .2, 1); }
.zap-grid__menu-panel.is-leaving { animation: zap-drop-out .14s ease-in forwards; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .zap-sel__panel, .zap-sel__panel.is-leaving, .zap-grid__menu-panel, .zap-grid__menu-panel.is-leaving { animation: none; }
}

/* ---- report viewer: a frame of theme round sheets of paper ---- */
.zap-rv { display: flex; flex-direction: column; min-height: 320px; border: 1px solid var(--zap-border);
  border-radius: var(--zap-radius-sm); overflow: hidden; background: var(--zap-surface); }
.zap-rv__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 8px 10px;
  border-bottom: 1px solid var(--zap-border); background: var(--zap-surface); }
.zap-rv__group { display: inline-flex; align-items: center; gap: 4px; }
.zap-rv__icon { min-width: 32px; padding: 6px 8px; font-size: 15px; line-height: 1; }
.zap-rv__of { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--zap-muted); margin: 0 4px; }
.zap-rv__pageno { padding: 5px 6px; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.zap-rv__pageno::-webkit-outer-spin-button, .zap-rv__pageno::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zap-rv__zoomsel { width: auto; padding: 5px 8px; }
.zap-rv__info { margin-left: auto; font-size: 12px; color: var(--zap-muted); font-variant-numeric: tabular-nums; }
.zap-rv__print { padding: 7px 14px; }
.zap-rv__txt { padding: 6px 10px; font-size: 12px; font-weight: 600; }
.zap-rv__txt.is-on { background: var(--zap-primary-soft); color: var(--zap-primary); }
.zap-rv__txt[hidden] { display: none; }
.zap-rv__find { width: 160px; padding: 5px 8px; font-size: 13px; }
.zap-rv__hits { min-width: 44px; font-size: 12px; color: var(--zap-muted); font-variant-numeric: tabular-nums; text-align: center; }
.zap-rv__pwrap { border-bottom: 1px solid var(--zap-border); background: var(--zap-elevated); }
.zap-rv__pwrap[hidden] { display: none; }
.zap-rv__params { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; padding: 10px 12px; }
.zap-rv__param { display: grid; gap: 4px; font-size: 12px; color: var(--zap-muted); }
.zap-rv__param .zap-input, .zap-rv__param .zap-select { width: 170px; padding: 6px 8px; }
.zap-rv__param.is-check { display: flex; align-items: center; gap: 6px; color: var(--zap-text); padding-bottom: 7px; }
.zap-rv__pbtns { display: flex; gap: 6px; margin-left: auto; }
.zap-rv__scroll { position: relative; flex: 1; overflow: auto; padding: 20px; background: var(--zap-elevated);
  outline: none; overscroll-behavior: contain; }
.zap-rv__scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--zap-primary); }
.zap-rv__stack { display: flex; flex-direction: column; align-items: center; gap: 18px; width: max-content; min-width: 100%; margin: 0 auto; }
.zap-rv__sheet { flex: none; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .10); }
.zap[data-theme="dark"] .zap-rv__sheet { box-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .45); }
.zap-rv__msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; color: var(--zap-muted); font-size: 14px; }
.zap-rv__msg[hidden] { display: none; }
.zap-rv__err { display: grid; gap: 8px; max-width: 560px; text-align: center; color: var(--zap-text); }
.zap-rv__err code { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--zap-muted); white-space: pre-wrap; }

/* ---- report designer: panels of theme round a canvas of paper ---- */
.zap-rd { display: flex; flex-direction: column; min-height: 480px; border: 1px solid var(--zap-border); border-radius: var(--zap-radius-sm);
  overflow: hidden; background: var(--zap-surface); color: var(--zap-text); font-size: 13px; }
.zap-rd__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 6px 8px; border-bottom: 1px solid var(--zap-border); }
.zap-rd__tbgroup { display: inline-flex; align-items: center; gap: 2px; padding-right: 10px; border-right: 1px solid var(--zap-border); }
.zap-rd__tbgroup:last-child { border-right: 0; }
.zap-rd__tbright { margin-left: auto; padding-right: 0; border-right: 0; gap: 4px; }
.zap-rd__tb { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; font-size: 16px; line-height: 1; }
.zap-rd__tb.is-on { background: var(--zap-primary-soft); color: var(--zap-primary); }
.zap-rd__zoomv { min-width: 58px; height: 30px; padding: 0 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.zap-rd__ico { display: inline-grid; place-items: center; line-height: 0; }
.zap-rd__gridsel { display: inline-flex; align-items: center; gap: 4px; color: var(--zap-muted); }
.zap-rd__gridsel .zap-select { width: auto; padding: 4px 6px; font-size: 12px; }

.zap-rd__body { flex: 1; display: grid; grid-template-columns: 200px minmax(0, 1fr) 272px; min-height: 0; }
.zap-rd__left, .zap-rd__right { min-height: 0; overflow: auto; background: var(--zap-surface); }
.zap-rd__left { border-right: 1px solid var(--zap-border); display: flex; flex-direction: column; overflow-x: hidden; }
.zap-rd__right { border-left: 1px solid var(--zap-border); }
.zap-rd__panel { border-bottom: 1px solid var(--zap-border); }
.zap-rd__panel > summary, .zap-rd__ptitle, .zap-rd__sec > summary { cursor: pointer; list-style: none; padding: 8px 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--zap-muted); user-select: none; }
.zap-rd__panel > summary::-webkit-details-marker, .zap-rd__sec > summary::-webkit-details-marker { display: none; }
.zap-rd__panel > summary::before, .zap-rd__sec > summary::before { content: "▸"; display: inline-block; width: 12px; transition: transform .12s ease; }
.zap-rd__panel[open] > summary::before, .zap-rd__sec[open] > summary::before { transform: rotate(90deg); }
.zap-rd__ptitle { cursor: default; border-bottom: 1px solid var(--zap-border); }

.zap-rd__tools { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 8px 8px; }
.zap-rd__tool { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 7px; border: 1px solid var(--zap-border); border-radius: 7px;
  background: var(--zap-elevated); color: var(--zap-text); font: 12px var(--zap-font); cursor: grab; text-align: left; }
.zap-rd__tool:hover { border-color: var(--zap-primary); color: var(--zap-primary); }
.zap-rd__tool span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-rd__data, .zap-rd__outline { padding: 0 4px 10px; }
.zap-rd__sub { padding: 8px 8px 3px; font-size: 11px; color: var(--zap-muted); }
.zap-rd__sub b { color: var(--zap-text); font-weight: 600; }
.zap-rd__field { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; cursor: grab; white-space: nowrap; font-size: 12.5px; }
.zap-rd__field:hover { background: var(--zap-primary-soft); }
.zap-rd__field i { width: 16px; flex: none; text-align: center; font-style: normal; font-size: 11px; color: var(--zap-muted); font-family: ui-monospace, Menlo, monospace; }
.zap-rd__field.is-number i, .zap-rd__field.is-integer i { color: #0e9f6e; }
.zap-rd__field.is-date i { color: #d97706; }
.zap-rd__fgroup > summary { list-style: none; }
.zap-rd__fgroup > summary::-webkit-details-marker { display: none; }
.zap-rd__none { margin: 4px 10px; color: var(--zap-muted); font-size: 12px; }
.zap-rd__oband { padding: 5px 8px 2px; font-size: 11px; font-weight: 700; color: var(--zap-muted); cursor: pointer; }
.zap-rd__onode { display: flex; gap: 6px; padding: 2px 8px 2px 16px; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zap-rd__onode i { font-style: normal; color: var(--zap-muted); width: 12px; flex: none; }
.zap-rd__onode:hover, .zap-rd__oband:hover { background: var(--zap-primary-soft); }
.zap-rd__onode.is-sel, .zap-rd__oband.is-sel { background: var(--zap-primary); color: var(--zap-primary-contrast); }
.zap-rd__onode.is-sel i { color: inherit; }

.zap-rd__center { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--zap-elevated); }
.zap-rd__tabs { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--zap-border); background: var(--zap-surface); }
.zap-rd__tab { border: 0; background: none; padding: 7px 14px; font: 600 13px var(--zap-font); color: var(--zap-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.zap-rd__tab.is-active { color: var(--zap-primary); border-bottom-color: var(--zap-primary); }
.zap-rd__canvas { position: relative; flex: 1; overflow: auto; padding: 18px 18px 40px; outline: none; }
.zap-rd__canvas[hidden], .zap-rd__preview[hidden] { display: none; }
.zap-rd__canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--zap-primary); }
.zap-rd__canvas.is-dragging { cursor: move; }
.zap-rd__preview { flex: 1; min-height: 0; display: flex; }
.zap-rd__preview > .zap-rv { flex: 1; border: 0; border-radius: 0; }
.zap-rd__status { display: flex; gap: 18px; padding: 4px 12px; border-top: 1px solid var(--zap-border); background: var(--zap-surface);
  font-size: 11.5px; color: var(--zap-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.zap-rd__hint { margin-left: auto; }

/* the surface is zoomed; --k is 1/zoom, so calc(Npx * var(--k)) stays N screen px */
.zap-rd__surface { width: max-content; margin: 0 auto; --rw: calc(22px * var(--k)); }
.zap-rd__hrow { display: flex; }
.zap-rd__corner { width: var(--rw); flex: none; }
.zap-rd__hruler, .zap-rd__vruler { position: relative; flex: none; color: #94a3b8; font: calc(9px * var(--k)) / 1 var(--zap-font); overflow: hidden;
  --t: calc(1px * var(--k)); --c: #cbd5e1; }
.zap-rd__hruler { height: calc(18px * var(--k)); margin-bottom: calc(4px * var(--k));
  background: linear-gradient(to right, var(--c) var(--t), transparent var(--t)) 0 100% / 1mm 25% repeat-x,
    linear-gradient(to right, var(--c) var(--t), transparent var(--t)) 0 100% / 5mm 45% repeat-x,
    linear-gradient(to right, #94a3b8 var(--t), transparent var(--t)) 0 100% / 10mm 100% repeat-x; }
.zap-rd__vruler { width: var(--rw);
  background: linear-gradient(to bottom, var(--c) var(--t), transparent var(--t)) 100% 0 / 25% 1mm repeat-y,
    linear-gradient(to bottom, var(--c) var(--t), transparent var(--t)) 100% 0 / 45% 5mm repeat-y,
    linear-gradient(to bottom, #94a3b8 var(--t), transparent var(--t)) 100% 0 / 70% 10mm repeat-y; }
.zap-rd__rl { position: absolute; }
.zap-rd__hruler .zap-rd__rl { top: calc(2px * var(--k)); transform: translateX(calc(3px * var(--k))); }
.zap-rd__vruler .zap-rd__rl { left: calc(2px * var(--k)); transform: translateY(calc(2px * var(--k))); }

.zap-rd__band { position: relative; }
.zap-rd__bandlabel { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: calc(20px * var(--k));
  margin-left: var(--rw); padding: 0 calc(8px * var(--k)); background: var(--zap-primary-soft); color: var(--zap-primary);
  font: 600 calc(11px * var(--k)) / 1 var(--zap-font); cursor: pointer; user-select: none;
  border-top: calc(1px * var(--k)) solid var(--zap-border); white-space: nowrap; overflow: hidden; }
.zap-rd__bandlabel em { font-style: normal; font-weight: 500; opacity: .7; }
.zap-rd__band.is-picked .zap-rd__bandlabel { background: var(--zap-primary); color: var(--zap-primary-contrast); }
.zap-rd__bandrow { display: flex; }
.zap-rd__area { position: relative; flex: none; background-color: #fff; overflow: visible;
  box-shadow: 0 0 0 calc(1px * var(--k)) rgba(15, 23, 42, .12); }
.zap-rd__area.has-grid { background-image: radial-gradient(circle, rgba(100, 116, 139, .38) calc(.7px * var(--k)), transparent calc(.9px * var(--k)));
  background-size: var(--gs) var(--gs); background-position: calc(var(--gs) / -2) calc(var(--gs) / -2); }
.zap-rd__band.is-picked .zap-rd__area { box-shadow: 0 0 0 calc(2px * var(--k)) var(--zap-primary); }
.zap-rd__grip { height: calc(10px * var(--k)); margin: calc(-5px * var(--k)) 0 calc(-1px * var(--k)) var(--rw); cursor: ns-resize; position: relative; z-index: 3; }
.zap-rd__grip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: calc(1px * var(--k)) dashed transparent; }
.zap-rd__grip:hover::after { border-top: calc(2px * var(--k)) solid var(--zap-primary); }

.zap-rd__el { position: absolute; cursor: move; }
.zap-rd__el > .zap-rp-b > span { white-space: pre-wrap; word-break: break-word; }
.zap-rd__el:hover { outline: calc(1px * var(--k)) dashed rgba(37, 99, 235, .55); }
.zap-rd__el.is-bound > .zap-rp-b { background-image: linear-gradient(rgba(37, 99, 235, .09), rgba(37, 99, 235, .09)); }
.zap-rd__el.is-empty > .zap-rp-b { outline: calc(1px * var(--k)) dotted #94a3b8; }
.zap-rd__el.is-imgph > .zap-rp-b { background: repeating-linear-gradient(45deg, #f1f5f9 0 calc(6px * var(--k)), #e2e8f0 0 calc(12px * var(--k))); outline: calc(1px * var(--k)) solid #cbd5e1; }
.zap-rd__el.is-sel { outline: calc(1.5px * var(--k)) solid var(--zap-primary); outline-offset: 0; z-index: 2; }
.zap-rd__el.is-primary { outline-width: calc(2.5px * var(--k)); }
.zap-rd__el.is-line .zap-rp-l { pointer-events: none; }
.zap-rd__handle { position: absolute; z-index: 3; width: calc(8px * var(--k)); height: calc(8px * var(--k)); transform: translate(-50%, -50%);
  background: #fff; border: calc(1.5px * var(--k)) solid var(--zap-primary); border-radius: calc(2px * var(--k)); }
.zap-rd__handle.is-nw, .zap-rd__handle.is-se { cursor: nwse-resize; }
.zap-rd__handle.is-ne, .zap-rd__handle.is-sw { cursor: nesw-resize; }
.zap-rd__handle.is-n, .zap-rd__handle.is-s { cursor: ns-resize; }
.zap-rd__handle.is-e, .zap-rd__handle.is-w { cursor: ew-resize; }
.zap-rd__guide { position: absolute; z-index: 4; pointer-events: none; }
.zap-rd__guide.is-x { top: calc(-40px * var(--k)); bottom: calc(-40px * var(--k)); border-left: calc(1px * var(--k)) solid #ec4899; }
.zap-rd__guide.is-y { left: calc(-40px * var(--k)); right: calc(-40px * var(--k)); border-top: calc(1px * var(--k)) solid #ec4899; }
.zap-rd__rubber { position: absolute; z-index: 5; pointer-events: none; border: 1px solid var(--zap-primary); background: rgba(37, 99, 235, .08); }
.zap-rd__edit { position: absolute; z-index: 6; resize: both; padding: 2px 4px; border: 2px solid var(--zap-primary); border-radius: 3px;
  background: #fff; color: #111; outline: none; box-shadow: var(--zap-shadow); }

/* inspector */
.zap-rd__pane { padding-bottom: 16px; }
.zap-rd__phead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 6px; font-size: 14px; }
.zap-rd__sec { border-top: 1px solid var(--zap-border); }
.zap-rd__secbody { display: grid; gap: 6px; padding: 0 12px 10px; }
.zap-rd__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; }
.zap-rd__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.zap-rd__grid2 .zap-rd__row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.zap-rd__lbl { font-size: 12px; color: var(--zap-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zap-rd__ctl { min-width: 0; display: flex; align-items: center; }
.zap-rd__in { width: 100%; min-width: 0; padding: 5px 7px; font-size: 12.5px; }
.zap-rd__in--sm { width: 80px; }
.zap-rd__in.is-mono, .zap-rd__ta.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.zap-rd__ta { resize: vertical; min-height: 58px; }
.zap-rd__unit { position: relative; display: flex; width: 100%; }
.zap-rd__unit i { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font: 11px var(--zap-font); color: var(--zap-muted); pointer-events: none; }
.zap-rd__fxrow, .zap-rd__colorrow { display: flex; gap: 4px; align-items: center; width: 100%; }
.zap-rd__fxrow > textarea { flex: 1; }
.zap-rd__fx { flex: none; padding: 5px 8px; font: italic 600 13px Georgia, serif; }
.zap-rd__color { flex: none; width: 30px; height: 28px; padding: 0; border: 1px solid var(--zap-border); border-radius: 6px; background: none; cursor: pointer; }
.zap-rd__x { flex: none; padding: 4px 7px; font-size: 11px; }
.zap-rd__seg { display: inline-flex; border: 1px solid var(--zap-border); border-radius: 7px; overflow: hidden; }
.zap-rd__segbtn { border: 0; border-right: 1px solid var(--zap-border); background: var(--zap-surface); color: var(--zap-text);
  min-width: 30px; padding: 4px 8px; font: 600 13px var(--zap-font); cursor: pointer; }
.zap-rd__segbtn:last-child { border-right: 0; }
.zap-rd__segbtn:hover { background: var(--zap-primary-soft); }
.zap-rd__segbtn.is-on { background: var(--zap-primary); color: var(--zap-primary-contrast); }
.zap-rd__segbtn.is-b { font-weight: 800; } .zap-rd__segbtn.is-i { font-style: italic; font-family: Georgia, serif; } .zap-rd__segbtn.is-u { text-decoration: underline; }
.zap-rd__btnrow { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.zap-rd__secbody .zap-rd__btnrow { justify-content: flex-start; }
.zap-rd__btnrow .zap-btn, .zap-rd__add, .zap-rd__danger { padding: 5px 10px; font-size: 12px; }
.zap-rd__danger { color: #dc2626; }
.zap-rd__list { display: grid; gap: 4px; }
.zap-rd__li { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px; border: 1px solid var(--zap-border); border-radius: 7px; font-size: 12px; }
.zap-rd__li b { font-weight: 600; white-space: nowrap; }
.zap-rd__li code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--zap-muted); font: 11px ui-monospace, Menlo, monospace; }
.zap-rd__li i { color: var(--zap-muted); font-style: normal; font-size: 11px; }
.zap-rd__mini { flex: none; border: 0; background: none; color: var(--zap-muted); cursor: pointer; padding: 2px 4px; border-radius: 4px; font-size: 12px; }
.zap-rd__mini:hover { background: var(--zap-primary-soft); color: var(--zap-primary); }
.zap-rd__mini:disabled { opacity: .35; cursor: default; }

/* expression editor */
.zap-rd__expr { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; min-height: 340px; }
.zap-rd__xlists { max-height: 420px; overflow: auto; border: 1px solid var(--zap-border); border-radius: 8px; padding: 4px; }
.zap-rd__xgroup > summary { cursor: pointer; padding: 5px 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--zap-muted); }
.zap-rd__xitems { display: grid; padding: 0 2px 6px; }
.zap-rd__xi { display: flex; justify-content: space-between; gap: 8px; border: 0; background: none; text-align: left; padding: 3px 8px; border-radius: 5px;
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--zap-text); cursor: pointer; }
.zap-rd__xi:hover { background: var(--zap-primary-soft); color: var(--zap-primary); }
.zap-rd__xi.is-fn { color: #7c3aed; }
.zap-rd__xi i { font-style: normal; color: var(--zap-muted); font-family: var(--zap-font); }
.zap-rd__xmain { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.zap-rd__xhint { margin: 0; font-size: 12px; color: var(--zap-muted); }
.zap-rd__exta { flex: 1; min-height: 160px; resize: vertical; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.zap-rd__xres { display: flex; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--zap-primary-soft); font-size: 12.5px; overflow-wrap: anywhere; }
.zap-rd__xres b { color: var(--zap-primary); white-space: nowrap; }
.zap-rd__xres.is-bad { background: rgba(220, 38, 38, .08); }
.zap-rd__xres.is-bad b, .zap-rd__xres.is-bad span { color: #dc2626; }
@media (max-width: 900px) {
  .zap-rd__body { grid-template-columns: 160px minmax(0, 1fr); }
  .zap-rd__right { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--zap-border); max-height: 320px; }
  .zap-rd__expr { grid-template-columns: 1fr; }
}

/* report designer: live previews, subreport and wizard */
.zap-rd__el.is-chart, .zap-rd__el.is-barcode, .zap-rd__el.is-subreport { overflow: hidden; }
.zap-rd__el.is-subreport { outline: calc(1px * var(--k)) dashed #8b5cf6; background: rgba(139, 92, 246, .04); }
.zap-rd__el.is-subreport.is-sel { outline: calc(1.5px * var(--k)) solid var(--zap-primary); }
.zap-rd__tag { position: absolute; right: 0; top: 0; padding: calc(1px * var(--k)) calc(5px * var(--k)); background: #8b5cf6; color: #fff;
  font: 600 calc(10px * var(--k)) / 1.3 var(--zap-font); border-bottom-left-radius: calc(4px * var(--k)); pointer-events: none; }
.zap-rd__perr { position: absolute; inset: 0; display: grid; place-items: center; padding: 2mm; background: #fef2f2; color: #b91c1c; font: 2.6mm/1.3 Arial, sans-serif; text-align: center; }
.zap-rd__note { margin: 0; font-size: 12px; color: var(--zap-muted); line-height: 1.45; }
.zap-rd__note code { font: 11px ui-monospace, Menlo, monospace; }
.zap-rd__cond { display: grid; gap: 5px; padding: 7px; border: 1px solid var(--zap-border); border-radius: 8px; }
.zap-modal__dialog--wide:has(.zap-rd__subhost) { max-width: min(1440px, 96vw); width: 96vw; }
.zap-modal__dialog--wide:has(.zap-rd__subhost) .zap-modal__body { max-height: none; overflow: visible; padding: 0; }
.zap-rd--nested { border: 0; border-radius: 0; }
.zap-rd__wiz { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; min-height: 320px; }
.zap-rd__wsteps { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 4px; counter-reset: step; }
.zap-rd__wsteps li { counter-increment: step; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--zap-muted); font-size: 13px; }
.zap-rd__wsteps li::before { content: counter(step); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 11px; font-weight: 700; }
.zap-rd__wsteps li.is-on { background: var(--zap-primary-soft); color: var(--zap-primary); font-weight: 600; }
.zap-rd__wsteps li.is-done { color: var(--zap-text); }
.zap-rd__wsteps li.is-done::before { content: "✓"; background: var(--zap-primary); border-color: var(--zap-primary); color: var(--zap-primary-contrast); }
.zap-rd__wpane { display: grid; gap: 12px; align-content: start; }
.zap-rd__wfield { display: grid; gap: 5px; font-size: 12px; color: var(--zap-muted); max-width: 360px; }
.zap-rd__wnote { margin: 0; font-size: 12.5px; color: var(--zap-muted); }
.zap-rd__wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.zap-rd__wcheck { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--zap-border); border-radius: 8px; cursor: pointer; font-size: 13px; }
.zap-rd__wcheck:has(input:checked) { border-color: var(--zap-primary); background: var(--zap-primary-soft); }
.zap-rd__wcheck i { margin-left: auto; font-style: normal; font-size: 11px; color: var(--zap-muted); }
.zap-rd__swatches { display: flex; gap: 8px; }
.zap-rd__swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--zap-surface); box-shadow: 0 0 0 1px var(--zap-border); cursor: pointer; }
.zap-rd__swatch.is-on { box-shadow: 0 0 0 2px var(--zap-primary); }
@media (max-width: 700px) { .zap-rd__wiz { grid-template-columns: 1fr; } }

/* ── QR code ───────────────────────────────────────────────────── */
.zap-qr { margin: 0; display: inline-grid; justify-items: center; gap: 10px; }
.zap-qr__frame { padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--zap-border);
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 10px 30px -14px rgb(0 0 0 / .25); line-height: 0; }
.zap-qr__svg { display: block; max-width: 100%; height: auto; animation: zap-qr-in .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes zap-qr-in { from { opacity: 0; transform: scale(.96); filter: blur(2px); } }
.zap-qr__err { display: grid; place-items: center; text-align: center; font-size: 12px; color: var(--zap-danger); padding: 12px; box-sizing: border-box; }
.zap-qr__cap { display: grid; justify-items: center; gap: 6px; font-size: 13px; color: var(--zap-muted); text-align: center; max-width: calc(var(--qr-size) + 20px); }
.zap-qr__dl { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--zap-primary);
  background: none; border: 1px solid var(--zap-border); border-radius: 999px; padding: 4px 12px; cursor: pointer; transition: background .15s; }
.zap-qr__dl:hover { background: color-mix(in srgb, var(--zap-primary) 8%, transparent); }
.zap-qr__dl svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .zap-qr__svg { animation: none; } }

/* a board to look at: cards open on a click and don't lift */
.zap-kb.is-readonly .zap-sort__item { cursor: pointer; touch-action: auto; }

/* ── Emoji picker ─────────────────────────────────────────────────────────
   A search box and the tone, the category tabs, a scrolling grid, and the
   name of the one under the pointer. Inside a popover it loses its own frame. */
.zap-emoji {
  --emoji-cell: 36px;
  display: flex; flex-direction: column; width: calc(var(--emoji-cell) * 8 + 26px); max-width: calc(100vw - 24px); box-sizing: border-box;
  background: var(--zap-surface); color: var(--zap-text); border: 1px solid var(--zap-border); border-radius: calc(var(--zap-radius-sm) + 4px);
  font-size: 13px; overflow: hidden;
}
.zap-emoji-pop .zap-emoji { border: 0; border-radius: inherit; }
.zap-popover__panel.zap-emoji-pop { max-width: none; padding: 0; }
.zap-emoji-pop .zap-popover__body { padding: 0; }
.zap-emoji__top { display: flex; gap: 6px; padding: 10px 10px 6px; }
.zap-emoji__search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border-radius: 8px;
  background: var(--zap-elevated); border: 1px solid var(--zap-border); color: var(--zap-muted); transition: border-color .15s ease, box-shadow .15s ease; }
.zap-emoji__search:focus-within { border-color: var(--zap-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--zap-primary) 18%, transparent); }
.zap-emoji__search svg { width: 15px; height: 15px; flex: none; }
.zap-emoji__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--zap-text); font: inherit; font-size: 13.5px; }
.zap-emoji__search input::-webkit-search-cancel-button { cursor: pointer; }
.zap-emoji__tones { position: relative; }
.zap-emoji__tone { width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; font-size: 18px; line-height: 1; cursor: pointer; }
.zap-emoji__tone:hover, .zap-emoji__tone.is-on { background: var(--zap-elevated); border-color: var(--zap-border); }
.zap-emoji__tonelist { position: absolute; right: 0; top: calc(100% + 4px); z-index: 2; display: flex; gap: 2px; padding: 4px; border-radius: 10px;
  background: var(--zap-surface); border: 1px solid var(--zap-border); box-shadow: var(--zap-shadow); animation: zap-pop-in .14s ease; }
.zap-emoji__tonelist[hidden] { display: none; }
.zap-emoji__tabs { display: flex; gap: 2px; padding: 0 8px 4px; border-bottom: 1px solid var(--zap-border); overflow-x: auto; scrollbar-width: none; }
.zap-emoji__tabs[hidden] { display: none; }
.zap-emoji__tab { position: relative; flex: 1 0 auto; min-width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: none; font-size: 16px;
  cursor: pointer; filter: grayscale(.8); opacity: .7; transition: filter .15s ease, opacity .15s ease, background-color .15s ease; }
.zap-emoji__tab:hover { background: var(--zap-elevated); filter: none; opacity: 1; }
.zap-emoji__tab.is-on { filter: none; opacity: 1; }
.zap-emoji__tab.is-on::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -5px; height: 2px; border-radius: 2px; background: var(--zap-primary); }
.zap-emoji__grid { height: var(--emoji-h, 300px); overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px; position: relative; scrollbar-width: thin; }
.zap-emoji__sec { padding-top: 6px; }
.zap-emoji__title { position: sticky; top: 0; z-index: 1; margin: 0; padding: 6px 4px 4px; font-size: 11.5px; font-weight: 650; letter-spacing: .02em;
  color: var(--zap-muted); background: color-mix(in srgb, var(--zap-surface) 92%, transparent); backdrop-filter: blur(6px); }
.zap-emoji__cells { display: grid; grid-template-columns: repeat(var(--cols, 8), var(--emoji-cell)); }
.zap-emoji__cell { width: var(--emoji-cell); height: var(--emoji-cell); padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; transition: transform .12s ease, background-color .12s ease; }
.zap-emoji__cell:hover { background: var(--zap-elevated); transform: scale(1.14); }
.zap-emoji__cell.is-active { background: color-mix(in srgb, var(--zap-primary) 14%, transparent); }
.zap-emoji__cell:focus-visible { outline: 2px solid var(--zap-primary); outline-offset: -2px; }
.zap-emoji__none { display: grid; place-items: center; gap: 6px; height: 100%; color: var(--zap-muted); text-align: center; }
.zap-emoji__none span { font-size: 28px; }
.zap-emoji__foot { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 12px; border-top: 1px solid var(--zap-border); background: var(--zap-elevated); }
.zap-emoji__preview { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zap-emoji__big { font-size: 28px; line-height: 1; }
.zap-emoji__name { display: grid; min-width: 0; line-height: 1.3; }
.zap-emoji__name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-emoji__name small { color: var(--zap-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-emoji__hint { color: var(--zap-muted); }
.zap-emoji-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 8px; border: 1px solid transparent;
  border-radius: 8px; background: none; color: var(--zap-muted); font: inherit; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.zap-emoji-btn:hover, .zap-emoji-btn[aria-expanded="true"] { color: var(--zap-text); background: var(--zap-elevated); border-color: var(--zap-border); }
.zap-emoji-btn svg { width: 20px; height: 20px; }
.zap-emoji-btn.is-sm { height: 28px; min-width: 28px; padding: 0 5px; } .zap-emoji-btn.is-sm svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .zap-emoji__cell, .zap-emoji__cell:hover { transition: none; transform: none; } }

/* ── Media devices: DevicePicker / LevelMeter ───────────────────────────── */
.zap-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.zap-meter.is-sm { height: 10px; gap: 1px; }
.zap-meter i { width: 4px; height: 100%; border-radius: 2px; background: color-mix(in srgb, var(--zap-text) 12%, transparent); transition: background-color .08s linear; }
.zap-meter.is-sm i { width: 3px; }
.zap-meter i.is-on { background: var(--zap-success); }
.zap-meter i.is-on.is-warm { background: var(--zap-warning); }
.zap-meter i.is-on.is-hot { background: var(--zap-danger); }
.zap-device { display: grid; gap: 6px; min-width: 0; }
.zap-device__label { font-size: 13px; font-weight: 600; }
.zap-device__row { display: flex; gap: 6px; align-items: center; }
.zap-device__row > :first-child { flex: 1; min-width: 0; }
.zap-device__test, .zap-device__allow { flex: none; height: 34px; padding: 0 12px; border: 1px solid var(--zap-border); border-radius: var(--zap-radius-sm);
  background: var(--zap-surface); color: var(--zap-text); font: inherit; font-size: 13px; cursor: pointer; }
.zap-device__test:hover, .zap-device__allow:hover { background: var(--zap-elevated); }
.zap-device__allow { justify-self: start; }
.zap-device__meter { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--zap-muted); }