/* Nizhenets design kit — components (class prefix nz-)
   Apps add these classes to STATIC markup only. Elements whose className/textContent is rewritten by JS are
   styled in the app's own stylesheet by their existing selectors, using the same tokens and the patterns here. */

/* ---------- Frame: masthead / rail / page ---------- */
.nz-masthead {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--nz-space-6);
  min-height: var(--nz-masthead-h);
  padding: 0 var(--nz-gutter);
  background: color-mix(in srgb, var(--nz-canvas) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nz-line);
}
.nz-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--nz-font-serif); font-size: var(--nz-text-lg); font-weight: 500; letter-spacing: -0.01em;
  color: var(--nz-ink); text-decoration: none; white-space: nowrap;
}
.nz-brand .nz-lamp { width: 9px; height: 9px; }
.nz-brand-sub { font-family: var(--nz-font-sans); font-size: var(--nz-text-xs); color: var(--nz-ink-2); font-weight: 400; }
.nz-nav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nz-nav::-webkit-scrollbar { display: none; }
.nz-nav a, .nz-nav button {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 0; background: none; border-radius: var(--nz-radius-control);
  font-size: var(--nz-text-sm); font-weight: 500; color: var(--nz-ink-2); text-decoration: none; white-space: nowrap;
  transition: color var(--nz-fast) var(--nz-ease), background-color var(--nz-fast) var(--nz-ease);
}
.nz-nav a:hover, .nz-nav button:hover { color: var(--nz-ink); background: var(--nz-raised); }
.nz-nav a[aria-current="page"], .nz-nav .is-active { color: var(--nz-ink); }
.nz-nav a[aria-current="page"]::after, .nz-nav .is-active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--nz-lamp-glow);
}
.nz-masthead-tools { display: inline-flex; align-items: center; gap: var(--nz-space-2); }
.nz-nav-toggle { display: none; }

/* Left rail for apps with many destinations; collapses into the masthead below 900px. */
.nz-shell { display: grid; grid-template-columns: var(--nz-rail-w) minmax(0, 1fr); min-height: 100dvh; }
.nz-rail {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  padding: var(--nz-space-5) var(--nz-space-4);
  background: var(--nz-surface); border-right: 1px solid var(--nz-line);
}
.nz-rail .nz-brand { padding: 4px 8px 20px; }
.nz-rail-nav { display: flex; flex-direction: column; gap: 2px; }
.nz-rail-nav a, .nz-rail-nav button {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: none; text-align: left;
  border-radius: var(--nz-radius-control); font-size: var(--nz-text-sm); font-weight: 500; color: var(--nz-ink-2); text-decoration: none;
  transition: color var(--nz-fast) var(--nz-ease), background-color var(--nz-fast) var(--nz-ease);
}
.nz-rail-nav a:hover, .nz-rail-nav button:hover { color: var(--nz-ink); background: var(--nz-raised); }
.nz-rail-nav a[aria-current="page"], .nz-rail-nav .is-active { color: var(--nz-ink); background: var(--nz-raised); }
.nz-rail-nav a[aria-current="page"] .nz-lamp, .nz-rail-nav .is-active .nz-lamp { background: var(--nz-lamp-glow); border-color: var(--nz-lamp-glow); }
.nz-rail-group { margin-top: var(--nz-space-5); padding: 0 10px 6px; font-size: var(--nz-text-xs); color: var(--nz-ink-3); }
.nz-rail-foot { margin-top: auto; padding-top: var(--nz-space-5); border-top: 1px solid var(--nz-line); font-size: var(--nz-text-xs); color: var(--nz-ink-2); }

.nz-page { width: min(var(--nz-content), 100% - 2 * var(--nz-gutter)); margin-inline: auto; padding-block: var(--nz-space-8) var(--nz-space-12); }
.nz-page.is-wide { --nz-content: 1560px; }

/* ---------- Headline block ---------- */
.nz-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nz-space-2) var(--nz-space-4); margin-bottom: var(--nz-space-6); }
.nz-headline h1, .nz-headline h2 { margin: 0; font-size: var(--nz-text-2xl); }
.nz-headline .nz-display { font-size: var(--nz-text-3xl); }
.nz-lede { margin: 0; max-width: var(--nz-measure); color: var(--nz-ink-2); font-size: var(--nz-text-md); }
.nz-headline-tools { margin-left: auto; display: inline-flex; gap: var(--nz-space-2); align-items: center; }
.nz-section { margin-top: var(--nz-space-10); }
.nz-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nz-space-4); padding-bottom: var(--nz-space-3); margin-bottom: var(--nz-space-4); border-bottom: 1px solid var(--nz-line); }
.nz-section-head h2 { margin: 0; }
.nz-section-head .nz-small { color: var(--nz-ink-2); }

/* ---------- Lamp (the one status device) ---------- */
.nz-lamp {
  display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--nz-line-strong); background: transparent; vertical-align: middle;
}
.nz-lamp.is-sm { width: 8px; height: 8px; border-width: 1.5px; }
.nz-lamp.is-on  { background: var(--nz-ok);   border-color: var(--nz-ok); }
.nz-lamp.is-off { background: var(--nz-bad);  border-color: var(--nz-bad); }
.nz-lamp.is-wait{ background: transparent;    border-color: var(--nz-warn); }
.nz-lamp.is-info{ background: var(--nz-info); border-color: var(--nz-info); }
.nz-lamp.is-live{ background: var(--nz-lamp-glow); border-color: var(--nz-lamp-glow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nz-lamp-glow) 22%, transparent); }

/* ---------- Badge: lamp + text, one quiet shape ---------- */
.nz-badge {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 2px 10px 2px 8px; border-radius: var(--nz-radius-pill);
  border: 1px solid var(--nz-line); background: var(--nz-surface);
  font-size: var(--nz-text-xs); font-weight: 500; line-height: 1.6; color: var(--nz-ink-2);
}
.nz-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--nz-line-strong); flex: none; }
.nz-badge.is-ok   { color: var(--nz-ok);   background: var(--nz-ok-soft);   border-color: transparent; }
.nz-badge.is-ok::before   { background: var(--nz-ok);   border-color: var(--nz-ok); }
.nz-badge.is-bad  { color: var(--nz-bad);  background: var(--nz-bad-soft);  border-color: transparent; }
.nz-badge.is-bad::before  { background: var(--nz-bad);  border-color: var(--nz-bad); }
.nz-badge.is-warn { color: var(--nz-warn); background: var(--nz-warn-soft); border-color: transparent; }
.nz-badge.is-warn::before { border-color: var(--nz-warn); }
.nz-badge.is-info { color: var(--nz-info); background: var(--nz-info-soft); border-color: transparent; }
.nz-badge.is-info::before { background: var(--nz-info); border-color: var(--nz-info); }
.nz-badge.is-live { color: var(--nz-lamp); background: color-mix(in srgb, var(--nz-lamp-glow) 18%, var(--nz-surface)); border-color: transparent; }
.nz-badge.is-live::before { background: var(--nz-lamp-glow); border-color: var(--nz-lamp-glow); }
.nz-badge.is-plain::before { display: none; }

/* ---------- Buttons ---------- */
.nz-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 6px 14px; border-radius: var(--nz-radius-control);
  border: 1px solid var(--nz-line-strong); background: var(--nz-surface); color: var(--nz-ink);
  font-size: var(--nz-text-sm); font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap;
  transition: background-color var(--nz-fast) var(--nz-ease), border-color var(--nz-fast) var(--nz-ease), color var(--nz-fast) var(--nz-ease);
}
.nz-button:hover { background: var(--nz-raised); }
.nz-button:active { background: var(--nz-line); }
.nz-button:disabled, .nz-button[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.nz-button.is-primary { background: var(--nz-accent); border-color: var(--nz-accent); color: var(--nz-accent-ink); }
.nz-button.is-primary:hover { background: var(--nz-accent-hover); border-color: var(--nz-accent-hover); }
.nz-button.is-danger { color: var(--nz-bad); border-color: color-mix(in srgb, var(--nz-bad) 40%, transparent); background: var(--nz-surface); }
.nz-button.is-danger:hover { background: var(--nz-bad-soft); }
.nz-button.is-quiet { border-color: transparent; background: transparent; color: var(--nz-ink-2); }
.nz-button.is-quiet:hover { background: var(--nz-raised); color: var(--nz-ink); }
.nz-button.is-sm { min-height: 30px; padding: 3px 10px; font-size: var(--nz-text-xs); }
.nz-button.is-icon { width: 36px; padding: 0; }
.nz-button.is-icon.is-sm { width: 30px; }
.nz-button[aria-pressed="true"], .nz-button.is-selected { background: var(--nz-accent-soft); border-color: var(--nz-accent); color: var(--nz-accent); }
.nz-button .nz-icon { width: 16px; height: 16px; }
.nz-button-row { display: flex; flex-wrap: wrap; gap: var(--nz-space-2); align-items: center; }

/* ---------- Forms ---------- */
.nz-input, .nz-select, .nz-textarea {
  width: 100%; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--nz-line-strong); border-radius: var(--nz-radius-control);
  background: var(--nz-surface); color: var(--nz-ink); font-size: var(--nz-text-md); line-height: 1.4;
  transition: border-color var(--nz-fast) var(--nz-ease);
}
.nz-textarea { min-height: 96px; resize: vertical; }
/* Chevron drawn with gradients (no data: URI) so it survives strict img-src CSPs. */
.nz-select {
  padding-right: 32px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--nz-ink-3) 50%), linear-gradient(135deg, var(--nz-ink-3) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px; background-position: right 16px center, right 10px center; background-repeat: no-repeat;
}
.nz-input:hover, .nz-select:hover, .nz-textarea:hover { border-color: var(--nz-ink-3); }
.nz-input:focus-visible, .nz-select:focus-visible, .nz-textarea:focus-visible { border-color: var(--nz-accent); box-shadow: var(--nz-focus); }
.nz-input[aria-invalid="true"], .nz-input.is-invalid { border-color: var(--nz-bad); }
.nz-input:disabled, .nz-select:disabled, .nz-textarea:disabled { background: var(--nz-raised); color: var(--nz-ink-3); }
.nz-input.is-sm, .nz-select.is-sm { min-height: 30px; padding: 3px 10px; font-size: var(--nz-text-sm); }
.nz-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nz-field > label, .nz-label { font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-2); }
.nz-field .nz-hint { font-size: var(--nz-text-xs); color: var(--nz-ink-3); }
.nz-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--nz-space-4); }
.nz-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--nz-text-sm); }
.nz-check input { width: 16px; height: 16px; accent-color: var(--nz-accent); margin: 0; }
.nz-switch { position: relative; width: 38px; height: 22px; appearance: none; margin: 0; border-radius: var(--nz-radius-pill); background: var(--nz-line-strong); cursor: pointer; transition: background-color var(--nz-fast) var(--nz-ease); }
.nz-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--nz-surface); transition: transform var(--nz-fast) var(--nz-ease); }
.nz-switch:checked { background: var(--nz-accent); }
.nz-switch:checked::after { transform: translateX(16px); }
.nz-search { position: relative; }
.nz-search .nz-input { padding-left: 34px; }
.nz-search::before { content: ""; position: absolute; left: 11px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); border: 1.6px solid var(--nz-ink-3); border-radius: 50%; }
.nz-search::after { content: ""; position: absolute; left: 22px; top: calc(50% + 4px); width: 6px; height: 1.6px; background: var(--nz-ink-3); transform: rotate(45deg); }

/* ---------- Plates (grouping without the card kit) ---------- */
.nz-plate { background: var(--nz-surface); border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); padding: var(--nz-space-5); }
.nz-plate.is-inset { background: var(--nz-raised); border-color: transparent; }
.nz-plate.is-tight { padding: var(--nz-space-4); }
.nz-plate-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nz-space-4); margin-bottom: var(--nz-space-4); }
.nz-plate-head h2, .nz-plate-head h3 { margin: 0; }
.nz-plate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--nz-space-4); }

/* Summary strip: values in a row separated by lines, not identical tiles. */
/* Dividers come from the 1px gap over the line colour, so they stay correct however the strip wraps. */
.nz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-line); overflow: hidden; }
.nz-stat { padding: var(--nz-space-4) var(--nz-space-5); background: var(--nz-surface); min-width: 0; }
.nz-stat-label { display: block; font-size: var(--nz-text-xs); color: var(--nz-ink-2); margin-bottom: 4px; }
.nz-stat-value { display: block; font-size: var(--nz-text-2xl); font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.nz-stat-value.is-serif { font-family: var(--nz-font-serif); }
.nz-stat-note { display: block; font-size: var(--nz-text-xs); color: var(--nz-ink-3); margin-top: 4px; }

/* ---------- Ledger rows ---------- */
.nz-ledger { border-top: 1px solid var(--nz-line); }
.nz-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--nz-space-3) var(--nz-space-4); padding: var(--nz-space-3) var(--nz-space-2); border-bottom: 1px solid var(--nz-line); }
.nz-row:hover { background: var(--nz-raised); }
.nz-row-title { font-weight: 500; }
.nz-row-meta { font-size: var(--nz-text-xs); color: var(--nz-ink-2); font-family: var(--nz-font-mono); }
.nz-row-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Tables ---------- */
.nz-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-surface); }
.nz-table { width: 100%; font-size: var(--nz-text-sm); }
.nz-table th { padding: 10px 12px; font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-2); border-bottom: 1px solid var(--nz-line-strong); white-space: nowrap; }
.nz-table td { padding: 10px 12px; border-bottom: 1px solid var(--nz-line); vertical-align: middle; }
.nz-table tbody tr:last-child td { border-bottom: 0; }
.nz-table tbody tr:hover { background: var(--nz-raised); }
.nz-table .nz-num, .nz-num { text-align: right; font-variant-numeric: tabular-nums; }
.nz-table .nz-mono { font-size: var(--nz-text-xs); }
.nz-table th[aria-sort] { cursor: pointer; }
.nz-table th[aria-sort="ascending"]::after { content: " ▲"; font-size: 10px; color: var(--nz-ink-3); }
.nz-table th[aria-sort="descending"]::after { content: " ▼"; font-size: 10px; color: var(--nz-ink-3); }
.nz-table.is-dense th, .nz-table.is-dense td { padding: 7px 10px; }

/* ---------- Tabs ---------- */
.nz-tabs { display: flex; gap: var(--nz-space-5); border-bottom: 1px solid var(--nz-line); overflow-x: auto; scrollbar-width: none; }
.nz-tabs::-webkit-scrollbar { display: none; }
.nz-tabs > * { position: relative; flex: none; padding: 10px 2px; border: 0; background: none; font-size: var(--nz-text-sm); font-weight: 500; color: var(--nz-ink-2); text-decoration: none; white-space: nowrap; }
.nz-tabs > *:hover { color: var(--nz-ink); }
.nz-tabs > [aria-selected="true"], .nz-tabs > [aria-current="page"], .nz-tabs > .is-active { color: var(--nz-ink); }
.nz-tabs > [aria-selected="true"]::after, .nz-tabs > [aria-current="page"]::after, .nz-tabs > .is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--nz-lamp-glow); border-radius: 2px; }

/* ---------- Chips (filters) ---------- */
.nz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nz-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 11px; border-radius: var(--nz-radius-pill); border: 1px solid var(--nz-line-strong); background: var(--nz-surface); color: var(--nz-ink-2); font-size: var(--nz-text-xs); font-weight: 500; }
.nz-chip:hover { background: var(--nz-raised); color: var(--nz-ink); }
.nz-chip[aria-pressed="true"], .nz-chip.is-active { background: var(--nz-accent-soft); border-color: var(--nz-accent); color: var(--nz-accent); }
.nz-chip .nz-count { font-family: var(--nz-font-mono); color: var(--nz-ink-3); }

/* ---------- Messages, notices, empty states ---------- */
.nz-message { font-size: var(--nz-text-sm); color: var(--nz-ink-2); }
.nz-message.is-error, .nz-message.is-bad { color: var(--nz-bad); }
.nz-message.is-ok { color: var(--nz-ok); }
.nz-notice { padding: var(--nz-space-3) var(--nz-space-4); border-radius: var(--nz-radius-control); border: 1px solid var(--nz-line); background: var(--nz-surface); font-size: var(--nz-text-sm); border-left-width: 3px; }
.nz-notice.is-ok { border-left-color: var(--nz-ok); }
.nz-notice.is-warn { border-left-color: var(--nz-warn); }
.nz-notice.is-bad { border-left-color: var(--nz-bad); }
.nz-notice.is-info { border-left-color: var(--nz-info); }
.nz-empty { padding: var(--nz-space-6); border-radius: var(--nz-radius-control); background: var(--nz-raised); color: var(--nz-ink-2); font-size: var(--nz-text-sm); text-align: center; }

/* ---------- Dialog & toast ---------- */
.nz-dialog { width: min(560px, calc(100% - 32px)); max-height: min(88dvh, 900px); padding: 0; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-surface); color: var(--nz-ink); box-shadow: var(--nz-shadow-float); }
.nz-dialog.is-wide { width: min(960px, calc(100% - 32px)); }
.nz-dialog::backdrop { background: color-mix(in srgb, var(--nz-canvas) 70%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.nz-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--nz-space-4); padding: var(--nz-space-4) var(--nz-space-5); border-bottom: 1px solid var(--nz-line); }
.nz-dialog-head h2, .nz-dialog-head h3 { margin: 0; font-size: var(--nz-text-xl); }
.nz-dialog-body { padding: var(--nz-space-5); overflow: auto; }
.nz-dialog-foot { display: flex; justify-content: flex-end; gap: var(--nz-space-2); padding: var(--nz-space-4) var(--nz-space-5); border-top: 1px solid var(--nz-line); }
.nz-toast { position: fixed; right: 20px; bottom: 20px; z-index: 60; max-width: min(420px, calc(100% - 40px)); padding: 12px 16px; border-radius: var(--nz-radius-control); border: 1px solid var(--nz-line); border-left-width: 3px; border-left-color: var(--nz-accent); background: var(--nz-surface); color: var(--nz-ink); font-size: var(--nz-text-sm); box-shadow: var(--nz-shadow-float); }
.nz-toast.is-ok { border-left-color: var(--nz-ok); }
.nz-toast.is-bad, .nz-toast.is-error { border-left-color: var(--nz-bad); }

/* ---------- Pagination, progress, misc ---------- */
.nz-pagination { display: flex; align-items: center; gap: var(--nz-space-2); font-size: var(--nz-text-sm); }
.nz-pagination .nz-page-label { font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); color: var(--nz-ink-2); padding: 0 6px; }
.nz-progress { position: relative; height: 6px; border-radius: 999px; background: var(--nz-raised); overflow: hidden; }
.nz-progress::after { content: ""; position: absolute; inset: 0; width: calc(var(--nz-progress, 0) * 1%); background: var(--nz-accent); border-radius: inherit; transition: width 240ms var(--nz-ease); }
.nz-progress.is-live::after { background: var(--nz-lamp-glow); }
.nz-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--nz-space-4); font-size: var(--nz-text-sm); margin: 0; }
.nz-kv dt { color: var(--nz-ink-2); }
.nz-kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.nz-icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; }
.nz-theme-toggle .nz-icon-sun { display: none; }
:root:is([data-theme="dark"],[data-theme="black"]) .nz-theme-toggle .nz-icon-sun { display: block; }
:root:is([data-theme="dark"],[data-theme="black"]) .nz-theme-toggle .nz-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nz-theme-toggle .nz-icon-sun { display: block; }
  :root:not([data-theme="light"]) .nz-theme-toggle .nz-icon-moon { display: none; }
}
.nz-stack { display: flex; flex-direction: column; gap: var(--nz-space-4); }
.nz-cluster { display: flex; flex-wrap: wrap; gap: var(--nz-space-3); align-items: center; }
.nz-muted { color: var(--nz-ink-2); }
.nz-right { margin-left: auto; }

/* ---------- Responsive frame ---------- */
@media (max-width: 900px) {
  .nz-shell { grid-template-columns: minmax(0, 1fr); }
  .nz-rail { position: fixed; inset: var(--nz-masthead-h) auto 0 0; width: min(320px, 86vw); height: auto; z-index: 50; transform: translateX(-100%); transition: transform 200ms var(--nz-ease); box-shadow: none; }
  .nz-rail.is-open { transform: none; box-shadow: var(--nz-shadow-float); }
  .nz-rail-scrim { position: fixed; inset: 0; z-index: 45; background: color-mix(in srgb, var(--nz-canvas) 55%, transparent); }
  .nz-rail-scrim[hidden] { display: none; }
}
@media (max-width: 760px) {
  .nz-masthead { grid-template-columns: auto 1fr auto; gap: var(--nz-space-3); }
  .nz-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; padding: var(--nz-space-2) var(--nz-gutter) var(--nz-space-4); background: var(--nz-canvas); border-bottom: 1px solid var(--nz-line); box-shadow: var(--nz-shadow-float); }
  .nz-nav.is-open { display: flex; }
  .nz-nav a, .nz-nav button { padding: 12px 10px; font-size: var(--nz-text-md); }
  .nz-nav a[aria-current="page"]::after, .nz-nav .is-active::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .nz-nav-toggle { display: inline-flex; }
  .nz-page { padding-block: var(--nz-space-6) var(--nz-space-10); }
  .nz-headline h1, .nz-headline h2 { font-size: var(--nz-text-xl); }
  .nz-headline .nz-display { font-size: var(--nz-text-2xl); }
  .nz-plate { padding: var(--nz-space-4); }
  .nz-stat-value { font-size: var(--nz-text-xl); }
  .nz-dialog-body, .nz-dialog-head, .nz-dialog-foot { padding-inline: var(--nz-space-4); }
  .nz-toast { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* ---------- 2026-10-21 polish ---------- */
/* Older markup says .nz-button-primary; it now looks exactly like .is-primary. */
.nz-button.nz-button-primary { background: var(--nz-accent); border-color: var(--nz-accent); color: var(--nz-accent-ink); }
.nz-button.nz-button-primary:hover { background: var(--nz-accent-hover); border-color: var(--nz-accent-hover); }
/* A pressed button moves by one pixel: the click is felt, nothing else shifts. */
.nz-button { touch-action: manipulation; }
.nz-button:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
/* Single-line selects keep the drawn chevron even when an app layer resets the background with the shorthand
   (the visual layer does), and selects styled as .nz-input get the same chevron instead of the native arrow. */
select:is(.nz-select, .nz-input):not([multiple]):not([size]) {
  padding-right: 32px; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--nz-ink-2) 50%), linear-gradient(135deg, var(--nz-ink-2) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px; background-position: right 16px center, right 10px center; background-repeat: no-repeat;
}
/* Empty / loading rows that span a scrolled table stay readable on a phone instead of centring off-screen. */
@media (max-width: 760px) {
  .nz-table-wrap td[colspan] { text-align: left; white-space: normal; }
}