/* ui.css: plik GENEROWANY przez build.py. Edytuj css/tokens.css, css/base.css, css/{rodzina}.css. */
/* Katalog UI: tokeny. Jedno źródło kolorów, fontów i wymiarów dla całego programu.
   Zmieniasz kolor akcentu tutaj, nie w elementach. */
:root {
  /* tekst */
  --ink: #1b2330;
  --ink-2: #43505f;
  --muted: #6b7787;
  /* Etykiety 10px: #8b98a9 dawało 2,9:1 na bieli, czyli poniżej progu czytelności.
     #66748a to 4,7:1 na bieli i 4,5:1 na tle nagłówka, przy zachowanej hierarchii. */
  --label: #66748a;
  /* Nagłówki kolumn i sekcji: 5,4:1 na tle --surface-2, ciemniej niż etykieta, jaśniej niż treść. */
  --head-ink: #5a6879;

  /* linie */
  --line: #dde3ea;
  --line-2: #e6eaf0;
  --line-3: #eef1f5;
  --line-input: #cfd7e2;
  /* Kreska między wierszami tabeli. --line-3 dawało 1,13:1, czyli wiersz gubił się
     przy szerokości ponad tysiąca pikseli. */
  --line-row: #dde3ea;
  /* Pas co drugi wiersz w szerokiej tabeli: ma być ledwo czuć, 1,05:1. */
  --zebra: #f7f9fb;

  /* akcent (jeden kolor na cały program) */
  --accent: #17b28a;
  --accent-hover: #13a07c;
  --accent-ink: #062a20;
  --accent-soft: #e9f7f2;
  --accent-soft-line: #b9e2d3;
  --accent-text: #0f6f56;
  --link: #0f8f6f;
  --link-hover: #0b7458;

  /* ciemne powierzchnie: pasek okna, szyna, nagłówek inspectora, toast */
  --chrome: #141b2d;
  --chrome-2: #1a2235;
  --chrome-3: #232d45;
  --chrome-hover: #1f2940;
  --chrome-line: #2a3450;
  --chrome-line-2: #0a0f1c;
  --chrome-ink: #e8ecf3;
  --chrome-ink-2: #cfd7e4;
  --chrome-muted: #9aa6ba;
  --chrome-dim: #8492a8;
  --chrome-label: #5d6b85;
  --chrome-accent-text: #96e6cd;
  --chrome-accent-bg: #233052;
  --chrome-ink-bright: #ffffff;   /* tekst na ciemnym pod kursorem i w stanie aktywnym */
  --chrome-inactive: #1c2334;     /* pasek okna bez fokusu */

  /* sygnały */
  --danger: #c0392b;
  --danger-hover: #a93226;
  --danger-soft: #fdecea;
  --danger-line: #f2b8b1;
  --danger-text: #a93226;
  --danger-ink: #ffffff;          /* tekst na wypełnieniu danger */
  --warn: #d99a2b;
  --warn-soft: #fff3dc;
  --warn-line: #ecd3a4;
  --warn-text: #8a5a12;
  --warn-ink: #3b2a06;            /* tekst na wypełnieniu warn (żółty wymaga ciemnego) */
  --info: #3b6fb6;
  --info-soft: #e8eef8;
  --info-line: #c3d3ea;
  --info-text: #2b4a7a;
  --info-ink: #ffffff;            /* tekst na wypełnieniu info */
  --violet: #7c5cbf;               /* szósty ton: stan poza ok/warn/danger/info, np. wynajęte, archiwum */
  --violet-soft: #efeafa;
  --violet-line: #d5c8ee;
  --violet-text: #533a8c;
  --violet-ink: #ffffff;          /* tekst na wypełnieniu violet */
  --neutral-soft: #f1f3f6;
  --neutral-dot: #a9b4c2;
  --neutral-ink: #ffffff;         /* tekst na wypełnieniu neutral-dot */
  --grid-dot: #d5dbe4;            /* kropki siatki plansz, diagramów i map */
  --switch-off: #c6cfda;          /* tor wyłączonego przełącznika */

  /* powierzchnie */
  --canvas: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #fafbfd;
  --field: #fbfcfe;
  --hover: #f4fbf8;
  --hover-neutral: #f1f4f8;
  --selected: #e9f7f2;
  --focus-ring: color-mix(in srgb, var(--accent) 18%, transparent);
  --overlay: rgba(20, 27, 45, .45);

  /* typografia */
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: Consolas, "Liberation Mono", ui-monospace, monospace;
  --fs: 13px;
  --fs-sm: 12px;
  --fs-xs: 11.5px;
  --fs-label: 10px;

  /* kształt */
  --radius: 4px;
  --radius-lg: 5px;
  --radius-pill: 11px;
  --shadow: 0 4px 16px rgba(20, 27, 45, .10), 0 1px 3px rgba(20, 27, 45, .06);
  --shadow-lg: 0 12px 40px rgba(20, 27, 45, .18);
  --shadow-sm: 0 1px 2px rgba(20, 27, 45, .06);

  /* wymiary stałe (jedno miejsce, żeby paski były równe na każdym ekranie) */
  --h-titlebar: 34px;
  --h-menubar: 26px;
  --h-statusbar: 26px;
  --h-pageheader: 38px;
  --h-filterbar: 36px;
  --h-thead: 30px;
  --h-row: 32px;
  --h-row-loose: 44px;
  --h-input: 28px;
  --h-btn: 32px;
  --h-btn-sm: 26px;
  --h-btn-lg: 40px;
  --h-menu-item: 28px;
  --w-rail: 84px;
  --w-rail-slim: 48px;
  --w-sidenav: 220px;
  --w-inspector: 340px;
  --w-master: 260px;
  --w-search: 220px;
}

/* Motyw ciemny: te same nazwy, inne wartości. Włączasz atrybutem data-theme="dark" na <html>. */
[data-theme="dark"] {
  --ink: #e8ecf3;
  --ink-2: #c3ccd8;
  --muted: #94a0b2;
  --label: #97a3b5;
  --head-ink: #aab5c6;
  --line: #2a3450;
  --line-2: #26304a;
  --line-3: #1f2940;
  --line-input: #34405c;
  --line-row: #2a3450;
  --zebra: #1d2639;
  --canvas: #0f1524;
  --surface: #1a2235;
  --surface-2: #1f2940;
  --surface-3: #1c2538;
  --field: #141b2d;
  --hover: #1f3130;
  --hover-neutral: #232d45;
  --selected: #1b3a33;
  --accent-soft: #163d33;
  --accent-soft-line: #1f5c4b;
  --accent-text: #7fdcbf;
  --link: #5fd3ad;
  --link-hover: #8ae3c8;
  --danger-soft: #3a1f1c;
  --danger-line: #6b2f28;
  --danger-text: #f0a097;
  --warn-soft: #3a2f16;
  --warn-line: #6b5420;
  --warn-text: #f3d59a;
  --info-soft: #1c2b44;
  --info-line: #2d4670;
  --info-text: #a7c3ea;
  --violet-soft: #2d2545;
  --violet-line: #4a3c72;
  --violet-text: #cdbdf2;
  --neutral-soft: #232d45;
  --neutral-dot: #5d6b85;
  --grid-dot: #2a3450;
  --switch-off: #34405c;
  --overlay: rgba(0, 0, 0, .6);
}

/* reset i podstawy */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas);
  color: var(--ink);
  font: var(--fs)/1.45 var(--sans);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
input, textarea, button, select { font-family: inherit; font-size: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
svg { display: inline-block; vertical-align: middle; }

/* fokus: ten sam pierścień co w polach, widoczny tylko z klawiatury */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Silnik obcy (Leaflet, plansza, edytor kodu) buduje własny DOM i liczy na domyślne wartości
   przeglądarki, a zerowania wyżej mu je zabierają. Opakuj go w .engine-host: w środku button,
   listy, nagłówki, svg, img i :focus wracają do wartości domyślnych. :where() trzyma
   specyficzność na poziomie gołego elementu, więc każda klasa silnika i tak wygrywa. */
:where(.engine-host) button { background: revert; border: revert; padding: revert; cursor: revert; }
:where(.engine-host) ul, :where(.engine-host) ol { margin: revert; padding: revert; list-style: revert; }
:where(.engine-host) h1, :where(.engine-host) h2, :where(.engine-host) h3, :where(.engine-host) h4, :where(.engine-host) p { margin: revert; }
:where(.engine-host) svg { display: revert; vertical-align: revert; }
:where(.engine-host) img { max-width: revert; display: revert; }
:where(.engine-host) :focus { outline: revert; }

/* jeden pasek przewijania w całym programie */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c6cfda; border-radius: 5px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: #aab4c2; }
::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #3a4763; }

/* zaznaczanie tekstu w programie: paski i menu nie są tekstem do kopiowania */
.no-select { user-select: none; -webkit-user-select: none; }

/* typograficzne pomocniki */
.mono { font-family: var(--mono); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.code { font-family: var(--mono); font-weight: 600; }
.label { font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-xs); }
.strong { font-weight: 600; }
.danger-text { color: var(--danger); }
.ok-text { color: var(--accent-text); }
.warn-text { color: var(--warn-text); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* układowe pomocniki (minimum, reszta w blokach) */
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row-tight { display: flex; align-items: center; gap: 4px; min-width: 0; }
.col { display: flex; flex-direction: column; min-width: 0; }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.sep-v { width: 1px; height: 16px; background: var(--line); flex: 0 0 1px; }
.sep-h { height: 1px; background: var(--line-2); }
.hidden { display: none !important; }

/* Katalog UI: wspólne prymitywy. Rodziny ich NIE redefiniują, tylko używają i rozszerzają
   własnym prefiksem. Kolory wyłącznie przez tokeny. */

/* ---------- ikony ---------- */
.icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.icon-12 { width: 12px; height: 12px; }
.icon-13 { width: 13px; height: 13px; }
.icon-14 { width: 14px; height: 14px; }
.icon-17 { width: 17px; height: 17px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; stroke-width: 1.2; }
.icon-32 { width: 32px; height: 32px; stroke-width: 1; }

/* ---------- przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-btn); padding: 0 12px; border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; user-select: none;
  color: var(--ink); background: var(--surface-2);
  transition: background .12s, border-color .12s, color .12s;
}
.btn .icon { width: 13px; height: 13px; }
.btn:hover, .btn.is-hover { background: var(--hover-neutral); text-decoration: none; }
.btn:active, .btn.is-active { transform: translateY(.5px); }
.btn-primary { background: var(--chrome); color: var(--chrome-accent-text); border-color: var(--chrome); }
.btn-primary:hover, .btn-primary.is-hover { background: var(--chrome-3); }
.btn-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-accent:hover, .btn-accent.is-hover { background: var(--accent-hover); }
.btn-ghost { background: var(--surface); border-color: var(--line-input); color: var(--ink); }
.btn-ghost:hover, .btn-ghost.is-hover { background: var(--surface); border-color: var(--accent); color: var(--link); }
.btn-secondary { background: var(--surface-2); border-color: var(--line); }
.btn-secondary:hover, .btn-secondary.is-hover { background: var(--hover-neutral); border-color: var(--line-input); }
.btn-danger { background: var(--danger); color: var(--danger-ink); border-color: var(--danger); }
.btn-danger:hover, .btn-danger.is-hover { background: var(--danger-hover); }
.btn-danger-ghost { background: var(--surface); border-color: var(--danger-line); color: var(--danger); }
.btn-danger-ghost:hover, .btn-danger-ghost.is-hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-link { background: none; border-color: transparent; color: var(--link); padding: 0 4px; font-weight: 500; }
.btn-link:hover, .btn-link.is-hover { background: none; text-decoration: underline; color: var(--link-hover); }
.btn-chrome { background: transparent; color: var(--chrome-ink-2); border-color: var(--chrome-line); }
.btn-chrome:hover, .btn-chrome.is-hover { background: var(--chrome-hover); color: var(--chrome-ink-bright); }
.btn-sm { height: var(--h-btn-sm); padding: 0 10px; font-size: var(--fs-xs); }
.btn-lg { height: var(--h-btn-lg); padding: 0 18px; font-size: var(--fs); }
.btn-icon { width: 28px; height: 28px; padding: 0; background: transparent; border-color: transparent; color: var(--muted); }
.btn-icon .icon { width: 16px; height: 16px; }
.btn-icon:hover, .btn-icon.is-hover { background: var(--hover-neutral); color: var(--ink); }
.btn-icon.btn-sm { width: 24px; height: 24px; }
.btn-icon.btn-sm .icon { width: 13px; height: 13px; }
.btn-block { width: 100%; }
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: default; pointer-events: none; }
.btn.is-loading { pointer-events: none; }
.btn .chevron { width: 11px; height: 11px; margin-left: -2px; }
.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; margin-left: -1px; }
.btn-group > .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.btn-group > .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.btn-group > .btn.is-active { background: var(--chrome); color: var(--chrome-ink); border-color: var(--chrome); position: relative; z-index: 1; }

/* ---------- pola ---------- */
.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.field-label { font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.field-label .req { color: var(--danger); margin-left: 2px; }
.field-help { font-size: 11px; color: var(--muted); }
.field-error { font-size: 11px; color: var(--danger); }
.input, .select, .textarea {
  height: var(--h-input); padding: 0 8px; border: 1px solid var(--line-input); border-radius: var(--radius);
  background: var(--field); color: var(--ink); font-size: var(--fs); width: 100%; min-width: 0;
}
.input::placeholder, .textarea::placeholder { color: var(--label); }
.input:focus, .select:focus, .textarea:focus, .input.is-focus, .input-wrap.is-focus, .input-wrap:focus-within {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring);
}
.input.is-error, .input-wrap.is-error, .select.is-error, .textarea.is-error { border-color: var(--danger); }
.input.is-error:focus, .input-wrap.is-error:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 16%, transparent); }
.input:disabled, .select:disabled, .textarea:disabled, .input.is-disabled, .input-wrap.is-disabled { opacity: .55; background: var(--neutral-soft); cursor: default; }
.input[readonly], .input.is-readonly { background: var(--surface-2); border-style: dashed; }
.input.mono, .input.num { font-family: var(--mono); }
.input.num { text-align: right; }
.textarea { height: auto; min-height: 72px; padding: 6px 8px; resize: vertical; line-height: 1.45; }
.select { appearance: none; -webkit-appearance: none; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7787' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 12px; }
.input-wrap {
  display: flex; align-items: center; gap: 6px; height: var(--h-input); padding: 0 8px;
  border: 1px solid var(--line-input); border-radius: var(--radius); background: var(--field); min-width: 0;
}
.input-wrap .input { border: 0; background: none; height: 100%; padding: 0; box-shadow: none; flex: 1; }
.input-wrap .input:focus { box-shadow: none; }
.input-wrap .icon { width: 13px; height: 13px; color: var(--label); }
.input-wrap .affix { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.input-sm { height: 26px; font-size: var(--fs-sm); }
.search { width: var(--w-search); height: 26px; }
.search .input::placeholder { color: var(--label); }

/* Pole w gęstej tabeli: wygląda jak tekst, ramkę i strzałkę dostaje dopiero pod kursorem
   albo po wejściu klawiszem. Bez tego każdy wiersz wygląda jak formularz i nie widać,
   co jest wartością, a co kontrolką: przy czterdziestu wierszach to setka ramek naraz. */
.input-plain, .select-plain { border-color: transparent; background: transparent; }
.select-plain { background-image: none; padding-right: 8px; }
.input-plain:hover, .select-plain:hover,
tr:hover .input-plain, tr:hover .select-plain,
.is-hover .input-plain, .is-hover .select-plain { border-color: var(--line-input); background: var(--field); }
.select-plain:hover, tr:hover .select-plain, .is-hover .select-plain, .select-plain:focus {
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7787' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 12px;
}
.input-plain:focus, .select-plain:focus { border-color: var(--accent); background: var(--surface); }

/* checkbox, radio: natywne z kolorem akcentu, rozmiar 14px */
.checkbox, .radio { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: var(--fs); line-height: 1.35; }
.checkbox input, .radio input { width: 14px; height: 14px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.checkbox .desc, .radio .desc { display: block; font-size: 11px; color: var(--muted); }
.checkbox.is-disabled, .radio.is-disabled { opacity: .5; cursor: default; }
input[type="checkbox"].plain, input[type="radio"].plain { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }

/* przełącznik: 32×18, gałka 14 */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch-track { width: 32px; height: 18px; border-radius: 9px; background: var(--switch-off); position: relative; flex: 0 0 auto; transition: background .15s; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 7px; background: var(--surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--chrome-line-2) 20%, transparent); transition: left .15s; }
.switch.is-on .switch-track, .switch input:checked + .switch-track { background: var(--accent); }
.switch.is-on .switch-track::after, .switch input:checked + .switch-track::after { left: 16px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .desc { display: block; font-size: 11px; color: var(--muted); }
.switch.is-disabled { opacity: .5; cursor: default; }

/* ---------- badge, kropka, pigułka, chip, kbd ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 3px; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; font-weight: 600; white-space: nowrap; line-height: 1.4; background: var(--neutral-soft); color: var(--ink-2); }
.badge-ok { background: var(--accent-soft); color: var(--accent-text); }
.badge-warn { background: var(--warn-soft); color: var(--warn-text); }
.badge-danger { background: var(--danger-soft); color: var(--danger-text); }
.badge-info { background: var(--info-soft); color: var(--info-text); }
.badge-neutral { background: var(--neutral-soft); color: var(--ink-2); }
.badge-violet { background: var(--violet-soft); color: var(--violet-text); }
.badge-chrome { background: var(--chrome-accent-bg); color: var(--chrome-accent-text); }
.badge-outline { background: transparent; border: 1px solid var(--line-input); color: var(--muted); }
.badge-count { min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; justify-content: center; font-size: 10px; letter-spacing: 0; text-transform: none; background: var(--danger); color: var(--danger-ink); }
.badge-count.is-warn { background: var(--warn); }
.badge-count.is-neutral { background: var(--neutral-dot); }
.badge-count.is-accent { background: var(--accent); color: var(--accent-ink); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 4px; background: var(--neutral-dot); flex: 0 0 auto; }
.dot-ok { background: var(--accent); }
.dot-warn { background: var(--warn); }
.dot-danger { background: var(--danger); }
.dot-info { background: var(--info); }
.dot-neutral { background: var(--neutral-dot); }
.dot-violet { background: var(--violet); }
.dot-lg { width: 9px; height: 9px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); color: var(--ink-2); background: transparent; border: 1px solid transparent; cursor: pointer; white-space: nowrap; user-select: none; }
.pill:hover, .pill.is-hover { background: var(--hover-neutral); }
.pill.is-active { background: var(--chrome); color: var(--chrome-ink); }
.pill .count { font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.pill.is-active .count { color: var(--chrome-muted); }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.chip .chip-x { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; color: var(--label); cursor: pointer; margin-right: -3px; }
.chip .chip-x:hover { background: var(--line); color: var(--ink); }
.chip .chip-x .icon { width: 10px; height: 10px; }
.chip.is-selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.kbd { display: inline-block; padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; background: var(--surface-2); font: 11px var(--mono); color: var(--ink-2); line-height: 1.3; }
.kbd-chrome { border-color: var(--chrome-line); background: var(--chrome-3); color: var(--chrome-ink-2); }

/* ---------- avatar ---------- */
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--chrome-accent-bg); color: var(--chrome-accent-text); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; letter-spacing: .3px; user-select: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xs { width: 16px; height: 16px; font-size: 7.5px; }
.avatar-sm { width: 20px; height: 20px; font-size: 9px; }
.avatar-md { width: 28px; height: 28px; }
.avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.avatar-xl { width: 56px; height: 56px; font-size: 20px; }
.avatar-square { border-radius: var(--radius); }
.avatar-light { background: var(--accent-soft); color: var(--accent-text); }
.avatar-neutral { background: var(--neutral-soft); color: var(--muted); }

/* ---------- menu ---------- */
.menu { min-width: 180px; padding: 4px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); font-size: var(--fs-sm); color: var(--ink); }
.menu-item { display: flex; align-items: center; gap: 8px; height: var(--h-menu-item); padding: 0 12px; cursor: pointer; white-space: nowrap; color: inherit; text-decoration: none; }
.menu-item:hover, .menu-item.is-hover, .menu-item.is-active { background: var(--hover-neutral); text-decoration: none; color: var(--ink); }
.menu-item .icon { width: 16px; height: 16px; color: var(--label); }
.menu-item:hover .icon, .menu-item.is-hover .icon { color: var(--ink-2); }
.menu-item .menu-shortcut { margin-left: auto; padding-left: 24px; font-family: var(--mono); font-size: 11px; color: var(--label); }
.menu-item .menu-arrow { margin-left: auto; width: 10px; height: 10px; color: var(--label); }
.menu-item.is-danger { color: var(--danger); }
.menu-item.is-danger .icon { color: var(--danger); }
.menu-item.is-danger:hover, .menu-item.is-danger.is-hover { background: var(--danger-soft); }
.menu-item.is-disabled { opacity: .45; cursor: default; pointer-events: none; }
.menu-item .menu-check { width: 14px; height: 14px; color: var(--accent-text); visibility: hidden; }
.menu-item.is-checked .menu-check { visibility: visible; }
.menu-item .menu-radio { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-input); flex: 0 0 auto; }
.menu-item.is-checked .menu-radio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 45%, transparent 50%); }
.menu-sep { height: 1px; margin: 4px 0; background: var(--line-3); }
.menu-head { padding: 6px 12px 2px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.menu-footer { padding: 6px 12px 2px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line-3); margin-top: 4px; }

/* ---------- karta ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.card-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--line-3); font-size: 12.5px; font-weight: 600; }
.card-head .label { font-weight: 400; }
.card-body { padding: 12px 14px; }
.card-foot { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--line-3); background: var(--surface-3); border-radius: 0 0 var(--radius-lg) var(--radius-lg); font-size: var(--fs-sm); color: var(--muted); }
.card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.card.is-hover { border-color: var(--line-input); box-shadow: var(--shadow); }

/* ---------- siatka etykieta–wartość ---------- */
.dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; margin: 0; }
.dl-1 { grid-template-columns: 1fr; }
.dl-3 { grid-template-columns: 1fr 1fr 1fr; }
.dl dt { font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); margin: 0; }
.dl dd { margin: 2px 0 0; font-size: var(--fs); color: var(--ink); min-width: 0; }
.dl dd.num, .dl dd.mono { font-family: var(--mono); text-align: left; }
.dl .span-2 { grid-column: 1 / -1; }

/* ---------- zakładki ---------- */
.tabs { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-2); min-width: 0; }
.tab { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: var(--fs-xs); color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; user-select: none; text-decoration: none; }
.tab:hover, .tab.is-hover { color: var(--ink); text-decoration: none; }
.tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tab .count { font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.tabs-equal .tab { flex: 1; justify-content: center; }
.tabs-chrome { border-bottom-color: var(--chrome-line); }
.tabs-chrome .tab { color: var(--chrome-dim); }
.tabs-chrome .tab.is-active { color: var(--chrome-ink-bright); }

/* ---------- tabela (prawdziwy <table>) ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--surface); }
.table th { height: var(--h-thead); padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--head-ink); text-align: left; white-space: nowrap; }
.table td { height: var(--h-row); padding: 0 12px; border-bottom: 1px solid var(--line-row); white-space: nowrap; vertical-align: middle; }
/* Pasy co drugi wiersz. Włączaj w tabelach szerszych niż ~1000px albo mających ponad sześć kolumn:
   przy długim wierszu oko śledzi pas, nie kreskę, i nie zjeżdża do sąsiedniego rekordu. */
.table-zebra tbody tr:nth-child(even) td { background: var(--zebra); }
.table tbody tr { cursor: default; }
.table tbody tr:hover td, .table tbody tr.is-hover td { background: var(--hover); }
.table tbody tr.is-selected td { background: var(--selected); }
.table tbody tr.is-muted td { color: var(--label); }
.table .num, .table th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table th.num { font-family: var(--sans); }
.table .code { font-family: var(--mono); font-weight: 600; }
.table .cell-muted { color: var(--muted); }
.table-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.table-foot { display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 12px; background: var(--surface-2); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.table-foot .num { margin-left: auto; color: var(--ink); }

/* ---------- pusty stan, szkielet, spinner, postęp ---------- */
.empty { padding: 28px 14px; text-align: center; color: var(--label); font-size: var(--fs-sm); }
.empty .btn { margin-top: 10px; }
.empty-title { color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }
.skeleton { display: block; height: 10px; border-radius: 3px; background: var(--line-3); animation: k-pulse 1.4s ease-in-out infinite; }
@keyframes k-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: k-spin .8s linear infinite; flex: 0 0 auto; }
.spinner-sm { width: 12px; height: 12px; border-width: 1.5px; }
.spinner-lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes k-spin { to { transform: rotate(360deg); } }
.progress { height: 6px; border-radius: 3px; background: var(--line-3); overflow: hidden; flex: 1; min-width: 60px; }
.progress-fill { height: 100%; border-radius: 3px; background: var(--accent); }
.progress-fill.is-warn { background: var(--warn); }
.progress-fill.is-danger { background: var(--danger); }
.progress-thin { height: 4px; }
.progress-thick { height: 10px; border-radius: 5px; }

/* ---------- linia rekordu: nagłówek z kodem (używany przez inspector, kartę, modal) ---------- */
.record-head { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: var(--chrome); color: var(--chrome-ink); }
.record-head .code { font-family: var(--mono); font-size: 20px; font-weight: 700; line-height: 1.1; }
.record-head .sub { font-size: var(--fs-xs); color: var(--chrome-muted); margin-top: 3px; }

/* ---------- nakładka i okno (baza dla modali; modal.css rozszerza) ---------- */
.overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 50; }
.dialog { background: var(--surface); border-radius: 6px; box-shadow: var(--shadow-lg); width: 440px; max-width: calc(100% - 32px); max-height: calc(100% - 32px); display: flex; flex-direction: column; overflow: hidden; }
.dialog-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line-3); }
.dialog-body { padding: 14px 16px; overflow: auto; font-size: var(--fs); color: var(--ink-2); }
.dialog-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-2); background: var(--surface-3); }


/* ===== titlebar: Pasek okna ===== */
/* titlebar: pasek okna programu na pulpit (decorations:false w Tauri). Wysokość 34px, tło chrome.
   z-index 60 stawia pasek NAD nakładką okna dialogowego (.overlay ma 50): w każdym programie
   na Windowsie okno z otwartym modalem da się zminimalizować i zamknąć, a narzędzia w pasku
   zostają pod ręką. Nakładka dalej przykrywa całą treść pod paskiem, więc modal pozostaje
   modalem; zmienia się tylko to, że pasek okna nie znika pod przyciemnieniem. */
.titlebar { position: relative; z-index: 60; height: var(--h-titlebar); display: flex; align-items: center; gap: 10px; padding: 0 0 0 10px; background: var(--chrome); color: var(--chrome-ink); user-select: none; -webkit-user-select: none; border-bottom: 1px solid var(--chrome-line-2); font-size: 13px; white-space: nowrap; }
.titlebar-mark { width: 20px; height: 20px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.titlebar-app { font-weight: 600; font-size: 13px; }
.titlebar-sep { width: 1px; height: 16px; background: var(--chrome-line); margin: 0 4px; flex: 0 0 1px; }
.titlebar-title { font-size: 12.5px; color: var(--chrome-ink-2); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.titlebar-title.is-centered { flex: 1; text-align: center; }
.titlebar-grow { flex: 1; min-width: 0; height: 100%; }
.titlebar-context { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px; border-radius: 4px; font-size: 11.5px; color: var(--chrome-muted); cursor: pointer; }
.titlebar-context:hover, .titlebar-context.is-hover { background: var(--chrome-hover); }
.titlebar-context-key { color: var(--chrome-ink-2); }
.titlebar-context-val { color: var(--chrome-ink); }
.titlebar-context .icon { width: 11px; height: 11px; color: var(--chrome-dim); }
.titlebar-meta { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 12px; font-size: 11.5px; color: var(--chrome-ink-2); }
.titlebar-meta .icon { width: 14px; height: 14px; }
.titlebar-controls { display: flex; height: 100%; margin-left: auto; flex: 0 0 auto; }
.titlebar-btn { width: 44px; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--chrome-dim); cursor: pointer; }
.titlebar-btn:hover, .titlebar-btn.is-hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.titlebar-btn .icon { width: 12px; height: 12px; }
.titlebar-close { width: 46px; }
.titlebar-close:hover, .titlebar-close.is-hover { background: var(--danger); color: var(--danger-ink); }
.titlebar-icon-btn { position: relative; width: 34px; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--chrome-dim); cursor: pointer; }
.titlebar-icon-btn:hover, .titlebar-icon-btn.is-hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.titlebar-icon-btn .icon { width: 16px; height: 16px; }
.titlebar-badge { position: absolute; top: 5px; right: 4px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--danger); color: var(--danger-ink); font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center; line-height: 1; }
.titlebar-user { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 10px; cursor: pointer; }
.titlebar-user:hover, .titlebar-user.is-hover { background: var(--chrome-hover); }

/* macOS: sygnalizacja z lewej, tytuł na środku */
.titlebar-mac { padding-left: 12px; }
.titlebar-lights { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.titlebar-light { width: 12px; height: 12px; border-radius: 50%; }
.titlebar-light-close { background: #ff5f57; }  /* literal: kolor systemowy macOS */
.titlebar-light-min { background: #febc2e; }  /* literal: kolor systemowy macOS */
.titlebar-light-max { background: #28c840; }  /* literal: kolor systemowy macOS */
.titlebar.is-inactive .titlebar-light { background: #4a5266; }  /* literal: kolor systemowy macOS bez fokusu */

/* Linux (GNOME): przyciski w kółkach z prawej */
.titlebar-round { width: 22px; height: 22px; border-radius: 50%; background: var(--chrome-3); color: var(--chrome-ink-2); display: flex; align-items: center; justify-content: center; margin: 0 4px; cursor: pointer; }
.titlebar-round:hover, .titlebar-round.is-hover { background: var(--chrome-hover); color: var(--chrome-ink-bright); }
.titlebar-round .icon { width: 11px; height: 11px; }
.titlebar-rounds { display: flex; align-items: center; margin-left: auto; padding-right: 6px; height: 100%; }

/* menu w pasku */
.titlebar-menu { display: flex; height: 100%; }
.titlebar-menu-item { display: flex; align-items: center; padding: 0 9px; font-size: 12px; color: var(--chrome-ink-2); cursor: pointer; }
.titlebar-menu-item:hover, .titlebar-menu-item.is-hover, .titlebar-menu-item.is-active { background: var(--chrome-hover); color: var(--chrome-ink-bright); }

/* szukajka na środku */
.titlebar-search { display: flex; align-items: center; gap: 6px; width: 360px; max-width: 40%; height: 24px; padding: 0 8px; border-radius: 4px; background: var(--chrome-3); border: 1px solid var(--chrome-line); color: var(--chrome-muted); font-size: 11.5px; cursor: text; }
.titlebar-search .icon { width: 12px; height: 12px; }
.titlebar-search .kbd-chrome { margin-left: auto; }

/* karty dokumentów */
.titlebar-tabs { display: flex; align-items: flex-end; align-self: flex-end; height: 100%; gap: 2px; min-width: 0; padding-top: 4px; }
.titlebar-tab { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 10px; border-radius: 5px 5px 0 0; font-size: 11.5px; color: var(--chrome-dim); max-width: 180px; cursor: pointer; }
.titlebar-tab:hover, .titlebar-tab.is-hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.titlebar-tab.is-active { background: var(--canvas); color: var(--ink); }
.titlebar-tab .icon { width: 12px; height: 12px; }
.titlebar-tab-x { width: 16px; height: 16px; border-radius: 3px; display: flex; align-items: center; justify-content: center; color: inherit; opacity: .6; }
.titlebar-tab-x:hover { background: color-mix(in srgb, var(--chrome-line-2) 12%, transparent); opacity: 1; }
.titlebar-tab-x .icon { width: 10px; height: 10px; }
.titlebar-tab-add { width: 26px; height: 26px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--chrome-dim); margin-bottom: 1px; cursor: pointer; }
.titlebar-tab-add:hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.titlebar-tab-add .icon { width: 12px; height: 12px; }

/* okruszki w pasku */
.titlebar-crumbs { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--chrome-muted); min-width: 0; }
.titlebar-crumb { color: var(--chrome-muted); cursor: pointer; }
.titlebar-crumb:hover { color: var(--chrome-ink); }
.titlebar-crumb.is-active { color: var(--chrome-ink); cursor: default; }
.titlebar-crumb-sep { color: var(--chrome-label); }

/* dokument z niezapisanymi zmianami */
.titlebar-dirty { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: 0 0 auto; }
.titlebar-doc { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--chrome-ink); min-width: 0; }
.titlebar-doc .icon { width: 13px; height: 13px; color: var(--chrome-dim); }

/* postęp zadania w tle: 2px na dolnej krawędzi */
.titlebar-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--chrome-line); }
.titlebar-progress-fill { height: 100%; background: var(--accent); }
.titlebar-task { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--chrome-muted); padding: 0 10px; }
.titlebar-task .spinner { border-color: var(--chrome-line); border-top-color: var(--accent); }

/* synchronizacja */
.titlebar-sync { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; font-size: 11px; color: var(--chrome-muted); }
.titlebar-sync .icon { width: 13px; height: 13px; }
.titlebar-sync.is-offline { color: var(--warn); }
.titlebar-sync.is-syncing .icon { animation: k-spin 1.2s linear infinite; }

/* nieaktywne okno */
.titlebar.is-inactive { background: var(--chrome-inactive); }
.titlebar.is-inactive .titlebar-app, .titlebar.is-inactive .titlebar-title, .titlebar.is-inactive .titlebar-context-val, .titlebar.is-inactive .titlebar-meta { color: var(--chrome-label); }
.titlebar.is-inactive .titlebar-mark { opacity: .55; }
.titlebar.is-inactive .titlebar-btn { color: var(--chrome-label); }

/* zwarty 28px */
.titlebar-compact { height: 28px; font-size: 12px; gap: 8px; }
.titlebar-compact .titlebar-mark { width: 16px; height: 16px; font-size: 10px; border-radius: 4px; }
.titlebar-compact .titlebar-btn { width: 36px; }
.titlebar-compact .titlebar-close { width: 38px; }
.titlebar-compact .titlebar-btn .icon { width: 11px; height: 11px; }

/* nakładka nad treścią */
.titlebar-overlay { position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(color-mix(in srgb, var(--chrome) 78%, transparent), color-mix(in srgb, var(--chrome) 0%, transparent)); border-bottom: 0; }
.titlebar-overlay .titlebar-btn:hover { background: color-mix(in srgb, var(--chrome-ink-bright) 12%, transparent); }
.titlebar-stage { position: relative; height: 160px; background: radial-gradient(circle at 30% 60%, #2f6f8f, #141b2d 70%); overflow: hidden; }  /* literal: sceneria demonstracyjna pod paskiem nakładkowym */

/* okno dialogowe: jasne, tylko zamknij */
.titlebar-dialog { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); height: 38px; padding-left: 16px; }
.titlebar-dialog .titlebar-title { color: var(--ink); font-weight: 600; font-size: 13px; }
.titlebar-dialog .titlebar-btn { color: var(--muted); }
.titlebar-dialog .titlebar-btn:hover, .titlebar-dialog .titlebar-btn.is-hover { background: var(--hover-neutral); color: var(--ink); }
.titlebar-dialog .titlebar-close:hover, .titlebar-dialog .titlebar-close.is-hover { background: var(--danger); color: var(--danger-ink); }

/* ---------- uzupelnienia z dziennika zapytan ---------- */

/* przypięcie okna "zawsze na wierzchu": pinezka w grupie przycisków, stan kolorem */
.titlebar-pair { display: flex; flex-direction: column; gap: 10px; }
.titlebar-pin { color: var(--chrome-dim); }
.titlebar-pin .icon { width: 13px; height: 13px; }
.titlebar-pin.is-active { background: var(--chrome-accent-bg); color: var(--chrome-accent-text); }
.titlebar-pin.is-active:hover, .titlebar-pin.is-active.is-hover { background: var(--chrome-3); color: var(--chrome-accent-text); }
.titlebar-pin-note { margin-left: 2px; }

/* ---------- przycisk narzędzia deweloperskiego w pasku okna (titlebar-devtool) ---------- */
.titlebar-devtool { position: relative; color: var(--chrome-dim); }
.titlebar-devtool .icon { width: 14px; height: 14px; }
.titlebar-devtool.is-active { background: var(--chrome-accent-bg); color: var(--chrome-accent-text); }
.titlebar-devtool.is-active:hover, .titlebar-devtool.is-active.is-hover { background: var(--chrome-3); color: var(--chrome-accent-text); }
.titlebar-devtool-dot { position: absolute; right: 10px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--chrome); }
.titlebar-devtool-note { margin-left: 2px; }


/* ===== menubar: Pasek menu ===== */
/* menubar: jasny pasek menu 26px pod paskiem okna; rozwinięcia korzystają z .menu z base.css. */

.menubar {
  position: relative; display: flex; align-items: center;
  height: var(--h-menubar); padding: 0 4px;
  background: var(--surface); border-bottom: 1px solid var(--line-2);
  color: var(--ink-2); font-size: 12px; white-space: nowrap;
  user-select: none; -webkit-user-select: none;
}

/* pozycja paska: kotwica dla rozwinięcia, pełna wysokość paska */
.menubar-drop { position: relative; display: flex; align-items: center; height: 100%; }
.menubar-item { display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 9px; border-radius: 3px; color: var(--ink-2); cursor: pointer; }
.menubar-item:hover, .menubar-item.is-hover { background: var(--hover-neutral); color: var(--ink); }
.menubar-drop.is-open > .menubar-item { background: var(--selected); color: var(--accent-text); }
.menubar-item.is-disabled { color: var(--label); pointer-events: none; }

/* rozwinięcie: .menu z base.css, przyklejone pod pozycją */
.menubar-drop > .menu { display: none; position: absolute; top: 100%; left: 0; margin-top: 1px; min-width: 224px; z-index: 30; }
.menubar-drop.is-open > .menu { display: block; }
.menubar-drop > .menu.menubar-menu-wide { min-width: 340px; }

/* podmenu wysuwane w bok (hamburger, grupy poleceń) */
.menubar-sub { position: relative; display: block; }
.menubar-submenu { display: none; position: absolute; top: -5px; left: 100%; margin-left: 2px; min-width: 210px; z-index: 31; }
.menubar-sub.is-open > .menubar-submenu { display: block; }

/* litery dostępu (Alt): podkreślenie pojawia się dopiero po wciśnięciu Alt */
.menubar-key { text-decoration: none; }
.is-alt .menubar-key { text-decoration: underline; text-underline-offset: 2px; }

/* hamburger: całe menu pod jednym przyciskiem */
.menubar-burger { display: flex; align-items: center; justify-content: center; width: 24px; height: 20px; border-radius: 3px; color: var(--ink-2); cursor: pointer; }
.menubar-burger .icon { width: 15px; height: 15px; }
.menubar-burger:hover, .menubar-burger.is-hover { background: var(--hover-neutral); color: var(--ink); }
.menubar-drop.is-open > .menubar-burger { background: var(--selected); color: var(--accent-text); }

/* dodatki paska: tytuł dokumentu, kreska, prawa strona */
.menubar-title { font-size: 12px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menubar-sep { width: 1px; height: 14px; background: var(--line); margin: 0 5px; flex: 0 0 1px; }
.menubar-right { display: flex; align-items: center; gap: 2px; margin-left: auto; padding-left: 8px; }

/* lista ostatnich plików: numer dostępu z lewej, ścieżka z prawej */
.menubar-num { width: 16px; flex: 0 0 auto; font-family: var(--mono); font-size: 11px; color: var(--label); text-align: right; }
.menubar-path { margin-left: auto; padding-left: 20px; max-width: 190px; font-size: 11px; color: var(--label); overflow: hidden; text-overflow: ellipsis; }

/* wariant ciemny: menu wtopione w pasek okna (34px, tło chrome) */
.menubar-chrome { height: var(--h-titlebar); padding: 0 0 0 10px; background: var(--chrome); border-bottom: 1px solid var(--chrome-line-2); color: var(--chrome-ink-2); font-size: 12px; }
.menubar-chrome .menubar-item { color: var(--chrome-ink-2); }
.menubar-chrome .menubar-item:hover, .menubar-chrome .menubar-item.is-hover { background: var(--chrome-hover); color: var(--chrome-ink-bright); }
.menubar-chrome .menubar-drop.is-open > .menubar-item { background: var(--chrome-3); color: var(--chrome-ink-bright); }
.menubar-chrome .menubar-title { color: var(--chrome-muted); padding-right: 12px; }
.menubar-chrome .menubar-sep { background: var(--chrome-line); height: 16px; }
.menubar-mark { width: 20px; height: 20px; margin-right: 8px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.menubar-app { margin-right: 2px; font-size: 12.5px; font-weight: 600; color: var(--chrome-ink); }
.menubar-drag { flex: 1; min-width: 0; height: 100%; }

/* przyciski okna w wariancie ciemnym */
.menubar-win { display: flex; height: 100%; margin-left: auto; flex: 0 0 auto; }
.menubar-win-btn { width: 44px; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--chrome-dim); cursor: pointer; }
.menubar-win-btn .icon { width: 12px; height: 12px; }
.menubar-win-btn:hover, .menubar-win-btn.is-hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.menubar-win-close { width: 46px; }
.menubar-win-close:hover, .menubar-win-close.is-hover { background: var(--danger); color: var(--danger-ink); }

/* ---------- uzupełnienia ---------- */

/* dodatek dosunięty do prawej krawędzi pozycji menu: badge wersji przy „sprawdź aktualizacje” */
.menubar-tail { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 18px; }


/* ===== statusbar: Pasek stanu ===== */
/* statusbar: dolny pasek stanu okna. Wysokość 26px, tło chrome, segmenty 11px rozdzielone kreską. */
.statusbar { display: flex; align-items: center; height: var(--h-statusbar); background: var(--chrome); color: var(--chrome-muted); border-top: 1px solid var(--chrome-line-2); font-size: 11px; line-height: 1; white-space: nowrap; overflow: hidden; user-select: none; -webkit-user-select: none; }
.statusbar-item { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; min-width: 0; }
.statusbar-item .icon { width: 12px; height: 12px; color: var(--chrome-dim); }
.statusbar-item .mono, .statusbar-item .num { font-size: 10.5px; color: var(--chrome-ink-2); }
.statusbar-item .badge { padding: 1px 5px; }

/* segment klikalny: hover jak w pasku okna, wersja aktywna zostaje wciśnięta */
.statusbar-btn { cursor: pointer; }
.statusbar-btn:hover, .statusbar-btn.is-hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.statusbar-btn:hover .icon, .statusbar-btn.is-hover .icon { color: var(--chrome-ink-2); }
.statusbar-btn.is-active { background: var(--chrome-3); color: var(--chrome-ink); }

/* przycisk samą ikoną: zoom, przełącznik widoku */
.statusbar-icon-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 100%; color: var(--chrome-dim); cursor: pointer; flex: 0 0 auto; }
.statusbar-icon-btn:hover, .statusbar-icon-btn.is-hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.statusbar-icon-btn.is-active { background: var(--chrome-3); color: var(--chrome-accent-text); }
.statusbar-icon-btn .icon { width: 13px; height: 13px; }

/* kreski: krótka między informacjami, pełna między klikalnymi segmentami */
.statusbar-sep { width: 1px; height: 12px; background: var(--chrome-line); flex: 0 0 1px; }
.statusbar-div { width: 1px; height: 100%; background: var(--chrome-line); flex: 0 0 1px; }
.statusbar-grow { flex: 1; min-width: 8px; height: 100%; }

/* etykieta i wartość w jednym segmencie */
.statusbar-key { color: var(--chrome-label); }
.statusbar-val { color: var(--chrome-ink-2); }
.statusbar-strong { color: var(--chrome-ink); font-weight: 600; }

/* sygnały: kolor niesie znaczenie, piktogram tylko doprecyzowuje */
.statusbar-item.is-ok, .statusbar-item.is-ok .icon { color: var(--chrome-accent-text); }
.statusbar-item.is-warn, .statusbar-item.is-warn .icon { color: var(--warn); }
.statusbar-item.is-danger { background: var(--danger); color: var(--danger-ink); }
.statusbar-item.is-danger .icon, .statusbar-item.is-danger .statusbar-val { color: var(--danger-ink); }
.statusbar-btn.is-danger:hover, .statusbar-btn.is-danger.is-hover { background: var(--danger-hover); color: var(--danger-ink); }
.statusbar-item.is-accent { background: var(--chrome-accent-bg); color: var(--chrome-accent-text); }
.statusbar-item.is-accent .icon, .statusbar-item.is-accent .statusbar-val { color: var(--chrome-accent-text); }
.statusbar-btn.is-accent:hover, .statusbar-btn.is-accent.is-hover { background: var(--chrome-accent-bg); color: var(--chrome-ink-bright); }
.statusbar.is-offline { border-top-color: var(--warn); }

/* postęp zadania w tle: cienki pasek w segmencie, nie na całą szerokość okna */
.statusbar-progress { width: 160px; height: 4px; border-radius: 2px; background: var(--chrome-line); overflow: hidden; flex: 0 0 auto; }
.statusbar-progress-fill { height: 100%; border-radius: 2px; background: var(--accent); }
.statusbar-progress.is-warn .statusbar-progress-fill { background: var(--warn); }
.statusbar .spinner { border-color: var(--chrome-line); border-top-color: var(--accent); }

/* podpowiedź gestu: skrót + czynność */
.statusbar-hint { display: flex; align-items: center; gap: 5px; padding: 0 8px; color: var(--chrome-dim); }
.statusbar-hint .kbd-chrome { padding: 0 4px; border-bottom-width: 1px; font-size: 10px; line-height: 15px; }

/* zoom: minus, wartość, plus */
.statusbar-zoom { display: flex; align-items: center; height: 100%; }
.statusbar-zoom-val { min-width: 42px; text-align: center; font-family: var(--mono); font-size: 10.5px; color: var(--chrome-ink-2); }

/* uchwyt zmiany rozmiaru okna w prawym dolnym rogu */
.statusbar-grip { width: 14px; height: 14px; margin: 0 3px 0 2px; flex: 0 0 auto; cursor: nwse-resize; background-image: repeating-linear-gradient(-45deg, var(--chrome-line) 0 1px, transparent 1px 3px); }

/* wersja minimalna 22px do okien pomocniczych */
.statusbar.is-compact { height: 22px; font-size: 10.5px; }
.statusbar.is-compact .statusbar-item { padding: 0 8px; gap: 5px; }
.statusbar.is-compact .statusbar-item .icon { width: 11px; height: 11px; }
.statusbar.is-compact .statusbar-sep { height: 10px; }
.statusbar-item.is-syncing .icon { animation: k-spin 1.2s linear infinite; color: var(--chrome-accent-text); }

/* ---------- uzupełnienia ---------- */

/* stopka z listą zadań rozwijaną w górę: pasek zostaje na dole ramki, panel siada nad nim */
.statusbar-stack { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.statusbar-tasks { width: 340px; align-self: flex-start; margin: 0 0 4px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; font-size: var(--fs-sm); color: var(--ink); }
.statusbar-tasks-head { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; background: var(--surface-2); border-bottom: 1px solid var(--line-3); font-size: var(--fs-xs); }
.statusbar-tasks-row { padding: 7px 10px; border-bottom: 1px solid var(--line-3); }
.statusbar-tasks-row .icon { width: 13px; height: 13px; color: var(--label); }
.statusbar-tasks-bar { margin-top: 5px; gap: 8px; }
.statusbar-tasks-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }
.statusbar-tasks-row.is-paused .progress-fill { background: var(--neutral-dot); }
.statusbar-tasks-row.is-done { color: var(--muted); }
.statusbar-tasks-foot { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; background: var(--surface-3); border-top: 1px solid var(--line-3); font-size: var(--fs-xs); }
.statusbar-tasks-link { color: var(--link); cursor: pointer; }
.statusbar-tasks-link:hover { text-decoration: underline; }


/* ===== sidenav: Lewe menu ===== */
/* sidenav: lewe menu programu - ciemna szyna ikon (rail) i menu boczne z etykietami (sidenav). */

/* ---------- szyna ikon: ciemna kolumna 84px, pozycja 46px ---------- */
.rail { width: var(--w-rail); flex: 0 0 var(--w-rail); height: 100%; display: flex; flex-direction: column; padding-top: 4px; background: var(--chrome-2); border-right: 1px solid var(--chrome-line-2); color: var(--chrome-dim); font-size: 10.5px; user-select: none; -webkit-user-select: none; overflow: hidden; }
.rail-mark { width: 24px; height: 24px; margin: 2px auto 6px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rail-item { position: relative; flex: 0 0 auto; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; letter-spacing: .2px; color: var(--chrome-dim); text-decoration: none; cursor: pointer; }
.rail-item .icon { width: 17px; height: 17px; }
.rail-item:hover, .rail-item.is-hover { background: var(--chrome-hover); color: var(--chrome-ink-bright); text-decoration: none; }
.rail-item.is-active { background: var(--chrome-3); color: var(--chrome-ink-bright); box-shadow: inset 3px 0 0 var(--accent); }
.rail-item.is-disabled { color: var(--chrome-label); cursor: default; }
.rail-label { max-width: 100%; padding: 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-group { padding: 10px 0 3px 10px; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--chrome-label); }
.rail-group.is-first { padding-top: 4px; }
.rail-sep { height: 1px; margin: 6px 10px; background: var(--chrome-line); }
.rail-spacer { flex: 1; min-height: 6px; }
.rail-foot { flex: 0 0 auto; padding: 10px 0 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; border-top: 1px solid var(--chrome-line); }
.rail-role { font-size: 10px; color: var(--chrome-label); }
.rail-badge { position: absolute; top: 5px; right: 26px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: var(--danger-ink); font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center; line-height: 1; }
.rail-badge.is-warn { background: var(--warn); color: var(--warn-ink); }
.rail-badge.is-quiet { background: var(--chrome-3); color: var(--chrome-ink-2); }
.rail-dot { position: absolute; top: 9px; right: 32px; width: 7px; height: 7px; border-radius: 4px; background: var(--accent); }

/* szyna wąska 48px: same ikony, podpis w dymku */
.rail-slim { width: var(--w-rail-slim); flex: 0 0 var(--w-rail-slim); overflow: visible; }
.rail-slim .rail-item { height: 40px; gap: 0; }
.rail-slim .rail-item .icon { width: 18px; height: 18px; }
.rail-slim .rail-badge { top: 7px; right: 9px; }
.rail-slim .rail-dot { top: 7px; right: 12px; }
.rail-tip { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 10px; border-radius: var(--radius); background: var(--chrome-3); border: 1px solid var(--chrome-line); color: var(--chrome-ink); font-size: 11.5px; letter-spacing: 0; white-space: nowrap; box-shadow: var(--shadow); z-index: 6; }

/* pojemnik: szyna + treść albo szyna + panel drugiego poziomu */
.rail-wrap { position: relative; display: flex; height: 100%; min-width: 0; }
.rail-stage { flex: 1; min-width: 0; background: var(--canvas); border-left: 1px solid var(--line); }

/* ---------- menu boczne 220px z etykietami ---------- */
.sidenav { width: var(--w-sidenav); flex: 0 0 var(--w-sidenav); height: 100%; display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-right: 1px solid var(--line); color: var(--ink-2); font-size: 13px; user-select: none; -webkit-user-select: none; overflow: hidden; }
.sidenav-scroll { flex: 1; min-height: 0; overflow: auto; padding: 6px 0; }
.sidenav-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--line-3); }
.sidenav-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; }
.sidenav-brand .icon { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.sidenav-mark { width: 22px; height: 22px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sidenav-foot { flex: 0 0 auto; padding: 5px 0; border-top: 1px solid var(--line-3); }
.sidenav-sep { height: 1px; margin: 6px 12px; background: var(--line-3); }
.sidenav-search { flex: 0 0 auto; padding: 8px 10px; border-bottom: 1px solid var(--line-3); }
.sidenav-group { display: flex; align-items: center; gap: 6px; padding: 12px 12px 4px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.sidenav-group.is-first { padding-top: 6px; }
.sidenav-item { position: relative; display: flex; align-items: center; gap: 9px; height: var(--h-row); padding: 0 12px; color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.sidenav-item .icon { width: 16px; height: 16px; color: var(--label); flex: 0 0 auto; }
.sidenav-item:hover, .sidenav-item.is-hover { background: var(--hover-neutral); color: var(--ink); text-decoration: none; }
.sidenav-item:hover .icon, .sidenav-item.is-hover .icon { color: var(--ink-2); }
.sidenav-item.is-active { background: var(--selected); color: var(--accent-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.sidenav-item.is-active .icon { color: var(--accent-text); }
.sidenav-item.is-disabled { color: var(--label); cursor: default; }
.sidenav-item.is-disabled .icon { color: var(--line-input); }
.sidenav-item.is-unread { font-weight: 600; color: var(--ink); }
.sidenav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidenav-tail { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.sidenav-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--label); }
.sidenav-count.is-strong { color: var(--danger); font-weight: 600; }
.sidenav-tail .sidenav-count { margin-left: 0; }
.sidenav-item.is-active .sidenav-count { color: var(--accent-text); }
.sidenav-item .sidenav-caret { margin-left: auto; width: 11px; height: 11px; color: var(--label); }
.sidenav-item .sidenav-pin { width: 12px; height: 12px; color: var(--line-input); }
.sidenav-item:hover .sidenav-pin { color: var(--muted); }
.sidenav-item .sidenav-grip { width: 12px; height: 12px; color: var(--line-2); cursor: grab; margin-left: -4px; }
.sidenav-item:hover .sidenav-grip, .sidenav-item.is-hover .sidenav-grip { color: var(--muted); }
.sidenav-item.is-dragging { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.sidenav-drop { height: 2px; margin: 1px 10px; border-radius: 1px; background: var(--accent); }

/* podpozycje (drugi poziom rozwinięty w miejscu) */
.sidenav-sub { padding-bottom: 4px; }
.sidenav-subitem { display: flex; align-items: center; gap: 8px; height: var(--h-menu-item); padding: 0 12px 0 37px; font-size: 12.5px; color: var(--muted); text-decoration: none; cursor: pointer; white-space: nowrap; }
.sidenav-subitem:hover, .sidenav-subitem.is-hover { background: var(--hover-neutral); color: var(--ink); text-decoration: none; }
.sidenav-subitem.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.sidenav-subitem .sidenav-count { font-size: 11px; }

/* drzewo folderów */
.sidenav-tree { padding: 4px 0; }
.sidenav-node { display: flex; align-items: center; gap: 6px; height: var(--h-menu-item); padding-right: 10px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.sidenav-node:hover, .sidenav-node.is-hover { background: var(--hover-neutral); }
.sidenav-node.is-selected { background: var(--selected); color: var(--accent-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.sidenav-node .icon { width: 15px; height: 15px; color: var(--label); flex: 0 0 auto; }
.sidenav-node.is-selected .icon { color: var(--accent-text); }
.sidenav-twist { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; color: var(--label); flex: 0 0 auto; }
.sidenav-twist .icon { width: 11px; height: 11px; }
.sidenav-twist.is-empty { visibility: hidden; }
.sidenav-lvl-1 { padding-left: 8px; }
.sidenav-lvl-2 { padding-left: 26px; }
.sidenav-lvl-3 { padding-left: 44px; }

/* przełącznik firmy i baza na górze */
.sidenav-ws { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; height: 52px; padding: 0 10px; border-bottom: 1px solid var(--line-3); cursor: pointer; }
.sidenav-ws:hover, .sidenav-ws.is-hover { background: var(--surface-2); }
.sidenav-ws .icon { width: 12px; height: 12px; color: var(--label); margin-left: auto; flex: 0 0 auto; }
.sidenav-ws-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sidenav-ws-sub { font-size: 11px; color: var(--muted); }

/* ostatnio otwierane: dwie linie na pozycję */
.sidenav-rec { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; color: var(--ink-2); text-decoration: none; cursor: pointer; }
.sidenav-rec:hover, .sidenav-rec.is-hover { background: var(--hover-neutral); text-decoration: none; }
.sidenav-rec .icon { width: 15px; height: 15px; color: var(--label); flex: 0 0 auto; }
.sidenav-rec-name { font-size: 12.5px; }
.sidenav-rec-meta { font-size: 10.5px; color: var(--label); }

/* filtry po lewej */
.sidenav-fgroup { padding: 10px 12px; border-bottom: 1px solid var(--line-3); }
.sidenav-fhead { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.sidenav-fhead .icon { width: 11px; height: 11px; color: var(--label); margin-left: auto; }
.sidenav-frow { display: flex; align-items: center; gap: 8px; height: 22px; font-size: 12.5px; color: var(--ink-2); }
.sidenav-frow .sidenav-count { font-size: 11px; }
.sidenav-frow input { margin-top: 0; }
.sidenav-frange { display: flex; align-items: center; gap: 6px; }
.sidenav-dash { color: var(--label); }
.sidenav-fnote { padding: 7px 12px; font-size: 11.5px; color: var(--muted); }
.sidenav-cta { padding: 8px 10px; }

/* moduły jako małe karty */
.sidenav-cards { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--surface-2); }
.sidenav-card { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; }
.sidenav-card:hover, .sidenav-card.is-hover { border-color: var(--line-input); box-shadow: var(--shadow-sm); }
.sidenav-card.is-active { border-color: var(--accent); background: var(--accent-soft); }
.sidenav-card .icon { width: 16px; height: 16px; color: var(--label); margin-top: 1px; flex: 0 0 auto; }
.sidenav-card.is-active .icon { color: var(--accent-text); }
.sidenav-card-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sidenav-card-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* kroki procesu z postępem */
.sidenav-steps { padding: 10px 0 6px; }
.sidenav-step { position: relative; display: flex; gap: 10px; padding: 0 12px 14px; cursor: pointer; }
.sidenav-step-mark { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-input); background: var(--surface); color: var(--label); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sidenav-step-mark .icon { width: 11px; height: 11px; }
.sidenav-step.is-done .sidenav-step-mark { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sidenav-step.is-active .sidenav-step-mark { border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 3px var(--focus-ring); }
.sidenav-step-line { position: absolute; left: 21px; top: 20px; bottom: 0; width: 1px; background: var(--line); }
.sidenav-step.is-done .sidenav-step-line { background: var(--accent-soft-line); }
.sidenav-step-name { font-size: 12.5px; color: var(--ink-2); }
.sidenav-step.is-active .sidenav-step-name { font-weight: 600; color: var(--ink); }
.sidenav-step.is-disabled .sidenav-step-name { color: var(--label); }
.sidenav-step-meta { font-size: 11px; color: var(--muted); margin-top: 1px; }
.sidenav-progress { flex: 0 0 auto; padding: 10px 12px; border-bottom: 1px solid var(--line-3); }

/* zakładki pionowe ustawień */
.sidenav-vtabs { background: var(--surface-2); }
.sidenav-vtab { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 12px; border-left: 2px solid transparent; color: var(--ink-2); font-size: 12.5px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.sidenav-vtab .icon { width: 15px; height: 15px; color: var(--label); flex: 0 0 auto; }
.sidenav-vtab:hover, .sidenav-vtab.is-hover { background: var(--hover-neutral); color: var(--ink); text-decoration: none; }
.sidenav-vtab.is-active { background: var(--surface); border-left-color: var(--accent); color: var(--ink); font-weight: 600; }
.sidenav-vtab.is-active .icon { color: var(--accent-text); }

/* wariant ciemny: te same bloki na tle chrome */
.sidenav-dark { background: var(--chrome); border-right-color: var(--chrome-line-2); color: var(--chrome-ink-2); }
.sidenav-dark .sidenav-head, .sidenav-dark .sidenav-foot, .sidenav-dark .sidenav-search, .sidenav-dark .sidenav-ws { border-color: var(--chrome-line); }
.sidenav-dark .sidenav-brand, .sidenav-dark .sidenav-ws-name { color: var(--chrome-ink); }
.sidenav-dark .sidenav-item .icon { color: var(--chrome-dim); }
.sidenav-dark .sidenav-item:hover, .sidenav-dark .sidenav-item.is-hover { background: var(--chrome-hover); color: var(--chrome-ink-bright); }
.sidenav-dark .sidenav-item:hover .icon, .sidenav-dark .sidenav-item.is-hover .icon { color: var(--chrome-ink-2); }
.sidenav-dark .sidenav-item.is-active { background: var(--chrome-3); color: var(--chrome-ink-bright); box-shadow: inset 3px 0 0 var(--accent); }
.sidenav-dark .sidenav-item.is-active .icon, .sidenav-dark .sidenav-item.is-active .sidenav-count { color: var(--chrome-accent-text); }
.sidenav-dark .sidenav-group, .sidenav-dark .sidenav-count, .sidenav-dark .sidenav-rec-meta, .sidenav-dark .sidenav-ws-sub { color: var(--chrome-label); }
.sidenav-dark .sidenav-sep { background: var(--chrome-line); }
.sidenav-dark .sidenav-item.is-disabled { color: var(--chrome-label); }

/* wariant jasny w ramce: menu leży jak karta na canvasie */
.sidenav-boxed-wrap { height: 100%; padding: 8px; background: var(--canvas); }
.sidenav-boxed { width: 204px; flex: 0 0 204px; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

/* kompozycje: szyna zwinięta obok menu, panel wysuwany po najechaniu */
.sidenav-pair { display: flex; gap: 12px; height: 100%; padding: 10px; background: var(--canvas); }
.sidenav-pair .rail, .sidenav-pair .sidenav { border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sidenav-pair .rail { border-color: var(--chrome-line-2); }
.rail-flyout { position: absolute; left: var(--w-rail-slim); top: 0; z-index: 5; width: 208px; flex: 0 0 208px; height: 100%; box-shadow: var(--shadow-lg); }

/* ---------- uzupełnienia ---------- */

/* uchwyt szerokości: kolumna 5px na styku menu i treści, plakietka z bieżącą szerokością */
.sidenav-resizable { width: 248px; flex: 0 0 248px; border-right: 0; }
.sidenav-resizer { position: relative; flex: 0 0 5px; height: 100%; cursor: col-resize; }
.sidenav-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 1px; background: var(--line); }
.sidenav-resizer:hover::after, .sidenav-resizer.is-hover::after { left: 1px; width: 3px; background: var(--accent); }
.sidenav-resize-tip { position: absolute; top: 14px; left: 10px; z-index: 7; display: flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius); background: var(--chrome); color: var(--chrome-ink); font-size: 11px; white-space: nowrap; box-shadow: var(--shadow); }

/* prawoklik na pozycji: rozwinięcie przy kursorze i ślad po pozycji źródłowej */
.sidenav-ctx { position: absolute; left: 132px; top: 196px; z-index: 8; min-width: 210px; }
.sidenav-item.is-context { background: var(--hover-neutral); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-input); }
.sidenav-item.is-context .icon { color: var(--ink-2); }


/* ===== panel: Prawe panele ===== */
/* panel: prawe panele programu - inspector 340px z ciemnym nagłówkiem oraz panele pomocnicze przy rekordzie. */

/* ---------- szkielet: kolumna przy prawej krawędzi okna, przewijane wnętrze, przyklejona stopka ---------- */
.panel, .inspector { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); overflow: hidden; }
.panel-body, .inspector-body { flex: 1; min-height: 0; overflow: auto; }
.panel-foot, .inspector-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface-3); border-top: 1px solid var(--line-2); }
.panel-foot .btn-accent, .inspector-foot .btn-accent { flex: 1; }
.panel-foot .btn-block, .inspector-foot .btn-block { flex: 1; }

/* jasny nagłówek panelu pomocniczego (inspector ma zamiast tego ciemny .record-head) */
.panel-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--line-2); }
.panel-title { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.panel-sub { font-size: 11px; color: var(--muted); min-width: 0; }
.panel-head-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.panel-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--line-2); }

/* wspólne kawałki wnętrza */
.panel-pad { padding: 12px 14px; }
.panel-caption { padding: 10px 14px 6px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); display: flex; align-items: center; gap: 6px; }
.panel-count { font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.panel-group { position: sticky; top: 0; z-index: 1; padding: 5px 14px; background: var(--surface-2); border-top: 1px solid var(--line-3); border-bottom: 1px solid var(--line-3); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); display: flex; align-items: center; gap: 6px; }
.panel-center { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 18px; }
.panel-center .icon { color: var(--line-input); }
.panel-note { margin: 10px 14px; padding: 8px 10px; border: 1px solid var(--info-line); border-left: 3px solid var(--info); border-radius: var(--radius); background: var(--info-soft); color: var(--info-text); font-size: var(--fs-xs); line-height: 1.5; }

/* ---------- lista wewnątrz panelu (rodzina list ma własne .list-*, tu wiersz jest częścią panelu) ---------- */
.panel-item { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 7px 14px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-sm); cursor: pointer; }
.panel-item:hover, .panel-item.is-hover { background: var(--hover); }
.panel-item.is-selected { background: var(--selected); box-shadow: inset -3px 0 0 var(--accent); }
.panel-item.is-unread .panel-item-title { font-weight: 600; }
.panel-item .icon { color: var(--label); }
.panel-item-main { flex: 1; min-width: 0; }
.panel-item-title { display: block; color: var(--ink); }
.panel-item-sub { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.panel-item-meta { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; color: var(--label); white-space: nowrap; }

/* ---------- oś aktywności: kropka, pionowa kreska, wpis ---------- */
.panel-feed { padding: 12px 14px; }
.panel-feed-item { position: relative; display: flex; gap: 10px; padding-bottom: 13px; }
.panel-feed-item:last-child { padding-bottom: 0; }
.panel-feed-rail { position: relative; flex: 0 0 7px; padding-top: 5px; }
.panel-feed-line { position: absolute; left: 3px; top: 13px; bottom: -13px; width: 1px; background: var(--line-2); }
.panel-feed-item:last-child .panel-feed-line { display: none; }
.panel-feed-main { flex: 1; min-width: 0; }
.panel-feed-time { font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.panel-feed-text { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 1px; line-height: 1.45; }
.panel-feed-diff { margin-top: 5px; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); font-size: 11px; font-family: var(--mono); display: flex; align-items: center; gap: 7px; }
.panel-feed-old { color: var(--muted); text-decoration: line-through; }
.panel-feed-new { color: var(--accent-text); font-weight: 600; }

/* ---------- komentarze ---------- */
.panel-comment { padding: 10px 14px; border-bottom: 1px solid var(--line-3); }
.panel-comment.is-reply { padding-left: 38px; background: var(--surface-3); }
.panel-comment-head { display: flex; align-items: center; gap: 8px; }
.panel-comment-who { flex: 0 1 auto; min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.panel-comment-time { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.panel-comment-text { margin-top: 5px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.panel-comment-tools { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--link); }
.panel-mention { color: var(--accent-text); font-weight: 600; }

/* pole pisania na dole panelu (komentarz, odpowiedź, pytanie do asystenta) */
.panel-composer { flex: 0 0 auto; padding: 8px 14px 10px; border-top: 1px solid var(--line-2); background: var(--surface-3); }
.panel-composer-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.panel-composer-foot:first-child { margin-top: 0; }

/* ---------- czat asystenta ---------- */
.panel-chat { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.panel-msg { max-width: 90%; padding: 7px 10px; border-radius: var(--radius-lg); font-size: var(--fs-sm); line-height: 1.5; }
.panel-msg.is-user { align-self: flex-end; background: var(--accent-soft); border: 1px solid var(--accent-soft-line); color: var(--ink); }
.panel-msg.is-ai { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); }
.panel-msg-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 10px; color: var(--label); }
.panel-suggest { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.panel-suggest-item { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: 11px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.panel-suggest-item:hover, .panel-suggest-item.is-hover { border-color: var(--accent); color: var(--link); }

/* ---------- panel zwinięty do paska ikon 48px przy prawej krawędzi ---------- */
.panel-rail { width: var(--w-rail-slim); flex: 0 0 var(--w-rail-slim); height: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 8px; background: var(--surface-2); border-left: 1px solid var(--line); user-select: none; -webkit-user-select: none; }
.panel-rail-btn { position: relative; width: 34px; height: 34px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; }
.panel-rail-btn:hover, .panel-rail-btn.is-hover { background: var(--hover-neutral); color: var(--ink); }
.panel-rail-btn.is-active { background: var(--selected); color: var(--accent-text); box-shadow: inset -3px 0 0 var(--accent); }
.panel-rail-btn.is-disabled { color: var(--line-input); cursor: default; }
.panel-rail-badge { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--danger); color: var(--danger-ink); font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center; line-height: 1; }
.panel-rail-badge.is-quiet { background: var(--neutral-dot); }
.panel-rail-sep { width: 22px; height: 1px; margin: 5px 0; background: var(--line); }
.panel-rail-spacer { flex: 1; min-height: 6px; }

/* ---------- sekcje akordeonowe ---------- */
.panel-acc { border-bottom: 1px solid var(--line-3); }
.panel-acc-head { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); cursor: pointer; user-select: none; -webkit-user-select: none; }
.panel-acc-head:hover, .panel-acc-head.is-hover { background: var(--surface-2); }
.panel-acc-head .icon { width: 12px; height: 12px; color: var(--label); transition: transform .12s; }
.panel-acc-head .panel-count { margin-left: auto; }
.panel-acc.is-open > .panel-acc-head .icon { transform: rotate(90deg); }
.panel-acc-body { padding: 2px 14px 12px; }
.panel-acc:not(.is-open) > .panel-acc-body { display: none; }

/* ---------- minimapa dokumentu ---------- */
.panel-map { padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--canvas); }
.panel-map-page { position: relative; width: 150px; padding: 12px 11px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 5px; }
.panel-map-page.is-active { border-color: var(--accent); }
.panel-map-line { height: 3px; border-radius: 2px; background: var(--line); }
.panel-map-line.is-head { height: 6px; width: 58%; background: var(--line-input); margin-bottom: 4px; }
.panel-map-line.is-short { width: 62%; }
.panel-map-view { position: absolute; left: -3px; right: -3px; border: 2px solid var(--accent); border-radius: 3px; background: var(--focus-ring); }
.panel-map-num { position: absolute; right: -22px; bottom: 0; font-family: var(--mono); font-size: 10px; color: var(--label); }

/* ---------- podgląd pliku: kartka na tle canvas ---------- */
.panel-stage { flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; padding: 14px; background: var(--canvas); }
.panel-doc { width: 100%; max-width: 236px; height: max-content; padding: 16px 15px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 5px; }
.panel-doc-title { font-size: 11.5px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.panel-doc-line { height: 4px; border-radius: 2px; background: var(--line-3); }
.panel-doc-line.is-short { width: 54%; }
.panel-doc-gap { height: 8px; }

/* ---------- pliki i załączniki ---------- */
.panel-file { display: flex; align-items: center; gap: 9px; padding: 7px 14px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-sm); }
.panel-file:hover, .panel-file.is-hover { background: var(--hover); }
.panel-file-icon { width: 26px; height: 26px; flex: 0 0 auto; border-radius: var(--radius); background: var(--neutral-soft); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.panel-file-icon.is-pdf { background: var(--danger-soft); color: var(--danger-text); }
.panel-file-icon.is-sheet { background: var(--accent-soft); color: var(--accent-text); }
.panel-file-icon.is-doc { background: var(--info-soft); color: var(--info-text); }
.panel-file-main { flex: 1; min-width: 0; }
.panel-file-name { display: block; color: var(--ink); }
.panel-file-meta { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--label); margin-top: 1px; }
.panel-file-main .progress { margin-top: 5px; }
.panel-drop { margin: 10px 14px; padding: 15px 10px; border: 1px dashed var(--line-input); border-radius: var(--radius); background: var(--surface-2); text-align: center; font-size: var(--fs-xs); color: var(--muted); }
.panel-drop .icon { color: var(--label); margin-bottom: 5px; }
.panel-drop.is-hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.panel-drop.is-hover .icon { color: var(--accent-text); }

/* ---------- błędy walidacji z przeskokiem do pola ---------- */
.panel-err { display: flex; gap: 9px; padding: 9px 14px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-sm); cursor: pointer; }
.panel-err:hover, .panel-err.is-hover { background: var(--danger-soft); }
.panel-err.is-warn:hover, .panel-err.is-warn.is-hover { background: var(--warn-soft); }
.panel-err .icon { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: var(--danger); }
.panel-err.is-warn .icon { color: var(--warn); }
.panel-err-main { flex: 1; min-width: 0; }
.panel-err-field { display: block; font-size: 10px; letter-spacing: .7px; text-transform: uppercase; color: var(--label); }
.panel-err-msg { display: block; color: var(--ink-2); margin-top: 1px; line-height: 1.4; }

/* ---------- wersje dokumentu ---------- */
.panel-ver { display: flex; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-sm); }
.panel-ver:hover, .panel-ver.is-hover { background: var(--hover); }
.panel-ver.is-current { background: var(--selected); }
.panel-ver-no { flex: 0 0 30px; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted); padding-top: 1px; }
.panel-ver.is-current .panel-ver-no { color: var(--accent-text); }
.panel-ver-main { flex: 1; min-width: 0; }
.panel-ver-meta { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }

/* ---------- zadania przy rekordzie ---------- */
.panel-task { display: flex; align-items: flex-start; gap: 9px; padding: 8px 14px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-sm); }
.panel-task:hover, .panel-task.is-hover { background: var(--hover); }
.panel-task-main { flex: 1; min-width: 0; }
.panel-task-title { display: block; color: var(--ink); line-height: 1.4; }
.panel-task.is-done .panel-task-title { color: var(--label); text-decoration: line-through; }
.panel-task-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.panel-task-due { font-family: var(--mono); }
.panel-task-due.is-late { color: var(--danger); font-weight: 600; }

/* ---------- pomoc kontekstowa ---------- */
.panel-text { padding: 12px 14px 4px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.panel-text p { margin-bottom: 8px; }
.panel-keys { padding: 2px 14px 12px; display: flex; flex-direction: column; gap: 7px; }
.panel-key { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--ink-2); }
.panel-key .kbd { margin-left: auto; }
.panel-link { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--line-3); font-size: var(--fs-sm); color: var(--link); cursor: pointer; }
.panel-link .icon { width: 13px; height: 13px; color: var(--label); }
.panel-link:hover, .panel-link.is-hover { background: var(--hover); }

/* ---------- właściwości: etykieta z lewej, pole z prawej ---------- */
.panel-fields { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.panel-field-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; min-width: 0; }
.panel-field-row .field-label { padding-top: 1px; }

/* ---------- inspector: ciemny nagłówek rekordu ---------- */
.inspector-head { flex: 0 0 auto; }
.inspector-head-main { flex: 1; min-width: 0; }
.inspector-head .badge { margin-top: 4px; }
.inspector-title { font-size: 15px; font-weight: 600; line-height: 1.25; }

/* wyróżniona liczba w ramce (kwota, suma zaznaczenia) */
.inspector-box { margin: 0 14px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.inspector-box-head { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.inspector-box-main { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; }
.inspector-box-val { flex: 1; font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); }
.inspector-box-side { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.inspector-box-foot { padding: 6px 10px; background: var(--surface-2); border-top: 1px solid var(--line-2); font-size: 11px; color: var(--ink-2); }

/* pozycja dokumentu: kod, nazwa, kwota, akcent z lewej */
.inspector-line { display: flex; align-items: center; gap: 10px; margin: 0 14px 6px; padding: 7px 10px; border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 3px; }
.inspector-line-code { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 2px; background: var(--canvas); color: var(--ink-2); }
.inspector-line-name { flex: 1; min-width: 0; font-size: 11.5px; color: var(--ink-2); }
.inspector-line-val { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }

/* skrócona historia rekordu: data, kropka, zdarzenie */
.inspector-hist { display: flex; align-items: center; gap: 10px; padding: 5px 14px; font-size: var(--fs-sm); }
.inspector-hist-date { flex: 0 0 74px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.inspector-hist-what { flex: 1; min-width: 0; color: var(--ink-2); }

/* zaznaczenie wielu rekordów */
.inspector-sum { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.inspector-sum-label { flex: 1; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.inspector-sum-val { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--ink); }
.inspector-chiplist { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 14px 12px; }

/* ---------- uzupełnienia ---------- */

/* porównanie dwóch rekordów: pasek identyfikatorów i wiersze z dwiema komórkami */
.panel-cmp-head { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); }
.panel-cmp-who { min-width: 0; }
.panel-cmp-name { display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-cmp-meta { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.panel-cmp { padding: 2px 14px 10px; }
.panel-cmp-row { padding: 6px 0 7px; border-bottom: 1px solid var(--line-3); }
.panel-cmp-row:last-child { border-bottom: 0; }
.panel-cmp-label { display: block; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); margin-bottom: 3px; }
.panel-cmp-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.panel-cmp-cell { min-width: 0; padding: 3px 6px; border: 1px solid transparent; border-radius: 3px; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-cmp-cell.is-empty { color: var(--label); }
.panel-cmp-row.is-diff .panel-cmp-label { color: var(--warn-text); }
.panel-cmp-row.is-diff .panel-cmp-cell { background: var(--warn-soft); border-color: var(--warn-line); color: var(--ink); }

/* filtry po prawej: sekcja, wiersz wyboru, zakres od-do, rząd chipów */
.panel-filter { padding: 8px 14px 10px; border-bottom: 1px solid var(--line-3); display: flex; flex-direction: column; gap: 7px; }
.panel-filter-row { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 12.5px; color: var(--ink-2); }
.panel-filter-row input { margin-top: 0; }
.panel-filter-row .avatar { flex: 0 0 auto; }
.panel-filter-row .panel-count { margin-left: auto; }
.panel-range { display: flex; align-items: center; gap: 6px; }
.panel-range-dash { color: var(--label); flex: 0 0 auto; }
.panel-range-unit { font-size: 11.5px; color: var(--muted); flex: 0 0 auto; }
.panel-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 14px; }
.panel-filter .panel-chips { padding: 0; }

/* ---------- obca strona w oknie programu (panel-webview) ---------- */
.panel-webview { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; background: var(--surface); }
.panel-webview-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; height: var(--h-filterbar); padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.panel-webview-addr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink-2); }
.panel-webview-addr .icon { width: 13px; height: 13px; color: var(--label); }
.panel-webview-host { color: var(--ink); white-space: nowrap; }
.panel-webview-path { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-webview-frame { position: relative; flex: 1; min-height: 0; width: 100%; border: 0; background: var(--surface); }
.panel-webview-frame.is-loading, .panel-webview-frame.is-error { background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 16px 16px; }
.panel-webview-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); background: color-mix(in srgb, var(--surface) 82%, transparent); }
.panel-webview-state .btn { margin-top: 4px; }


/* ===== bar: Belki ===== */
/* bar: poziome belki nad treścią ekranu: tytuł strony, filtry, szukajka, narzędzia,
   zaznaczenie wielu wierszy, okruszki, zakładki, sortowanie, zakres dat i pasek trybu. */

/* ---------- wspólny szkielet: belka biała, jedna linia, kreska u dołu ---------- */
.pageheader, .filterbar, .searchbar, .toolbar, .actionbar, .bulkbar,
.breadcrumb, .tabbar, .sortbar, .daterange, .infobar, .segmented-bar {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  height: var(--h-filterbar); padding: 0 16px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  white-space: nowrap; min-width: 0;
  user-select: none; -webkit-user-select: none;
}

/* ---------- pageheader: belka tytułu strony, 38px ---------- */
.pageheader { height: var(--h-pageheader); gap: 10px; }
.pageheader-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pageheader-metas { display: flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden; }
.pageheader-meta { display: flex; align-items: baseline; gap: 5px; }
.pageheader-num { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); }
.pageheader-num.is-danger { color: var(--danger); }
.pageheader-num.is-ok { color: var(--accent-text); }
.pageheader-num.is-warn { color: var(--warn-text); }
.pageheader-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.pageheader-crumbs { display: flex; align-items: center; gap: 4px; font-size: 12px; min-width: 0; }
.pageheader-avatar { margin-left: 2px; }
.pageheader .sep-v { flex: 0 0 1px; }

/* dwa wiersze: tytuł + zakładki (38 + 32 = 70) */
.pageheader-stack { background: var(--surface); }
.pageheader-stack > .pageheader { border-bottom-color: var(--line-3); }
.pageheader-tabs {
  display: flex; align-items: stretch; gap: 2px; height: 32px; padding: 0 12px;
  background: var(--surface); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.pageheader-tabs .tab { height: 100%; margin-bottom: 0; }

/* ---------- filterbar: belka filtrów, 36px ---------- */
.filterbar { gap: 6px; }
.filterbar .label { margin-right: 2px; flex: 0 0 auto; }
.filterbar .sep-v { margin: 0 6px; }
.filterbar-group { display: flex; align-items: center; gap: 4px; min-width: 0; }
.filterbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.filterbar-select { width: 150px; flex: 0 0 auto; }
.filterbar-chips { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.filterbar-clear { font-size: var(--fs-xs); color: var(--link); cursor: pointer; padding: 0 4px; flex: 0 0 auto; }
.filterbar-clear:hover, .filterbar-clear.is-hover { text-decoration: underline; color: var(--link-hover); }
.filterbar-summary { font-size: var(--fs-xs); color: var(--muted); flex: 0 0 auto; }
.filterbar-summary .num { font-family: var(--mono); color: var(--ink); }
.filterbar-star { width: 12px; height: 12px; color: var(--warn); flex: 0 0 auto; }
.filterbar-dirty { width: 6px; height: 6px; border-radius: 3px; background: var(--warn); flex: 0 0 auto; }

/* ---------- searchbar: belka szukania, 38px ---------- */
.searchbar { height: var(--h-pageheader); gap: 8px; }
.searchbar-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.searchbar-scope {
  display: inline-flex; align-items: center; gap: 6px; height: var(--h-input); padding: 0 10px;
  border: 1px solid var(--line-input); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--surface-2); font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer; flex: 0 0 auto;
}
.searchbar-scope:hover, .searchbar-scope.is-hover { background: var(--hover-neutral); }
.searchbar-scope .icon { width: 11px; height: 11px; color: var(--label); }
.searchbar-joined { border-radius: 0 var(--radius) var(--radius) 0; }
.searchbar-hint { font-size: var(--fs-xs); color: var(--label); flex: 0 0 auto; }
.searchbar-token { font-family: var(--mono); font-size: 11px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 6px; flex: 0 0 auto; }
.searchbar-pop {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 5px; z-index: 20;
  max-height: 250px; overflow: auto; white-space: nowrap;
}
.searchbar-meta { margin-left: auto; padding-left: 20px; font-family: var(--mono); font-size: 11px; color: var(--label); }
.searchbar-hit { font-weight: 600; color: var(--accent-text); }

/* ---------- toolbar: belka narzędzi ikonowych, 32px ---------- */
.toolbar { height: 32px; gap: 2px; padding: 0 8px; }
.toolbar .sep-v { margin: 0 5px; }
.toolbar .btn-icon { width: 26px; height: 26px; }
.toolbar .btn-icon .icon { width: 15px; height: 15px; }
.toolbar .btn-icon.is-active { transform: none; background: var(--selected); color: var(--accent-text); }
.toolbar-group { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.toolbar-right { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: 0 0 auto; }
.toolbar-select { width: 132px; flex: 0 0 auto; }
.toolbar-value { min-width: 52px; text-align: center; font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink); cursor: pointer; }
.toolbar-swatch { width: 15px; height: 15px; border-radius: 3px; border: 1px solid var(--line-input); flex: 0 0 auto; }
.toolbar-menu { position: absolute; top: 100%; right: 8px; margin-top: 2px; z-index: 20; }

/* ---------- actionbar: gromada akcji, 36px ---------- */
.actionbar { gap: 6px; }
.actionbar-context { display: flex; align-items: baseline; gap: 8px; margin-right: auto; min-width: 0; }
.actionbar-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.actionbar-note { font-size: var(--fs-xs); color: var(--muted); }
.actionbar-caret { width: 24px; padding: 0; }
.actionbar-caret .icon { width: 11px; height: 11px; }
.actionbar-menu { position: absolute; top: 100%; right: 16px; margin-top: 4px; z-index: 20; }

/* ---------- bulkbar: belka zaznaczenia, 36px, ciemna ---------- */
.bulkbar { gap: 8px; background: var(--chrome); color: var(--chrome-ink); border-bottom-color: var(--chrome-line-2); }
.bulkbar .sep-v, .bulkbar-float .sep-v { background: var(--chrome-line); }
.bulkbar-count { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--chrome-ink-bright); }
.bulkbar-text { font-size: var(--fs-xs); color: var(--chrome-muted); }
.bulkbar-link { font-size: var(--fs-xs); color: var(--chrome-accent-text); cursor: pointer; }
.bulkbar-link:hover, .bulkbar-link.is-hover { text-decoration: underline; }
.bulkbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.bulkbar-danger { background: transparent; border-color: var(--danger-line); color: var(--danger-line); }
.bulkbar-danger:hover, .bulkbar-danger.is-hover { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); }
.bulkbar-x { width: 24px; height: 24px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--chrome-dim); cursor: pointer; flex: 0 0 auto; }
.bulkbar-x:hover, .bulkbar-x.is-hover { background: var(--chrome-hover); color: var(--chrome-ink-bright); }
.bulkbar-x .icon { width: 13px; height: 13px; }

/* pływająca odmiana nad fragmentem tabeli */
.bulkbar-stage { position: relative; height: 100%; background: var(--surface); overflow: hidden; }
.bulkbar-float {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px;
  border-radius: 20px; background: var(--chrome); color: var(--chrome-ink);
  box-shadow: var(--shadow-lg); white-space: nowrap; z-index: 10;
}
.bulkbar-head, .bulkbar-row { display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: var(--fs-sm); }
.bulkbar-head { height: var(--h-thead); background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.bulkbar-row { height: var(--h-row); border-bottom: 1px solid var(--line-3); }
.bulkbar-row.is-selected { background: var(--selected); }
.bulkbar-col-code { width: 132px; flex: 0 0 auto; }
.bulkbar-col-date { width: 92px; flex: 0 0 auto; }
.bulkbar-col-sum { width: 104px; flex: 0 0 auto; text-align: right; }

/* ---------- breadcrumb: okruszki, 32px ---------- */
.breadcrumb { height: 32px; gap: 4px; font-size: 12px; }
.breadcrumb-item { color: var(--muted); cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-item:hover, .breadcrumb-item.is-hover { color: var(--link); text-decoration: underline; }
.breadcrumb-item.is-active { color: var(--ink); font-weight: 600; cursor: default; }
.breadcrumb-item.is-active:hover { color: var(--ink); text-decoration: none; }
.breadcrumb-sep { color: var(--label); flex: 0 0 auto; }
.breadcrumb-home { display: flex; align-items: center; color: var(--muted); cursor: pointer; flex: 0 0 auto; }
.breadcrumb-home:hover, .breadcrumb-home.is-hover { color: var(--link); }
.breadcrumb-home .icon { width: 14px; height: 14px; }
.breadcrumb-more { width: 22px; height: 20px; border-radius: 3px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; flex: 0 0 auto; }
.breadcrumb-more:hover, .breadcrumb-more.is-hover, .breadcrumb-more.is-open { background: var(--hover-neutral); color: var(--ink); }
.breadcrumb-more .icon { width: 13px; height: 13px; }
.breadcrumb-wrap { position: relative; display: flex; align-items: center; align-self: stretch; flex: 0 0 auto; }
.breadcrumb-menu { position: absolute; top: 100%; left: -6px; margin-top: 4px; z-index: 20; }
.breadcrumb-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 0 auto; }

/* ---------- tabbar: zakładki widoku, 34px ---------- */
.tabbar { height: 34px; align-items: stretch; gap: 2px; padding: 0 12px; }
.tabbar .tab { height: 100%; }
.tabbar-plain { align-items: center; height: var(--h-filterbar); gap: 4px; }
.tabbar .tab.is-disabled, .pageheader-tabs .tab.is-disabled, .tabbar .pill.is-disabled { opacity: .45; pointer-events: none; }
.tabbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; align-self: center; flex: 0 0 auto; }
.tabbar-x { width: 15px; height: 15px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; color: var(--label); margin: 0 -4px 0 2px; flex: 0 0 auto; }
.tabbar-x:hover, .tabbar-x.is-hover { background: var(--line); color: var(--ink); }
.tabbar-x .icon { width: 10px; height: 10px; }
.tabbar-dirty { width: 7px; height: 7px; border-radius: 4px; background: var(--warn); margin: 0 -2px 0 2px; flex: 0 0 auto; }
.tabbar-add { width: 24px; height: 24px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; align-self: center; margin-left: 4px; flex: 0 0 auto; }
.tabbar-add:hover, .tabbar-add.is-hover { background: var(--hover-neutral); color: var(--ink); }
.tabbar-add .icon { width: 13px; height: 13px; }
.tabbar-scroller { display: flex; align-items: stretch; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }
.tabbar-arrow { width: 24px; height: 24px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; align-self: center; flex: 0 0 auto; }
.tabbar-arrow:hover, .tabbar-arrow.is-hover { background: var(--hover-neutral); color: var(--ink); }
.tabbar-arrow.is-disabled { opacity: .35; pointer-events: none; }
.tabbar-arrow .icon { width: 13px; height: 13px; }

/* ---------- segmented: przełącznik widoku ---------- */
.segmented-bar { gap: 10px; }
.segmented { display: inline-flex; align-items: center; height: 26px; padding: 2px; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); flex: 0 0 auto; }
.segmented-item { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 100%; padding: 0 9px; border-radius: 3px; font-size: var(--fs-xs); color: var(--muted); cursor: pointer; white-space: nowrap; }
.segmented-item:hover, .segmented-item.is-hover { color: var(--ink); }
.segmented-item.is-active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.segmented-item.is-disabled { opacity: .4; pointer-events: none; }
.segmented-item .icon { width: 14px; height: 14px; }
.segmented-icons .segmented-item { width: 28px; padding: 0; }
.segmented-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }

/* ---------- sortbar: sortowanie i gęstość, 34px ---------- */
.sortbar { height: 34px; gap: 6px; font-size: var(--fs-xs); }
.sortbar-item { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: var(--radius); color: var(--ink-2); cursor: pointer; flex: 0 0 auto; }
.sortbar-item:hover, .sortbar-item.is-hover { background: var(--hover-neutral); }
.sortbar-item.is-active { background: var(--selected); color: var(--accent-text); font-weight: 600; }
.sortbar-item .icon { width: 12px; height: 12px; color: var(--label); }
.sortbar-item.is-active .icon { color: var(--accent-text); }
.sortbar-select { width: 140px; flex: 0 0 auto; }
.sortbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.sortbar-count { font-size: var(--fs-xs); color: var(--muted); }
.sortbar-count .num { font-family: var(--mono); color: var(--ink); }

/* ---------- daterange: zakres dat z presetami, 36px ---------- */
.daterange { gap: 6px; }
.daterange-field { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border: 1px solid var(--line-input); border-radius: var(--radius); background: var(--field); font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink); cursor: pointer; flex: 0 0 auto; }
.daterange-field:hover, .daterange-field.is-hover { border-color: var(--accent); }
.daterange-field .icon { width: 13px; height: 13px; color: var(--label); }
.daterange-to { color: var(--label); display: flex; align-items: center; }
.daterange-to .icon { width: 12px; height: 12px; }
.daterange-presets { display: flex; align-items: center; gap: 4px; }
.daterange-nav { width: 24px; height: 24px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; flex: 0 0 auto; }
.daterange-nav:hover, .daterange-nav.is-hover { background: var(--hover-neutral); color: var(--ink); }
.daterange-nav .icon { width: 13px; height: 13px; }
.daterange-summary { display: flex; align-items: baseline; gap: 6px; margin-left: auto; font-size: var(--fs-xs); color: var(--muted); flex: 0 0 auto; }
.daterange-summary .num { font-family: var(--mono); font-weight: 600; color: var(--ink); }

/* ---------- infobar: pasek trybu nad treścią, 32px ---------- */
.infobar { height: 32px; gap: 8px; font-size: var(--fs-xs); background: var(--info-soft); color: var(--info-text); border-bottom-color: var(--info-line); }
.infobar .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.infobar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.infobar-text .mono { font-weight: 600; }
.infobar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.infobar-link { color: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.infobar-x { width: 22px; height: 22px; border-radius: 3px; display: flex; align-items: center; justify-content: center; color: inherit; opacity: .55; cursor: pointer; }
.infobar-x:hover, .infobar-x.is-hover { opacity: 1; background: color-mix(in srgb, var(--chrome) 8%, transparent); }
.infobar-x .icon { width: 12px; height: 12px; }
.infobar.is-warn { background: var(--warn-soft); color: var(--warn-text); border-bottom-color: var(--warn-line); }
.infobar.is-danger { background: var(--danger-soft); color: var(--danger-text); border-bottom-color: var(--danger-line); }
.infobar.is-ok { background: var(--accent-soft); color: var(--accent-text); border-bottom-color: var(--accent-soft-line); }

/* ---------- uzupełnienia ---------- */

/* szuflada filtrów zaawansowanych: panel opadający spod belki, osie w trzech kolumnach */
.filterbar-drawer { padding: 12px 16px 0; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.filterbar-drawer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 24px; }
.filterbar-axis { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filterbar-axis .label { margin: 0; }
.filterbar-axis-row { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 12.5px; color: var(--ink-2); }
.filterbar-axis-row input { margin-top: 0; }
.filterbar-axis-row .count { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.filterbar-range { display: flex; align-items: center; gap: 6px; }
.filterbar-dash { color: var(--label); flex: 0 0 auto; }
.filterbar-unit { font-size: 11.5px; color: var(--muted); flex: 0 0 auto; }
.filterbar-drawer-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.filterbar-drawer-foot { display: flex; align-items: center; gap: 8px; height: 44px; margin-top: 12px; border-top: 1px solid var(--line-3); }


/* ===== table: Tabele ===== */
/* table: tabele danych. Rozszerzenia .table z base.css - gęstości, sortowanie, zaznaczenie, grupy,
   drzewo, przypięte kolumny, stopki z sumami i paginacją, stany puste oraz układy z inspectorem. */

/* ---------- belka nad tabelą i kotwica dla menu ---------- */
.table-toolbar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; background: var(--surface); border-bottom: 1px solid var(--line-2); font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.table-toolbar .btn { height: var(--h-btn-sm); padding: 0 9px; font-size: var(--fs-xs); }
.table-toolbar .btn-icon { width: 26px; height: 26px; padding: 0; }
.table-toolbar .input-wrap { height: 26px; width: var(--w-search); }
.table-toolbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.table-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.table-count { font-family: var(--mono); font-size: 11.5px; color: var(--label); }
.table-hint { font-size: var(--fs-xs); color: var(--muted); }
.table-anchor { position: relative; }
.table-viewport { max-height: 244px; overflow: auto; }
.table-wide { min-width: 1260px; }

/* ---------- stałe szerokości kolumn (potrzebne tam, gdzie liczy się krawędź) ---------- */
.table-fixed { table-layout: fixed; }
.table-col-id { width: 150px; }
.table-col-name { width: 306px; }
.table-col-date { width: 120px; }
.table-col-money { width: 120px; }

/* ---------- gęstości ---------- */
.table-comfortable td { height: var(--h-row-loose); }
.table-comfortable th { height: 34px; }
.table-cozy td { height: 38px; }
.table-sub { display: block; font-size: 11px; color: var(--muted); line-height: 1.3; margin-top: -2px; }
.table-cell-2 { display: flex; flex-direction: column; justify-content: center; line-height: 1.35; }

/* ---------- warianty linii ---------- */
.table-striped tbody tr:nth-child(even) td { background: var(--surface-3); }
.table-striped tbody tr:nth-child(even):hover td, .table-striped tbody tr:nth-child(even).is-hover td { background: var(--hover); }
.table-striped tbody tr.is-selected td, .table-striped tbody tr.is-selected:nth-child(even) td { background: var(--selected); }
.table-bordered th, .table-bordered td { border-right: 1px solid var(--line-3); }
.table-bordered th { border-right-color: var(--line-2); }
.table-bordered th:last-child, .table-bordered td:last-child { border-right: 0; }
.table-bordered td { border-bottom-color: var(--line-2); }

/* ---------- sortowanie w nagłówku ---------- */
.table-sortable th { user-select: none; }
.table-sort { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; color: inherit; }
.table-sort .icon { width: 11px; height: 11px; color: var(--label); opacity: 0; }
.table-sort:hover, .table-sort.is-hover { color: var(--ink); }
.table-sort:hover .icon, .table-sort.is-hover .icon { opacity: .55; }
.table-sort.is-active { color: var(--ink); }
.table-sort.is-active .icon { opacity: 1; color: var(--accent-text); }
.table-sort-rank { font-family: var(--mono); font-size: 9.5px; color: var(--label); }
.table th.num .table-sort { justify-content: flex-end; }

/* ---------- filtry w nagłówkach kolumn ---------- */
.table-filter-row th { height: 32px; padding: 0 6px; background: var(--surface); border-bottom: 1px solid var(--line); text-transform: none; letter-spacing: 0; }
.table-filter-row .input, .table-filter-row .select { height: 24px; font-size: var(--fs-sm); padding: 0 6px; }
.table-filter-row .select { padding-right: 22px; }
.table-filter-row .input-wrap { height: 24px; padding: 0 6px; }
.table-filter-clear { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 3px; color: var(--label); cursor: pointer; }
.table-filter-clear:hover { background: var(--hover-neutral); color: var(--ink); }
.table-filter-clear .icon { width: 12px; height: 12px; }

/* ---------- kolumna zaznaczenia i belka zaznaczenia ---------- */
.table-check { width: 34px; padding: 0 0 0 12px; }
.table-check input { margin: 0; vertical-align: middle; }
.table-bulk { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; background: var(--chrome); color: var(--chrome-ink); font-size: var(--fs-sm); }
.table-bulk-count { font-weight: 600; }
.table-bulk-sum { color: var(--chrome-muted); font-family: var(--mono); }
.table-bulk .btn { height: var(--h-btn-sm); padding: 0 9px; font-size: var(--fs-xs); }
.table-bulk-x { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 3px; color: var(--chrome-muted); cursor: pointer; }
.table-bulk-x:hover { background: var(--chrome-hover); color: var(--chrome-ink-bright); }
.table-bulk-x .icon { width: 13px; height: 13px; }

/* ---------- akcje w wierszu ---------- */
.table-col-actions { width: 104px; }
.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.table-actions .btn-icon { width: 24px; height: 24px; }
.table-actions .btn-icon .icon { width: 14px; height: 14px; }
.table-row-actions tbody tr .table-actions { visibility: hidden; }
.table-row-actions tbody tr:hover .table-actions, .table-row-actions tbody tr.is-hover .table-actions, .table-row-actions tbody tr.is-selected .table-actions { visibility: visible; }

/* ---------- menu przypięte do tabeli (podgląd stanu otwartego) ---------- */
.table-menu { position: absolute; z-index: 12; }
.table-menu-row { top: 76px; right: 16px; width: 208px; }
.table-menu-ctx { top: 90px; left: 288px; width: 216px; }
.table-menu-cols { top: 32px; right: 10px; width: 244px; }
.table-menu-col { top: 30px; left: 336px; width: 210px; }
.table-colpick-item { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.table-colpick-item:hover { background: var(--hover-neutral); }
.table-colpick-item.is-disabled { opacity: .5; cursor: default; }
.table-colpick-item .icon { width: 13px; height: 13px; color: var(--label); }
.table-colpick-item input { margin: 0; }
.table-colpick-grip { margin-left: auto; color: var(--line-input); }
.table-colpick-foot { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--line-3); margin-top: 4px; font-size: var(--fs-xs); }
.table-ctx-point { position: absolute; top: 84px; left: 284px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); z-index: 13; }

/* ---------- edycja w wierszu ---------- */
.table-inline tbody tr.is-editing td { background: var(--surface); }
.table-inline td.table-cell-edit { padding: 0 6px; }
.table-cell-edit .input { height: 24px; font-size: var(--fs-sm); }
.table-cell-edit .select { height: 24px; font-size: var(--fs-sm); padding: 0 20px 0 6px; }
.table-edit-actions { display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.table-edit-ok, .table-edit-cancel { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 3px; cursor: pointer; }
.table-edit-ok { background: var(--accent); color: var(--accent-ink); }
.table-edit-cancel { color: var(--muted); border: 1px solid var(--line-input); background: var(--surface); }
.table-edit-ok .icon, .table-edit-cancel .icon { width: 13px; height: 13px; }

/* ---------- rozwijany wiersz szczegółów ---------- */
.table-twisty { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 3px; color: var(--muted); cursor: pointer; flex: 0 0 auto; }
.table-twisty:hover { background: var(--line-3); color: var(--ink); }
.table-twisty .icon { width: 11px; height: 11px; }
.table-twisty.is-leaf { visibility: hidden; }
.table-expand-row td { height: auto; padding: 0; white-space: normal; background: var(--surface-3); border-bottom: 1px solid var(--line); }
.table-expand-body { padding: 12px 16px 14px 41px; }
.table-expand-title { font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); margin-bottom: 8px; }
.table-expand-lines { margin-top: 10px; border-top: 1px solid var(--line-2); padding-top: 8px; font-size: var(--fs-sm); }
.table-expand-line { display: flex; align-items: center; gap: 10px; height: 22px; color: var(--ink-2); }
.table-expand-line .num { margin-left: auto; }

/* ---------- grupy i sumy pośrednie ---------- */
.table-group-row td { height: 28px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); border-top: 1px solid var(--line-2); font-weight: 600; color: var(--ink); }
.table-group-name { display: inline-flex; align-items: center; gap: 7px; }
.table-group-count { font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--label); }
.table-group-row .num { font-family: var(--mono); }
.table-subtotal td { background: var(--surface-3); border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink-2); }
.table-subtotal-label { font-size: var(--fs-label); letter-spacing: .7px; text-transform: uppercase; color: var(--label); }

/* ---------- drzewo ---------- */
.table-node { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.table-node .icon { width: 14px; height: 14px; color: var(--label); }
.table-tree .table-indent { display: inline-block; }
.table-indent-1 { padding-left: 20px; }
.table-indent-2 { padding-left: 40px; }
.table-indent-3 { padding-left: 60px; }
.table-tree tbody tr.is-branch td { font-weight: 600; }
.table-tree tbody tr.is-branch .num { font-weight: 600; }

/* ---------- przypięte kolumny i przyklejony nagłówek ---------- */
.table-pinned th:first-child, .table-pinned td:first-child { position: sticky; left: 0; z-index: 2; }
.table-pinned td:first-child { background: var(--surface); box-shadow: 1px 0 0 var(--line-2); }
.table-pinned th:first-child { background: var(--surface-2); z-index: 4; box-shadow: 1px 0 0 var(--line); }
.table-pinned tbody tr:hover td:first-child, .table-pinned tbody tr.is-hover td:first-child { background: var(--hover); }
.table-pinned tbody tr.is-selected td:first-child { background: var(--selected); }
.table-pinned th:last-child, .table-pinned td:last-child { position: sticky; right: 0; z-index: 2; }
.table-pinned td:last-child { background: var(--surface); box-shadow: -1px 0 0 var(--line-2); }
.table-pinned th:last-child { background: var(--surface-2); z-index: 4; box-shadow: -1px 0 0 var(--line); }
.table-sticky thead th { position: sticky; top: 0; z-index: 3; }
.table-pin-mark { color: var(--accent-text); }
.table-pin-mark .icon { width: 11px; height: 11px; }

/* ---------- stopka: sumy, paginacja, wczytaj więcej ---------- */
.table-sums td { height: 32px; background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 0; font-weight: 600; color: var(--ink); }
.table-sums-label { font-size: var(--fs-label); letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.table-sums-sub td { height: 26px; background: var(--surface-3); border-top: 1px solid var(--line-3); border-bottom: 0; color: var(--ink-2); font-weight: 500; }
.table-pager { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.table-pager-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--ink-2); font-family: var(--mono); font-size: 11.5px; cursor: pointer; }
.table-pager-btn:hover { border-color: var(--accent); color: var(--link); }
.table-pager-btn.is-active { background: var(--chrome); border-color: var(--chrome); color: var(--chrome-ink); }
.table-pager-btn.is-disabled { opacity: .4; pointer-events: none; }
.table-pager-btn .icon { width: 12px; height: 12px; }
.table-pager-gap { width: 16px; text-align: center; color: var(--label); }
.table-pagesize { display: flex; align-items: center; gap: 6px; }
.table-pagesize .select { height: 22px; width: 60px; font-size: 11.5px; padding: 0 20px 0 6px; }
.table-more { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; background: var(--surface-3); border-top: 1px solid var(--line-2); color: var(--link); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.table-more:hover { background: var(--hover); }
.table-more .icon { width: 13px; height: 13px; }
.table-more.is-loading { color: var(--muted); font-weight: 500; }

/* ---------- tabela wirtualna ---------- */
.table-spacer td { height: 58px; background: var(--surface-3); color: var(--label); text-align: center; font-size: 11px; font-family: var(--mono); }
.table-range { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }

/* ---------- stany: pusto, brak wyników, ładowanie, błąd ---------- */
.table-blank { padding: 26px 16px 24px; text-align: center; }
.table-blank .icon { width: 22px; height: 22px; color: var(--line-input); }
.table-blank-title { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 8px 0 4px; }
.table-blank-msg { font-size: var(--fs-sm); color: var(--muted); }
.table-blank-actions { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.table-error .icon { color: var(--danger); }
.table-error-detail { display: inline-block; margin-top: 10px; padding: 4px 8px; border-radius: 3px; background: var(--danger-soft); color: var(--danger-text); font-family: var(--mono); font-size: 11px; }
.table-loading tbody td .skeleton { height: 9px; }
.table-skel-30 { width: 30%; }
.table-skel-50 { width: 50%; }
.table-skel-70 { width: 70%; }
.table-skel-90 { width: 90%; }
.table-skel-right { margin-left: auto; }

/* ---------- szerokość kolumn i kolejność wierszy ---------- */
.table-resizable th { position: relative; }
.table-resize { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; display: flex; justify-content: center; cursor: col-resize; z-index: 3; }
.table-resize::after { content: ""; width: 1px; height: 14px; margin-top: 8px; background: var(--line-input); }
.table-resize:hover::after, .table-resize.is-hover::after { width: 2px; height: 100%; margin-top: 0; background: var(--accent); }
.table-resize-guide { position: absolute; top: 0; bottom: 0; left: 457px; width: 2px; background: var(--accent); z-index: 8; }
.table-resize-tip { position: absolute; top: 4px; left: 463px; padding: 1px 6px; border-radius: 3px; background: var(--chrome); color: var(--chrome-ink); font-family: var(--mono); font-size: 10.5px; z-index: 9; }
.table-grip { width: 30px; padding: 0 0 0 9px; color: var(--line-input); cursor: grab; }
.table-grip .icon { width: 14px; height: 14px; }
.table-reorder tbody tr:hover .table-grip, .table-reorder tbody tr.is-hover .table-grip { color: var(--muted); }
.table-reorder tbody tr.is-dragging td { background: var(--surface-2); color: var(--muted); }
.table-droprow td { height: 3px; padding: 0; background: var(--accent); border-bottom: 0; }

/* ---------- typy komórek ---------- */
.table-status { display: inline-flex; align-items: center; gap: 7px; }
.table-status-col { width: 152px; }
.table-delta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table-delta .icon { width: 11px; height: 11px; }
.table-delta.is-up { color: var(--accent-text); }
.table-delta.is-down { color: var(--danger); }
.table-delta.is-flat { color: var(--label); }
.table-money-neg { color: var(--danger); }
.table-date-late { color: var(--danger); font-weight: 600; }
.table-date-soon { color: var(--warn-text); }
.table-date-rel { margin-left: 6px; font-size: 11px; color: var(--label); font-family: var(--sans); }
.table-person { display: flex; align-items: center; gap: 8px; min-width: 0; }
.table-person-name { line-height: 1.25; }
.table-avatars { display: inline-flex; align-items: center; }
.table-avatars .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.table-avatars .avatar:first-child { margin-left: 0; }
.table-avatars-more { margin-left: 6px; font-size: 11px; color: var(--label); font-family: var(--mono); }
.table-tags { display: flex; align-items: center; gap: 4px; }
.table-tag-more { font-size: 11px; color: var(--label); font-family: var(--mono); }
.table-progress-col { width: 190px; }
.table-progress { display: flex; align-items: center; gap: 8px; }
.table-progress-val { width: 36px; text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }

/* ---------- macierz, porównanie, tabela przestawna ---------- */
.table-matrix-name { width: 260px; }
.table-matrix thead th { height: 38px; }
.table-matrix th.table-matrix-col { width: 92px; text-align: center; }
.table-matrix td.table-matrix-cell { text-align: center; border-left: 1px solid var(--line-3); }
.table-matrix th.table-matrix-col { border-left: 1px solid var(--line-2); }
.table-matrix-cell input { margin: 0; }
.table-matrix-sub { display: block; font-size: 10px; color: var(--label); text-transform: none; letter-spacing: 0; font-weight: 400; }
.table-compare th.table-compare-attr, .table-compare td.table-compare-attr { width: 196px; background: var(--surface-3); color: var(--muted); font-weight: 500; }
.table-compare th, .table-compare td { border-left: 1px solid var(--line-3); }
.table-compare th:first-child, .table-compare td:first-child { border-left: 0; }
.table-compare-obj { color: var(--ink); font-size: 11.5px; text-transform: none; letter-spacing: 0; }
.table-compare-best { color: var(--accent-text); font-weight: 600; }
.table-compare-sec td { background: var(--surface-2); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); height: 26px; }
.table-pivot th.table-pivot-group { text-align: center; border-left: 1px solid var(--line); }
.table-pivot th.table-pivot-sub { font-size: 10px; letter-spacing: .4px; }
.table-pivot td.table-pivot-rowhead { font-weight: 600; }
.table-pivot .table-pivot-edge { border-left: 1px solid var(--line-2); }
.table-pivot .table-pivot-total { background: var(--surface-3); font-weight: 600; color: var(--ink); }
.table-pivot-empty { color: var(--line-input); }

/* ---------- układy: tabela z inspectorem, tabela ze szczegółem pod spodem ---------- */
.table-layout { display: flex; align-items: stretch; height: 100%; background: var(--surface); }
.table-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.table-scroll { flex: 1; min-height: 0; overflow: auto; }
.table-side { display: flex; flex-direction: column; width: var(--w-inspector); flex: 0 0 var(--w-inspector); border-left: 1px solid var(--line); background: var(--surface); }
.table-side-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; }
.table-side-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-3); }
.table-side-foot { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--line-2); background: var(--surface-3); }
.table-split { display: flex; flex-direction: column; height: 100%; background: var(--surface); }
.table-split-top { flex: 1; min-height: 0; overflow: auto; }
.table-detail { display: flex; flex-direction: column; height: 208px; border-top: 1px solid var(--line); background: var(--surface); }
.table-detail-head { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; background: var(--surface-2); border-bottom: 1px solid var(--line-3); }
.table-detail-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; }
.table-detail .tabs { padding: 0 14px; background: var(--surface); }

/* ---------- wersja do druku ---------- */
.table-print-page { padding: 20px 24px; background: #fff /* literal: papier wydruku jest biały w obu motywach */; }
.table-print-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.table-print-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.table-print-sub { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.table-print-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); text-align: right; line-height: 1.6; }
.table-print { font-size: 11px; }
.table-print th { height: 24px; padding: 0 8px; background: transparent; border-bottom: 1px solid var(--ink); color: var(--ink); font-size: 10.5px; letter-spacing: .3px; text-transform: none; }
.table-print td { height: 22px; padding: 0 8px; border-bottom: 1px solid var(--line-2); }
.table-print tbody tr:hover td { background: transparent; }
.table-print tfoot td { height: 24px; border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 700; background: transparent; }
.table-print-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line-2); font-size: 10px; color: var(--muted); }

/* ---------- uzupełnienia ---------- */

/* zapisane widoki: gwiazdka widoku domyślnego, znacznik zmiany, pasek ze składem widoku */
.table-view-star { width: 12px; height: 12px; color: var(--warn); flex: 0 0 auto; }
.table-view-dirty { width: 6px; height: 6px; border-radius: 3px; background: var(--warn); flex: 0 0 auto; }
.table-view-recipe { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; background: var(--surface-3); border-bottom: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.table-view-part { display: flex; align-items: center; gap: 6px; min-width: 0; }
.table-view-part .label { flex: 0 0 auto; }
.table-view-owner { margin-left: auto; font-size: 11px; color: var(--label); flex: 0 0 auto; }

/* podgląd importu: numer wiersza z pliku, komórka z błędem i komunikatem pod wartością */
.table-import td { height: 42px; }
.table-import-row { width: 46px; padding-left: 12px; font-family: var(--mono); font-size: 11px; color: var(--label); }
.table-import th.table-import-row { font-family: var(--sans); }
.table-import td.table-cell-error { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); }
.table-import td.table-cell-warn { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.table-import tbody tr:hover td.table-cell-error, .table-import tbody tr.is-hover td.table-cell-error { background: var(--danger-soft); }
.table-import tbody tr:hover td.table-cell-warn, .table-import tbody tr.is-hover td.table-cell-warn { background: var(--warn-soft); }
.table-cell-msg { display: block; margin-top: 2px; font-family: var(--sans); font-size: 10.5px; font-weight: 400; line-height: 1.2; letter-spacing: 0; }
.table-cell-error .table-cell-msg { color: var(--danger-text); }
.table-cell-warn .table-cell-msg { color: var(--warn-text); }
.table-import tbody tr.is-error td.table-import-row { box-shadow: inset 3px 0 0 var(--danger); }
.table-import tbody tr.is-warn td.table-import-row { box-shadow: inset 3px 0 0 var(--warn); }

/* przypięte wiersze: sticky pod nagłówkiem, kolejne odsunięcia o wysokość wiersza */
.table-col-pin { width: 40px; padding: 0 8px 0 0; }
.table-pinrows tbody tr .table-col-pin .table-actions { visibility: hidden; }
.table-pinrows tbody tr:hover .table-col-pin .table-actions, .table-pinrows tbody tr.is-hover .table-col-pin .table-actions { visibility: visible; }
.table-pinrow td { position: sticky; z-index: 2; background: var(--surface-2); }
.table-pinrow .table-actions { visibility: visible; }
.table-pinrow.is-pin-1 td { top: var(--h-thead); }
.table-pinrow.is-pin-2 td { top: calc(var(--h-thead) + var(--h-row)); }
.table-pinrow.is-pin-3 td { top: calc(var(--h-thead) + 2 * var(--h-row)); border-bottom: 1px solid var(--line); }
.table-pinrow td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.table-pinrow.is-total td { font-weight: 600; color: var(--ink); }
.table-pinrows tbody tr.table-pinrow:hover td, .table-pinrows tbody tr.table-pinrow.is-hover td { background: var(--surface-2); }
.table-pinrow .table-pin-mark .icon { width: 12px; height: 12px; }

/* ---------- uzupelnienia z dziennika zapytan ---------- */

/* wiersz dodawania na końcu tabeli: pola w kolumnach, zapis Enterem albo przyciskiem */
.table-addrow tbody tr.table-add td { height: 36px; padding: 0 6px; background: var(--surface-3); border-top: 1px solid var(--line-2); border-bottom: 0; }
.table-addrow tbody tr.table-add:hover td, .table-addrow tbody tr.table-add.is-hover td { background: var(--surface-3); }
.table-addrow tbody tr.table-add.is-focus td { background: var(--surface); }
.table-add td:first-child { position: relative; }
.table-add.is-focus td:first-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.table-add .input { height: 26px; font-size: var(--fs-sm); }
.table-add .input::placeholder { color: var(--label); }
.table-add-lead { display: flex; align-items: center; gap: 6px; min-width: 0; }
.table-add-icon { flex: 0 0 14px; display: flex; align-items: center; justify-content: center; color: var(--label); }
.table-add-icon .icon { width: 14px; height: 14px; }
.table-add.is-focus .table-add-icon { color: var(--accent-text); }
.table-add-calc { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); padding-right: 6px; }
.table-add .btn { height: 26px; padding: 0 10px; font-size: var(--fs-xs); }
.table-addrow .table-foot .kbd { margin: 0 2px; }

/* ---------- miniatura w wierszu (table-thumb) ---------- */
.table-thumb { display: block; width: 88px; height: 48px; object-fit: cover; object-position: top; border-radius: 4px; border: 1px solid var(--line); background: var(--surface-2); flex: 0 0 auto; }
.table-thumb.is-empty { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-label); color: var(--label); }
.table-thumb.is-empty .icon { width: 16px; height: 16px; }
.table-thumb-sm { width: 56px; height: 32px; }
.table-thumb-fill { width: 100%; height: 120px; }
.table-thumb-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.table-thumb-mock { background: linear-gradient(var(--surface) 0 8px, transparent 8px) top / 100% 11px repeat-y, repeating-linear-gradient(var(--line-2) 0 2px, transparent 2px 6px) 8px 12px / 60% 100% no-repeat, var(--surface-2); }


/* ===== list: Listy ===== */
/* list: pionowe listy wierszy - master z miniaturą, zdarzenia, oś czasu, log, komentarze, zadania,
   pliki, powiadomienia. Rozszerza prymitywy z base.css (avatar, badge, dot, checkbox, skeleton, empty). */

/* ---------- pojemnik ---------- */
.list { background: var(--surface); color: var(--ink); font-size: 12.5px; min-width: 0; }
.list-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--surface); }
.list-scroll { flex: 1; min-height: 0; overflow: auto; }
.list-anchor { position: relative; }
.list-anchor .list-row { padding-right: 18px; }

/* nagłówek listy: tytuł, licznik, szukajka, akcja z prawej */
.list-head { display: flex; align-items: center; gap: 8px; flex: 0 0 36px; height: 36px; padding: 0 8px 0 12px; background: var(--surface); border-bottom: 1px solid var(--line-2); font-size: 12.5px; white-space: nowrap; }
.list-head-title { font-weight: 600; }
.list-head .btn-icon { width: 26px; height: 26px; }
.list-head .btn-icon .icon { width: 14px; height: 14px; }
.list-head .input-wrap { height: 26px; }
.list-count { font-family: var(--mono); font-size: 11px; color: var(--label); }
.list-hint { font-size: 11.5px; color: var(--muted); }
.list-foot { display: flex; align-items: center; gap: 10px; flex: 0 0 30px; height: 30px; padding: 0 12px; background: var(--surface-2); border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.list-sep { height: 1px; background: var(--line-2); }

/* ---------- wiersz ---------- */
.list-row { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; height: var(--h-row); padding: 0 12px; border-bottom: 1px solid var(--line-3); }
.list-row:last-child { border-bottom: 0; }
.list-row:hover, .list-row.is-hover { background: var(--hover); }
.list-row.is-selected { background: var(--selected); }
.list-row.is-selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.list-row.is-disabled { opacity: .45; }
.list-row.is-disabled .list-title { color: var(--muted); }
.list-loose .list-row { height: var(--h-row-loose); }
.list-row .icon { color: var(--label); }

/* treść wiersza */
.list-main { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; }
.list-title { font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.list-sub { font-size: 11px; line-height: 1.35; color: var(--muted); }
.list-meta { flex: 0 0 auto; font-size: 11.5px; color: var(--label); white-space: nowrap; }
.list-icon { flex: 0 0 16px; display: flex; align-items: center; justify-content: center; color: var(--label); }
.list-mark { padding: 0 1px; border-radius: 2px; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

/* ---------- lista master 260px z miniaturą ---------- */
.list-master { border-right: 1px solid var(--line); }
.list-master .list-row { align-items: flex-start; height: auto; gap: 10px; padding: 8px 10px; }
.list-master .list-title { font-size: 12.5px; font-weight: 600; }
.list-master .list-sub { margin-top: 3px; }
.list-thumb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: var(--radius); background: var(--neutral-soft); color: var(--muted); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.list-thumb .icon { width: 18px; height: 18px; color: inherit; }
.list-thumb.is-selected { background: var(--accent-soft); color: var(--accent-text); }
.list-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.list-master .chip { height: 18px; padding: 0 6px; font-size: 10.5px; }

/* ---------- zdarzenia: data, kropka, kod, treść, kwota ---------- */
.list-feed .list-row { gap: 10px; }
.list-date { flex: 0 0 74px; width: 74px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.list-amount { flex: 0 0 104px; width: 104px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; text-align: right; color: var(--ink); }
.list-amount.is-muted { color: var(--label); }
.list-amount.is-danger { color: var(--danger); }
.list-text { flex: 1; min-width: 0; color: var(--ink-2); }

/* ---------- oś czasu pionowa ---------- */
.list-timeline { padding: 6px 0; }
.list-item { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; min-width: 0; }
.list-time { flex: 0 0 46px; width: 46px; font-family: var(--mono); font-size: 11.5px; color: var(--label); line-height: 1.5; }
.list-track { position: relative; flex: 0 0 9px; width: 9px; align-self: stretch; }
.list-track::before { content: ""; position: absolute; left: 4px; top: -9px; bottom: -9px; width: 1px; background: var(--line-2); }
.list-timeline .list-item:first-child .list-track::before { top: 7px; }
.list-timeline .list-item:last-child .list-track::before { top: -9px; bottom: auto; height: 16px; }
.list-node { position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--neutral-dot); }
.list-node.is-active { background: var(--accent); border-color: var(--accent); }
.list-node.is-warn { border-color: var(--warn); }
.list-node.is-danger { border-color: var(--danger); }

/* ---------- grupy i sekcje ---------- */
.list-group { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 12px; background: var(--surface-2); border-top: 1px solid var(--line-3); border-bottom: 1px solid var(--line-3); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.list-group:first-child { border-top: 0; }
.list-section { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; height: 22px; padding: 0 12px; background: var(--surface-3); border-bottom: 1px solid var(--line-3); font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--accent-text); }
.list-index { position: absolute; top: 0; right: 2px; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 14px; font-family: var(--mono); font-size: 9px; color: var(--label); user-select: none; }
.list-index-l { line-height: 1.15; cursor: pointer; }
.list-index-l.is-active { color: var(--accent-text); font-weight: 700; }

/* ---------- zadania, zaznaczanie, kolejność ---------- */
.list-check { flex: 0 0 14px; display: flex; align-items: center; }
.list-task .list-row.is-done .list-title { color: var(--muted); text-decoration: line-through; }
.list-due { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.list-due.is-late { color: var(--danger); font-weight: 600; }
.list-handle { flex: 0 0 16px; display: flex; align-items: center; justify-content: center; color: var(--line-input); cursor: grab; }
.list-handle .icon { width: 14px; height: 14px; color: inherit; }
.list-row:hover .list-handle, .list-row.is-hover .list-handle { color: var(--muted); }
.list-row.is-dragging { background: var(--surface); border-bottom-color: transparent; box-shadow: var(--shadow); border-radius: var(--radius); }
.list-drop { height: 2px; margin-bottom: -1px; background: var(--accent); }

/* ---------- akcje w wierszu ---------- */
.list-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; visibility: hidden; }
.list-row:hover .list-actions, .list-row.is-hover .list-actions, .list-row:focus-within .list-actions { visibility: visible; }
.list-actions .btn-icon { width: 24px; height: 24px; }
.list-actions .btn-icon .icon { width: 14px; height: 14px; }

/* ---------- pliki ---------- */
.list-file-icon { flex: 0 0 28px; width: 28px; height: 28px; border-radius: var(--radius); background: var(--neutral-soft); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.list-file-icon .icon { width: 15px; height: 15px; color: inherit; }
.list-file-icon.is-pdf { background: var(--danger-soft); color: var(--danger-text); }
.list-file-icon.is-sheet { background: var(--accent-soft); color: var(--accent-text); }
.list-file-icon.is-doc { background: var(--info-soft); color: var(--info-text); }
.list-file-icon.is-image { background: var(--warn-soft); color: var(--warn-text); }
.list-size { flex: 0 0 66px; width: 66px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11.5px; text-align: right; color: var(--muted); }

/* ---------- wątki zagnieżdżone ---------- */
.list-child { padding-left: 36px; }
.list-child::after { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.list-child-2 { padding-left: 58px; }
.list-child-2::after { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 23px; background: linear-gradient(to right, var(--line-2) 0 1px, transparent 1px 22px, var(--line-2) 22px 23px); }
.list-nested .list-row.is-selected::after { opacity: .5; }

/* ---------- komentarze ---------- */
.list-comments .list-comment-text { max-width: 78ch; }
.list-comment { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-3); }
.list-comment:last-child { border-bottom: 0; }
.list-comment-main { flex: 1; min-width: 0; }
.list-comment-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.list-comment-author { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.list-comment-time { font-family: var(--mono); font-size: 11px; color: var(--label); }
.list-comment-text { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.list-comment-actions { display: flex; align-items: center; gap: 14px; margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.list-comment-actions span { cursor: pointer; }
.list-comment-actions span:hover { color: var(--link); }
.list-reply { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--line-2); }
.list-reply .list-comment { padding: 0 0 0 2px; border-bottom: 0; }
.list-reply .list-comment + .list-comment { margin-top: 10px; }

/* ---------- powiadomienia ---------- */
.list-notify .list-row { align-items: flex-start; height: auto; padding: 9px 12px; }
.list-notify .list-row.is-unread { background: var(--surface); }
.list-notify .list-row.is-unread .list-title { font-weight: 600; }
.list-notify .list-row.is-unread:hover { background: var(--hover); }
.list-unread { flex: 0 0 7px; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--accent); }
.list-unread.is-read { background: transparent; }
.list-unread.is-warn { background: var(--warn); }

/* ---------- log ---------- */
.list-log { font-family: var(--mono); font-size: 11.5px; }
.list-log .list-row { height: 26px; gap: 10px; padding: 0 12px; border-bottom: 0; }
.list-log .list-row:hover { background: var(--surface-2); }
.list-log .list-row.is-error { background: var(--danger-soft); }
.list-log .list-row.is-warn { background: var(--warn-soft); }
.list-level { flex: 0 0 46px; width: 46px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; color: var(--muted); }
.list-level.is-info { color: var(--info-text); }
.list-level.is-warn { color: var(--warn-text); }
.list-level.is-error { color: var(--danger); }
.list-msg { flex: 1; min-width: 0; color: var(--ink-2); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.list-log .list-time { flex: 0 0 66px; width: 66px; }

/* ---------- pary etykieta-wartość ---------- */
.list-kv .list-row { height: 30px; gap: 12px; }
.list-kv .list-row:hover { background: var(--surface-3); }
.list-kv-label { flex: 0 0 148px; width: 148px; font-size: 11.5px; color: var(--muted); }
.list-kv-value { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink); }

/* ---------- wybór jednego ---------- */
.list-choice .list-row { align-items: flex-start; height: auto; padding: 9px 12px; cursor: pointer; }
.list-choice .list-title { font-weight: 600; }
.list-choice input { margin-top: 2px; }

/* ---------- pozycje z kwotami i sumą ---------- */
.list-no { flex: 0 0 22px; width: 22px; font-family: var(--mono); font-size: 11px; text-align: right; color: var(--label); }
.list-qty { flex: 0 0 74px; width: 74px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11.5px; text-align: right; color: var(--muted); }
.list-total { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: var(--surface-2); border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.list-total .list-amount { font-size: 13px; }

/* ---------- szkielet ładowania ---------- */
.list-skel-avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; }
.list-skel-title { width: 44%; }
.list-skel-sub { width: 26%; height: 8px; margin-top: 5px; }
.list-skel-meta { width: 54px; flex: 0 0 54px; }
.list-skeleton .list-row:nth-child(2n) .list-skel-title { width: 58%; }
.list-skeleton .list-row:nth-child(3n) .list-skel-title { width: 34%; }
.list-skeleton .list-row:nth-child(3n) .list-skel-sub { width: 38%; }

/* ---------- uzupełnienia ---------- */

/* pasek dociągania kolejnej porcji strumienia */
.list-more { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 36px; height: 36px; background: var(--surface-3); border-top: 1px solid var(--line-2); color: var(--link); font-size: 12px; font-weight: 600; cursor: pointer; user-select: none; }
.list-more:hover, .list-more.is-hover { background: var(--hover); }
.list-more .icon { width: 13px; height: 13px; color: inherit; }
.list-more-rest { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--label); }
.list-more.is-loading { color: var(--muted); font-weight: 500; cursor: default; }

/* błąd wczytania listy: kolor tytułu niesie stan, plakietka z kodem do przepisania */
.list-error { padding: 26px 16px 24px; text-align: center; }
.list-error-title { font-size: 12.5px; font-weight: 600; color: var(--danger-text); margin-bottom: 5px; }
.list-error-msg { font-size: 12px; line-height: 1.5; color: var(--muted); }
.list-error-code { display: inline-block; margin-top: 10px; padding: 3px 8px; border-radius: 3px; background: var(--danger-soft); color: var(--danger-text); font-size: 11px; }
.list-error-actions { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }

/* wiersz dodawania na końcu listy: pole bez ramki, zapis Enterem */
.list-add { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 0 34px; height: 34px; padding: 0 12px; background: var(--surface-3); border-top: 1px solid var(--line-2); }
.list-add.is-focus { background: var(--surface); }
.list-add.is-focus::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.list-add-icon { flex: 0 0 14px; display: flex; align-items: center; justify-content: center; color: var(--label); }
.list-add-icon .icon { width: 14px; height: 14px; color: inherit; }
.list-add.is-focus .list-add-icon { color: var(--accent-text); }
.list-add-input { flex: 1; min-width: 0; height: 26px; padding: 0; border: 0; background: transparent; font-size: 12.5px; }
.list-add-input:focus { border: 0; box-shadow: none; }
.list-add-hint { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; font-size: 11px; color: var(--label); }
.list-add-hint .kbd { font-size: 10.5px; padding: 0 4px; border-bottom-width: 1px; }

/* ---------- lista master ze zdjęciem i statusem (list-master-status) ---------- */
.list-master-status .list-thumb { overflow: hidden; }
.list-thumb-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.list-thumb-mock { width: 100%; height: 100%; background: radial-gradient(circle at 40% 45%, var(--warn-soft) 0 9px, transparent 10px), linear-gradient(160deg, var(--info-soft), var(--accent-soft) 60%, var(--neutral-soft)); }
.list-master-status .list-chips { align-items: center; }
.list-master-status .list-chips .badge { height: 18px; }


/* ===== card: Karty ===== */
/* card: karty i kafelki liczb. Rozszerza .card, .card-head, .card-body, .card-foot z base.css i nigdy ich nie nadpisuje. */

/* ---------- układy pomocnicze rodziny ---------- */
.card-stack { display: grid; gap: 10px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card-thumb { width: 56px; height: 56px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); color: var(--label); }
.card-thumb-lg { width: 72px; height: 72px; }
.card-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.card-amount { font-family: var(--mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-body > .card-amount { display: block; margin-top: 8px; }
.card-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.card-text + .card-amount { font-family: var(--mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-body > .card-amount { display: block; margin-top: 8px; }
.card-text { margin-top: 8px; }
.card-figure { font-family: var(--mono); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }

/* ---------- kafelek liczby ---------- */
.card-kpi { flex: 1; min-width: 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-kpi-label { font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-kpi-value { margin-top: 3px; font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.card-kpi-value.is-danger { color: var(--danger); }
.card-kpi-value.is-accent { color: var(--accent-text); }
.card-kpi-note { margin-top: 3px; font-size: 11px; color: var(--muted); }
.card-kpi-note.is-danger { color: var(--danger-text); }

/* kafelek z trendem: liczba z lewej, sparkline z prawej; delta służy też wykresowi i porównaniu okresów */
.card-kpi-trend { display: flex; align-items: flex-end; gap: 14px; }
.card-delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.card-delta .icon { width: 12px; height: 12px; }
.card-delta.is-up { color: var(--accent-text); }
.card-delta.is-down { color: var(--danger); }
.card-kpi-spark { width: 128px; height: 40px; flex: 0 0 auto; color: var(--accent); }
.card-kpi-spark.is-down { color: var(--danger); }
.card-kpi-spark polyline { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* siatka czterech kafelków: liczba schodzi do 17px, żeby kwota nie łamała się na dwie linie */
.card-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.card-kpi-grid .card-kpi-value { font-size: 17px; }

/* ---------- karta osoby i firmy ---------- */
.card-ident { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.card-ident-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.card-ident-sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
.card-contact { display: grid; gap: 6px; }
.card-contact-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); min-width: 0; }
.card-contact-row .icon { width: 13px; height: 13px; color: var(--label); flex: 0 0 auto; }

/* ---------- karta produktu ---------- */
.card-product-media { height: 96px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-bottom: 1px solid var(--line-3); color: var(--label); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card-product-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.card-product-sku { margin-top: 2px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.card-product-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.card-product-price { font-family: var(--mono); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- karta pliku ---------- */
.card-file-preview { height: 108px; display: flex; align-items: center; justify-content: center; padding: 10px 0; background: var(--surface-2); border-bottom: 1px solid var(--line-3); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card-file-sheet { width: 66px; height: 88px; padding: 9px 8px; display: grid; align-content: start; gap: 5px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.card-file-line { height: 4px; border-radius: 2px; background: var(--line-2); }
.card-file-line.is-short { width: 58%; }
.card-file-name { font-size: 12.5px; font-weight: 600; }
.card-file-meta { margin-top: 2px; font-size: 11px; color: var(--muted); }

/* ---------- karta zadania ---------- */
.card-task { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; }
.card-task-title { font-size: var(--fs); line-height: 1.35; }
.card-task-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.card-task-meta .icon { width: 12px; height: 12px; color: var(--label); }
.card-task-due { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); }
.card-task-due.is-late { color: var(--danger); }
.card-task.is-done .card-task-title { color: var(--muted); text-decoration: line-through; }

/* ---------- karta ustawień ---------- */
.card-setting { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-3); }
.card-setting:last-child { border-bottom: 0; padding-bottom: 0; }
.card-setting:first-child { padding-top: 0; }
.card-setting-name { font-size: var(--fs); }
.card-setting-desc { margin-top: 2px; font-size: 11.5px; color: var(--muted); }

/* ---------- podsumowanie kwot ---------- */
.card-sum-row { display: flex; align-items: baseline; gap: 12px; padding: 3px 0; font-size: var(--fs-sm); }
.card-sum-row .card-sum-label { color: var(--muted); }
.card-sum-value { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.card-sum-total { margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--line); font-size: var(--fs); font-weight: 600; }
.card-sum-total .card-sum-label { color: var(--ink); }
.card-sum-total .card-sum-value { font-size: 15px; font-weight: 700; }

/* ---------- karta z wykresem ---------- */
.card-chart-plot { height: 96px; color: var(--accent); }
.card-chart-plot svg { display: block; width: 100%; height: 100%; }
.card-chart-area { fill: var(--accent-soft); stroke: none; }
.card-chart-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.card-chart-base { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.card-chart-axis { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 10px; color: var(--label); }

/* ---------- karta wyboru ---------- */
.card-select { position: relative; padding: 12px 40px 12px 14px; cursor: pointer; }
.card-select-mark { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-input); display: flex; align-items: center; justify-content: center; color: var(--accent-ink); }
.card-select-mark .icon { width: 11px; height: 11px; stroke-width: 2; visibility: hidden; }
.card-select.is-selected .card-select-mark { background: var(--accent); border-color: var(--accent); }
.card-select.is-selected .card-select-mark .icon { visibility: visible; }
.card-select-desc { margin-top: 3px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* ---------- karta akcji ---------- */
.card-action { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.card-action:hover, .card-action.is-hover { border-color: var(--accent-soft-line); background: var(--hover); }
.card-action-arrow { margin-left: auto; color: var(--label); flex: 0 0 auto; }
.card-action:hover .card-action-arrow, .card-action.is-hover .card-action-arrow { color: var(--accent-text); }

/* ---------- pusty stan w karcie ---------- */
.card-empty { display: flex; align-items: center; justify-content: center; min-height: 150px; }

/* ---------- karta ostrzeżenia ---------- */
.card-alert { border-color: var(--warn-line); }
.card-alert-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--warn-soft); border-bottom: 1px solid var(--warn-line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; font-size: 12.5px; font-weight: 600; color: var(--warn-text); }
.card-alert-head .icon { width: 15px; height: 15px; flex: 0 0 auto; }
.card-alert.is-danger { border-color: var(--danger-line); }
.card-alert.is-danger .card-alert-head { background: var(--danger-soft); border-bottom-color: var(--danger-line); color: var(--danger-text); }

/* ---------- karta z listą ---------- */
.card-rows { padding: 2px 0; }
.card-row { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 5px 14px; border-top: 1px solid var(--line-3); }
.card-row:first-child { border-top: 0; }
.card-row:hover, .card-row.is-hover { background: var(--hover); }
.card-row-main { font-size: var(--fs-sm); }
.card-row-sub { font-size: 11px; color: var(--muted); }
.card-row-value { margin-left: auto; font-family: var(--mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- karta z zakładkami ---------- */
.card-tabbar { padding: 0 8px; background: var(--surface-3); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* ---------- karta zwijana ---------- */
.card-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; user-select: none; }
.card-toggle .icon { width: 14px; height: 14px; color: var(--label); flex: 0 0 auto; }
.card-toggle-count { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--label); }
.card-collapsible.is-open .card-toggle { border-bottom: 1px solid var(--line-3); }

/* ---------- akcje pojawiające się na hover ---------- */
.card-hoverable { position: relative; }
.card-hover-actions { position: absolute; top: 7px; right: 8px; display: flex; gap: 2px; padding: 2px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); opacity: 0; transition: opacity .12s; }
.card-hoverable:hover .card-hover-actions, .card-hoverable.is-hover .card-hover-actions { opacity: 1; }

/* ---------- karta pozioma ---------- */
.card-horizontal { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }

/* ---------- pasek statusu z lewej ---------- */
.card-stripe { position: relative; padding-left: 3px; overflow: hidden; }
.card-stripe::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--neutral-dot); }
.card-stripe.is-ok::before { background: var(--accent); }
.card-stripe.is-warn::before { background: var(--warn); }
.card-stripe.is-danger::before { background: var(--danger); }
.card-stripe.is-info::before { background: var(--info); }

/* ---------- karta z postępem ---------- */
.card-progress-meta { display: flex; align-items: center; gap: 10px; margin-top: 7px; font-size: 11.5px; color: var(--muted); }
.card-progress-rest { margin-left: auto; }
.card-progress-pct { margin-left: auto; font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink); }

/* ---------- karta planu ---------- */
.card-pricing { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.card-pricing.is-selected { border-color: var(--accent); }
.card-pricing-name { font-size: 12.5px; font-weight: 600; }
.card-pricing-price { font-family: var(--mono); font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.card-pricing-unit { font-size: 11px; color: var(--muted); }
.card-pricing-feats { display: grid; gap: 6px; margin: 0; }
.card-pricing-feat { display: flex; align-items: flex-start; gap: 7px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.35; }
.card-pricing-feat .icon { width: 12px; height: 12px; margin-top: 3px; color: var(--accent-text); flex: 0 0 auto; }
.card-pricing-feat.is-off { color: var(--label); }
.card-pricing-feat.is-off .icon { color: var(--label); }

/* ---------- porównanie okresów ---------- */
.card-compare { display: grid; grid-template-columns: 1fr 1fr; }
.card-compare-col { padding: 2px 14px; }
.card-compare-col + .card-compare-col { border-left: 1px solid var(--line-3); }
.card-compare-period { font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.card-compare-value { margin-top: 3px; font-family: var(--mono); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card-compare-col.is-past .card-compare-value { color: var(--muted); font-weight: 400; }
.card-compare-note { margin-top: 2px; font-size: 11px; color: var(--muted); }

/* ---------- mini-karta ---------- */
.card-mini { display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.card-mini-title { font-size: var(--fs-sm); font-weight: 600; }
.card-mini-meta { font-size: 11px; color: var(--muted); }
.card-mini-value { margin-left: auto; font-family: var(--mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- szkielet karty ---------- */
.card-skel { display: grid; gap: 9px; }
.card-skel-title { height: 12px; width: 44%; }
.card-skel-full { width: 100%; }
.card-skel-half { width: 62%; }
.card-skel-third { width: 34%; }

/* ---------- karta z uchwytem ---------- */
.card-drag { display: flex; align-items: stretch; }
.card-drag-handle { display: flex; align-items: center; justify-content: center; width: 22px; flex: 0 0 22px; border-right: 1px solid var(--line-3); color: var(--label); cursor: grab; }
.card-drag-handle .icon { width: 13px; height: 13px; }
.card-drag-body { padding: 9px 12px; min-width: 0; }
.card-drag.is-dragging { border-color: var(--accent); box-shadow: var(--shadow); }
.card-drop { height: 44px; border: 1px dashed var(--accent-soft-line); border-radius: var(--radius-lg); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: var(--accent-text); }

/* ---------- metadane w stopce ---------- */
.card-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.card-meta-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.card-meta-item .icon { width: 12px; height: 12px; color: var(--label); }
.card-meta-id { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--label); }

/* ---------- uzupełnienia ---------- */

/* kafelek celu: pasek realizacji planu ze znacznikiem tempa i prognozą */
.card-goal { position: relative; }
.card-goal-plan { margin-top: 2px; font-size: 11px; color: var(--muted); }
.card-goal-bar { position: relative; margin-top: 9px; }
.card-goal-pace { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--ink-2); }
.card-goal-meta { display: flex; align-items: baseline; gap: 10px; margin-top: 7px; font-size: 11.5px; color: var(--muted); }
.card-goal-pct { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.card-goal-forecast { margin-left: auto; font-family: var(--mono); white-space: nowrap; }
.card-goal-forecast.is-warn { color: var(--warn-text); }
.card-goal-forecast.is-danger { color: var(--danger-text); }

/* siatka kart z zaznaczaniem wielu: belka zaznaczenia (.bulkbar z rodziny belek) nad siatką */
.card-multi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.card-multi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; background: var(--canvas); }
.card-pick { position: relative; display: block; padding: 12px; cursor: pointer; min-width: 0; }
.card-pick-check { position: absolute; top: 9px; right: 9px; display: flex; align-items: center; }
.card-pick-check input { margin: 0; }
.card-pick .card-thumb { width: 40px; height: 40px; }
.card-pick-name { margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.card-pick-meta { margin-top: 2px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.card-pick.is-selected { background: var(--accent-soft); }
.card-pick.is-selected .card-thumb { border-color: var(--accent-soft-line); background: var(--surface); color: var(--accent-text); }
.card-pick.is-disabled { opacity: .5; cursor: default; }


/* ===== field: Pola formularza ===== */
/* field: pola formularza. Rozszerzenia .field z base.css - maski i afiksy, listy wyboru,
   chipy, kalendarz, suwaki, siła hasła, strefa upuszczania i edycja wartości w miejscu. */

/* ---------- układ: pola obok siebie, stopka pola ---------- */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.field-row-postal { grid-template-columns: 116px 1fr; }
.field-foot { display: flex; align-items: baseline; gap: 12px; }
.field-foot .field-help { flex: 1; min-width: 0; }
.field-counter { font-family: var(--mono); font-size: 11px; color: var(--label); white-space: nowrap; margin-left: auto; }
.field-counter.is-error { color: var(--danger); }
.field-msg { display: flex; align-items: center; gap: 5px; }
.field-msg .icon { width: 12px; height: 12px; flex: 0 0 auto; }
.field-w-sm { width: 132px; }
.field-w-md { width: 200px; }

/* ---------- afiksy w .input-wrap: zł, %, http://, +48 ---------- */
.field-affix { align-self: stretch; display: flex; align-items: center; padding: 0 8px; background: var(--surface-2); color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.field-affix-start { margin-left: -8px; border-right: 1px solid var(--line-2); border-radius: 3px 0 0 3px; }
.field-affix-end { margin-right: -8px; border-left: 1px solid var(--line-2); border-radius: 0 3px 3px 0; }
.field-clear { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 3px; color: var(--label); cursor: pointer; flex: 0 0 auto; margin-right: -2px; }
.field-clear:hover, .field-clear.is-hover { background: var(--line); color: var(--ink); }
.field-clear .icon { width: 10px; height: 10px; }
.field-icon-btn { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 3px; color: var(--label); cursor: pointer; flex: 0 0 auto; margin-right: -3px; }
.field-icon-btn:hover, .field-icon-btn.is-hover { background: var(--hover-neutral); color: var(--ink); }
.field-icon-btn .icon { width: 13px; height: 13px; }
.field-valid { width: 13px; height: 13px; color: var(--accent); flex: 0 0 auto; }
.field-mask { font-family: var(--mono); letter-spacing: .3px; }
.field-mask-wide { font-family: var(--mono); letter-spacing: .8px; }

/* ---------- liczba z − + ---------- */
.field-stepper { display: flex; align-items: center; width: 132px; height: var(--h-input); border: 1px solid var(--line-input); border-radius: var(--radius); background: var(--field); }
.field-stepper.is-focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.field-stepper.is-disabled { opacity: .55; background: var(--neutral-soft); pointer-events: none; }
.field-stepper .input { border: 0; background: none; height: 100%; padding: 0; text-align: center; box-shadow: none; }
.field-stepper-btn { width: 26px; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; flex: 0 0 auto; }
.field-stepper-btn:hover, .field-stepper-btn.is-hover { background: var(--hover-neutral); color: var(--ink); }
.field-stepper-btn.is-disabled { opacity: .35; pointer-events: none; }
.field-stepper-btn .icon { width: 12px; height: 12px; }

/* ---------- lista rozwinięta pod polem ---------- */
.field-pop { margin-top: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.field-listbox { max-height: 224px; overflow: auto; padding: 3px 0; }
.field-option { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 10px; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; white-space: nowrap; }
.field-option:hover, .field-option.is-hover { background: var(--hover-neutral); }
.field-option.is-selected { background: var(--selected); color: var(--accent-text); font-weight: 600; }
.field-option.is-disabled { opacity: .45; pointer-events: none; }
.field-option .icon { width: 13px; height: 13px; color: var(--label); }
.field-option .field-check { width: 13px; height: 13px; margin-left: auto; color: var(--accent-text); visibility: hidden; }
.field-option.is-selected .field-check { visibility: visible; }
.field-option-2 { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 40px; line-height: 1.3; }
.field-option-sub { font-size: 11px; color: var(--muted); }
.field-option-meta { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--label); }
.field-mark { background: var(--accent-soft); color: var(--accent-text); border-radius: 2px; }
.field-pop-head { padding: 5px 10px 2px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.field-pop-foot { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-top: 1px solid var(--line-3); font-size: 11px; color: var(--muted); }
.field-pop-foot .icon { width: 12px; height: 12px; color: var(--label); }
.field-pop-empty { padding: 14px 10px; text-align: center; font-size: var(--fs-sm); color: var(--label); }

/* ---------- wiele wartości: chipy w polu ---------- */
.field-multi, .field-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: var(--h-input); padding: 3px 6px; border: 1px solid var(--line-input); border-radius: var(--radius); background: var(--field); }
.field-multi.is-focus, .field-tags.is-focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.field-multi .chip, .field-tags .chip { height: 20px; }
.field-inp { flex: 1; min-width: 70px; height: 20px; border: 0; background: none; outline: none; font-size: var(--fs); color: var(--ink); }
.field-inp::placeholder { color: var(--label); }
.field-autogrow { min-height: 56px; max-height: 200px; resize: none; overflow: hidden; }

/* ---------- hasło: siła i reguły ---------- */
.field-strength { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.field-strength-bars { display: flex; gap: 3px; flex: 1; min-width: 0; }
.field-strength-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--line-3); }
.field-strength-seg.is-danger { background: var(--danger); }
.field-strength-seg.is-warn { background: var(--warn); }
.field-strength-seg.is-ok { background: var(--accent); }
.field-strength-text { font-size: 11px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.field-rules { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }
.field-rule { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.field-rule .icon { width: 11px; height: 11px; color: var(--line-input); }
.field-rule.is-ok { color: var(--accent-text); }
.field-rule.is-ok .icon { color: var(--accent); }

/* ---------- kod jednorazowy ---------- */
.field-otp { display: flex; align-items: center; gap: 8px; }
.field-otp-box { width: 40px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-input); border-radius: var(--radius); background: var(--field); font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--ink); }
.field-otp-box.is-focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.field-otp-box.is-empty { color: var(--label); }
.field-otp-box.is-error { border-color: var(--danger); }
.field-otp-sep { width: 8px; height: 1px; background: var(--line-input); flex: 0 0 auto; }

/* ---------- telefon z prefiksem kraju ---------- */
.field-phone { display: flex; align-items: center; height: var(--h-input); border: 1px solid var(--line-input); border-radius: var(--radius); background: var(--field); }
.field-phone.is-focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.field-phone-cc { display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 8px; border-right: 1px solid var(--line-2); background: var(--surface-2); border-radius: 3px 0 0 3px; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.field-phone-cc .icon { width: 10px; height: 10px; color: var(--label); }
.field-phone .input { border: 0; background: none; box-shadow: none; font-family: var(--mono); }

/* ---------- grupy wyboru ---------- */
.field-group { display: flex; flex-direction: column; gap: 7px; }
.field-group-inline { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
.field-box { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.field-box-scroll { max-height: 128px; overflow: auto; }
.field-box-head { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line-3); }
.field-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field-card { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid var(--line-input); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; }
.field-card:hover, .field-card.is-hover { background: var(--surface-3); }
.field-card.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--focus-ring); }
.field-card.is-disabled { opacity: .5; pointer-events: none; }
.field-card input { width: 14px; height: 14px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.field-card-body { display: block; min-width: 0; flex: 1; }
.field-card-title { display: block; font-size: var(--fs); font-weight: 600; color: var(--ink); }
.field-card-desc { display: block; font-size: 11px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.field-card-price { display: block; margin-top: 6px; font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; }

/* ---------- przełącznik w wierszu ustawień ---------- */
.field-switch-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.field-switch-row + .field-switch-row { border-top: 1px solid var(--line-3); }
.field-switch-text { flex: 1; min-width: 0; }
.field-switch-title { font-size: var(--fs); color: var(--ink); }
.field-switch-desc { font-size: 11px; color: var(--muted); line-height: 1.35; margin-top: 1px; }

/* ---------- segmentowany wybór ---------- */
.field-segmented { display: inline-flex; gap: 2px; height: var(--h-input); padding: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.field-segmented-block { display: flex; }
.field-segmented-block .field-segment { flex: 1; }
.field-segment { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 12px; border-radius: 3px; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; white-space: nowrap; user-select: none; }
.field-segment:hover, .field-segment.is-hover { color: var(--ink); }
.field-segment.is-active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.field-segment.is-disabled { opacity: .4; pointer-events: none; }
.field-segment .icon { width: 13px; height: 13px; }

/* ---------- suwaki ---------- */
.field-slider { display: flex; align-items: center; gap: 12px; }
.field-slider-input { flex: 1; min-width: 0; height: 18px; accent-color: var(--accent); cursor: pointer; }
.field-slider-val { width: 76px; flex: 0 0 auto; }
.field-slider-scale { display: flex; justify-content: space-between; margin-top: 2px; font-family: var(--mono); font-size: 10px; color: var(--label); }
.field-range { position: relative; height: 18px; margin: 0 7px; }
.field-range-track { position: absolute; top: 7px; left: -7px; right: -7px; height: 4px; border-radius: 2px; background: var(--line-2); }
.field-range-fill { position: absolute; top: 7px; height: 4px; border-radius: 2px; background: var(--accent); }
.field-range-thumb { position: absolute; top: 2px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: var(--shadow-sm); cursor: grab; }
.field-range-thumb.is-focus { box-shadow: 0 0 0 3px var(--focus-ring); }
.field-range-scale { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 10px; color: var(--label); }

/* ---------- kolor ---------- */
.field-color { display: flex; align-items: center; gap: 8px; }
.field-swatch { width: var(--h-input); height: var(--h-input); border-radius: var(--radius); border: 1px solid var(--line-input); flex: 0 0 auto; }
.field-swatches { display: flex; gap: 5px; margin-top: 6px; }
.field-swatch-sm { width: 20px; height: 20px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--chrome) 14%, transparent); cursor: pointer; flex: 0 0 auto; }
.field-swatch-sm.is-selected { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent); }

/* ---------- pliki ---------- */
.field-file { display: flex; align-items: center; gap: 8px; height: var(--h-input); padding: 0 4px 0 8px; border: 1px solid var(--line-input); border-radius: var(--radius); background: var(--field); }
.field-file .icon { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; }
.field-file-name { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--ink); }
.field-file-name.is-empty { color: var(--label); }
.field-file-size { font-family: var(--mono); font-size: 11px; color: var(--label); white-space: nowrap; }
.field-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 18px 12px; border: 1.5px dashed var(--line-input); border-radius: var(--radius-lg); background: var(--surface-3); text-align: center; cursor: pointer; }
.field-dropzone .icon { width: 24px; height: 24px; color: var(--label); margin-bottom: 2px; }
.field-dropzone.is-hover { border-color: var(--accent); background: var(--accent-soft); }
.field-dropzone.is-hover .icon { color: var(--accent-text); }
.field-dropzone-title { font-size: var(--fs-sm); color: var(--ink-2); }
.field-dropzone-hint { font-size: 11px; color: var(--muted); }
.field-files { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.field-file-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink); }
.field-file-row .icon { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; }

/* ---------- ocena punktowa ---------- */
.field-rating { display: flex; gap: 4px; }
.field-rating-item { width: 34px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-input); border-radius: var(--radius); background: var(--surface); font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); cursor: pointer; }
.field-rating-item:hover, .field-rating-item.is-hover { border-color: var(--accent); color: var(--link); }
.field-rating-item.is-selected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.field-rating-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: var(--label); }

/* ---------- edycja w miejscu ---------- */
.field-inline { display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 6px; margin-left: -6px; border: 1px solid transparent; border-radius: var(--radius); font-size: var(--fs); color: var(--ink); cursor: text; }
.field-inline:hover, .field-inline.is-hover { border-color: var(--line-input); background: var(--surface); }
.field-inline .icon { width: 12px; height: 12px; margin-left: auto; color: var(--label); opacity: 0; }
.field-inline:hover .icon, .field-inline.is-hover .icon { opacity: 1; }
.field-inline-form { display: flex; align-items: center; gap: 6px; }
.field-inline-form .input { height: 26px; }
.field-inline-form .btn { height: 26px; }

/* ---------- kalendarz ---------- */
.field-calendar { display: inline-block; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.field-cal-head { display: flex; align-items: center; gap: 4px; height: 26px; }
.field-cal-title { flex: 1; text-align: center; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.field-cal-nav { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 3px; color: var(--muted); cursor: pointer; flex: 0 0 auto; }
.field-cal-nav:hover, .field-cal-nav.is-hover { background: var(--hover-neutral); color: var(--ink); }
.field-cal-nav .icon { width: 12px; height: 12px; }
.field-cal-grid { display: grid; grid-template-columns: repeat(7, 28px); gap: 1px; }
.field-cal-dow { height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--label); }
.field-cal-day { height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 3px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; }
.field-cal-day:hover, .field-cal-day.is-hover { background: var(--hover-neutral); }
.field-cal-day.is-muted { color: var(--label); }
.field-cal-day.is-today { border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.field-cal-day.is-selected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.field-cal-day.is-disabled { opacity: .3; pointer-events: none; }
.field-cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line-3); font-size: 11px; color: var(--muted); }

/* ---------- skróty okresów pod polem ---------- */
.field-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ---------- uzupełnienia: waluta obca, jednostka z listy ---------- */
.field-row-fx { grid-template-columns: 1fr 104px; }
.field-fx { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; padding: 6px 9px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); }
.field-fx-rate { font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink-2); }
.field-fx-value { margin-left: auto; font-family: var(--mono); font-size: var(--fs); font-weight: 600; color: var(--ink); white-space: nowrap; }
.field-fx-value.is-stale { color: var(--warn-text); }
.field-unit-affix { gap: 4px; cursor: pointer; }
.field-unit-affix:hover, .field-unit-affix.is-hover { background: var(--hover-neutral); color: var(--ink); }
.field-unit-affix .icon { width: 10px; height: 10px; color: var(--label); }
.field-unit-pop { width: 116px; margin-left: auto; }
.field-capslock { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11px; color: var(--warn-text); }
.field-capslock .icon { width: 12px; height: 12px; flex: 0 0 auto; }


/* ===== form: Układy formularzy ===== */
/* form: układy formularzy - siatki kolumn, sekcje, nawigacja sekcji, kreator, belka niezapisanych
   zmian, podsumowanie błędów i tryb podglądu. Same pola, przyciski i karty są z base.css. */

/* ---------- kadłub ---------- */
.form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.form-single { width: 440px; max-width: 100%; }
.form-note { font-size: 11px; color: var(--muted); }

/* ---------- siatki kolumn ---------- */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 12px 14px; align-items: start; min-width: 0; }
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-span-2 { grid-column: span 2; }
.form-span-all { grid-column: 1 / -1; }
.form-w-xs { width: 80px; flex: 0 0 80px; }
.form-w-sm { width: 110px; flex: 0 0 110px; }
.form-w-md { width: 150px; flex: 0 0 150px; }
.form-w-lg { width: 200px; flex: 0 0 200px; }

/* ---------- pełny panel: nagłówek, treść, stopka ---------- */
.form-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--surface); }
.form-head { display: flex; align-items: center; gap: 10px; height: 44px; flex: 0 0 44px; padding: 0 16px; border-bottom: 1px solid var(--line-2); }
.form-title { font-size: 14px; font-weight: 600; }
.form-hint { font-size: var(--fs-xs); color: var(--muted); }
.form-main { display: flex; flex: 1; min-height: 0; }
.form-body { flex: 1; min-width: 0; overflow: auto; padding: 16px; }
.form-flush { padding: 0; }
.form-foot { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 10px 16px; border-top: 1px solid var(--line-2); background: var(--surface-3); }

/* ---------- sekcje z nagłówkiem ---------- */
.form-section { padding: 12px 14px; border-top: 1px solid var(--line-3); }
.form-section:first-child { border-top: 0; }
.form-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.form-section-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.form-section-hint { font-size: 11px; color: var(--muted); margin-left: auto; }

/* ---------- nawigacja sekcji z boku ---------- */
.form-nav { width: 190px; flex: 0 0 190px; padding: 8px 0; overflow: auto; background: var(--surface-2); border-right: 1px solid var(--line-2); }
.form-nav-head { padding: 4px 14px 6px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.form-nav-item { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 14px; border-left: 2px solid transparent; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.form-nav-item:hover, .form-nav-item.is-hover { background: var(--hover-neutral); }
.form-nav-item.is-active { background: var(--surface); border-left-color: var(--accent); color: var(--ink); font-weight: 600; }
.form-nav-item.is-error { color: var(--danger); }
.form-nav-count { margin-left: auto; font-size: 10.5px; color: var(--label); }
.form-nav-item.is-error .form-nav-count { color: var(--danger); }

/* ---------- stepper kreatora ---------- */
.form-steps { display: flex; align-items: center; height: 58px; flex: 0 0 58px; padding: 0 16px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); }
.form-step { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.form-step-num { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; border: 1px solid var(--line-input); background: var(--surface); color: var(--muted); font: 600 11px var(--mono); display: flex; align-items: center; justify-content: center; }
.form-step-num .icon { width: 12px; height: 12px; }
.form-step-label { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); }
.form-step-hint { display: block; font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--label); }
.form-step.is-done .form-step-num { background: var(--accent-soft); border-color: var(--accent-soft-line); color: var(--accent-text); }
.form-step.is-done .form-step-label { color: var(--ink-2); }
.form-step.is-active .form-step-num { background: var(--chrome); border-color: var(--chrome); color: var(--chrome-accent-text); }
.form-step.is-active .form-step-label { color: var(--ink); font-weight: 600; }
.form-step-line { flex: 1; min-width: 14px; height: 1px; margin: 0 10px; background: var(--line); }
.form-step-line.is-done { background: var(--accent-soft-line); }

/* ---------- belka niezapisanych zmian (przyklejona na dole obszaru przewijania) ---------- */
.form-dirty-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.form-dirty-scroll { flex: 1; min-height: 0; overflow: auto; }
.form-dirty-bar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 10px; height: 44px; margin-top: 12px; padding: 0 12px; background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: var(--radius); box-shadow: var(--shadow); }
.form-dirty-text { font-size: 12.5px; font-weight: 600; color: var(--warn-text); }
.form-dirty-count { font-size: var(--fs-xs); color: var(--warn-text); }

/* ---------- podsumowanie błędów ---------- */
.form-errors { padding: 10px 12px; background: var(--danger-soft); border: 1px solid var(--danger-line); border-left-width: 3px; border-radius: var(--radius); }
.form-errors-title { font-size: 12.5px; font-weight: 600; color: var(--danger-text); margin-bottom: 6px; }
.form-errors-list { display: flex; flex-direction: column; gap: 3px; }
.form-errors-item { font-size: 12px; color: var(--ink-2); }
.form-error-link { color: var(--danger-text); text-decoration: underline; cursor: pointer; }
.form-error-link:hover { color: var(--danger); }

/* ---------- jedna linia (szybkie dodanie) ---------- */
.form-inline { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.form-inline-actions { display: flex; align-items: center; gap: 8px; }

/* ---------- ustawienia: siatka kart + wiersze z przełącznikiem ---------- */
.form-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.form-switch-row { display: flex; width: 100%; align-items: flex-start; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line-3); }
.form-switch-row .switch-track { margin-top: 1px; }
.form-switch-text { flex: 1; min-width: 0; font-size: 12.5px; }

/* ---------- pozycje dokumentu: tabela edytowalna + sumy ---------- */
.form-items th { height: 28px; padding: 0 8px; }
.form-items td { height: 34px; padding: 3px 8px; }
.form-items .input, .form-items .select { height: 26px; font-size: var(--fs-sm); }
.form-items-num { width: 34px; text-align: right; color: var(--label); font-family: var(--mono); }
.form-items-qty { width: 96px; }
.form-items-unit { width: 86px; }
.form-items-price { width: 104px; }
.form-items-vat { width: 86px; }
.form-items-val { width: 112px; }
.form-items-act { width: 38px; }
.form-items-add { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.form-items-total { display: flex; justify-content: flex-end; padding: 10px 14px; background: var(--surface-2); border-top: 1px solid var(--line); }
.form-items-sum { display: grid; grid-template-columns: 1fr auto; gap: 5px 20px; width: 280px; margin: 0; font-size: 12.5px; }
.form-items-sum dt { color: var(--muted); }
.form-items-sum dd { margin: 0; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.form-items-grand { font-size: 15px; font-weight: 700; color: var(--ink); }

/* ---------- bloki powtarzalne (osoby kontaktowe) ---------- */
.form-repeat { display: flex; flex-direction: column; gap: 10px; }
.form-repeat-item { padding: 10px 12px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); }
.form-repeat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.form-repeat-title { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }

/* ---------- formularz w modalu i w szufladzie ---------- */
.form-modal { width: 620px; }
.form-drawer-overlay { justify-content: flex-end; align-items: stretch; }
.form-drawer { width: 460px; height: 100%; max-height: 100%; border-radius: 0; }

/* ---------- podsumowanie kreatora ---------- */
.form-summary { display: flex; flex-direction: column; gap: 12px; }
.form-summary-group { border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.form-summary-head { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line-3); font-size: 12px; font-weight: 600; }
.form-summary-body { padding: 10px 12px; }

/* ---------- tryb podglądu: wartości jako tekst, bez ramek ---------- */
.form-readonly .form-grid { gap: 12px 18px; }
.form-value { min-height: 20px; padding: 2px 0; font-size: var(--fs); color: var(--ink); }
.form-value.mono, .form-value.num { font-family: var(--mono); text-align: left; }
.form-value-empty { color: var(--label); }

/* ---------- uzupełnienia: zapis automatyczny, scalanie duplikatów, pola zależne ---------- */
.form-saved { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
.form-saved .icon { width: 11px; height: 11px; }
.form-saved .spinner { width: 10px; height: 10px; border-width: 1.5px; }
.form-saved.is-pending { color: var(--muted); }
.form-saved.is-error { color: var(--danger); }
.form-autosave-foot { display: flex; align-items: center; gap: 7px; }

.form-merge { display: grid; grid-template-columns: 150px 1fr 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.form-merge-head { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 42px; padding: 6px 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.form-merge-head + .form-merge-head { border-left: 1px solid var(--line-3); }
.form-merge-head-title { font-size: 12px; font-weight: 600; color: var(--ink); }
.form-merge-head-sub { font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.form-merge-label { display: flex; align-items: center; min-height: 32px; padding: 0 10px; background: var(--surface-3); border-bottom: 1px solid var(--line-3); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.form-merge-cell { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border-left: 1px solid var(--line-3); border-bottom: 1px solid var(--line-3); font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.form-merge-cell:hover, .form-merge-cell.is-hover { background: var(--hover-neutral); }
.form-merge-cell.is-selected { background: var(--accent-soft); }
.form-merge-cell.is-same { color: var(--muted); cursor: default; }
.form-merge-cell input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.form-merge-val { min-width: 0; }
.form-merge-val.is-empty { color: var(--label); }
.form-merge-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-2); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }

.form-reveal { margin: 4px 0 0 9px; padding: 0 0 2px 14px; border-left: 2px solid var(--accent-soft-line); }
.form-reveal-hint { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; font-size: 11px; color: var(--muted); }
.form-reveal-hint .icon { width: 12px; height: 12px; color: var(--accent); flex: 0 0 auto; }
.form-reveal.is-collapsed { border-left-color: var(--line); padding-bottom: 0; }
.form-reveal.is-collapsed .form-reveal-hint { margin-bottom: 0; color: var(--label); }
.form-reveal.is-collapsed .form-reveal-hint .icon { color: var(--label); }


/* ===== modal: Modale, szuflady, popovery ===== */
/* modal: okna nad treścią programu (modal), szuflady od krawędzi (drawer),
   panel wsuwany bez zaciemnienia (sheet) i dymek przy kotwicy (popover). */

/* ---------- tło „aplikacji” pod nakładką: podgląd ma pokazywać modal w kontekście okna ---------- */
.modal-stage { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--canvas); }
.modal-stage-main { position: relative; flex: 1; min-height: 0; display: flex; }
.modal-stage-content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); }

/* ---------- rozmiary okna (baza .dialog to 440px) ---------- */
.dialog.modal-sm { width: 360px; }
.dialog.modal-lg { width: 720px; }
.dialog.modal-full { width: calc(100% - 24px); height: calc(100% - 24px); max-width: none; max-height: none; }
.dialog.modal-tall { height: calc(100% - 56px); }
.dialog.modal-command { width: 560px; }

/* ustawienie okna w kadrze nakładki */
.modal-overlay-top { align-items: flex-start; padding-top: 64px; }

/* ---------- nagłówek z ikoną ostrzeżenia (potwierdzenia, alerty, błędy) ---------- */
.modal-head-icon { align-items: flex-start; gap: 12px; padding: 16px 16px 8px; border-bottom: 0; font-size: var(--fs); font-weight: 400; }
.modal-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--neutral-soft); color: var(--muted); }
.modal-icon .icon { width: 17px; height: 17px; }
.modal-icon.is-danger { background: var(--danger-soft); color: var(--danger); }
.modal-icon.is-warn { background: var(--warn-soft); color: var(--warn-text); }
.modal-icon.is-info { background: var(--info-soft); color: var(--info-text); }
.modal-icon.is-ok { background: var(--accent-soft); color: var(--accent-text); }
.modal-headings { min-width: 0; padding-top: 3px; }
.modal-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.modal-sub { margin-top: 6px; font-size: var(--fs); color: var(--ink-2); line-height: 1.5; }
.modal-head-x { margin-left: auto; flex: 0 0 auto; }

/* ---------- treść ---------- */
.modal-body-flush { padding: 0; }
.modal-body-scroll { flex: 1; min-height: 0; overflow: auto; }
.modal-p { margin-top: 9px; line-height: 1.55; }
.modal-note { margin-top: 10px; padding: 8px 10px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line-2); font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.modal-note.is-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-text); }
.modal-note.is-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
.modal-note.is-info { background: var(--info-soft); border-color: var(--info-line); color: var(--info-text); }
.modal-list { margin-top: 10px; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.modal-list li { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-top: 1px solid var(--line-3); font-size: var(--fs-sm); color: var(--ink-2); }
.modal-list li:first-child { border-top: 0; }
.modal-list li .num { margin-left: auto; color: var(--ink); }
.modal-doc { font-size: var(--fs); color: var(--ink-2); line-height: 1.6; }
.modal-doc h4 { margin: 14px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.modal-doc h4:first-child { margin-top: 0; }
.modal-doc p { margin-bottom: 8px; }

/* stopka: trzeci przycisk po lewej (np. „Nie zapisuj”) */
.modal-foot-split { justify-content: space-between; }
.modal-foot-left { display: flex; align-items: center; gap: 8px; }
.modal-foot-right { display: flex; align-items: center; gap: 8px; }

/* ---------- przepisanie nazwy przed usunięciem ---------- */
.modal-typed { margin-top: 12px; }
.modal-typed-name { display: inline-block; padding: 1px 6px; border-radius: 3px; background: var(--danger-soft); border: 1px solid var(--danger-line); font-family: var(--mono); font-size: 12px; color: var(--danger-text); user-select: all; }

/* ---------- postęp zadania ---------- */
.modal-progress-line { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.modal-progress-pct { width: 42px; flex: 0 0 42px; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.modal-progress-file { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--muted); min-width: 0; }
.modal-progress-file .icon { width: 13px; height: 13px; color: var(--label); }
.modal-progress-stats { display: flex; gap: 18px; margin-top: 10px; }
.modal-progress-stat { font-size: 11px; color: var(--label); }
.modal-progress-stat .num { display: block; margin-top: 1px; font-size: 13px; color: var(--ink); text-align: left; }

/* ---------- O programie ---------- */
.modal-about { display: flex; gap: 16px; align-items: flex-start; }
.modal-about-mark { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.modal-about-name { font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--ink); }
.modal-about-ver { margin-top: 2px; font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); }
.modal-about-links { display: flex; gap: 14px; margin-top: 9px; font-size: var(--fs-sm); }

/* ---------- nakładka skrótów ---------- */
.modal-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.modal-keys-head { margin: 14px 0 3px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.modal-keys-group:nth-child(-n+2) .modal-keys-head { margin-top: 0; }
.modal-key { display: flex; align-items: center; gap: 10px; height: 26px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-sm); color: var(--ink-2); }
.modal-key-combo { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.modal-key-plus { font-size: 10px; color: var(--label); }

/* ---------- paleta poleceń ---------- */
.modal-command-input { display: flex; align-items: center; gap: 10px; height: 46px; flex: 0 0 46px; padding: 0 14px; border-bottom: 1px solid var(--line-2); }
.modal-command-input .icon { width: 16px; height: 16px; color: var(--label); }
.modal-command-query { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); }
.modal-command-caret { width: 1px; height: 17px; background: var(--ink); }
.modal-command-list { max-height: 292px; overflow: auto; padding: 4px 0; }
.modal-command-list .menu-item { height: 30px; font-size: var(--fs); }
.modal-command-list .menu-item.is-selected { background: var(--selected); box-shadow: inset 2px 0 0 var(--accent); }
.modal-command-kind { margin-left: auto; padding-left: 18px; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--label); }
.modal-command-foot { display: flex; align-items: center; gap: 16px; height: 30px; flex: 0 0 30px; padding: 0 14px; border-top: 1px solid var(--line-2); background: var(--surface-3); font-size: 11px; color: var(--muted); }
.modal-command-foot .kbd { padding: 0 4px; border-bottom-width: 1px; font-size: 10px; }
.modal-command-hint { display: flex; align-items: center; gap: 5px; }

/* ---------- błąd z rozwijanymi szczegółami ---------- */
.modal-details { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.modal-details-head { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px; background: var(--surface-2); font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; user-select: none; }
.modal-details-head .icon { width: 12px; height: 12px; color: var(--label); }
.modal-details-id { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--label); }
.modal-details.is-open .modal-details-head .icon { transform: rotate(90deg); }
.modal-details-body { max-height: 128px; overflow: auto; padding: 8px 10px; border-top: 1px solid var(--line-2); background: var(--surface-3); font: 11px/1.65 var(--mono); color: var(--ink-2); white-space: pre; }
.modal-details:not(.is-open) .modal-details-body { display: none; }
.modal-code-line { display: block; }
.modal-code-line.is-muted { color: var(--label); }

/* ---------- wybór rekordu ---------- */
.modal-picker-search { padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.modal-picker-list { height: 258px; overflow: auto; }
.modal-picker-item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line-3); cursor: pointer; }
.modal-picker-item:hover, .modal-picker-item.is-hover { background: var(--hover); }
.modal-picker-item.is-selected { background: var(--selected); box-shadow: inset 2px 0 0 var(--accent); }
.modal-picker-name { font-size: 12.5px; color: var(--ink); }
.modal-picker-sub { margin-top: 1px; font-size: 11px; color: var(--muted); }
.modal-picker-meta { margin-left: auto; text-align: right; font-family: var(--mono); font-size: 11px; color: var(--label); }

/* ---------- wybór pliku i folderu ---------- */
.modal-files { display: flex; height: 300px; min-height: 0; }
.modal-files-tree { width: 176px; flex: 0 0 176px; overflow: auto; padding: 6px 0; background: var(--surface-2); border-right: 1px solid var(--line-2); }
.modal-files-node { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; font-size: 12px; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.modal-files-node .icon { width: 14px; height: 14px; color: var(--label); }
.modal-files-node:hover, .modal-files-node.is-hover { background: var(--hover-neutral); }
.modal-files-node.is-active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.modal-files-node.is-child { padding-left: 26px; }
.modal-files-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.modal-files-path { display: flex; align-items: center; gap: 6px; height: 30px; flex: 0 0 30px; padding: 0 12px; border-bottom: 1px solid var(--line-3); font-family: var(--mono); font-size: 11px; color: var(--muted); }
.modal-files-list { flex: 1; min-height: 0; overflow: auto; }
.modal-files-name { display: flex; align-items: center; gap: 8px; }
.modal-files-name .icon { width: 14px; height: 14px; color: var(--label); }
.modal-files-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line-2); }

/* ---------- pasek zakładek wewnątrz okna ---------- */
.modal-tabbar { flex: 0 0 auto; padding: 0 10px; }

/* ---------- szuflady: nakładka dosuwa okno do krawędzi ---------- */
.drawer-overlay { align-items: stretch; }
.drawer-overlay-right { justify-content: flex-end; }
.drawer-overlay-left { justify-content: flex-start; }
.drawer-overlay-bottom { align-items: flex-end; }
.drawer { display: flex; flex-direction: column; min-height: 0; background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.drawer-right { width: 420px; height: 100%; border-left: 1px solid var(--line); }
.drawer-left { width: 320px; height: 100%; border-right: 1px solid var(--line); }
.drawer-bottom { width: 100%; height: 240px; border-top: 1px solid var(--line); }
.drawer-head { display: flex; align-items: center; gap: 8px; height: 42px; flex: 0 0 42px; padding: 0 14px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; font-weight: 600; }
.drawer-head-sub { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.drawer-head .btn-icon { margin-left: auto; }
.drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; }
.drawer-body-flush { padding: 0; }
.drawer-foot { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 10px 14px; border-top: 1px solid var(--line-2); background: var(--surface-3); }
.drawer-foot-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.drawer-section { padding: 12px 14px; border-top: 1px solid var(--line-3); }
.drawer-section:first-child { border-top: 0; }
.drawer-section-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.drawer-nav-head { padding: 12px 14px 4px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.drawer-nav-item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.drawer-nav-item .icon { width: 16px; height: 16px; color: var(--label); }
.drawer-nav-item:hover, .drawer-nav-item.is-hover { background: var(--hover-neutral); }
.drawer-nav-item.is-active { background: var(--selected); color: var(--accent-text); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.drawer-nav-item.is-active .icon { color: var(--accent-text); }
.drawer-nav-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--label); }

/* konsola: szuflada dolna na ciemnym tle */
.drawer-console { background: var(--chrome); color: var(--chrome-ink-2); border-top-color: var(--chrome-line-2); }
.drawer-console .drawer-head { height: 32px; flex: 0 0 32px; padding: 0 8px 0 12px; border-bottom-color: var(--chrome-line); color: var(--chrome-ink); }
.drawer-console .drawer-head .btn-icon { color: var(--chrome-dim); }
.drawer-console .drawer-head .tabs { border-bottom: 0; align-self: stretch; }
.drawer-console .drawer-head .tab { height: 100%; margin-bottom: 0; }
.drawer-log { padding: 6px 0; font: 11.5px/1.7 var(--mono); }
.drawer-log-line { display: flex; gap: 10px; padding: 0 12px; white-space: pre; }
.drawer-log-line:hover, .drawer-log-line.is-hover { background: var(--chrome-hover); }
.drawer-log-time { flex: 0 0 auto; color: var(--chrome-label); }
.drawer-log-tag { flex: 0 0 46px; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: var(--chrome-dim); }
.drawer-log-line.is-warn, .drawer-log-line.is-warn .drawer-log-tag { color: var(--warn); }
.drawer-log-line.is-danger, .drawer-log-line.is-danger .drawer-log-tag { color: var(--danger-line); }
.drawer-log-line.is-ok, .drawer-log-line.is-ok .drawer-log-tag { color: var(--chrome-accent-text); }
.drawer-prompt { display: flex; align-items: center; gap: 8px; height: 30px; flex: 0 0 30px; padding: 0 12px; border-top: 1px solid var(--chrome-line); font: 11.5px var(--mono); color: var(--chrome-ink); }
.drawer-caret { color: var(--chrome-accent-text); }

/* ---------- panel wsuwany bez zaciemnienia ---------- */
.sheet { position: absolute; top: 0; right: 0; bottom: 0; width: 380px; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); z-index: 20; }
.sheet-head { display: flex; align-items: center; gap: 8px; height: 38px; flex: 0 0 38px; padding: 0 12px; border-bottom: 1px solid var(--line-2); font-size: 13px; font-weight: 600; }
.sheet-head .btn-icon { margin-left: auto; }
.sheet-body { flex: 1; min-height: 0; overflow: auto; padding: 12px; }
.sheet-foot { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 9px 12px; border-top: 1px solid var(--line-2); background: var(--surface-3); }
.sheet-foot-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sheet-grip { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; }

/* ---------- popover przy kotwicy ---------- */
.popover { position: relative; width: 280px; max-width: 280px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); font-size: var(--fs-sm); color: var(--ink); }
.popover-arrow { position: absolute; width: 9px; height: 9px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.popover-arrow.is-top { top: -5px; left: 20px; }
.popover-arrow.is-bottom { bottom: -5px; left: 20px; transform: rotate(225deg); }
.popover-anchor { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.popover-anchor .btn.is-active { background: var(--accent-soft); border-color: var(--accent-soft-line); color: var(--accent-text); }
.popover-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0; font-size: 12.5px; font-weight: 600; }
.popover-head .btn-icon { margin-left: auto; margin-right: -4px; }
.popover-body { padding: 10px 12px; }
.popover-foot { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--line-3); background: var(--surface-3); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.popover-foot .btn { height: var(--h-btn-sm); padding: 0 10px; font-size: var(--fs-xs); }
.popover-foot-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.popover-person { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; }
.popover-person-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.popover-person-role { margin-top: 1px; font-size: 11.5px; color: var(--muted); }
.popover-rows { padding: 0 12px 10px; }
.popover-row { display: flex; align-items: center; gap: 8px; height: 24px; font-size: 12px; color: var(--ink-2); }
.popover-row .icon { width: 13px; height: 13px; flex: 0 0 auto; color: var(--label); }
.popover-row-val { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
.popover-trigger { border-bottom: 1px dashed var(--line-input); cursor: pointer; color: var(--ink); }

/* ---------- uzupełnienia: akcja zbiorcza, konflikt wersji, popover potwierdzenia ---------- */
.modal-bulk-stats { display: flex; gap: 8px; margin-top: 2px; }
.modal-bulk-stat { flex: 1; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); }
.modal-bulk-num { display: block; font-family: var(--mono); font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.modal-bulk-label { display: block; margin-top: 1px; font-size: 11px; color: var(--muted); }
.modal-bulk-stat.is-ok { background: var(--accent-soft); border-color: var(--accent-soft-line); }
.modal-bulk-stat.is-ok .modal-bulk-num { color: var(--accent-text); }
.modal-bulk-stat.is-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.modal-bulk-stat.is-warn .modal-bulk-num { color: var(--warn-text); }
.modal-bulk-head { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.modal-bulk-list { margin-top: 6px; max-height: 116px; overflow: auto; border: 1px solid var(--line-2); border-radius: var(--radius); }
.modal-bulk-item { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-top: 1px solid var(--line-3); font-size: var(--fs-sm); color: var(--ink-2); }
.modal-bulk-item:first-child { border-top: 0; }
.modal-bulk-reason { margin-left: auto; font-size: 11px; color: var(--warn-text); white-space: nowrap; }

.modal-conflict-diff { margin-top: 10px; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.modal-conflict-row { display: grid; grid-template-columns: 104px 1fr 1fr; border-top: 1px solid var(--line-3); font-size: var(--fs-sm); }
.modal-conflict-row:first-child { border-top: 0; }
.modal-conflict-th { padding: 5px 10px; background: var(--surface-2); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.modal-conflict-name { display: flex; align-items: center; padding: 6px 10px; background: var(--surface-3); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.modal-conflict-cell { padding: 6px 10px; min-width: 0; border-left: 1px solid var(--line-3); color: var(--ink); }
.modal-conflict-cell.is-theirs { background: var(--warn-soft); color: var(--warn-text); }
.modal-conflict-cell.num { text-align: right; }

.popover-confirm { width: 244px; }
.popover-confirm-title { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.popover-confirm-text { margin-top: 4px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* Karta rekordu w oknie nad tabela: naglowek z nawigacja po rekordach i tabela bez zewnetrznej ramki. */
.modal-record-head { gap: 10px; padding: 8px 12px 8px 10px; font-size: 13px; }
.modal-record-title { min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.modal-record-num { font-weight: 600; text-align: left; }
.modal-record-table { border: 0; }
.modal-record-table th:first-child, .modal-record-table td:first-child { padding-left: 0; }
.modal-record-table th:last-child, .modal-record-table td:last-child { padding-right: 0; }

/* ---------- szeroki dialog dzielony: robota z lewej, dane z prawej, zasłona na koniec (modal-split) ---------- */
.dialog.modal-wide { width: min(1180px, calc(100% - 80px)); height: min(820px, calc(100% - 80px)); max-width: none; max-height: none; display: flex; flex-direction: column; }
.modal-split { position: relative; display: flex; flex: 1; min-height: 0; padding: 0; }
.modal-split-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.modal-split-side { flex: 0 0 340px; overflow: auto; padding: 12px 14px; border-left: 1px solid var(--line); background: var(--surface-2); }
.modal-split-scroll { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; }
.modal-split-compose { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.modal-cover { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: var(--surface); }
.modal-cover .dialog-body { flex: 1; overflow: auto; }


/* ===== menu: Menu i prawoklik ===== */
/* menu: menu pod przyciskiem, prawoklik, podmenu, szukajka w menu i tooltip. Rozszerza .menu z base.css. */

/* ---------- kotwica: przycisk i menu pod nim ---------- */
.menu-anchor { position: relative; display: inline-block; }
.menu-anchor > .menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; text-align: left; }
.menu-anchor-right > .menu { left: auto; right: 0; }
.menu-anchor-wide > .menu { min-width: 240px; }
.menu-fit { display: block; }
.menu-fit > .menu { min-width: 100%; }
.menu-trigger.is-open { background: var(--hover-neutral); border-color: var(--line-input); color: var(--ink); }
.menu-trigger.is-open .icon { color: var(--ink-2); }

/* ---------- podmenu otwarte w bok ---------- */
.menu-parent { position: relative; }
.menu-parent > .menu-sub { position: absolute; top: -5px; left: 100%; margin-left: 2px; z-index: 21; }
.menu-parent > .menu-sub-left { left: auto; right: 100%; margin-left: 0; margin-right: 2px; }

/* ---------- szukajka na górze menu ---------- */
.menu-search { padding: 6px 6px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line-3); }
.menu-search-top { margin-top: -4px; }
.menu-search .input { display: flex; align-items: center; }
.menu-mark { background: var(--warn-soft); border-radius: 2px; }
.menu-nores { padding: 12px; text-align: center; font-size: var(--fs-xs); color: var(--label); }

/* ---------- prawa kolumna z metadanymi (data, rozmiar, licznik) ---------- */
.menu-meta { margin-left: auto; padding-left: 24px; font-family: var(--mono); font-size: 11px; color: var(--label); }
.menu-item.is-hover .menu-meta { color: var(--muted); }

/* ---------- pozycja dwuwierszowa: nazwa i dopowiedzenie ---------- */
.menu-rich { height: auto; align-items: flex-start; padding-top: 6px; padding-bottom: 7px; }
.menu-rich .icon { margin-top: 2px; }
.menu-rich-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.menu-rich-desc { font-size: 11px; color: var(--muted); white-space: normal; line-height: 1.3; }

/* ---------- wyjaśnienie pod pozycją wyłączoną ---------- */
.menu-why { padding: 0 12px 6px 36px; font-size: 11px; line-height: 1.35; color: var(--label); white-space: normal; }

/* ---------- nagłówek z avatarem (menu użytkownika) ---------- */
.menu-user-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 11px; margin: -4px 0 4px; border-bottom: 1px solid var(--line-3); }
.menu-user-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.menu-user-name { font-size: 13px; font-weight: 600; }
.menu-user-mail { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ---------- przycisk dzielony ---------- */
.menu-split { position: relative; display: inline-block; }
.menu-split-caret { width: 28px; padding: 0; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--chrome) 18%, transparent); }
.menu-split-caret .icon { width: 11px; height: 11px; }
.menu-split > .menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 240px; }

/* ---------- menu szerokie w kolumnach ---------- */
.menu-mega { width: 448px; display: flex; padding: 6px 0; }
.menu-mega-col { flex: 1; min-width: 0; }
.menu-mega-col + .menu-mega-col { border-left: 1px solid var(--line-3); }
.menu-mega .menu-item { padding: 0 10px; }
.menu-mega .menu-head { padding: 4px 10px 2px; }

/* ---------- nagłówek kolumny jako otwieracz menu ---------- */
.menu-col-btn { display: inline-flex; align-items: center; gap: 5px; height: var(--h-thead); color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.menu-col-btn .icon { width: 11px; height: 11px; color: var(--label); }
.menu-col-btn.is-open { color: var(--ink); }
.menu-col-btn.is-open .icon { color: var(--ink); }

/* ---------- kilka przykładów jeden pod drugim w jednym podglądzie ---------- */
.menu-stack { display: flex; flex-direction: column; gap: 46px; }

/* ---------- lista wyboru: przewijana środkowa część ---------- */
.menu-scroll { max-height: 216px; overflow: auto; }

/* ---------- scena podglądu: menu przy wskaźniku ---------- */
.menu-scene { position: relative; }
.menu-context-pos { position: absolute; z-index: 30; }
.menu-ctx-point { position: absolute; width: 15px; height: 15px; color: var(--ink); z-index: 31; filter: drop-shadow(0 0 1px var(--surface)) drop-shadow(0 1px 1px color-mix(in srgb, var(--chrome) 35%, transparent)); }
.menu-scene-row .menu-context-pos { top: 62px; left: 250px; }
.menu-scene-row .menu-ctx-point { top: 59px; left: 247px; }
.menu-scene-sel .menu-context-pos { top: 106px; left: 232px; }
.menu-scene-sel .menu-ctx-point { top: 103px; left: 229px; }
.menu-scene-canvas .menu-context-pos { top: 84px; left: 150px; }
.menu-scene-canvas .menu-ctx-point { top: 81px; left: 147px; }
.menu-scene-text .menu-context-pos { top: 58px; left: 96px; }
.menu-scene-text .menu-ctx-point { top: 55px; left: 93px; }

/* ---------- podkładka z tabelą pod menu kontekstowe (bez overflow, żeby menu nie było ucięte) ---------- */
.menu-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.menu-sheet .table th:first-child { border-top-left-radius: var(--radius); }
.menu-sheet .table th:last-child { border-top-right-radius: var(--radius); }
.menu-sheet .table tbody tr:last-child td { border-bottom: 0; }
.menu-sheet .menu-check-col { width: 34px; padding-right: 0; }

/* ---------- tło planszy w kropki (prawoklik na canvas) ---------- */
.menu-canvas-bg { height: 236px; display: flex; align-items: flex-start; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface); background-image: radial-gradient(var(--line-input) 1px, transparent 1.2px); background-size: 16px 16px; background-position: -1px -1px; }
.menu-canvas-tile { width: 128px; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.menu-canvas-tile.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.menu-canvas-title { font-size: 12px; font-weight: 600; }
.menu-canvas-sub { margin-top: 2px; font-size: 11px; color: var(--muted); }

/* ---------- pole tekstowe z zaznaczonym fragmentem (prawoklik w tekście) ---------- */
.menu-textbox { display: flex; align-items: center; width: 100%; white-space: nowrap; overflow: hidden; }
.menu-textsel { background: color-mix(in srgb, var(--info) 30%, transparent); border-radius: 1px; }

/* ---------- dwa warianty obok siebie w jednym podglądzie ---------- */
.menu-pair { display: flex; align-items: flex-start; gap: 28px; }
.menu-caption { margin-bottom: 6px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }

/* ---------- wiersz rekordu z przyciskiem trzech kropek ---------- */
.menu-record { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.menu-record-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.menu-record-sub { font-size: 11px; color: var(--muted); }

/* ---------- tooltip ---------- */
.tooltip { position: relative; display: inline-block; max-width: 260px; padding: 5px 8px; border-radius: 3px; background: var(--chrome); color: var(--chrome-ink); font-size: var(--fs-xs); line-height: 1.35; box-shadow: var(--shadow); white-space: nowrap; }
.tooltip::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 8px; height: 8px; margin-left: -4px; background: var(--chrome); transform: rotate(45deg); }
.tooltip-below::after { top: -3px; bottom: auto; }
.tooltip-right::after { left: -3px; top: 50%; bottom: auto; margin: -4px 0 0; }
.tooltip-wide { width: 224px; white-space: normal; }
.tooltip-title { display: block; margin-bottom: 2px; font-weight: 600; }
.tooltip-text { color: var(--chrome-ink-2); }
.tooltip-key { margin-left: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--chrome-accent-text); }
.tooltip-wrap { position: relative; display: inline-flex; }
.tooltip-wrap > .tooltip { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); z-index: 10; }
.tooltip-wrap-below > .tooltip { top: calc(100% + 7px); bottom: auto; }
.tooltip-wrap-right > .tooltip { top: 50%; bottom: auto; left: calc(100% + 7px); transform: translateY(-50%); }
.tooltip-wrap-start > .tooltip { left: 0; transform: none; }
.tooltip-wrap-start > .tooltip::after { left: 18px; margin-left: 0; }
.tooltip-room { padding-top: 38px; }
.tooltip-trunc { max-width: 184px; }
.tooltip-trunc .truncate { min-width: 0; }

/* ---------- uzupełnienia: prawoklik na kafelku planszy, menu-filtr z checkboxami ---------- */
.menu-scene-tile .menu-context-pos { top: 80px; left: 154px; }
.menu-scene-tile .menu-ctx-point { top: 77px; left: 151px; }
.menu-tile-grid { display: flex; flex-direction: column; gap: 4px; }
.menu-tile-row-label { font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); margin-bottom: 4px; }
.menu-checklist { min-width: 268px; padding-bottom: 0; }
.menu-check-all { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-xs); color: var(--ink-2); }
.menu-check-link { margin-left: auto; color: var(--link); cursor: pointer; }
.menu-check-link:hover, .menu-check-link.is-hover { text-decoration: underline; }
.menu-checklist .menu-item input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.menu-checklist-foot { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-top: 1px solid var(--line-3); background: var(--surface-3); border-radius: 0 0 var(--radius) var(--radius); font-size: 11px; color: var(--muted); }
.menu-checklist-foot .btn { height: var(--h-btn-sm); padding: 0 10px; font-size: var(--fs-xs); }
.menu-checklist-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }


/* ===== button: Przyciski ===== */
/* button: warianty przycisków z base pokazane w prawdziwych belkach, kartach i stopkach,
   plus to, czego base nie ma: przełącznik, dzielony, licznik, pływający, potwierdzenie w miejscu. */

/* ---------- rusztowanie podglądu: kolumna kontekstów i rząd stanów z podpisami ---------- */
.btn-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.btn-states-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 18px; }
.btn-state { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.btn-panel { width: 320px; flex: 0 0 auto; }

/* ---------- fokus z klawiatury: ten sam pierścień co w polach ---------- */
.btn-focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }

/* ---------- ładowanie: spinner dziedziczy kolor tekstu przycisku ---------- */
.btn-spinner { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; border-top-color: transparent; opacity: .8; animation: k-spin .7s linear infinite; flex: 0 0 auto; }
.btn-loading-count { font-family: var(--mono); font-size: 11px; opacity: .85; }

/* ---------- przełącznik dwustanowy: wciśnięty zostaje wciśnięty ---------- */
.btn-toggle { background: var(--surface); border-color: var(--line-input); color: var(--ink-2); }
.btn-toggle:hover, .btn-toggle.is-hover { background: var(--hover-neutral); color: var(--ink); }
.btn-toggle.is-active { background: var(--accent-soft); border-color: var(--accent-soft-line); color: var(--accent-text); transform: none; box-shadow: inset 0 1px 2px color-mix(in srgb, var(--chrome) 7%, transparent); }
.btn-toggle.is-active:hover, .btn-toggle.is-active.is-hover { background: var(--selected); border-color: var(--accent); }
.btn-toggle .icon { color: currentColor; }

/* ---------- grupa przełączników: kilka niezależnych stanów w jednej obudowie ---------- */
.btn-toggle-group { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.btn-toggle-group > .btn { height: 24px; padding: 0 8px; background: transparent; border-color: transparent; border-radius: 3px; color: var(--ink-2); }
.btn-toggle-group > .btn:hover, .btn-toggle-group > .btn.is-hover { background: var(--hover-neutral); color: var(--ink); }
.btn-toggle-group > .btn.is-active { background: var(--surface); border-color: var(--line-input); color: var(--accent-text); box-shadow: var(--shadow-sm); transform: none; }
.btn-toggle-group > .btn-icon { width: 26px; padding: 0; }
.btn-toggle-group > .btn-icon .icon { width: 14px; height: 14px; }

/* ---------- dzielony: akcja domyślna + chevron 28px z listą wariantów ---------- */
.btn-split { display: inline-flex; }
.btn-split > .btn { border-radius: 0; }
.btn-split > .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.btn-split-caret { width: 28px; padding: 0; margin-left: -1px; border-radius: 0 var(--radius) var(--radius) 0; }
.btn-split-caret .icon { width: 11px; height: 11px; }
.btn-primary + .btn-split-caret { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--chrome-ink-bright) 18%, transparent); }
.btn-accent + .btn-split-caret { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent-ink) 18%, transparent); }

/* ---------- licznik na przycisku: w treści albo w rogu ikony ---------- */
.btn-badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin-right: -3px; padding: 0 5px; border-radius: 8px; background: var(--neutral-soft); color: var(--ink-2); font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1; }
.btn-primary .btn-badge-count, .btn-accent .btn-badge-count, .btn-danger .btn-badge-count { background: color-mix(in srgb, var(--chrome-ink-bright) 18%, transparent); color: inherit; }
.btn-badge-count.is-accent { background: var(--accent-soft); color: var(--accent-text); }
.btn-badge-wrap { position: relative; display: inline-flex; }
.btn-badge-corner { position: absolute; top: -3px; right: -4px; display: flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 4px; border: 1.5px solid var(--surface); border-radius: 8px; background: var(--danger); color: var(--danger-ink); font-size: 9.5px; font-weight: 600; line-height: 1; }

/* ---------- pływający: jedna akcja tworząca, prawy dolny róg listy ---------- */
.btn-fab-stage { position: relative; overflow: hidden; }
.btn-fab { position: absolute; right: 14px; bottom: 14px; z-index: 5; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
.btn-fab .icon { width: 18px; height: 18px; stroke-width: 1.8; }
.btn-fab:hover, .btn-fab.is-hover { background: var(--accent-hover); box-shadow: var(--shadow-lg); }
.btn-fab.is-static { position: static; }
.btn-fab-ext { width: auto; padding: 0 16px; gap: 8px; border-radius: 20px; font-size: var(--fs-sm); }

/* ---------- potwierdzenie w miejscu: Usuń zamienia się w pytanie ---------- */
.btn-confirm { display: inline-flex; align-items: center; gap: 6px; height: var(--h-btn-sm); padding: 0 4px 0 10px; border: 1px solid var(--danger-line); border-radius: var(--radius); background: var(--danger-soft); }
.btn-confirm-text { font-size: var(--fs-xs); font-weight: 600; color: var(--danger-text); white-space: nowrap; }
.btn-confirm .btn { height: 20px; padding: 0 8px; font-size: 11px; }

/* ---------- kopiowanie z potwierdzeniem ---------- */
.btn-copy { gap: 5px; }
.btn-copy.is-done { background: var(--accent-soft); border-color: var(--accent-soft-line); color: var(--accent-text); }

/* ---------- wgrywanie pliku: przycisk plus nazwa wybranego pliku ---------- */
.btn-upload { display: flex; align-items: center; gap: 8px; min-width: 0; }
.btn-upload-file { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 24px; padding: 0 4px 0 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-xs); color: var(--ink-2); }
.btn-upload-file .icon { width: 13px; height: 13px; color: var(--label); }
.btn-upload-size { font-family: var(--mono); font-size: 11px; color: var(--label); }
.btn-upload-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; color: var(--label); cursor: pointer; }
.btn-upload-x:hover { background: var(--line); color: var(--ink); }
.btn-upload-x .icon { width: 10px; height: 10px; }

/* ---------- para stopki: Anuluj po lewej, potwierdzenie po prawej ---------- */
.btn-pair { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.btn-pair-left { margin-right: auto; }

/* ---------- tooltip przycisku: ta sama treść co aria-label ---------- */
.btn-tip-wrap { position: relative; display: inline-flex; }
.btn-tip { position: absolute; top: calc(100% + 6px); left: 50%; z-index: 20; transform: translateX(-50%); padding: 4px 8px; border-radius: 3px; background: var(--chrome); color: var(--chrome-ink); box-shadow: var(--shadow); font-size: var(--fs-xs); line-height: 1.35; white-space: nowrap; pointer-events: none; }
.btn-tip::after { content: ""; position: absolute; top: -4px; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top: 0; border-bottom-color: var(--chrome); }
.btn-tip.is-up { top: auto; bottom: calc(100% + 6px); }
.btn-tip.is-up::after { top: auto; bottom: -4px; border-bottom: 0; border-top: 4px solid var(--chrome); }
.btn-tip.is-right { left: auto; right: 0; transform: none; }
.btn-tip.is-right::after { left: auto; right: 26px; margin-left: 0; }
.btn-tip.is-left { left: 0; transform: none; }
.btn-tip.is-left::after { left: 14px; margin-left: 0; }

/* ---------- menu przy przycisku (dzielony, z chevronem) ---------- */
.btn-anchor { position: relative; display: inline-flex; }
.btn-menu-pop { position: absolute; top: calc(100% + 3px); left: 0; z-index: 20; }
.btn-menu-pop.is-right { left: auto; right: 0; }
.btn-menu-pop.is-up { top: auto; bottom: calc(100% + 3px); }

/* ---------- uzupełnienia: przycisk na ciemnym tle, ponowienie, skrót w treści ---------- */
.btn-chrome-scene { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.btn-chrome-caption { font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--chrome-dim); }
.btn-chrome-state { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.btn-chrome-state .btn-chrome-caption { letter-spacing: .5px; }
.btn-chrome.is-primary { background: var(--chrome-accent-bg); border-color: var(--chrome-accent-bg); color: var(--chrome-accent-text); }
.btn-chrome.is-primary:hover, .btn-chrome.is-primary.is-hover { background: var(--chrome-3); }

.btn-retry { display: inline-flex; align-items: center; gap: 8px; height: var(--h-btn-sm); padding: 0 4px 0 10px; border: 1px solid var(--danger-line); border-radius: var(--radius); background: var(--danger-soft); }
.btn-retry .icon { width: 13px; height: 13px; color: var(--danger); flex: 0 0 auto; }
.btn-retry-text { font-size: var(--fs-xs); font-weight: 600; color: var(--danger-text); white-space: nowrap; }
.btn-retry .btn { height: 20px; padding: 0 8px; font-size: 11px; }
.btn-retry.is-waiting { border-color: var(--warn-line); background: var(--warn-soft); }
.btn-retry.is-waiting .icon { color: var(--warn-text); }
.btn-retry.is-waiting .btn-retry-text { color: var(--warn-text); }
.btn-retry-count { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }

.btn-kbd { display: inline-flex; align-items: center; height: 16px; margin: 0 -3px 0 3px; padding: 0 5px; border-radius: 3px; background: var(--neutral-soft); font: 10.5px var(--mono); color: var(--muted); }
.btn-primary .btn-kbd, .btn-accent .btn-kbd, .btn-danger .btn-kbd { background: color-mix(in srgb, var(--chrome-ink-bright) 16%, transparent); color: inherit; }
.btn-chrome .btn-kbd { background: var(--chrome-3); color: var(--chrome-muted); }
.btn-tip .btn-kbd { background: var(--chrome-3); color: var(--chrome-accent-text); }


/* ===== signal: Sygnały i stany ===== */
/* signal: sygnały i stany programu - badge, chip, tag, toast, alert, baner, postęp,
   spinner, szkielet ładowania i stany ekranu (pusty, błąd, offline, brak uprawnień).
   Prymitywy .badge .chip .dot .progress .spinner .skeleton .empty są w base.css:
   ten arkusz ich nie powtarza, tylko dokłada konteksty i warianty. */

/* ---------- makieta okna do pokazania sygnału w kontekście ---------- */
/* Sygnał bez otoczenia kłamie: toast musi mieć nad czym wisieć, baner pod czym stać. */
.state-stage { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--canvas); overflow: hidden; }
.state-stage-body { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--surface); }
.state-stage-pad { padding: 14px 16px; background: var(--canvas); }

/* ---------- badge: dokładka do base ---------- */
/* Kropka z etykietą: ten sam kolor co badge tego statusu, tylko bez pudełka. */
.badge-dot { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.badge-dot-count { font-family: var(--mono); font-size: 11px; color: var(--label); }
.badge-dot.is-muted { color: var(--muted); }

/* Licznik przyklejony do ikony albo do przycisku: kółko w prawym górnym rogu. */
.badge-anchor { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.badge-pin { position: absolute; top: -6px; right: -8px; border: 2px solid var(--surface); }
.badge-pin.is-chrome { border-color: var(--chrome); }
.badge-pin.is-flat { width: 8px; min-width: 8px; height: 8px; padding: 0; top: -1px; right: -1px; }
.badge-target { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); color: var(--muted); }
.badge-target.is-chrome { color: var(--chrome-ink-2); }

/* Wiersz demonstracyjny: nazwa rekordu z lewej, sygnał z prawej. */
.badge-line { display: flex; align-items: center; gap: 10px; min-height: 28px; font-size: var(--fs-sm); }
.badge-line .grow { color: var(--ink); }
.badge-note { font-size: 11.5px; color: var(--muted); }
.badge-outline.is-warn { border-color: var(--warn-line); color: var(--warn-text); }
.badge-outline.is-danger { border-color: var(--danger-line); color: var(--danger-text); }

/* ---------- chip: dokładka do base ---------- */
.chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.chip-key { color: var(--label); }
.chip-val { color: var(--ink); }
.chip-count { font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.chip-sm { height: 20px; padding: 0 7px; font-size: 11px; }
.chip-clear { font-size: var(--fs-xs); color: var(--link); cursor: pointer; padding: 0 2px; }
.chip-clear:hover, .chip-clear.is-hover { text-decoration: underline; color: var(--link-hover); }
/* Chip wyboru: klikalny, zachowuje się jak radio albo checkbox, nie jak filtr do usunięcia. */
.chip-choice { cursor: pointer; user-select: none; }
.chip-choice:hover, .chip-choice.is-hover { border-color: var(--line-input); background: var(--surface); }
.chip-choice.is-selected:hover { border-color: var(--accent); background: var(--accent-soft); }
.chip-choice.is-disabled { opacity: .45; cursor: default; }
.chip-add { border-style: dashed; background: transparent; color: var(--muted); cursor: pointer; }
.chip-add:hover, .chip-add.is-hover { color: var(--link); border-color: var(--accent-soft-line); }

/* ---------- tag: etykieta nadana przez człowieka, kolor jest daną ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-xs); line-height: 1; color: var(--ink-2); white-space: nowrap; }
.tag-dot { width: 7px; height: 7px; border-radius: 4px; background: var(--neutral-dot); flex: 0 0 auto; }
.tag-x { width: 13px; height: 13px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; color: var(--label); cursor: pointer; margin-right: -3px; }
.tag-x:hover { background: var(--line-3); color: var(--ink); }
.tag-x .icon { width: 9px; height: 9px; }
.tag-ok { background: var(--accent-soft); border-color: var(--accent-soft-line); color: var(--accent-text); }
.tag-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
.tag-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-text); }
.tag-info { background: var(--info-soft); border-color: var(--info-line); color: var(--info-text); }
.tag-plain { background: var(--neutral-soft); border-color: transparent; }
.tag-list { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.tag-more { color: var(--muted); border-style: dashed; cursor: pointer; }
.tag-title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }

/* ---------- toast: krótka nowina w prawym dolnym rogu ---------- */
.toast-stack { position: absolute; right: 16px; bottom: 16px; z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.toast-stack.is-above-bar { bottom: 34px; }
.toast { position: relative; display: flex; align-items: flex-start; gap: 10px; width: 340px; padding: 9px 10px 9px 12px; border-radius: 5px; border-left: 3px solid var(--chrome-line); background: var(--chrome); color: var(--chrome-ink); box-shadow: var(--shadow-lg); font-size: var(--fs-sm); line-height: 1.4; }
.toast-ok { border-left-color: var(--accent); }
.toast-error { border-left-color: var(--danger); }
.toast-info { border-left-color: var(--info); }
.toast-main { flex: 1; min-width: 0; }
.toast-title { font-weight: 600; color: var(--chrome-ink-bright); }
.toast-text { margin-top: 2px; font-size: var(--fs-xs); color: var(--chrome-muted); }
.toast-text .mono { color: var(--chrome-ink-2); }
.toast-actions { display: flex; align-items: center; gap: 2px; margin-top: 6px; margin-left: -8px; }
.toast-btn { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 3px; font-size: var(--fs-xs); font-weight: 600; color: var(--chrome-accent-text); cursor: pointer; }
.toast-btn:hover, .toast-btn.is-hover { background: var(--chrome-hover); }
.toast-btn.is-quiet { color: var(--chrome-muted); font-weight: 400; }
.toast-x { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 3px; color: var(--chrome-label); cursor: pointer; flex: 0 0 auto; margin: -1px -2px 0 0; }
.toast-x:hover, .toast-x.is-hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.toast-x .icon { width: 11px; height: 11px; }
/* Pasek dogasania: szerokość to pozostały czas, wartość danych w atrybucie style. */
.toast-life { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--chrome-accent-text); opacity: .5; }
.toast-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--chrome-3); color: var(--chrome-ink-2); font-family: var(--mono); font-size: 10px; }
.toast-more { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--chrome-3); color: var(--chrome-muted); font-size: 11px; box-shadow: var(--shadow); cursor: pointer; }
.toast-more:hover, .toast-more.is-hover { color: var(--chrome-ink); }

/* ---------- alert: pasek w treści, zostaje dopóki powód nie zniknie ---------- */
.alert { display: flex; align-items: flex-start; gap: 9px; padding: 8px 11px; border: 1px solid var(--warn-line); border-radius: var(--radius); background: var(--warn-soft); color: var(--warn-text); font-size: var(--fs-sm); line-height: 1.45; }
.alert > .dot { margin-top: 6px; }
.alert-main { flex: 1; min-width: 0; }
.alert-title { font-weight: 600; }
.alert-text { margin-top: 2px; }
.alert-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.alert-link:hover { color: inherit; }
.alert-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 6px; flex: 0 0 auto; }
.alert-x { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 3px; color: inherit; opacity: .6; cursor: pointer; flex: 0 0 auto; }
.alert-x:hover, .alert-x.is-hover { opacity: 1; }
.alert-x .icon { width: 11px; height: 11px; }
.alert-list { display: grid; gap: 2px; margin-top: 5px; }
.alert-item { display: flex; align-items: baseline; gap: 7px; font-size: var(--fs-xs); }
.alert-item .mono { color: inherit; }
.alert-info { background: var(--info-soft); border-color: var(--info-line); color: var(--info-text); }
.alert-error { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-text); }
.alert-ok { background: var(--accent-soft); border-color: var(--accent-soft-line); color: var(--accent-text); }
.alert-flush { border-radius: 0; border-left: 0; border-right: 0; }

/* ---------- baner: pas na całą szerokość okna, nad treścią ---------- */
.banner { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 5px 14px; background: var(--info-soft); border-bottom: 1px solid var(--info-line); color: var(--info-text); font-size: var(--fs-sm); line-height: 1.4; }
.banner-strong { font-weight: 600; }
.banner-text { min-width: 0; }
.banner-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.banner-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.banner-x { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 3px; color: inherit; opacity: .55; cursor: pointer; flex: 0 0 auto; margin-right: -6px; }
.banner-x:hover, .banner-x.is-hover { opacity: 1; }
.banner-x .icon { width: 12px; height: 12px; }
.banner-warn { background: var(--warn-soft); border-bottom-color: var(--warn-line); color: var(--warn-text); }
.banner-danger { background: var(--danger-soft); border-bottom-color: var(--danger-line); color: var(--danger-text); }
.banner-ok { background: var(--accent-soft); border-bottom-color: var(--accent-soft-line); color: var(--accent-text); }
.banner-chrome { background: var(--chrome-3); border-bottom-color: var(--chrome-line-2); color: var(--chrome-ink-2); }
.banner-meta { font-size: var(--fs-xs); opacity: .8; }
.banner .btn-sm { flex: 0 0 auto; }

/* ---------- postęp ---------- */
.progress-block { display: grid; gap: 5px; min-width: 0; }
.progress-head { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.progress-name { min-width: 0; }
.progress-val { margin-left: auto; font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink); flex: 0 0 auto; }
.progress-foot { display: flex; align-items: baseline; gap: 10px; font-size: 11.5px; color: var(--muted); }
.progress-eta { margin-left: auto; font-family: var(--mono); flex: 0 0 auto; }
.progress-row { display: flex; align-items: center; gap: 10px; }
/* Nieokreślony: nie znamy końca, więc pasek jeździ i nie kłamie procentem. */
.progress-indet { position: relative; overflow: hidden; }
.progress-indet::after { content: ""; position: absolute; top: 0; bottom: 0; width: 34%; border-radius: 3px; background: var(--accent); animation: k-indet 1.2s ease-in-out infinite; }
@keyframes k-indet { 0% { left: -34%; } 100% { left: 100%; } }
/* Krokami: tyle segmentów, ile etapów; wypełnione są zamknięte, bieżący pulsuje. */
.progress-steps { display: flex; align-items: center; gap: 4px; min-width: 0; }
.progress-step { flex: 1; height: 6px; border-radius: 3px; background: var(--line-3); }
.progress-step.is-done { background: var(--accent); }
.progress-step.is-current { background: var(--accent); opacity: .45; animation: k-pulse 1.4s ease-in-out infinite; }
.progress-steps-head { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.progress-steps-no { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); margin-left: auto; flex: 0 0 auto; }
.progress-steps-list { display: grid; gap: 3px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.progress-steps-item { display: flex; align-items: center; gap: 7px; }
.progress-steps-item.is-done { color: var(--ink-2); }
.progress-steps-item.is-current { color: var(--ink); font-weight: 600; }
/* Kołowy: procent w środku, wartość zapisana w stroke-dasharray (obwód 125.7 przy r=20). */
.progress-ring { position: relative; width: 44px; height: 44px; flex: 0 0 auto; }
.progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring-track { fill: none; stroke: var(--line-3); stroke-width: 4; }
.progress-ring-fill { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.progress-ring-fill.is-warn { stroke: var(--warn); }
.progress-ring-fill.is-danger { stroke: var(--danger); }
.progress-ring-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-2); }
.progress-ring-lg { width: 64px; height: 64px; }
.progress-ring-lg .progress-ring-val { font-size: 14px; }
.progress-ring-row { display: flex; align-items: center; gap: 12px; }
.progress-ring-name { font-size: var(--fs-sm); color: var(--ink); }
.progress-ring-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ---------- spinner ---------- */
.spinner-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.spinner-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 22px 14px; font-size: var(--fs-sm); color: var(--muted); }
.spinner-chrome { border-color: var(--chrome-line); border-top-color: var(--chrome-accent-text); }
.spinner-ghost { border-color: var(--line-input); border-top-color: var(--ink-2); }

/* ---------- szkielet ładowania: kształt 1:1 z treścią, która przyjdzie ---------- */
.skeleton-row { display: flex; align-items: center; gap: 12px; height: var(--h-row); padding: 0 12px; border-bottom: 1px solid var(--line-3); }
.skeleton-row .skeleton { height: 9px; }
.skeleton-head { height: var(--h-thead); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.skeleton-head .skeleton { height: 7px; background: var(--line-2); }
.skeleton-col-check { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 14px; }
.skeleton-col-id { width: 96px; flex: 0 0 96px; }
.skeleton-col-name { flex: 1 1 auto; max-width: 240px; }
.skeleton-col-date { width: 72px; flex: 0 0 72px; }
.skeleton-col-status { width: 58px; height: 14px; border-radius: 3px; flex: 0 0 58px; }
.skeleton-col-sum { width: 76px; flex: 0 0 76px; margin-left: auto; }
.skeleton-col-title { width: 140px; flex: 0 0 140px; }
.skeleton-col-meta { width: 58px; flex: 0 0 58px; }
.skeleton-line { height: 10px; }
.skeleton-title { height: 13px; width: 46%; }
.skeleton-short { width: 58%; }
.skeleton-mid { width: 78%; }
.skeleton-avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; }
.skeleton-thumb { width: 44px; height: 44px; border-radius: var(--radius); flex: 0 0 44px; }
.skeleton-chip { width: 64px; height: 18px; border-radius: 3px; flex: 0 0 64px; }
.skeleton-btn { width: 92px; height: 26px; border-radius: var(--radius); flex: 0 0 92px; }
.skeleton-card { display: grid; gap: 9px; }
.skeleton-card-row { display: flex; align-items: center; gap: 10px; }
/* Cały ekran: te same proporcje co ekran docelowy, żeby nic nie skakało po podmianie. */
.skeleton-page { display: grid; grid-template-columns: 1fr var(--w-inspector); height: 100%; background: var(--surface); }
.skeleton-page-main { display: flex; flex-direction: column; min-width: 0; }
.skeleton-page-side { border-left: 1px solid var(--line); background: var(--surface-3); padding: 14px; display: grid; gap: 10px; align-content: start; }
.skeleton-page-head { display: flex; align-items: center; gap: 12px; height: var(--h-pageheader); padding: 0 16px; border-bottom: 1px solid var(--line-2); flex: 0 0 auto; }
.skeleton-page-bar { display: flex; align-items: center; gap: 8px; height: var(--h-filterbar); padding: 0 16px; border-bottom: 1px solid var(--line-3); flex: 0 0 auto; }
.skeleton-page-rows { flex: 1; min-height: 0; overflow: hidden; }

/* ---------- stany ekranu ---------- */
.state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 24px 20px; text-align: center; }
.state-icon { width: 30px; height: 30px; stroke-width: 1.1; color: var(--line-input); margin-bottom: 10px; }
.state-icon.is-warn { color: var(--warn-line); }
.state-icon.is-danger { color: var(--danger-line); }
.state-title { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.state-text { max-width: 44ch; margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.state-actions { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.state-hint { margin-top: 12px; font-size: 11.5px; color: var(--label); }
.state-code { display: inline-block; margin-top: 8px; padding: 3px 8px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px; color: var(--muted); }
.state-query { color: var(--ink); font-weight: 600; }
.state-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.state-meta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
/* Wyłączone z powodem: powód mieszka w dymku, nie w głowie programisty. */
.state-tip-wrap { position: relative; display: inline-flex; }
.state-tip { position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); width: 236px; padding: 7px 9px; border-radius: var(--radius); background: var(--chrome); color: var(--chrome-ink-2); font-size: 11.5px; line-height: 1.4; text-align: left; box-shadow: var(--shadow); z-index: 20; }
.state-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--chrome); }
.state-tip.is-left { left: 0; transform: none; }
.state-tip.is-left::after { left: 26px; margin-left: 0; }
.state-tip-title { display: block; color: var(--chrome-ink-bright); font-weight: 600; }
.state-tip-key { display: block; margin-top: 2px; color: var(--chrome-label); }
/* Nakładka ładowania: panel zostaje widoczny, ale nie da się w niego kliknąć. */
.state-host { position: relative; }
.state-overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; }
.state-overlay::before { content: ""; position: absolute; inset: 0; background: var(--surface); opacity: .74; }
.state-overlay-box { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); font-size: var(--fs-sm); color: var(--ink-2); }
.state-overlay-sub { font-size: 11px; color: var(--muted); }
/* Niezapisane zmiany: kropka w tytule, nigdy sam kolor przycisku. */
.state-dirty { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--warn-text); white-space: nowrap; }
.state-dirty-dot { width: 7px; height: 7px; border-radius: 4px; background: var(--warn); flex: 0 0 auto; }
.state-dirty-dot.is-chrome { box-shadow: 0 0 0 2px var(--chrome); }
.state-dirty-star { font-family: var(--mono); color: var(--warn-text); }
/* Walidacja przy polu: komunikat mówi CO zrobić, nie „błąd”. */
.state-msg { display: flex; align-items: flex-start; gap: 6px; margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--danger); }
.state-msg > .dot { margin-top: 4px; }
.state-msg.is-warn { color: var(--warn-text); }
.state-msg.is-ok { color: var(--accent-text); }
.state-msg.is-muted { color: var(--muted); }
.state-msg-sum { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--danger-line); border-radius: var(--radius); background: var(--danger-soft); font-size: var(--fs-sm); color: var(--danger-text); }
.state-msg-sum .state-msg-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; margin-left: auto; }
/* Legenda: raz na ekran, ten sam kolor co badge i kropka w filtrze. */
.state-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px; padding: 7px 11px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-xs); color: var(--ink-2); }
.state-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.state-legend-count { font-family: var(--mono); font-size: 11px; color: var(--label); }
.state-legend.is-vertical { flex-direction: column; align-items: flex-start; gap: 8px; }
.state-legend-note { width: 100%; font-size: 11px; color: var(--muted); }
.state-legend-item.is-muted { color: var(--muted); }

/* ---------- uzupełnienia: toast z postępem, konflikt w miejscu, baner tylko do odczytu,
   szkielet inspectora, wskazówka wprowadzająca ---------- */
.toast-progress { height: 4px; margin-top: 8px; border-radius: 2px; background: var(--chrome-line); overflow: hidden; }
.toast-progress-fill { display: block; height: 100%; border-radius: 2px; background: var(--chrome-accent-text); }
.toast-progress-fill.is-indet { width: 34%; animation: k-indet 1.2s ease-in-out infinite; position: relative; }
.toast-progress-val { float: right; font-family: var(--mono); color: var(--chrome-ink-2); }

.state-conflict { display: flex; align-items: flex-start; gap: 9px; padding: 8px 11px; border: 1px solid var(--warn-line); border-left-width: 3px; border-radius: var(--radius); background: var(--warn-soft); color: var(--warn-text); font-size: var(--fs-sm); line-height: 1.45; }
.state-conflict .icon { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.state-conflict-main { flex: 1; min-width: 0; }
.state-conflict-title { font-weight: 600; }
.state-conflict-text { margin-top: 2px; font-size: 11.5px; }
.state-conflict-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.state-conflict-mark { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; font-size: 11px; color: var(--warn-text); }
.state-conflict-mark .mono { color: inherit; }
.state-conflict-mine { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); margin-top: 3px; }

.banner-readonly { display: flex; align-items: center; gap: 10px; }
.banner-readonly .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.banner-readonly-why { font-size: var(--fs-xs); opacity: .85; }

.skeleton-inspector { display: flex; flex-direction: column; height: 100%; width: var(--w-inspector); background: var(--surface); border-left: 1px solid var(--line); }
.skeleton-inspector-head { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; background: var(--chrome); flex: 0 0 auto; }
.skeleton-inspector-head .skeleton { background: var(--chrome-3); }
.skeleton-inspector-code { width: 150px; height: 16px; }
.skeleton-inspector-sub { width: 104px; height: 8px; }
.skeleton-inspector-tabs { display: flex; align-items: center; gap: 20px; height: 32px; padding: 0 14px; border-bottom: 1px solid var(--line-2); flex: 0 0 auto; }
.skeleton-inspector-tab { width: 54px; height: 8px; }
.skeleton-inspector-body { flex: 1; min-height: 0; overflow: hidden; padding: 14px; display: grid; gap: 14px; align-content: start; }
.skeleton-inspector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.skeleton-inspector-cell { display: grid; gap: 5px; }
.skeleton-inspector-cell .skeleton:first-child { width: 52px; height: 7px; }
.skeleton-inspector-cell .skeleton:last-child { height: 10px; }
.skeleton-inspector-sec { display: flex; align-items: center; gap: 10px; padding-top: 2px; border-top: 1px solid var(--line-3); }
.skeleton-inspector-sec .skeleton { width: 76px; height: 7px; margin-top: 12px; }
.skeleton-inspector-foot { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--line-2); background: var(--surface-3); flex: 0 0 auto; }

.state-coach-spot { position: relative; z-index: 5; display: inline-flex; border-radius: var(--radius); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 9999px var(--overlay); }
.state-coach { position: absolute; z-index: 6; top: calc(100% + 12px); right: 16px; width: 272px; padding: 11px 12px 10px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); white-space: normal; text-align: left; }
.state-coach::after { content: ""; position: absolute; top: -5px; right: 28px; width: 10px; height: 10px; background: var(--surface); transform: rotate(45deg); }
.state-coach.is-left { right: auto; left: 16px; }
.state-coach.is-left::after { right: auto; left: 28px; }
.state-coach-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.state-coach-text { margin-top: 3px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.state-coach-foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.state-coach-step { font-family: var(--mono); font-size: 11px; color: var(--label); }
.state-coach-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }


/* ===== nav: Nawigacja i kroki ===== */
/* nav: przechodzenie między krokami, stronami, rekordami i sekcjami - stepper, paginacja,
   zakładki pionowe, wstecz/dalej, kotwice, spis treści, historia i pasek dolny wąskiego okna. */

/* ---------- wspólne pojemniki podglądu rodziny ---------- */
.nav-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nav-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.nav-cap { display: block; margin-bottom: 5px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.nav-stage { display: flex; height: 100%; min-height: 0; overflow: hidden; border-radius: var(--radius-lg); }

/* ---------- stepper poziomy: kółko 22px, łącznik 2px ---------- */
.stepper { display: flex; align-items: flex-start; min-width: 0; }
.stepper-step { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; width: 104px; text-align: center; }
.stepper-mark { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: var(--surface-2); border: 1px solid var(--line); color: var(--label); font: 600 11px var(--mono); }
.stepper-mark .icon { width: 12px; height: 12px; stroke-width: 2; }
.stepper-step.is-done .stepper-mark, .stepper-v-step.is-done .stepper-mark { background: var(--accent-soft); border-color: var(--accent-soft-line); color: var(--accent-text); }
.stepper-step.is-current .stepper-mark, .stepper-v-step.is-current .stepper-mark { background: var(--surface); border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 3px var(--focus-ring); }
.stepper-step.is-error .stepper-mark, .stepper-v-step.is-error .stepper-mark { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-text); }
.stepper-label { font-size: var(--fs-xs); color: var(--label); line-height: 1.3; }
.stepper-step.is-done .stepper-label { color: var(--ink-2); }
.stepper-step.is-current .stepper-label { color: var(--ink); font-weight: 600; }
.stepper-step.is-error .stepper-label { color: var(--danger-text); font-weight: 600; }
.stepper-sub { font-size: 10.5px; color: var(--label); font-family: var(--mono); }
.stepper-line { flex: 1; min-width: 20px; height: 2px; margin-top: 10px; background: var(--line); }
.stepper-line.is-done { background: var(--accent); }
.stepper-step.is-disabled { opacity: .55; }

/* ---------- stepper pionowy: łącznik biegnie w dół, opis pod tytułem ---------- */
.stepper-v { display: flex; flex-direction: column; min-width: 0; }
.stepper-v-step { display: flex; gap: 10px; min-width: 0; }
.stepper-v-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 22px; }
.stepper-v-line { width: 2px; flex: 1; min-height: 14px; margin: 3px 0; background: var(--line); }
.stepper-v-line.is-done { background: var(--accent); }
.stepper-v-body { flex: 1; min-width: 0; padding-bottom: 12px; }
.stepper-v-step:last-child .stepper-v-body { padding-bottom: 0; }
.stepper-v-title { font-size: var(--fs); line-height: 22px; color: var(--ink-2); }
.stepper-v-step.is-current .stepper-v-title { color: var(--ink); font-weight: 600; }
.stepper-v-step.is-done .stepper-v-title { color: var(--ink-2); }
.stepper-v-desc { margin-top: 1px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.stepper-v-meta { margin-top: 3px; font-size: 11px; color: var(--label); font-family: var(--mono); }

/* ---------- stepper zwarty: jedna linia „Krok 2 z 5: Adres” ---------- */
.stepper-compact { display: flex; align-items: center; gap: 10px; height: 34px; min-width: 0; font-size: var(--fs-sm); }
.stepper-compact-count { flex: 0 0 auto; font-family: var(--mono); font-size: 11px; color: var(--label); white-space: nowrap; }
.stepper-compact-title { font-weight: 600; color: var(--ink); white-space: nowrap; }
.stepper-compact-of { color: var(--muted); white-space: nowrap; }
.stepper-dots { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 0 auto; }
.stepper-dot { width: 7px; height: 7px; border-radius: 4px; background: var(--line); flex: 0 0 auto; }
.stepper-dot.is-done { background: var(--accent-soft-line); }
.stepper-dot.is-current { background: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.stepper-compact .progress { max-width: 160px; margin-left: auto; }

/* ---------- paginacja: przycisk 26px, aktywna strona na chrome ---------- */
.pagination { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--fs-xs); color: var(--muted); }
.pagination-foot { margin-left: auto; }
.pagination-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--ink-2); font: 600 11.5px var(--mono); cursor: pointer; user-select: none; }
.pagination-btn:hover, .pagination-btn.is-hover { background: var(--hover-neutral); }
.pagination-btn .icon { width: 13px; height: 13px; }
.pagination-btn.is-active { background: var(--chrome); border-color: var(--chrome); color: var(--chrome-ink); }
.pagination-btn.is-disabled { color: var(--label); opacity: .45; pointer-events: none; }
.pagination-gap { width: 18px; text-align: center; color: var(--label); font-family: var(--mono); user-select: none; }
.pagination-info { white-space: nowrap; color: var(--muted); }
.pagination-info .strong { color: var(--ink); font-family: var(--mono); }
.pagination-sep { width: 1px; height: 14px; margin: 0 4px; background: var(--line); flex: 0 0 1px; }
.pagination-size { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pagination-size .select { width: 104px; height: 26px; font-size: var(--fs-xs); }
.pagination-jump { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pagination-jump .input { width: 44px; height: 26px; padding: 0 4px; text-align: center; font-family: var(--mono); font-size: var(--fs-xs); }
.pagination-bar { height: 34px; padding: 0 10px; background: var(--surface); border-radius: var(--radius-lg); }

/* ---------- zakładki pionowe: kolumna 180px, aktywna z wstawką 3px ---------- */
.nav-tabs-v { display: flex; flex-direction: column; flex: 0 0 180px; width: 180px; padding: 6px 0; background: var(--surface-2); border-right: 1px solid var(--line-2); overflow: auto; }
.nav-tabs-v-head { padding: 6px 12px 4px; }
.nav-tabs-v-item { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 9px; border-left: 3px solid transparent; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; cursor: pointer; user-select: none; }
.nav-tabs-v-item .icon { width: 14px; height: 14px; color: var(--label); }
.nav-tabs-v-item:hover, .nav-tabs-v-item.is-hover { background: var(--hover-neutral); }
.nav-tabs-v-item.is-active { background: var(--surface); border-left-color: var(--accent); color: var(--ink); font-weight: 600; }
.nav-tabs-v-item.is-active .icon { color: var(--accent-text); }
.nav-tabs-v-item.is-disabled { color: var(--label); opacity: .6; pointer-events: none; }
.nav-tabs-v-item .badge, .nav-tabs-v-item .badge-count { margin-left: auto; }
.nav-tabs-v-body { flex: 1; min-width: 0; padding: 14px 16px; background: var(--surface); overflow: auto; }
.nav-tabs-v-title { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }

/* ---------- paski nawigacyjne: wstecz/dalej, rekord, litery ---------- */
.nav-bar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; min-width: 0; font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface); border-radius: var(--radius-lg); white-space: nowrap; }
.nav-arrows { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.nav-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--ink-2); cursor: pointer; }
.nav-arrow .icon { width: 15px; height: 15px; }
.nav-arrow:hover, .nav-arrow.is-hover { background: var(--hover-neutral); }
.nav-arrow.is-disabled { color: var(--label); opacity: .4; pointer-events: none; }
.nav-arrow-drop { width: 18px; }
.nav-arrow-drop .icon { width: 11px; height: 11px; }
.nav-crumb { min-width: 0; color: var(--muted); font-size: var(--fs-xs); }
.nav-record-title { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.nav-record-pos { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.nav-record-pos .strong { color: var(--ink); }

/* ---------- kotwice sekcji długiej strony ---------- */
.nav-page { flex: 1; min-width: 0; padding: 12px 14px; background: var(--surface); overflow: hidden; font-size: var(--fs-sm); color: var(--ink-2); }
.nav-page h4 { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.nav-page p { margin-bottom: 12px; color: var(--muted); line-height: 1.5; }
.nav-anchors { flex: 0 0 172px; width: 172px; padding: 12px 0 12px 12px; background: var(--surface); border-left: 1px solid var(--line-2); overflow: auto; }
.nav-anchors-head { padding: 0 8px 6px 10px; }
.nav-anchor-item { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; border-left: 2px solid var(--line-2); font-size: var(--fs-xs); color: var(--muted); cursor: pointer; }
.nav-anchor-item:hover, .nav-anchor-item.is-hover { color: var(--ink-2); border-left-color: var(--line-input); }
.nav-anchor-item.is-active { color: var(--accent-text); border-left-color: var(--accent); font-weight: 600; }
.nav-anchor-item .dot { margin-left: auto; }

/* ---------- stopka kreatora ---------- */
.nav-wizard { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; background: var(--surface-3); border-top: 1px solid var(--line-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.nav-wizard-step { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.nav-wizard-step .strong { font-family: var(--mono); color: var(--ink-2); }
.nav-wizard-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }

/* ---------- podpowiedź klawiszy ---------- */
.nav-keys { display: flex; align-items: center; gap: 14px; height: 28px; padding: 0 12px; background: var(--surface-2); border-top: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; }
.nav-key { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.nav-keys-grid { display: grid; grid-template-columns: auto 1fr; gap: 7px 10px; align-items: center; font-size: var(--fs-sm); color: var(--ink-2); }
.nav-keys-grid .kbd { justify-self: start; }

/* ---------- skok po literach A-Z ---------- */
.nav-alpha { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; }
.nav-alpha-item { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 22px; border-radius: 3px; font-size: 11px; font-weight: 600; color: var(--ink-2); cursor: pointer; user-select: none; }
.nav-alpha-item:hover, .nav-alpha-item.is-hover { background: var(--hover-neutral); }
.nav-alpha-item.is-active { background: var(--accent); color: var(--accent-ink); }
.nav-alpha-item.is-disabled { color: var(--line-input); pointer-events: none; }

/* ---------- historia z datami ISO ---------- */
.nav-history { background: var(--surface); font-size: var(--fs-sm); }
.nav-history-day { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line-3); }
.nav-history-item { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--line-3); cursor: pointer; }
.nav-history-item:hover, .nav-history-item.is-hover { background: var(--hover); }
.nav-history-item.is-current { background: var(--selected); }
.nav-history-item .icon { width: 14px; height: 14px; color: var(--label); }
.nav-history-item.is-current .icon { color: var(--accent-text); }
.nav-history-time { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--label); flex: 0 0 auto; }

/* ---------- szybki przełącznik Ctrl+Tab (rozszerza .menu z base) ---------- */
.nav-switcher { width: 360px; }
.nav-switcher .menu-item { height: 30px; }
.nav-switcher .menu-item.is-active { background: var(--selected); box-shadow: inset 3px 0 0 var(--accent); }
.nav-switcher .menu-item.is-active .icon { color: var(--accent-text); }
.nav-switcher-sub { margin-left: auto; padding-left: 12px; font-family: var(--mono); font-size: 11px; color: var(--label); }
.nav-switcher-foot { display: flex; align-items: center; gap: 10px; }

/* ---------- spis treści dokumentu ---------- */
.nav-toc { padding: 6px 0; background: var(--surface); font-size: var(--fs-sm); overflow: auto; }
.nav-toc-item { display: flex; align-items: baseline; gap: 8px; min-height: 24px; padding: 3px 12px; color: var(--ink-2); cursor: pointer; }
.nav-toc-item:hover, .nav-toc-item.is-hover { background: var(--hover-neutral); }
.nav-toc-item.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav-toc-no { flex: 0 0 auto; min-width: 26px; font-family: var(--mono); font-size: 11px; color: var(--label); }
.nav-toc-item.is-active .nav-toc-no { color: var(--accent-text); }
.nav-toc-text { min-width: 0; }
.nav-toc-page { margin-left: auto; padding-left: 10px; font-family: var(--mono); font-size: 11px; color: var(--label); }
.nav-toc-item.is-l2 { padding-left: 30px; font-size: var(--fs-xs); }
.nav-toc-item.is-l3 { padding-left: 50px; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- pasek dolny wąskiego okna ---------- */
.nav-bottom { display: flex; align-items: stretch; height: 52px; background: var(--surface); border-top: 1px solid var(--line); }
.nav-bottom-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; color: var(--muted); cursor: pointer; user-select: none; }
.nav-bottom-item .icon { width: 18px; height: 18px; }
.nav-bottom-item:hover, .nav-bottom-item.is-hover { background: var(--hover-neutral); }
.nav-bottom-item.is-active { color: var(--accent-text); font-weight: 600; }
.nav-bottom-item.is-active .icon { color: var(--accent); }
.nav-bottom-item .badge-count { position: absolute; top: 5px; left: 50%; margin-left: 3px; }

/* ---------- zakładki z „więcej” ---------- */
.nav-tabs-overflow { position: relative; display: flex; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--line-2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.nav-tabs-overflow .tabs { flex: 1; min-width: 0; border-bottom: 0; overflow: hidden; }
.nav-more { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-left: 1px solid var(--line-3); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; cursor: pointer; user-select: none; }
.nav-more .icon { width: 12px; height: 12px; }
.nav-more:hover, .nav-more.is-hover, .nav-more.is-open { background: var(--hover-neutral); color: var(--ink); }
.nav-more-menu { position: absolute; top: 33px; right: 0; z-index: 10; min-width: 210px; }

/* ---------- uzupełnienia: szukanie w treści, postęp wypełnienia formularza ---------- */
.nav-find-stage { position: relative; overflow: hidden; }
.nav-find-float { position: absolute; top: 10px; right: 12px; z-index: 5; }
.nav-find { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.nav-find .input-wrap { width: 190px; height: 26px; }
.nav-find-count { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.nav-find-count .strong { color: var(--ink); }
.nav-find-count.is-empty { color: var(--danger); }
.nav-find-sep { width: 1px; height: 18px; background: var(--line-2); flex: 0 0 1px; }
.nav-find-doc { padding: 14px 16px; font-size: var(--fs-sm); line-height: 1.75; color: var(--ink-2); }
.nav-find-doc h4 { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.nav-find-doc p { margin-bottom: 11px; }
.nav-find-hit { padding: 0 1px; border-radius: 2px; background: var(--warn-soft); box-shadow: 0 0 0 1px var(--warn-line); }
.nav-find-hit.is-current { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent); font-weight: 600; }
.nav-find-scroll { position: absolute; top: 0; bottom: 0; right: 0; width: 10px; background: var(--surface-2); border-left: 1px solid var(--line-3); }
.nav-find-tick { position: absolute; left: 2px; width: 6px; height: 2px; border-radius: 1px; background: var(--warn-line); }
.nav-find-tick.is-current { background: var(--accent); height: 3px; }

.nav-progress { padding: 11px 13px; }
.nav-progress-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.nav-progress-title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.nav-progress-val { margin-left: auto; font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-2); }
.nav-progress-note { margin-top: 6px; font-size: 11px; color: var(--muted); }
.nav-progress-sec { margin-top: 11px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.nav-progress-list { display: grid; gap: 1px; margin-top: 4px; }
.nav-progress-item { display: flex; align-items: center; gap: 7px; min-height: 22px; font-size: var(--fs-xs); color: var(--link); cursor: pointer; }
.nav-progress-item:hover, .nav-progress-item.is-hover { text-decoration: underline; }
.nav-progress-item .icon { width: 12px; height: 12px; flex: 0 0 auto; color: var(--warn); }
.nav-progress-item.is-required .icon { color: var(--danger); }
.nav-progress-item.is-done { color: var(--muted); cursor: default; text-decoration: none; }
.nav-progress-item.is-done .icon { color: var(--accent); }
.nav-progress-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--label); }

/* ---------- suwak czasu: pas gęstości zdarzeń, okno widoczności, wybrana chwila ---------- */
.nav-scrub-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--surface); }
.nav-scrub { flex: 0 0 74px; display: flex; align-items: center; gap: 14px; height: 74px; padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.nav-scrub-ctl { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.nav-scrub-play { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line-input); border-radius: var(--radius); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.nav-scrub-play .icon { width: 14px; height: 14px; }
.nav-scrub-play:hover, .nav-scrub-play.is-hover { border-color: var(--accent); color: var(--link); }
.nav-scrub-play.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.nav-scrub-step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 30px; color: var(--muted); cursor: pointer; }
.nav-scrub-step .icon { width: 13px; height: 13px; }
.nav-scrub-step:hover, .nav-scrub-step.is-hover { color: var(--ink); }
.nav-scrub-speeds { display: inline-flex; align-items: center; gap: 2px; margin-left: 5px; padding: 2px; border-radius: var(--radius); background: var(--surface-2); }
.nav-scrub-speed { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 3px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); cursor: pointer; user-select: none; }
.nav-scrub-speed:hover, .nav-scrub-speed.is-hover { color: var(--ink); }
.nav-scrub-speed.is-active { background: var(--chrome); color: var(--chrome-accent-text); }
.nav-scrub-main { position: relative; flex: 1; min-width: 0; padding-top: 17px; }
.nav-scrub-track { position: relative; height: 30px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius); }
.nav-scrub-win { position: absolute; top: -1px; bottom: -1px; background: var(--accent-soft); border: 1px solid var(--accent-soft-line); border-radius: 2px; }
.nav-scrub-win-tag { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); font-family: var(--mono); font-size: 9.5px; color: var(--accent-text); white-space: nowrap; }
.nav-scrub-bars { position: absolute; inset: 1px; display: flex; align-items: flex-end; gap: 1px; overflow: hidden; }
.nav-scrub-bar { flex: 1; min-width: 1px; background: var(--neutral-dot); border-radius: 1px 1px 0 0; }
.nav-scrub-gap { position: absolute; top: 1px; bottom: 1px; border-left: 1px dashed var(--line-input); border-right: 1px dashed var(--line-input); background-image: repeating-linear-gradient(45deg, var(--line-2) 0 3px, transparent 3px 7px); }
.nav-scrub-gap-tag { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 0 4px;
  border-radius: 2px; background: var(--surface); font-size: 9.5px; color: var(--label); white-space: nowrap; }
.nav-scrub-cursor { position: absolute; top: -17px; bottom: 0; width: 2px; margin-left: -1px; background: var(--chrome); z-index: 3; }
.nav-scrub-flag { position: absolute; left: 1px; top: 0; transform: translateX(-50%); height: 16px; padding: 0 6px; border-radius: 3px; background: var(--chrome); color: var(--chrome-ink); font: 600 10px/16px var(--mono); white-space: nowrap; }
.nav-scrub-ticks { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--mono); font-size: 10px; color: var(--label); }
.nav-scrub-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }
.nav-scrub-range { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--line-input); border-radius: var(--radius); background: var(--field); font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.nav-scrub-range .icon { width: 13px; height: 13px; color: var(--label); }
.nav-scrub-note { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.nav-scrub-body { flex: 1; min-height: 0; overflow: auto; }
.nav-scrub-legend { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav-scrub-key { width: 14px; height: 8px; flex: 0 0 14px; border-radius: 2px; background: var(--neutral-dot); }
.nav-scrub-key.is-win { background: var(--accent-soft); border: 1px solid var(--accent-soft-line); }
.nav-scrub-key.is-gap { border: 1px dashed var(--line-input); background-image: repeating-linear-gradient(45deg, var(--line-2) 0 3px, transparent 3px 7px); }
.nav-scrub-key.is-now { width: 3px; flex-basis: 3px; height: 12px; border-radius: 1px; background: var(--chrome); }


/* ===== split: Podziały i panele przesuwne ===== */
/* split: podziały i panele przesuwne - uchwyty podziału, układy wielopanelowe, akordeony,
   sekcje zwijane, panele dokowane, karuzele, obszary przewijania i panele pływające. */

/* ---------- uchwyt podziału: 6px obszaru trafienia, 1px kreski, akcent na hover ---------- */
.splitter { position: relative; flex: 0 0 6px; align-self: stretch; width: 6px; background: transparent; cursor: col-resize; user-select: none; -webkit-user-select: none; touch-action: none; z-index: 2; }
.splitter::before { content: ""; position: absolute; top: 0; bottom: 0; left: 2.5px; width: 1px; background: var(--line); transition: background .1s, width .1s, left .1s; }
.splitter:hover::before, .splitter.is-hover::before, .splitter.is-active::before { left: 2px; width: 2px; background: var(--accent); }
.splitter.is-active::before { background: var(--accent-hover); }
.splitter.is-disabled { cursor: default; }
.splitter.is-disabled::before { background: var(--line-2); }
.splitter-grip { position: absolute; top: 50%; left: 50%; width: 3px; height: 26px; margin: -13px 0 0 -1.5px; border-radius: 2px; background: var(--line-input); opacity: 0; transition: opacity .1s; }
.splitter:hover .splitter-grip, .splitter.is-hover .splitter-grip, .splitter.is-active .splitter-grip { opacity: 1; background: var(--accent); }

/* poziomy: ten sam klocek obrócony, kursor row-resize */
.splitter-h { flex: 0 0 6px; align-self: auto; width: auto; height: 6px; cursor: row-resize; }
.splitter-h::before { top: 2.5px; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
.splitter-h:hover::before, .splitter-h.is-hover::before, .splitter-h.is-active::before { top: 2px; left: 0; width: auto; height: 2px; }
.splitter-h .splitter-grip { width: 26px; height: 3px; margin: -1.5px 0 0 -13px; }

/* dymek przy przeciąganiu: bieżąca szerokość i podpowiedź o dwukliku */
.splitter-tip { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); display: flex; align-items: center; gap: 7px; height: 22px; padding: 0 9px; border-radius: 3px; background: var(--chrome); color: var(--chrome-ink); font-size: 11px; white-space: nowrap; box-shadow: var(--shadow); pointer-events: none; z-index: 4; }
.splitter-tip .mono { font-size: 11px; color: var(--chrome-accent-text); }
.splitter-tip .sep-v { height: 12px; background: var(--chrome-line); }
.splitter-h .splitter-tip { top: auto; bottom: 10px; left: 50%; transform: translateX(-50%); }

/* ---------- układ z panelami ---------- */
.split { display: flex; height: 100%; min-height: 0; background: var(--canvas); }
.split-col { flex-direction: column; }
.split-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); overflow: hidden; }
.split-list { flex: 0 0 260px; }
.split-main { flex: 1; min-width: 0; }
.split-side { flex: 0 0 340px; }
.split-side-sm { flex: 0 0 260px; }
.split-bottom { flex: 0 0 120px; }
.split-pane-head { flex: 0 0 30px; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); white-space: nowrap; }
.split-pane-title { font-weight: 600; }
.split-pane-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.split-pane-actions .btn-icon { width: 22px; height: 22px; }
.split-pane-actions .btn-icon .icon { width: 13px; height: 13px; }
.split-pane-body { flex: 1; min-height: 0; overflow: auto; }
.split-pad { padding: 12px 14px; }
.split-preview-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.split-rule { height: 1px; margin: 12px 0; background: var(--line-2); }
.split-stack { display: flex; flex-direction: column; gap: 14px; }
.split-foot { flex: 0 0 26px; display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 12px; background: var(--surface-3); border-top: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--muted); }

/* przycisk zwijania na krawędzi panelu */
.split-edge { position: absolute; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 14px; height: 44px; margin-top: -22px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.split-edge:hover, .split-edge.is-hover { color: var(--link); border-color: var(--accent); }
.split-edge .icon { width: 11px; height: 11px; }
.split-edge-left { left: 0; border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.split-edge-right { right: 0; border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }

/* panel zwinięty do pionowego paska z tytułem */
.split-stub { flex: 0 0 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0; background: var(--surface-2); border-right: 1px solid var(--line); }
.split-stub-right { border-right: 0; border-left: 1px solid var(--line); }
.split-stub .btn-icon { width: 24px; height: 24px; }
.split-stub .btn-icon .icon { width: 13px; height: 13px; }
.split-stub-title { writing-mode: vertical-rl; font-size: 11.5px; letter-spacing: .3px; color: var(--muted); white-space: nowrap; }
.split-stub-count { writing-mode: vertical-rl; font-family: var(--mono); font-size: 10.5px; color: var(--label); }

/* ---------- akordeon ---------- */
.accordion { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.accordion-item + .accordion-item { border-top: 1px solid var(--line-3); }
.accordion-head { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); cursor: pointer; user-select: none; -webkit-user-select: none; }
.accordion-head:hover, .accordion-head.is-hover { background: var(--surface-2); }
.accordion-head .icon { width: 12px; height: 12px; color: var(--label); transition: transform .12s; }
.accordion-item.is-open > .accordion-head { background: var(--surface-3); }
.accordion-item.is-open > .accordion-head .icon { transform: rotate(90deg); color: var(--ink-2); }
.accordion-item.is-disabled > .accordion-head { opacity: .45; cursor: default; }
.accordion-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.accordion-body { padding: 4px 12px 14px; font-size: var(--fs-sm); color: var(--ink-2); }
.accordion-item:not(.is-open) > .accordion-body { display: none; }
.accordion-note { padding: 6px 12px; background: var(--surface-3); border-top: 1px solid var(--line-3); font-size: 11px; color: var(--muted); }
/* wariant „tylko jeden otwarty": otwarta pozycja z kreską akcentu z lewej */
.accordion-single .accordion-item.is-open > .accordion-head { box-shadow: inset 3px 0 0 var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.accordion-single .accordion-item.is-open > .accordion-head .icon { color: var(--accent-text); }
.accordion-single .accordion-body { padding-left: 15px; }

/* ---------- sekcja zwijana (nagłówek etykietowy jak w inspectorze) ---------- */
.split-sections { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.split-section + .split-section { border-top: 1px solid var(--line-3); }
.split-section-head { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); cursor: pointer; user-select: none; -webkit-user-select: none; }
.split-section-head:hover, .split-section-head.is-hover { background: var(--surface-2); color: var(--ink-2); }
.split-section-head .icon { width: 11px; height: 11px; transition: transform .12s; }
.split-section.is-open > .split-section-head .icon { transform: rotate(90deg); }
.split-section-count { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0; }
.split-section-body { padding: 2px 12px 12px; font-size: var(--fs-sm); color: var(--ink-2); }
.split-section:not(.is-open) > .split-section-body { display: none; }

/* ---------- panele dokowane z zakładkami ---------- */
.dock { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--canvas); }
.dock-panel { flex: 0 0 180px; display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-top: 1px solid var(--line); }
.dock-panel.is-maximized { flex: 1; }
.dock-bar { flex: 0 0 30px; display: flex; align-items: stretch; height: 30px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); }
.dock-tabs { display: flex; align-items: stretch; min-width: 0; }
.dock-tab { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-right: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; cursor: pointer; user-select: none; }
.dock-tab:hover, .dock-tab.is-hover { background: var(--surface-3); color: var(--ink); }
.dock-tab.is-active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: inset 0 2px 0 var(--accent); margin-bottom: -1px; }
.dock-tab .icon { width: 12px; height: 12px; color: var(--label); }
.dock-tab .count { font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.dock-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; padding-right: 4px; }
.dock-actions .btn-icon { width: 24px; height: 24px; }
.dock-actions .btn-icon .icon { width: 13px; height: 13px; }
.dock-body { flex: 1; min-height: 0; overflow: auto; }
.dock-log { padding: 6px 0; font: 11.5px/1.75 var(--mono); }
.dock-log-line { display: flex; gap: 10px; padding: 0 12px; white-space: nowrap; color: var(--ink-2); }
.dock-log-line:hover, .dock-log-line.is-hover { background: var(--surface-2); }
.dock-log-time { flex: 0 0 auto; color: var(--label); }
.dock-log-line.is-error { color: var(--danger-text); }
.dock-log-line.is-warn { color: var(--warn-text); }
.dock-log-line.is-ok { color: var(--accent-text); }

/* ---------- karuzela ---------- */
.carousel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; }
.carousel-stage { position: relative; display: flex; align-items: center; justify-content: center; height: 220px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.carousel-arrow { position: absolute; top: 50%; margin-top: -13px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink-2); cursor: pointer; }
.carousel-arrow:hover, .carousel-arrow.is-hover { border-color: var(--accent); color: var(--link); }
.carousel-arrow.is-disabled { opacity: .4; cursor: default; }
.carousel-arrow .icon { width: 13px; height: 13px; }
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }
.carousel-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.carousel-dot { width: 7px; height: 7px; border-radius: 4px; background: var(--line-input); cursor: pointer; transition: width .12s, background .12s; }
.carousel-dot:hover, .carousel-dot.is-hover { background: var(--neutral-dot); }
.carousel-dot.is-active { width: 18px; background: var(--accent); }
.carousel-caption { margin-top: 8px; text-align: center; font-size: 11.5px; color: var(--muted); }

/* pasek miniatur */
.carousel-strip { display: flex; align-items: flex-start; gap: 8px; padding: 8px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.carousel-thumb { position: relative; flex: 0 0 auto; width: 72px; cursor: pointer; }
.carousel-thumb-page { position: relative; height: 92px; padding: 8px 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.carousel-thumb:hover .carousel-thumb-page, .carousel-thumb.is-hover .carousel-thumb-page { border-color: var(--line-input); }
.carousel-thumb.is-active .carousel-thumb-page { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.carousel-thumb-no { position: absolute; right: 4px; bottom: 3px; font-family: var(--mono); font-size: 9.5px; color: var(--label); }
.carousel-thumb-label { margin-top: 4px; text-align: center; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carousel-thumb.is-active .carousel-thumb-label { color: var(--ink); font-weight: 600; }

/* makieta strony dokumentu (używa jej karuzela i panel pływający) */
.split-page { width: 148px; padding: 14px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow); }
.split-page-lg { width: 320px; padding: 24px 22px; }
.split-page-line { height: 5px; margin-bottom: 6px; border-radius: 2px; background: var(--line-2); }
.split-page-line.is-head { height: 9px; width: 62%; margin-bottom: 12px; background: var(--line-input); }
.split-page-line.is-short { width: 46%; }
.split-page-gap { height: 12px; }

/* ---------- obszar przewijania z cieniem krawędzi ---------- */
.scroll { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.scroll-head { flex: 0 0 30px; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.scroll-head .btn-icon { width: 22px; height: 22px; margin-left: auto; }
.scroll-head .btn-icon .icon { width: 13px; height: 13px; }
.scroll-area { position: relative; flex: 1; min-height: 0; }
.scroll-body { max-height: 240px; overflow: auto; }
/* gradient krawędzi: cień treści, nie kolor motywu - dlatego rgba zamiast tokenu */
.scroll-fade { position: absolute; left: 0; right: 10px; height: 16px; pointer-events: none; z-index: 1; }
.scroll-fade-top { top: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--chrome) 11%, transparent), color-mix(in srgb, var(--chrome) 0%, transparent)); }
.scroll-fade-bottom { bottom: 0; background: linear-gradient(to top, color-mix(in srgb, var(--chrome) 13%, transparent), color-mix(in srgb, var(--chrome) 0%, transparent)); }
.scroll-row { display: flex; align-items: center; gap: 10px; height: var(--h-row); padding: 0 12px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-sm); white-space: nowrap; }
.scroll-row:last-child { border-bottom: 0; }
.scroll-row:hover, .scroll-row.is-hover { background: var(--hover); }
.scroll-foot { flex: 0 0 26px; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; background: var(--surface-3); border-top: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--muted); }

/* ---------- panel przyklejony obok długiej treści ---------- */
.split-sticky { display: flex; align-items: flex-start; gap: 16px; height: 100%; padding: 16px; overflow: auto; background: var(--canvas); }
.split-sticky-main { flex: 1; min-width: 0; }
.split-sticky-side { position: sticky; top: 0; flex: 0 0 260px; }
.split-doc { padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.split-doc p { margin-bottom: 10px; }
.split-doc-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.split-doc-sub { margin-bottom: 14px; font-size: 11.5px; color: var(--muted); }
.split-doc-h { margin: 16px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); }

/* ---------- pole z uchwytem rozmiaru ---------- */
.split-grip { position: relative; }
.split-grip .textarea { padding-right: 18px; resize: vertical; }
.split-grip-mark { position: absolute; right: 3px; bottom: 4px; color: var(--label); pointer-events: none; }
.split-grip-mark .icon { width: 12px; height: 12px; }
.split-grip.is-disabled .textarea { resize: none; }
.split-grip.is-disabled .split-grip-mark { display: none; }
.split-grip-hint { margin-top: 4px; font-size: 11px; color: var(--muted); }

/* ---------- panel zminimalizowany do paska ---------- */
.split-minbar { flex: 0 0 28px; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; background: var(--surface-2); border-top: 1px solid var(--line); }
.split-min { display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 4px 0 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); font-size: 11px; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.split-min:hover, .split-min.is-hover { border-color: var(--accent); color: var(--link); }
.split-min .icon { width: 11px; height: 11px; color: var(--label); }
.split-min:hover .icon, .split-min.is-hover .icon { color: var(--link); }
.split-min-title { font-weight: 600; }
.split-min-meta { color: var(--muted); }
.split-minbar-hint { margin-left: auto; font-size: 11px; color: var(--label); }

/* ---------- panel pływający ---------- */
.floating-stage { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; overflow: hidden; background: var(--canvas); }
.floating { position: absolute; width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 5; }
.floating-head { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 8px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); cursor: move; user-select: none; -webkit-user-select: none; }
.floating-head .icon { width: 12px; height: 12px; color: var(--label); }
.floating-head .btn-icon { width: 20px; height: 20px; }
.floating-head .btn-icon .icon { width: 12px; height: 12px; }
.floating-title { flex: 1; min-width: 0; }
.floating-body { padding: 8px; }
.floating-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.floating-tool { height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); color: var(--ink-2); cursor: pointer; }
.floating-tool:hover, .floating-tool.is-hover { background: var(--hover-neutral); }
.floating-tool.is-active { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-soft-line); }
.floating-tool .icon { width: 15px; height: 15px; }
.floating-sep { height: 1px; margin: 8px -8px; background: var(--line-3); }
.floating-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.floating-foot { padding: 5px 8px; background: var(--surface-3); border-top: 1px solid var(--line-3); font-size: 11px; color: var(--muted); }

/* ---------- uzupełnienia: dokowanie przeciąganiem, powrót na górę ---------- */
.dock-drag-stage { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--canvas); overflow: hidden; }
/* welon strefy dokowania: przezroczysta powłoka nad treścią, a nie kolor motywu - stąd rgba */
.dock-zone { position: absolute; z-index: 4; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--accent-soft-line); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dock-zone.is-active { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: 0 0 0 2px var(--focus-ring); }
.dock-zone-left { left: 8px; top: 8px; bottom: 8px; width: 136px; }
.dock-zone-right { right: 8px; top: 8px; bottom: 8px; width: 136px; }
.dock-zone-bottom { left: 152px; right: 152px; bottom: 8px; height: 104px; }
.dock-zone-label { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--accent-soft-line); box-shadow: var(--shadow-sm); font-size: 11px; color: var(--accent-text); white-space: nowrap; }
.dock-zone-label .icon { width: 12px; height: 12px; }
.dock-zone.is-active .dock-zone-label { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.dock-ghost { position: absolute; z-index: 6; top: 92px; right: 172px; width: 236px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; opacity: .92; pointer-events: none; }
.dock-ghost-head { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; background: var(--accent-soft); border-bottom: 1px solid var(--accent-soft-line); font-size: var(--fs-xs); font-weight: 600; color: var(--accent-text); }
.dock-ghost-head .icon { width: 12px; height: 12px; }
.dock-ghost-body { padding: 8px 10px; font: 11px/1.7 var(--mono); color: var(--muted); }
.dock-drag-cursor { position: absolute; z-index: 7; top: 100px; right: 164px; width: 15px; height: 15px; color: var(--ink); filter: drop-shadow(0 0 1px var(--surface)) drop-shadow(0 1px 1px color-mix(in srgb, var(--chrome) 35%, transparent)); }
.dock-drag-hint { position: absolute; z-index: 7; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: 11px; color: var(--muted); white-space: nowrap; }
.dock-drag-hint .icon { width: 12px; height: 12px; color: var(--label); }
.dock-tab.is-dragging { opacity: .4; }

.scroll-top { position: absolute; right: 16px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); color: var(--ink-2); cursor: pointer; }
.scroll-top:hover, .scroll-top.is-hover { border-color: var(--accent); color: var(--link); }
.scroll-top .icon { width: 15px; height: 15px; }
.scroll-top-ext { width: auto; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--fs-xs); }
.scroll-top-ext .icon { width: 13px; height: 13px; }
.scroll-top-count { font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.scroll-top-static { position: static; }


/* ===== chart: Wykresy małe ===== */
/* chart: małe wykresy do kart, tabel i inspectora. Bez bibliotek - inline SVG albo divy,
   kolor serii przez zmienną --chart-c ustawianą klasą .chart-c-*. */

/* ---------- rama wykresu ---------- */
.chart { --chart-c: var(--accent); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chart-value { font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: -.2px; line-height: 1.1; color: var(--ink); }
.chart-unit { margin-left: 3px; font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--muted); }
.chart-note { font-size: 11px; color: var(--muted); }
.chart-foot { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); }
.chart-foot .chart-num { margin-left: auto; }
.card-foot .chart-num { margin-left: auto; }
.chart-foot .chart-heat-scale { margin-left: auto; }
.chart-num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------- paleta serii: jedna zmienna, jedna klasa ---------- */
.chart-c-accent { --chart-c: var(--accent); }
.chart-c-alt { --chart-c: var(--chrome-3); }
.chart-c-info { --chart-c: var(--info); }
.chart-c-warn { --chart-c: var(--warn); }
.chart-c-danger { --chart-c: var(--danger); }
.chart-c-neutral { --chart-c: var(--neutral-dot); }

/* ---------- legenda ---------- */
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 16px; font-size: 11px; color: var(--ink-2); }
.chart-legend.is-vertical { flex-direction: column; align-items: stretch; gap: 7px; }
.chart-legend.is-vertical .chart-legend-item { width: 100%; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; cursor: default; }
.chart-legend-item.is-clickable { cursor: pointer; }
.chart-legend-item.is-off { color: var(--label); }
.chart-legend-item.is-off .chart-swatch { background: var(--line); }
.chart-legend-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-legend-val { margin-left: auto; padding-left: 12px; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.chart-legend-pct { font-family: var(--mono); font-size: 10.5px; color: var(--label); width: 40px; text-align: right; }
.chart-swatch { width: 8px; height: 8px; border-radius: 2px; background: var(--chart-c); flex: 0 0 auto; }
.chart-swatch.is-line { width: 14px; height: 2px; border-radius: 1px; }
.chart-swatch.is-dashed { width: 14px; height: 2px; border-radius: 0; background: repeating-linear-gradient(to right, var(--chart-c) 0 4px, transparent 4px 7px); }
.chart-swatch.is-hollow { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--chart-c); }

/* ---------- SVG: linie, obszary, siatka, punkty ---------- */
.chart-svg { display: block; overflow: visible; }
.chart-svg.is-fluid { width: 100%; height: auto; }
.chart-line { fill: none; stroke: var(--chart-c); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-line.is-thin { stroke-width: 1.3; }
.chart-line.is-dashed { stroke-dasharray: 4 3; }
.chart-area { fill: var(--accent-soft); stroke: none; }
.chart-grid { stroke: var(--line-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-axis { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-dot { fill: var(--surface); stroke: var(--chart-c); stroke-width: 1.6; }
.chart-dot.is-active { fill: var(--chart-c); }
.chart-tick { font: var(--fs-label) var(--sans); letter-spacing: .6px; text-transform: uppercase; fill: var(--label); }
.chart-tick.is-num { font: 10px var(--mono); letter-spacing: 0; text-transform: none; }
.chart-arc { fill: none; stroke: var(--chart-c); stroke-width: 14; }
.chart-arc.is-track { stroke: var(--line-3); }
.chart-arc.is-round { stroke-linecap: round; }
.chart-arc.is-thin { stroke-width: 8; }
.chart-needle { fill: none; stroke: var(--chrome); stroke-width: 2.5; stroke-linecap: round; }

/* ---------- oś X pod wykresem (etykiety równo pod słupkami) ---------- */
.chart-axis-x { display: flex; gap: 6px; margin-top: 6px; font-size: var(--fs-label); color: var(--label); }
.chart-axis-x span { flex: 1; min-width: 0; font-family: var(--mono); text-align: center; }
.chart-axis-x span.is-active { color: var(--ink-2); font-weight: 600; }
.chart-axis-x.is-tight { gap: 2px; }
.chart-axis-x.is-spread { justify-content: space-between; gap: 0; }
.chart-axis-x.is-spread span { flex: 0 0 auto; }

/* ---------- słupki pionowe ---------- */
.chart-cols { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.chart-cols.is-tall { height: 148px; }
.chart-cols.is-tight { gap: 2px; }
.chart-col { position: relative; z-index: 1; flex: 1; min-width: 0; height: 100%; padding-top: 15px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.chart-col-bar { width: 100%; max-width: 26px; height: var(--chart-h, 0%); border-radius: 3px 3px 0 0; background: var(--chart-c); }
.chart-cols.is-tight .chart-col-bar { max-width: none; border-radius: 2px 2px 0 0; }
.chart-col-cap { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-bottom: 3px; white-space: nowrap; }
.chart-col.is-active .chart-col-cap { color: var(--ink); font-weight: 600; }
.chart-col-pair { width: 100%; max-width: 30px; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.chart-col-pair .chart-col-bar { max-width: 10px; }
.chart-gridlines { position: absolute; left: 0; right: 0; top: 15px; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.chart-gridlines i { display: block; height: 1px; background: var(--line-3); }
.chart-gridlines i:last-child { background: var(--line); }

/* ---------- słupki poziome ---------- */
.chart-rows { display: flex; flex-direction: column; gap: 9px; }
.chart-row { display: grid; grid-template-columns: 140px 1fr 92px; align-items: center; gap: 10px; }
.chart-row-label { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-row-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11.5px; text-align: right; color: var(--ink); }
.chart-row-sub { font-size: 10px; color: var(--label); text-align: right; }
.chart-track { height: 10px; border-radius: 3px; background: var(--line-3); overflow: hidden; }
.chart-bar { height: 100%; width: var(--chart-w, 0%); border-radius: 3px; background: var(--chart-c); }

/* ---------- sztabka złożona ---------- */
.chart-stack { display: flex; height: 16px; border-radius: 3px; overflow: hidden; background: var(--line-3); }
.chart-stack-seg { width: var(--chart-w, 0%); background: var(--chart-c); }
.chart-stack-rows { display: flex; flex-direction: column; gap: 8px; }
.chart-stack-row { display: grid; grid-template-columns: 58px 1fr 46px; align-items: center; gap: 10px; }
.chart-stack-code { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.chart-stack-total { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11.5px; text-align: right; color: var(--muted); }

/* ---------- sparkline ---------- */
.chart-spark { display: block; width: 72px; height: 20px; flex: 0 0 auto; }
.chart-spark-row { display: grid; grid-template-columns: 1fr auto auto 96px; align-items: center; gap: 10px; height: 28px; }
.chart-spark-name { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-spark-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; text-align: right; color: var(--ink); }

/* ---------- liczba z deltą ---------- */
.chart-delta { display: flex; flex-direction: column; gap: 3px; min-width: 118px; }
.chart-delta-label { font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.chart-delta-line { display: flex; align-items: baseline; gap: 8px; }
.chart-delta-change { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.chart-delta-change.is-bad { color: var(--danger); }
.chart-delta-change.is-flat { color: var(--muted); }
.chart-delta-change .icon { width: 12px; height: 12px; }

/* ---------- cel vs wynik (bullet) ---------- */
.chart-bullets { display: flex; flex-direction: column; gap: 12px; }
.chart-bullet { display: grid; grid-template-columns: 118px 1fr 96px; align-items: center; gap: 10px; }
.chart-bullet-track { position: relative; height: 18px; border-radius: 3px; background: var(--line-3); }
.chart-bullet-band { position: absolute; top: 0; bottom: 0; left: 0; width: var(--chart-w, 0%); border-radius: 3px 0 0 3px; background: var(--line-2); }
.chart-bullet-fill { position: absolute; top: 5px; left: 0; height: 8px; width: var(--chart-w, 0%); border-radius: 2px; background: var(--chart-c); }
.chart-bullet-target { position: absolute; top: 1px; bottom: 1px; left: var(--chart-x, 0%); width: 2px; border-radius: 1px; background: var(--chrome); }

/* ---------- pierścień i donut ---------- */
.chart-ring { position: relative; width: 120px; height: 120px; flex: 0 0 auto; }
.chart-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.chart-ring-pct { font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: -.5px; line-height: 1; color: var(--ink); }
.chart-ring-sub { font-size: var(--fs-label); letter-spacing: .7px; text-transform: uppercase; color: var(--label); }
.chart-donut { position: relative; width: 120px; height: 120px; flex: 0 0 auto; }
.chart-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.chart-donut-total { font-family: var(--mono); font-size: 20px; font-weight: 700; line-height: 1; color: var(--ink); }
.chart-side { display: flex; align-items: center; gap: 18px; }
.chart-side .chart-legend { flex: 1; min-width: 0; }

/* ---------- wskaźnik półkolisty ---------- */
.chart-gauge { position: relative; width: 160px; height: 96px; flex: 0 0 auto; }
.chart-gauge-center { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; }
.chart-gauge-pct { font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.chart-gauge-sub { font-size: var(--fs-label); letter-spacing: .7px; text-transform: uppercase; color: var(--label); }
.chart-gauge-ends { display: flex; justify-content: space-between; margin-top: -8px; font-family: var(--mono); font-size: 10px; color: var(--label); }

/* ---------- heatmapa kalendarzowa ---------- */
.chart-heat { display: flex; align-items: flex-start; gap: 8px; }
.chart-heat-days { display: grid; grid-template-rows: repeat(7, 12px); gap: 3px; margin-top: 14px; font-size: 9.5px; line-height: 12px; color: var(--label); }
.chart-heat-body { min-width: 0; overflow: auto; }
.chart-heat-months { display: flex; height: 14px; font-size: var(--fs-label); letter-spacing: .6px; text-transform: uppercase; color: var(--label); }
.chart-heat-months span { flex: var(--chart-f, 1); min-width: 0; }
.chart-heat-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px); gap: 3px; }
.chart-heat-cell { width: 12px; height: 12px; border-radius: 2px; background: var(--line-3); }
.chart-heat-cell.is-l1 { background: var(--accent); opacity: .26; }
.chart-heat-cell.is-l2 { background: var(--accent); opacity: .48; }
.chart-heat-cell.is-l3 { background: var(--accent); opacity: .72; }
.chart-heat-cell.is-l4 { background: var(--accent); }
.chart-heat-cell.is-future { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.chart-heat-scale { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--label); }
.chart-heat-scale .chart-heat-cell { width: 10px; height: 10px; }

/* ---------- wiersze Gantta ---------- */
.chart-gantt { display: flex; flex-direction: column; }
.chart-gantt-scale { display: grid; grid-template-columns: 178px 1fr; align-items: end; height: 18px; }
.chart-gantt-months { display: flex; height: 100%; }
.chart-gantt-months span { flex: var(--chart-f, 1); min-width: 0; padding-left: 5px; border-left: 1px solid var(--line-2); font-size: var(--fs-label); letter-spacing: .7px; text-transform: uppercase; color: var(--label); }
.chart-gantt-row { display: grid; grid-template-columns: 178px 1fr; align-items: center; height: 36px; border-top: 1px solid var(--line-3); }
.chart-gantt-row:last-child { border-bottom: 1px solid var(--line-3); }
.chart-gantt-name { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; }
.chart-gantt-dates { font-family: var(--mono); font-size: 10px; color: var(--label); }
.chart-gantt-body { position: relative; }
.chart-gantt-lines { position: absolute; left: 178px; right: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none; }
.chart-gantt-lines i { position: absolute; top: 0; bottom: 0; left: var(--chart-x, 0%); width: 1px; background: var(--line-3); }
.chart-gantt-track { position: relative; height: 100%; }
.chart-gantt-bar { position: absolute; top: 11px; left: var(--chart-x, 0%); width: var(--chart-w, 0%); height: 14px; border-radius: 3px; background: var(--line-3); overflow: hidden; }
.chart-gantt-fill { height: 100%; width: var(--chart-p, 0%); border-radius: 3px; background: var(--chart-c); }
.chart-gantt-pct { position: absolute; top: 11px; left: var(--chart-x, 0%); height: 14px; display: flex; align-items: center; padding-left: 6px; font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.chart-gantt-pct.is-before { padding-left: 0; padding-right: 7px; transform: translateX(-100%); }
.chart-gantt-today { position: absolute; top: 0; bottom: 0; left: var(--chart-x, 0%); width: 1px; background: var(--danger); }
.chart-gantt-today::after { content: ""; position: absolute; top: 0; left: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--danger); }
.chart-gantt-milestone { position: absolute; top: 12px; left: var(--chart-x, 0%); width: 12px; height: 12px; margin-left: -6px; border-radius: 2px; background: var(--chrome); transform: rotate(45deg); }

/* ---------- oś czasu pozioma ---------- */
.chart-timeline { position: relative; height: 92px; padding: 0 4px; }
.chart-timeline-line { position: absolute; left: 4px; right: 4px; top: 44px; height: 2px; border-radius: 1px; background: var(--line); }
.chart-timeline-done { position: absolute; left: 4px; top: 44px; height: 2px; width: var(--chart-w, 0%); border-radius: 1px; background: var(--accent); }
.chart-timeline-item { position: absolute; top: 0; left: var(--chart-x, 0%); width: 132px; margin-left: -66px; text-align: center; }
.chart-timeline-item.is-first { margin-left: -10px; text-align: left; }
.chart-timeline-item.is-first .chart-timeline-dot { margin-left: 5px; }
.chart-timeline-item.is-last { margin-left: -122px; text-align: right; }
.chart-timeline-item.is-last .chart-timeline-dot { margin-right: 5px; margin-left: auto; }
.chart-timeline-name { height: 38px; display: flex; align-items: flex-end; justify-content: center; font-size: 11.5px; color: var(--ink-2); line-height: 1.25; }
.chart-timeline-item.is-first .chart-timeline-name { justify-content: flex-start; }
.chart-timeline-item.is-last .chart-timeline-name { justify-content: flex-end; }
.chart-timeline-dot { width: 10px; height: 10px; margin: 3px auto 0; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-input); }
.chart-timeline-item.is-done .chart-timeline-dot { background: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.chart-timeline-item.is-now .chart-timeline-dot { width: 12px; height: 12px; margin-top: 2px; background: var(--surface); box-shadow: inset 0 0 0 3px var(--danger); }
.chart-timeline-date { margin-top: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.chart-timeline-item.is-now .chart-timeline-date { color: var(--danger); }

/* ---------- lejek ---------- */
.chart-funnel { display: flex; flex-direction: column; }
.chart-funnel-step { display: grid; grid-template-columns: 92px 1fr 72px; align-items: center; gap: 10px; height: 34px; }
.chart-funnel-name { font-size: 11.5px; color: var(--ink-2); }
.chart-funnel-bar { height: 26px; width: var(--chart-w, 0%); margin: 0 auto; border-radius: 3px; background: var(--chart-c); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--accent-ink); }
.chart-funnel-bar.is-faded { opacity: .78; }
.chart-funnel-bar.is-fadest { opacity: .58; }
.chart-funnel-pct { font-family: var(--mono); font-size: 11.5px; text-align: right; color: var(--muted); }
.chart-funnel-drop { height: 18px; padding: 0 82px 0 102px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; color: var(--label); }
.chart-funnel-drop.is-loss { color: var(--danger); }

/* ---------- histogram ---------- */
.chart-hist-marker { position: absolute; top: 0; bottom: 0; left: var(--chart-x, 0%); width: 1px; background: var(--chrome); }
.chart-hist-marker span { position: absolute; top: 1px; left: 4px; font-family: var(--mono); font-size: 10px; color: var(--ink-2); white-space: nowrap; }

/* ---------- wykres w komórce tabeli ---------- */
.chart-cell { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.chart-cell-track { flex: 1; height: 8px; min-width: 60px; border-radius: 2px; background: var(--line-3); overflow: hidden; }
.chart-cell-fill { height: 100%; width: var(--chart-w, 0%); border-radius: 2px; background: var(--chart-c); }
.chart-cell-val { width: 46px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11px; text-align: right; color: var(--muted); }
.chart-cell-stack { display: flex; height: 8px; width: 100%; min-width: 90px; border-radius: 2px; overflow: hidden; background: var(--line-3); }

/* ---------- tooltip nad wykresem ---------- */
.chart-plot { position: relative; }
.chart-cursor { position: absolute; top: 0; bottom: 0; left: var(--chart-x, 0%); width: 1px; background: var(--line-input); }
.chart-cursor-dot { position: absolute; left: var(--chart-x, 0%); top: var(--chart-y, 0%); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--chart-c); box-shadow: 0 0 0 2px var(--surface); }
.chart-tip { position: absolute; left: var(--chart-x, 0%); top: var(--chart-y, 0%); z-index: 3; min-width: 158px; padding: 7px 9px 8px; border-radius: var(--radius); background: var(--chrome); color: var(--chrome-ink); box-shadow: var(--shadow); font-size: 11.5px; }
.chart-tip.is-above { transform: translate(-50%, -100%); margin-top: -12px; }
.chart-tip-date { font-family: var(--mono); font-size: 10.5px; color: var(--chrome-muted); padding-bottom: 5px; margin-bottom: 4px; border-bottom: 1px solid var(--chrome-line); }
.chart-tip-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.chart-tip-name { color: var(--chrome-ink-2); }
.chart-tip-val { margin-left: auto; padding-left: 16px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.chart-tip-arrow { position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: var(--chrome); transform: rotate(45deg); }

/* ---------- brak danych ---------- */
.chart-blank { position: relative; height: 148px; border-radius: var(--radius); background-image: linear-gradient(to bottom, var(--line-3) 1px, transparent 1px); background-size: 100% 36px; }
.chart-blank-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; }
.chart-blank-icon { color: var(--line-input); }
.chart-blank-title { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }

/* ---------- uzupelnienia z dziennika zapytan ---------- */

/* wykres wodospadowy: słupki zaczepione jeden nad drugim między sumą początkową a końcową */
.chart-wf { position: relative; display: flex; align-items: stretch; gap: 6px; height: 165px; padding-top: 15px; }
.chart-wf-col { position: relative; z-index: 1; flex: 1; min-width: 0; height: 100%; }
.chart-wf-bar { position: absolute; left: 6px; right: 6px; bottom: var(--chart-b, 0%); height: var(--chart-h, 0%); min-height: 2px; border-radius: 2px; background: var(--chart-c); }
.chart-wf-link { position: absolute; left: calc(100% - 6px); right: -12px; bottom: var(--chart-b, 0%); height: 0; border-top: 1px dashed var(--line-input); }
.chart-wf-cap { position: absolute; left: 0; right: 0; bottom: var(--chart-t, 0%); margin-bottom: 3px; text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 10px; line-height: 1; color: var(--muted); white-space: nowrap; }
.chart-wf-col.is-total .chart-wf-cap { color: var(--ink); font-weight: 600; }
.chart-wf-axis { display: flex; gap: 6px; margin-top: 6px; }
.chart-wf-axis span { flex: 1; min-width: 0; text-align: center; font-size: 10px; line-height: 1.25; color: var(--label); }
.chart-wf-axis span.is-total { color: var(--ink-2); font-weight: 600; }

/* ---------- pasek dni: jeden dzień to jedna kreska, stan kolorem (chart-daystrip) ---------- */
.chart-daystrip { display: inline-flex; align-items: center; gap: 8px; }
.chart-daystrip-days { display: flex; gap: 2px; }
.chart-daystrip-day { width: 5px; height: 10px; border-radius: 1px; background: var(--neutral-dot); }
.chart-daystrip-day.is-ok { background: var(--accent); }
.chart-daystrip-day.is-warn { background: var(--warn); }
.chart-daystrip-day.is-danger { background: var(--danger); }
.chart-daystrip-day.is-unknown { background: var(--line-input); }
.chart-daystrip-day.is-today { box-shadow: 0 0 0 1px var(--ink); }
.chart-daystrip.is-short .chart-daystrip-day { width: 3px; height: 7px; }
.chart-daystrip-label { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.chart-daystrip-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--muted); }
.chart-daystrip-legend span { display: inline-flex; align-items: center; gap: 5px; }


/* ===== board: Plansze i canvas ===== */
/* board: plansze kafelków na canvasie w kropki, kanban, drzewa, kalendarze, mapa z pinami,
   schemat węzłów i mapa stanowisk. Wszystko, co ma własny układ w przestrzeni. */

/* ---------- canvas planszy ---------- */
.board { position: relative; height: 100%; overflow: hidden; background: var(--canvas); user-select: none; -webkit-user-select: none; }
.board, .board-strip, .board-sample, .node-graph, .seat-map { --board-dot: var(--grid-dot); --board-mark: color-mix(in srgb, var(--accent) 12%, transparent); }
[data-theme="dark"] .board, [data-theme="dark"] .board-strip, [data-theme="dark"] .board-sample,
[data-theme="dark"] .node-graph, [data-theme="dark"] .seat-map { --board-dot: var(--grid-dot); --board-mark: color-mix(in srgb, var(--accent) 18%, transparent); }
.board-dots { position: absolute; inset: 0; background-image: radial-gradient(var(--board-dot) 1px, transparent 1px); background-size: 24px 24px; }
.board-dots.is-dense { background-size: 12px 12px; }
.board-lines { position: absolute; inset: 0; background-image: linear-gradient(var(--board-dot) 1px, transparent 1px), linear-gradient(90deg, var(--board-dot) 1px, transparent 1px); background-size: 24px 24px; }
.board-strip { position: relative; height: 220px; overflow: hidden; background: var(--canvas); border-bottom: 1px solid var(--line); }
.board-samples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 14px; }
.board-sample { position: relative; height: 104px; background: var(--canvas); }

/* warstwa przesuwana i skalowana (pan + zoom): transform na niej, nie na canvasie */
.board-stage { position: absolute; inset: 0; padding: 12px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px; transform-origin: 0 0; }

/* grupa kafelków: hala, kondygnacja, sala */
.board-zone { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.board-zone-head { display: flex; align-items: baseline; gap: 8px; padding: 7px 12px 6px; border-bottom: 1px solid var(--line-3); }
.board-zone-code { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.board-zone-sub { font-size: 11px; color: var(--muted); }
.board-zone-stats { margin-left: auto; display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); }
.board-zone-stats .dot { margin-left: 5px; }
.board-zone-body { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.board-row { display: flex; align-items: center; gap: 6px; }
.board-row-label { width: 44px; flex: 0 0 44px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.board-tiles { display: flex; gap: 4px; }

/* kafelek 86×38: kod + jeden fakt, kolor mówi status */
.board-tile { width: 86px; height: 38px; flex: 0 0 86px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); display: flex; flex-direction: column; justify-content: center; gap: 1px; cursor: pointer; overflow: hidden; }
.board-tile-code { font-family: var(--mono); font-size: 11.5px; font-weight: 600; line-height: 1.1; }
.board-tile-meta { font-size: 9.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; }
.board-tile.is-free { background: var(--accent-soft); border-color: var(--accent-soft-line); color: var(--accent-text); }
.board-tile.is-taken { background: var(--neutral-soft); border-color: var(--line); color: var(--ink-2); }
.board-tile.is-booked { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
.board-tile.is-blocked { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-text); }
.board-tile:hover, .board-tile.is-hover { border-color: var(--accent); }
.board-tile.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.board-tile.is-dim { opacity: .28; }
.board-tile.is-wide { width: 176px; flex: 0 0 176px; }
.board-swatch { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }

/* sterowanie widokiem nad canvasem */
.board-hud { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; }
.board-legend { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 12px; height: 26px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: 11px; color: var(--ink-2); }
.board-hint { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: 11px; color: var(--muted); }
.board-hint .icon { width: 12px; height: 12px; color: var(--label); }

/* zoom: 26 / 52 / 26 */
.board-zoom { display: inline-flex; align-items: center; height: 26px; border: 1px solid var(--line-input); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.board-zoom-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); cursor: pointer; }
.board-zoom-btn:hover, .board-zoom-btn.is-hover { background: var(--hover-neutral); }
.board-zoom-btn .icon { width: 12px; height: 12px; }
.board-zoom-btn.is-disabled { color: var(--label); pointer-events: none; }
.board-zoom-val { width: 52px; height: 26px; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.board-zoom-val:hover, .board-zoom-val.is-hover { background: var(--hover-neutral); }
.board-zoom-fit { border-left: 1px solid var(--line-2); }

/* minimapa: cała plansza w skali + prostokąt widoku */
.board-minimap { position: relative; width: 200px; height: 130px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.board-minimap-shape { position: absolute; border-radius: 2px; background: var(--neutral-soft); }
.board-minimap-shape.is-free { background: var(--accent-soft-line); }
.board-minimap-shape.is-booked { background: var(--warn-line); }
.board-minimap-shape.is-blocked { background: var(--danger-line); }
.board-minimap-view { position: absolute; border: 1.5px solid var(--accent); background: var(--board-mark); border-radius: 2px; cursor: move; }
.board-minimap-cap { font-size: 10.5px; color: var(--muted); }

/* ramka zaznaczenia: Shift + przeciągnięcie */
.board-marquee { position: absolute; border: 1px solid var(--accent); background: var(--board-mark); pointer-events: none; }
.board-marquee-count { position: absolute; right: -1px; bottom: -18px; height: 16px; padding: 0 5px; border-radius: 2px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 10px; line-height: 16px; }

/* dymek nad planszą i mapą */
.board-callout { position: absolute; width: 236px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); font-size: 12px; }
.board-callout-title { font-weight: 600; font-size: 12.5px; margin-bottom: 3px; }
.board-callout-row { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* ---------- kanban ---------- */
.kanban { display: flex; align-items: stretch; gap: 12px; height: 100%; padding: 14px; overflow: hidden; }
.kanban-col { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.kanban-col-head { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 10px; border-bottom: 1px solid var(--line-2); font-size: 11.5px; font-weight: 600; color: var(--ink); }
.kanban-col-count { font-family: var(--mono); font-size: 10.5px; color: var(--label); font-weight: 400; }
.kanban-col-limit { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--label); }
.kanban-col.is-over-limit { border-color: var(--danger-line); }
.kanban-col.is-over-limit .kanban-col-limit { color: var(--danger); }
.kanban-col.is-over { border-color: var(--accent); background: var(--accent-soft); }
.kanban-col.is-done .kanban-col-head { color: var(--accent-text); }
.kanban-list { flex: 1; min-height: 0; padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.kanban-drop { height: 58px; border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--accent-text); }
.kanban-add { display: flex; align-items: center; gap: 6px; height: 26px; margin: 0 8px 8px; padding: 0 8px; border-radius: var(--radius); font-size: 11.5px; color: var(--muted); cursor: pointer; }
.kanban-add:hover, .kanban-add.is-hover { background: var(--hover-neutral); color: var(--ink); }
.kanban-add .icon { width: 12px; height: 12px; }
.kanban-case { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; }

.kanban-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 7px 9px 8px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.kanban-card:hover, .kanban-card.is-hover { border-color: var(--line-input); box-shadow: var(--shadow); }
.kanban-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.kanban-card.is-dragging { box-shadow: var(--shadow); transform: rotate(-1.2deg); }
.kanban-card.is-blocked { border-left: 3px solid var(--danger); padding-left: 7px; }
.kanban-card-top { display: flex; align-items: center; gap: 6px; }
.kanban-card-id { font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.kanban-card-title { font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.kanban-card-foot { display: flex; align-items: center; gap: 8px; }
.kanban-card-due { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.kanban-card-due .icon { width: 11px; height: 11px; }
.kanban-card-due.is-late { color: var(--danger); }
.kanban-card-count { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--label); }
.kanban-card-count .icon { width: 12px; height: 12px; }
.kanban-card .avatar { margin-left: auto; }

/* tory: wiersz = kategoria, kolumna = etap */
.kanban-swim { display: flex; flex-direction: column; height: 100%; padding: 14px; overflow: hidden; }
.kanban-swim-head { display: grid; grid-template-columns: 96px repeat(4, 1fr); gap: 10px; padding-bottom: 6px; }
.kanban-swim-col { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.kanban-swim-lane { display: grid; grid-template-columns: 96px repeat(4, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.kanban-swim-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.kanban-swim-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 62px; }
.kanban-swim-cell.is-over { border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }

/* ---------- drzewo ---------- */
.tree { --tree-indent: 18px; font-size: 12.5px; color: var(--ink); user-select: none; }
.tree-node { display: flex; align-items: center; gap: 6px; height: 26px; padding-right: 6px; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.tree-node:hover, .tree-node.is-hover { background: var(--hover-neutral); }
.tree-node.is-selected { background: var(--selected); }
.tree-node.is-disabled { opacity: .5; cursor: default; }
.tree-lv1 { padding-left: 6px; }
.tree-lv2 { padding-left: calc(6px + var(--tree-indent)); }
.tree-lv3 { padding-left: calc(6px + 2 * var(--tree-indent)); }
.tree-lv4 { padding-left: calc(6px + 3 * var(--tree-indent)); }
.tree-lv5 { padding-left: calc(6px + 4 * var(--tree-indent)); }
.tree-twist { width: 14px; height: 14px; flex: 0 0 14px; display: flex; align-items: center; justify-content: center; color: var(--label); }
.tree-twist .icon { width: 10px; height: 10px; }
.tree-twist.is-leaf { visibility: hidden; }
.tree-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 2px; background: var(--neutral-dot); }
.tree-dot.is-leaf { border-radius: 50%; }
.tree-dot.is-ok { background: var(--accent); }
.tree-dot.is-warn { background: var(--warn); }
.tree-node .icon { width: 14px; height: 14px; color: var(--label); flex: 0 0 14px; }
.tree-node.is-open > .icon, .tree-node.is-selected .tree-label { color: var(--ink); }
.tree-label { overflow: hidden; text-overflow: ellipsis; }
.tree-label.is-strong { font-weight: 600; }
.tree-node .badge { margin-left: auto; }
.tree-meta { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--label); padding-left: 10px; }
.tree-count { font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.tree-check { width: 14px; height: 14px; flex: 0 0 14px; border: 1px solid var(--line-input); border-radius: 3px; background: var(--field); display: flex; align-items: center; justify-content: center; color: transparent; }
.tree-check .icon { width: 10px; height: 10px; }
.tree-check.is-checked { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tree-check.is-partial::after { content: ""; width: 8px; height: 2px; border-radius: 1px; background: var(--accent); }
.tree-check.is-disabled { background: var(--neutral-soft); }
.tree-handle { width: 14px; height: 14px; flex: 0 0 14px; display: flex; align-items: center; justify-content: center; color: var(--line-input); cursor: grab; }
.tree-handle .icon { width: 12px; height: 12px; }
.tree-node:hover .tree-handle, .tree-node.is-hover .tree-handle { color: var(--label); }
.tree-node.is-dragging { opacity: .45; }
.tree-node.is-drop-into { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.tree-drop { position: relative; height: 2px; border-radius: 1px; background: var(--accent); margin: 0 6px 0 24px; }
.tree-drop::before { content: ""; position: absolute; left: -4px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tree-ghost { display: flex; align-items: center; gap: 6px; width: 232px; height: 26px; margin: 2px 0 2px 30px; padding: 0 8px; border: 1px solid var(--accent); border-radius: 3px; background: var(--surface); box-shadow: var(--shadow); font-size: 12.5px; }
.tree-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-3); font-size: 11.5px; color: var(--muted); }

/* ---------- kalendarz ---------- */
.calendar { display: flex; flex-direction: column; height: 100%; background: var(--surface); overflow: hidden; }
.calendar-head { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-bottom: 1px solid var(--line); flex: 0 0 38px; }
.calendar-title { font-size: 13.5px; font-weight: 600; }
.calendar-sub { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.calendar-dow { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); border-bottom: 1px solid var(--line); flex: 0 0 22px; }
.calendar-dow > div { height: 22px; display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.calendar-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; min-height: 0; }
.calendar-cell { border-right: 1px solid var(--line-3); border-bottom: 1px solid var(--line-3); padding: 3px 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.calendar-cell.is-out { background: var(--surface-3); }
.calendar-cell.is-weekend { background: var(--surface-2); }
.calendar-daynum { align-self: flex-start; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-family: var(--mono); font-size: 11px; line-height: 16px; text-align: center; color: var(--ink-2); }
.calendar-cell.is-out .calendar-daynum { color: var(--label); }
.calendar-cell.is-today .calendar-daynum { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.calendar-event { display: flex; align-items: center; gap: 4px; height: 16px; padding: 0 4px; border-radius: 2px; background: var(--info-soft); color: var(--info-text); font-size: 10.5px; white-space: nowrap; overflow: hidden; cursor: pointer; }
.calendar-event.is-ok { background: var(--accent-soft); color: var(--accent-text); }
.calendar-event.is-warn { background: var(--warn-soft); color: var(--warn-text); }
.calendar-event.is-danger { background: var(--danger-soft); color: var(--danger-text); }
.calendar-event.is-neutral { background: var(--neutral-soft); color: var(--ink-2); }
.calendar-event .calendar-time { font-family: var(--mono); font-size: 10px; flex: 0 0 auto; }
.calendar-event-name { overflow: hidden; text-overflow: ellipsis; }
.calendar-event.is-span-start { border-radius: 2px 0 0 2px; margin-right: -5px; }
.calendar-event.is-span-mid { border-radius: 0; margin: 0 -5px; }
.calendar-event.is-span-end { border-radius: 0 2px 2px 0; margin-left: -5px; }
.calendar-more { padding: 0 4px; font-size: 10px; color: var(--muted); cursor: pointer; }

.calendar-weekhead { display: grid; grid-template-columns: 52px repeat(7, 1fr); border-bottom: 1px solid var(--line-2); flex: 0 0 46px; }
.calendar-weekhead > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-left: 1px solid var(--line-3); }
.calendar-weekhead > div:first-child { border-left: 0; }
.calendar-dayname { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.calendar-daybig { font-family: var(--mono); font-size: 15px; color: var(--ink-2); }
.calendar-weekhead .is-today .calendar-daybig, .calendar-daybig.is-today { color: var(--accent-text); font-weight: 700; }
.calendar-allday { display: grid; grid-template-columns: 52px repeat(7, 1fr); border-bottom: 1px solid var(--line-2); background: var(--surface-2); flex: 0 0 24px; }
.calendar-allday > div { border-left: 1px solid var(--line-3); padding: 3px 3px; overflow: hidden; }
.calendar-allday-label { display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--label); }
.calendar-body { flex: 1; display: grid; grid-template-columns: 52px repeat(7, 1fr); min-height: 0; overflow: hidden; }
.calendar-hours { border-right: 1px solid var(--line-2); }
.calendar-hour { height: 34px; padding: 3px 6px 0 0; text-align: right; font-family: var(--mono); font-size: 10px; color: var(--label); line-height: 1; }
.calendar-col { position: relative; border-right: 1px solid var(--line-3); }
.calendar-col.is-today { background: var(--hover); }
.calendar-slot { height: 34px; border-bottom: 1px solid var(--line-3); }
.calendar-ev { position: absolute; left: 2px; right: 2px; padding: 2px 5px; border-radius: 3px; border-left: 2px solid var(--info); background: var(--info-soft); color: var(--info-text); font-size: 10.5px; line-height: 1.25; overflow: hidden; cursor: pointer; }
.calendar-ev.is-ok { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.calendar-ev.is-warn { border-left-color: var(--warn); background: var(--warn-soft); color: var(--warn-text); }
.calendar-ev.is-danger { border-left-color: var(--danger); background: var(--danger-soft); color: var(--danger-text); }
.calendar-ev.is-neutral { border-left-color: var(--neutral-dot); background: var(--neutral-soft); color: var(--ink-2); }
.calendar-ev-time { font-family: var(--mono); font-size: 10px; opacity: .85; }
.calendar-ev-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-ev-meta { font-size: 10.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-now { position: absolute; left: 0; right: 0; height: 1px; background: var(--danger); z-index: 2; }
.calendar-now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.calendar-now-label { position: absolute; right: 2px; top: -14px; font-family: var(--mono); font-size: 10px; color: var(--danger); }

.calendar-dayhead { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line-2); flex: 0 0 34px; font-size: 12.5px; }
.calendar-allday.is-day { grid-template-columns: 56px 1fr; }
.calendar-daybody { flex: 1; display: grid; grid-template-columns: 56px 1fr; min-height: 0; overflow: hidden; }
.calendar-daybody .calendar-hours { border-right: 1px solid var(--line-2); }

.calendar-agenda { flex: 1; min-height: 0; overflow: hidden; background: var(--surface); }
.calendar-agenda-day { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; background: var(--surface-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); font-size: 11px; color: var(--muted); }
.calendar-agenda-day .code { font-size: 11px; color: var(--ink-2); }
.calendar-agenda-row { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--line-3); font-size: 12.5px; cursor: pointer; }
.calendar-agenda-row:hover, .calendar-agenda-row.is-hover { background: var(--hover); }
.calendar-agenda-row.is-selected { background: var(--selected); }
.calendar-agenda-time { width: 92px; flex: 0 0 92px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.calendar-agenda-bar { width: 3px; height: 18px; border-radius: 2px; background: var(--info); flex: 0 0 3px; }
.calendar-agenda-bar.is-ok { background: var(--accent); }
.calendar-agenda-bar.is-warn { background: var(--warn); }
.calendar-agenda-bar.is-danger { background: var(--danger); }
.calendar-agenda-bar.is-neutral { background: var(--neutral-dot); }
.calendar-agenda-place { font-size: 11.5px; color: var(--muted); }

.calendar-mini { width: 212px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.calendar-mini-head { display: flex; align-items: center; gap: 4px; height: 24px; margin-bottom: 2px; font-size: 12px; font-weight: 600; }
.calendar-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-mini-dow { height: 16px; display: flex; align-items: center; justify-content: center; font-size: 9.5px; text-transform: uppercase; color: var(--label); }
.calendar-mini-day { position: relative; height: 24px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; color: var(--ink-2); border-radius: 3px; cursor: pointer; }
.calendar-mini-day:hover, .calendar-mini-day.is-hover { background: var(--hover-neutral); }
.calendar-mini-day.is-out { color: var(--label); }
.calendar-mini-day.is-today { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.calendar-mini-day.is-selected { background: var(--chrome); color: var(--chrome-ink); }
.calendar-mini-day.is-marked::after { content: ""; position: absolute; bottom: 2px; left: 50%; margin-left: -2px; width: 4px; height: 4px; border-radius: 2px; background: var(--accent); }
.calendar-mini-day.is-today.is-marked::after { background: var(--accent-ink); }
.calendar-mini-day.is-range { background: var(--accent-soft); border-radius: 0; color: var(--accent-text); }
.calendar-mini-day.is-range-start { border-radius: 3px 0 0 3px; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.calendar-mini-day.is-range-end { border-radius: 0 3px 3px 0; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.calendar-mini-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-3); font-size: 11px; color: var(--muted); }

/* ---------- mapa (placeholder bez kafelków podkładu) ---------- */

/* ---------- węzły i połączenia ---------- */
.node-graph { position: relative; height: 100%; overflow: hidden; background: var(--canvas); user-select: none; }
.node-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.node-edge { fill: none; stroke: var(--line-input); stroke-width: 1.5; }
.node-edge.is-done { stroke: var(--accent); }
.node-edge.is-alt { stroke-dasharray: 4 3; }
.node-arrow { fill: var(--line-input); }
.node-arrow.is-done { fill: var(--accent); }
.node-edge-label { position: absolute; transform: translate(-50%, -50%); padding: 1px 6px; border-radius: 9px; background: var(--canvas); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.node { position: absolute; width: 154px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); cursor: pointer; }
.node-head { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-bottom: 1px solid var(--line-3); font-size: 12px; font-weight: 600; }
.node-head .icon { width: 13px; height: 13px; color: var(--label); }
.node-body { padding: 6px 9px 7px; display: flex; flex-direction: column; gap: 2px; }
.node-meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.node-port { position: absolute; top: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-input); }
.node-port.is-in { left: -5px; }
.node-port.is-out { right: -5px; }
.node.is-done { border-color: var(--accent-soft-line); }
.node.is-done .node-head { color: var(--accent-text); }
.node.is-current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.node.is-todo { border-style: dashed; }
.node.is-todo .node-head { color: var(--muted); }
.node.is-error { border-color: var(--danger-line); }
.node.is-error .node-head { color: var(--danger-text); }

/* ---------- mapa stanowisk ---------- */
.seat-map { position: relative; height: 100%; overflow: hidden; background: var(--canvas); user-select: none; }
.seat-room { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.seat-room-name { position: absolute; top: 7px; left: 10px; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.seat-room-meta { position: absolute; top: 6px; right: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.seat-grid { position: absolute; inset: 26px 10px 10px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; }
.seat-note { position: absolute; inset: 26px 10px 10px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--label); }
.seat { width: 92px; height: 40px; flex: 0 0 92px; display: flex; align-items: center; gap: 6px; padding: 0 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface-2); cursor: pointer; overflow: hidden; }
.seat-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.seat-code { font-family: var(--mono); font-size: 10.5px; line-height: 1.1; color: var(--ink-2); }
.seat-who { font-size: 10px; line-height: 1.1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat.is-taken { background: var(--accent-soft); border-color: var(--accent-soft-line); }
.seat.is-taken .seat-code { color: var(--accent-text); }
.seat.is-free { background: var(--surface); border-style: dashed; border-color: var(--line-input); }
.seat.is-booked { background: var(--warn-soft); border-color: var(--warn-line); }
.seat.is-blocked { background: var(--neutral-soft); border-color: var(--line); }
.seat:hover, .seat.is-hover { border-color: var(--accent); }
.seat.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* ---------- kanban z pasami: kolumny to etapy, wiersze to pilność (kanban-lanes) ---------- */
.kanban-lanes { display: grid; grid-template-columns: 150px repeat(3, minmax(200px, 1fr)); gap: 8px; align-items: stretch; height: 100%; padding: 12px 16px 8px; overflow: auto; }
.kanban-lanes-corner, .kanban-lanes-col { position: sticky; top: 0; z-index: 3; background: var(--canvas); }
.kanban-lanes-col { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink); }
.kanban-lane { display: flex; flex-direction: column; gap: 3px; min-height: 96px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.kanban-lane-title { font-size: var(--fs-sm); font-weight: 600; }
.kanban-lane-sub { font-size: var(--fs-xs); line-height: 1.35; color: var(--muted); }
.kanban-lane-count { margin-top: auto; font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.kanban-lane.is-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-text); }
.kanban-lane.is-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
.kanban-lane.is-danger .kanban-lane-sub, .kanban-lane.is-danger .kanban-lane-count, .kanban-lane.is-warn .kanban-lane-sub, .kanban-lane.is-warn .kanban-lane-count { color: inherit; opacity: .8; }
.kanban-cell { display: flex; flex-direction: column; gap: 6px; min-height: 96px; padding: 8px; border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.kanban-cell.is-over { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.kanban-cell.is-disabled { opacity: .45; }


/* ===== map: Mapy ===== */
/* map: mapy oparte o Leaflet.
   Katalog daje OPRAWE i SKORE: kontrolki, dymki, legende, belke narzedzi, pasek wspolrzednych,
   wszystko w tokenach programu. Kafelki i geometrie rysuje Leaflet, ktorego wlasne klasy
   (leaflet-*) sa tu przemalowane, zeby mapa nie wygladala jak wklejona z innej aplikacji.

   W podgladach katalogu nie ma prawdziwych kafelkow (brak sieci i zewnetrznych obrazow),
   wiec plotno mapy jest statyczna atrapa w siatke: chodzi o oprawe, nie o teren. */

/* Zmienne lokalne rodziny: siatka atrapy i podswietlenie zaznaczenia. */
.map { --map-grid: var(--grid-dot); --map-mark: color-mix(in srgb, var(--accent) 12%, transparent); }
[data-theme="dark"] .map { --map-grid: var(--grid-dot); --map-mark: color-mix(in srgb, var(--accent) 18%, transparent); }

/* ---------- przeniesione z rodziny plansz razem z map-placeholder ---------- */
.map { position: relative; height: 100%; overflow: hidden; background: var(--surface-2); }
.map-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--map-grid) 1px, transparent 1px), linear-gradient(90deg, var(--map-grid) 1px, transparent 1px); background-size: 48px 48px; }
.map-road { position: absolute; background: var(--line); }
.map-pin { position: absolute; width: 18px; height: 18px; margin: -22px 0 0 -9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; }
.map-pin::after { content: ""; position: absolute; left: 50%; top: 100%; margin: -4px 0 0 -3px; width: 6px; height: 6px; background: inherit; transform: rotate(45deg); }
.map-pin.is-warn { background: var(--warn); }
.map-pin.is-danger { background: var(--danger); }
.map-pin.is-neutral { background: var(--neutral-dot); }
.map-pin.is-selected { width: 24px; height: 24px; margin: -28px 0 0 -12px; box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-sm); z-index: 3; }
.map-cluster { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--chrome); color: var(--chrome-accent-text); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 600; cursor: pointer; }
.map-label { position: absolute; transform: translate(-50%, 0); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.map-scale { position: absolute; right: 12px; bottom: 46px; display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.map-scale-bar { width: 64px; height: 5px; border: 1px solid var(--ink-2); border-top: 0; }

/* ================================================================= SKORA LEAFLETU
   Leaflet rysuje wlasne kontrolki i dymki wlasnym CSS-em. Bez przemalowania mapa wyglada
   jak wklejona z innej aplikacji: inne promienie, inne cienie, inny font, niebieskie akcenty.
   Ponizsze reguly nadpisuja jego klasy tokenami programu. Wklejasz leaflet.css PRZED ui.css.

   Uwaga na Tauri: kafelki lecą przez sieć, więc w tauri.conf.json musisz zezwolić na domenę
   dostawcy w CSP (img-src), a przy pracy bez sieci pokazać map-offline zamiast pustego szarego pola. */

.leaflet-container {
    font: var(--fs-sm)/1.45 var(--sans);
    background: var(--surface-2);
    outline: none;
}
.leaflet-container a { color: var(--link); }

/* kontrolki: te same wymiary co przycisk-ikona w reszcie programu */
.leaflet-bar,
.leaflet-control-layers {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--surface);
}
.leaflet-bar a,
.leaflet-bar a:hover {
    width: 28px;
    height: 28px;
    line-height: 28px;
    color: var(--ink-2);
    background: var(--surface);
    border-bottom: 1px solid var(--line-3);
    font-size: 15px;
    font-weight: 600;
}
.leaflet-bar a:hover { background: var(--hover-neutral); color: var(--ink); }
.leaflet-bar a:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.leaflet-bar a:last-child { border-radius: 0 0 var(--radius) var(--radius); border-bottom: 0; }
.leaflet-bar a.leaflet-disabled { color: var(--label); background: var(--surface-2); cursor: default; }
.leaflet-touch .leaflet-bar a { width: 28px; height: 28px; line-height: 28px; }

/* dymek: ten sam ksztalt i cien co karta */
.leaflet-popup-content-wrapper {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    padding: 0;
}
.leaflet-popup-content { margin: 0; font-size: var(--fs-sm); line-height: 1.45; min-width: 200px; }
.leaflet-popup-tip { background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.leaflet-container a.leaflet-popup-close-button {
    width: 24px; height: 24px; padding: 0; line-height: 24px;
    color: var(--label); font-size: 16px; font-weight: 400;
}
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--ink); background: none; }

/* etykieta przy najechaniu */
.leaflet-tooltip {
    padding: 3px 7px;
    border: 0;
    border-radius: 3px;
    background: var(--chrome);
    color: var(--chrome-ink);
    font-size: var(--fs-xs);
    box-shadow: none;
}
.leaflet-tooltip-top::before { border-top-color: var(--chrome); }
.leaflet-tooltip-bottom::before { border-bottom-color: var(--chrome); }
.leaflet-tooltip-left::before { border-left-color: var(--chrome); }
.leaflet-tooltip-right::before { border-right-color: var(--chrome); }

/* skala i atrybucja: maja informowac, nie krzyczec */
.leaflet-control-scale-line {
    border: 1px solid var(--line-input);
    border-top: 0;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 10.5px;
    line-height: 1.3;
    padding: 1px 5px;
}
.leaflet-control-attribution {
    background: var(--surface);
    color: var(--muted);
    font-size: 10px;
    padding: 1px 6px;
}

/* przelacznik warstw rozwiniety */
.leaflet-control-layers-expanded { padding: 8px 10px; color: var(--ink); min-width: 168px; }
.leaflet-control-layers-list label { display: flex; align-items: center; gap: 7px; height: 22px; font-size: var(--fs-sm); }
.leaflet-control-layers-separator { border-top: 1px solid var(--line-3); margin: 6px -10px; }

/* zaznaczenie geometrii: ten sam pierscien co przy polu formularza */
.leaflet-interactive:focus { outline: none; }
.leaflet-interactive.is-selected { filter: drop-shadow(0 0 0 var(--accent)); }

[data-theme="dark"] .leaflet-container { background: var(--surface-2); }
[data-theme="dark"] .leaflet-control-scale-line,
[data-theme="dark"] .leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 82%, transparent); }

/* ================================================================= ATRAPA TERENU I OPRAWA
   Wszystko ponizej to oprawa mapy w tokenach programu oraz statyczna atrapa plotna na
   potrzeby podgladow katalogu (brak sieci, brak kafelkow). W programie w tym samym miejscu
   Leaflet klade kafelki dostawcy i geometrie z bazy. */

/* barwy atrapy: woda, zielen i zabudowa. Nie sa tokenem programu, bo to teren, nie interfejs. */
.map { --map-water: #dbe7f4; --map-green: #e3eddd; --map-built: #e9ecf1; }  /* literal: kolory podkładu mapy, dane a nie marka */
[data-theme="dark"] .map { --map-water: #1b2c44; --map-green: #1e3327; --map-built: #232d45; }  /* literal: kolory podkładu mapy, dane a nie marka */

.map-water, .map-green, .map-built { position: absolute; }
.map-water { background: var(--map-water); }
.map-green { background: var(--map-green); }
.map-built { background: var(--map-built); }
.map-road.is-major { background: var(--line-input); }
.map-pin.is-dim { opacity: .34; }
.map-label.is-strong { color: var(--ink-2); font-weight: 600; }

/* plotno w mniejszej ramce (drobne elementy rodziny) oraz mapa pod belka narzedzi */
.map-box { width: 100%; height: 220px; border: 1px solid var(--line); border-radius: var(--radius); }
.map-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--surface); }
.map-shell .map { flex: 1; min-height: 0; }

/* ---------- doki kontrolek ----------
   Leaflet ma wlasne rogi (leaflet-top/leaflet-left) z leaflet.css, ktorego katalog nie laduje.
   Dok jest wiec wlasny, a w srodku stoja PRAWDZIWE kontrolki Leafletu z gornej czesci pliku. */
.map-ctl { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.map-ctl.is-tl { left: 10px; top: 10px; }
.map-ctl.is-tr { right: 10px; top: 10px; align-items: flex-end; }
.map-ctl.is-bl { left: 10px; bottom: 10px; }
.map-ctl.is-br { right: 10px; bottom: 10px; align-items: flex-end; }
.map-ctl .leaflet-bar { display: inline-flex; flex-direction: column; overflow: hidden; }
.map-ctl .leaflet-bar a { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.map-ctl .leaflet-bar a .icon { width: 14px; height: 14px; }
.map-ctl .leaflet-bar a.is-active { background: var(--selected); color: var(--accent-text); }

/* ---------- geometria: Leaflet rysuje ja jako SVG i tu jest tak samo ---------- */
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-shape { fill: var(--accent); fill-opacity: .14; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.map-shape.is-warn { fill: var(--warn); stroke: var(--warn); }
.map-shape.is-danger { fill: var(--danger); stroke: var(--danger); }
.map-shape.is-info { fill: var(--info); stroke: var(--info); }
.map-shape.is-neutral { fill: var(--neutral-dot); stroke: var(--neutral-dot); }
.map-shape.is-selected { fill-opacity: .28; stroke-width: 2.5; }
.map-shape.is-draft { fill-opacity: .09; stroke-dasharray: 5 4; }
.map-path { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.map-path.is-ghost { stroke: var(--line-input); }
.map-path.is-measure { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 6 4; }

/* wierzcholki i uchwyty rysowania */
.map-vertex { position: absolute; width: 9px; height: 9px; margin: -5px 0 0 -5px; border-radius: 2px; background: var(--surface); border: 1.5px solid var(--accent); z-index: 3; cursor: pointer; }
.map-vertex.is-active { background: var(--accent); }
.map-vertex.is-mid { width: 7px; height: 7px; margin: -4px 0 0 -4px; border-radius: 50%; border-color: var(--line-input); }

/* podpis dlugosci boku, numer dzialki na obrysie */
.map-dim { position: absolute; transform: translate(-50%, -50%); padding: 1px 5px; border-radius: 3px; background: var(--surface); font-family: var(--mono); font-size: 10px; color: var(--ink-2); white-space: nowrap; }
.map-dim.is-code { font-size: 10.5px; font-weight: 700; color: var(--ink); }
[data-theme="dark"] .map-dim { background: color-mix(in srgb, var(--surface) 86%, transparent); }

/* odczyt przy kursorze (pomiar) i sam kursor krzyzykowy */
.map-readout { position: absolute; padding: 4px 8px; border-radius: var(--radius); background: var(--chrome); color: var(--chrome-ink); font-size: 11px; line-height: 1.45; box-shadow: var(--shadow); white-space: nowrap; z-index: 5; }
.map-readout .mono { color: var(--chrome-accent-text); font-weight: 600; }
.map-readout-sub { display: block; font-size: 10px; color: var(--chrome-muted); }
.map-cursor { position: absolute; width: 15px; height: 15px; margin: -8px 0 0 -8px; z-index: 5; }
.map-cursor::before, .map-cursor::after { content: ""; position: absolute; background: var(--ink-2); }
.map-cursor::before { left: 7px; top: 0; width: 1px; height: 15px; }
.map-cursor::after { top: 7px; left: 0; height: 1px; width: 15px; }

/* podpowiedz kroku: ciemny pasek u gory plotna, bo ma byc czytelny nad kazdym podkladem */
.map-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; background: var(--chrome); color: var(--chrome-ink-2); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 11.5px; white-space: nowrap; z-index: 6; }
.map-hint .icon { width: 13px; height: 13px; color: var(--chrome-dim); }

/* ---------- dymek: kadlub z przemalowanego popupu Leafletu, uklad wlasny ---------- */
.map-popup { position: absolute; z-index: 6; width: 246px; transform: translate(-50%, -100%); margin-top: -16px; }
.map-popup .leaflet-popup-content-wrapper { position: relative; display: block; }
.map-popup .leaflet-popup-content { padding: 10px 12px; }
.map-popup .leaflet-popup-tip { width: 13px; height: 13px; margin: -7px auto 0; transform: rotate(45deg); border-top: 0; border-left: 0; }
.map-popup .leaflet-popup-close-button { position: absolute; right: 1px; top: 1px; display: flex; align-items: center; justify-content: center; }
.map-popup-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; padding-right: 20px; }
.map-popup-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.map-popup-foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-3); }

/* ---------- etykieta przy najechaniu: strzalke rysuje leaflet.css, tu tylko jej geometria ----------
   :where() zeruje specyficznosc, zeby barwa strzalki nadal plynela ze skory u gory pliku. */
.map-tip { position: absolute; transform: translate(-50%, -100%); margin-top: -26px; z-index: 5; }
.map-tip.is-side { transform: translate(0, -50%); margin: 0 0 0 14px; }
:where(.map-tip .leaflet-tooltip) { position: relative; display: inline-block; }
:where(.map-tip .leaflet-tooltip)::before { position: absolute; content: ""; border: 6px solid transparent; }
:where(.map-tip .leaflet-tooltip-top)::before { left: 50%; margin-left: -6px; top: 100%; }
:where(.map-tip .leaflet-tooltip-bottom)::before { left: 50%; margin-left: -6px; bottom: 100%; }
:where(.map-tip .leaflet-tooltip-left)::before { top: 50%; margin-top: -6px; left: 100%; }
:where(.map-tip .leaflet-tooltip-right)::before { top: 50%; margin-top: -6px; right: 100%; }
.map-tips { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* ---------- legenda ---------- */
.map-legend { display: inline-flex; flex-direction: column; min-width: 186px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: 11.5px; color: var(--ink-2); }
.map-legend-head { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.map-legend-head .icon { width: 13px; height: 13px; }
.map-legend-body { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }
.map-legend-row { display: flex; align-items: center; gap: 8px; }
.map-legend-name { flex: 1; min-width: 0; }
.map-legend-count { font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.map-legend-swatch { width: 13px; height: 13px; border-radius: 2px; border: 1.5px solid var(--accent); background: var(--accent-soft); flex: 0 0 auto; }
.map-legend-swatch.is-warn { border-color: var(--warn); background: var(--warn-soft); }
.map-legend-swatch.is-danger { border-color: var(--danger); background: var(--danger-soft); }
.map-legend-swatch.is-info { border-color: var(--info); background: var(--info-soft); }
.map-legend-swatch.is-neutral { border-color: var(--neutral-dot); background: var(--neutral-soft); }
.map-legend-line { width: 13px; height: 0; border-top: 2px solid var(--accent); flex: 0 0 auto; }
.map-legend-line.is-dashed { border-top-style: dashed; border-top-color: var(--danger); }
.map-legend-sep { height: 1px; margin: 2px 0; background: var(--line-3); }
.map-legend-foot { padding: 5px 10px; border-top: 1px solid var(--line-3); background: var(--surface-3); border-radius: 0 0 var(--radius) var(--radius); font-size: 10.5px; color: var(--muted); }

/* ---------- pasek wspolrzednych ---------- */
.map-coords { display: flex; align-items: center; height: 26px; padding: 0 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: 11px; color: var(--ink-2); }
.map-coords-item { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 9px; white-space: nowrap; }
.map-coords-item + .map-coords-item { border-left: 1px solid var(--line-3); }
.map-coords-item .icon { width: 13px; height: 13px; color: var(--label); }
.map-coords-label { font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.map-coords-val { font-family: var(--mono); font-size: 11px; color: var(--ink); }
.map-coords-right { margin-left: auto; }

/* ---------- szukanie ---------- */
.map-search { width: 306px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.map-search-field { padding: 6px; border-bottom: 1px solid var(--line-3); }
.map-search-list { max-height: 320px; overflow: auto; padding-bottom: 2px; }
.map-search-item { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
.map-search-item:hover, .map-search-item.is-hover { background: var(--hover); }
.map-search-item.is-selected { background: var(--selected); }
.map-search-item .icon { width: 13px; height: 13px; color: var(--label); flex: 0 0 auto; }
.map-search-main { flex: 1; min-width: 0; }
.map-search-sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.map-search-meta { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.map-search-foot { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-top: 1px solid var(--line-3); background: var(--surface-3); font-size: 10.5px; color: var(--muted); }

/* ---------- podzialy ekranu: lista i mapa, mapa i panel ---------- */
.map-split { display: flex; height: 100%; min-height: 0; background: var(--surface); }
.map-split-aside { flex: 0 0 320px; min-width: 0; border-right: 1px solid var(--line); }
.map-split-main { position: relative; flex: 1; min-width: 0; }
.map-split-side { flex: 0 0 320px; min-width: 0; border-left: 1px solid var(--line); }
.map-split-panel { flex: 0 0 var(--w-inspector); min-width: 0; }

/* ---------- trasa ---------- */
.map-stop { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--chrome); color: var(--chrome-ink); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 600; z-index: 3; }
.map-stop.is-start { background: var(--accent); color: var(--accent-ink); }
.map-stop.is-end { background: var(--danger); color: var(--danger-ink); }
.map-route-sum { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--ink-2); }
.map-step-no { width: 20px; height: 20px; border-radius: 50%; background: var(--neutral-soft); color: var(--ink-2); font-family: var(--mono); font-size: 10.5px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.map-step-no.is-start { background: var(--accent-soft); color: var(--accent-text); }
.map-step-no.is-end { background: var(--danger-soft); color: var(--danger-text); }

/* ---------- mapa cieplna: barwy sa danymi, nie interfejsem ---------- */
.map-heat-blob { position: absolute; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--danger) 52%, transparent) 0%, color-mix(in srgb, var(--warn) 36%, transparent) 40%, color-mix(in srgb, var(--accent) 16%, transparent) 68%, color-mix(in srgb, var(--accent) 0%, transparent) 100%); }
.map-heat-blob.is-mid { background: radial-gradient(circle, color-mix(in srgb, var(--warn) 40%, transparent) 0%, color-mix(in srgb, var(--accent) 20%, transparent) 52%, color-mix(in srgb, var(--accent) 0%, transparent) 100%); }
.map-heat-blob.is-low { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, color-mix(in srgb, var(--accent) 0%, transparent) 100%); }
.map-heat-scale { display: flex; flex-direction: column; gap: 5px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.map-heat-bar { width: 148px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 60%, transparent) 34%, var(--warn) 68%, var(--danger) 100%); }
.map-heat-ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--label); }

/* ---------- mini mapa pogladowa: uzywana jako <div class="map map-minimap"> ---------- */
.map-minimap { width: 168px; height: 116px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.map-minimap .map-grid { background-size: 24px 24px; }
.map-minimap-view { position: absolute; border: 1.5px solid var(--accent); background: var(--map-mark); border-radius: 2px; cursor: move; z-index: 3; }
.map-minimap-cap { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 10.5px; color: var(--muted); }

/* ---------- moja lokalizacja ---------- */
.map-me { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--info); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); z-index: 4; }
.map-accuracy { position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--info) 10%, transparent); border: 1px solid var(--info-line); }

/* ---------- warstwa z pliku ---------- */
.map-import { width: 306px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.map-import-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line-3); }
.map-import-head .icon { color: var(--label); }
.map-import-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; }
.map-import-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.map-import-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; }
.map-import-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line-3); background: var(--surface-3); }

/* ---------- mapa do wydruku: kartka zostaje w kolorze powierzchni, zeby motyw ciemny nie oslepial ---------- */
.map-print { display: flex; align-items: center; justify-content: center; height: 100%; padding: 14px; background: var(--canvas); }
.map-print-sheet { display: flex; flex-direction: column; gap: 8px; width: 640px; height: 100%; max-height: 452px; padding: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.map-print-head { display: flex; align-items: baseline; gap: 10px; }
.map-print-title { font-size: 13px; font-weight: 600; }
.map-print-sub { font-size: 11px; color: var(--muted); }
.map-print-map { position: relative; flex: 1; min-height: 0; border: 1px solid var(--line); overflow: hidden; }
.map-print-foot { display: flex; align-items: center; gap: 16px; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 10.5px; color: var(--muted); }
.map-print-foot .map-scale { position: static; }
.map-north { position: absolute; right: 10px; top: 10px; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.map-north .icon { width: 12px; height: 12px; }
.map-north-letter { font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: .5px; }
[data-theme="dark"] .map-north { background: color-mix(in srgb, var(--surface) 90%, transparent); }

/* ---------- brak kafelkow ---------- */
.map-offline { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--surface-2) 74%, transparent); }
[data-theme="dark"] .map-offline { background: color-mix(in srgb, var(--surface-2) 74%, transparent); }
.map-offline-card { width: 364px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); text-align: center; }
.map-offline-card .icon { color: var(--label); }
.map-offline-title { margin-top: 8px; font-size: 13.5px; font-weight: 600; }
.map-offline-text { margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.map-offline-acts { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 13px; }
.map-offline-meta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-3); font-size: 11px; color: var(--label); }

/* ksztalty atrapy: zielen jest nieregularna, woda idzie skosem, zabudowa to kwartaly */
.map-green { border-radius: 46% 34% 40% 30% / 40% 44% 32% 46%; }
.map-water.is-diag { transform: rotate(-14deg); }
.map-built { border-radius: 2px; }

/* wielkosc skupiska niesie rzad wielkosci, nie tylko liczbe w srodku */
.map-cluster.is-sm { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 10.5px; }
.map-cluster.is-lg { width: 38px; height: 38px; margin: -19px 0 0 -19px; font-size: 12px; }

/* drobiazgi ukladu w dymku i w przegladzie etykiet (zamiast atrybutow style w elementach) */
.map-popup .dl { margin-top: 9px; }
.map-popup-tags { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.map-tip.is-inline { position: static; transform: none; margin: 0; }
.map-tips { margin-top: 14px; }
.map-tips .label { width: 76px; flex: 0 0 auto; }

/* karta z danymi obiektu przypieta do rogu plotna */
.map-info { width: 252px; }

/* przelacznik warstw: naglowek grupy i licznik obiektow w wierszu kontrolki Leafletu */
.map-layers-head { padding: 2px 0 4px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.map-layers-head.is-second { padding-top: 6px; }
.map-layer-count { margin-left: auto; padding-left: 14px; font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.leaflet-control-layers-list label.is-disabled { opacity: .5; }
.map-badges { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.map-coords + .map-coords { margin-top: 10px; }
.map-locate-states { margin-top: 12px; }

/* ================= odtwarzanie zdarzen w czasie (map-timeline, map-track, map-encounter, map-venue, map-buffer) */

/* os czasu pod plotnem: pas 56px z gestoscia zdarzen, znacznikiem teraz i sterowaniem */
.map-time { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 14px; background: var(--surface); border-top: 1px solid var(--line); }
.map-time-play { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.map-time-axis { position: relative; flex: 1; height: 34px; min-width: 0; }
.map-time-bars { position: absolute; inset: 0 0 13px 0; display: flex; align-items: flex-end; gap: 2px; }
.map-time-bar { flex: 1; background: var(--line); border-radius: 1px 1px 0 0; min-height: 2px; }
.map-time-bar.is-in { background: var(--accent); }
.map-time-rule { position: absolute; left: 0; right: 0; bottom: 11px; height: 1px; background: var(--line); }
.map-time-tick { position: absolute; bottom: 0; transform: translateX(-50%); font: 10px var(--mono); color: var(--label); }
.map-time-tick::before { content: ""; position: absolute; left: 50%; bottom: 11px; width: 1px; height: 4px; background: var(--line-input); }
.map-time-now { position: absolute; top: -2px; bottom: 11px; width: 2px; background: var(--accent); border-radius: 1px; }
.map-time-now::after { content: attr(data-czas); position: absolute; top: -3px; left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: 3px; background: var(--accent); color: var(--accent-ink); font: 600 10.5px var(--mono); white-space: nowrap; }
.map-time-window { position: absolute; top: 0; bottom: 11px; background: var(--accent-soft); border-left: 1px solid var(--accent-soft-line); border-right: 1px solid var(--accent-soft-line); }
.map-time-speed { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: var(--fs-xs); color: var(--muted); }

/* slad w czasie: punkt znany pelny, odcinek domyslany przerywany */
.map-track-dot { position: absolute; width: 11px; height: 11px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); }
.map-track-dot.is-stop { width: 17px; height: 17px; margin: -9px 0 0 -9px; }
.map-track-dot.is-other { background: var(--info); box-shadow: 0 0 0 1px var(--info); }
.map-track-no { position: absolute; transform: translate(-50%, -50%); font: 600 9px var(--sans); color: var(--surface); pointer-events: none; }
.map-track-time { position: absolute; transform: translate(-50%, 0); margin-top: 8px; padding: 1px 5px; border-radius: 3px; background: var(--surface); font: 10.5px var(--mono); color: var(--ink-2); white-space: nowrap; }
.map-track-gap { position: absolute; transform: translate(-50%, -50%); padding: 2px 7px; border-radius: 3px; background: var(--warn-soft); border: 1px solid var(--warn-line); font-size: 10px; color: var(--warn-text); white-space: nowrap; }

/* styczność dwóch sladow */
.map-enc { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px dashed var(--danger); }
.map-enc-mark { position: absolute; transform: translate(-50%, -50%); width: 13px; height: 13px; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); }
.map-enc-card { position: absolute; width: 232px; padding: 9px 11px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--danger-line); box-shadow: var(--shadow); }
.map-enc-title { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--danger-text); }
.map-enc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 7px; }
.map-enc-src { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line-3); font-size: 10.5px; color: var(--muted); }

/* miejsce zbiorowe: jeden punkt, lista przypietych osob obok */
.map-venue { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 8px; border-radius: 15px; background: var(--chrome); color: var(--chrome-ink); font-size: var(--fs-sm); white-space: nowrap; box-shadow: var(--shadow); }
.map-venue-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: 600 11px var(--mono); }
.map-venue-list { width: 260px; max-height: 100%; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); }
.map-venue-head { padding: 9px 12px; border-bottom: 1px solid var(--line-3); }
.map-venue-body { flex: 1; overflow: auto; min-height: 0; }
.map-venue-row { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-sm); }
.map-venue-row:hover { background: var(--hover); }
.map-venue-when { margin-left: auto; font: 11px var(--mono); color: var(--muted); }

/* bufor promienia */
.map-buffer { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--accent); }
.map-buffer-r { position: absolute; left: 50%; top: 50%; height: 1px; background: var(--accent); transform-origin: 0 0; }
.map-buffer-r::after { content: attr(data-opis); position: absolute; right: 0; top: -16px; padding: 1px 6px; border-radius: 3px; background: var(--surface); border: 1px solid var(--line); font: 10.5px var(--mono); color: var(--ink-2); white-space: nowrap; }
.map-buffer-slider { display: flex; align-items: center; gap: 10px; }
.map-buffer-slider input[type="range"] { flex: 1; accent-color: var(--accent); }

/* stany dolozone razem z elementami odtwarzania zdarzen */
.map-path.is-other { stroke: var(--info); }
/* odcinek DOMYSLANY: przerywany i janiejszy, zeby nie udawal przebytej drogi */
.map-path.is-guess { stroke-dasharray: 7 6; opacity: .55; }
.map-legend-line.is-guess { border-top-style: dashed; opacity: .7; }
.map-legend-line.is-other { background: var(--info); border-color: var(--info); }
.map-legend-line.is-stop { height: 7px; border-radius: 4px; background: var(--accent); }
.map-venue.is-dim { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.map-venue.is-dim .map-venue-count { background: var(--neutral-soft); color: var(--muted); }
.map-venue-row.is-muted { color: var(--label); }
.map-venue-row.is-muted .map-venue-when { color: var(--label); }
.map-label.is-dim { color: var(--label); }

/* Tabela nad mapa tego samego zbioru: dwa pasy jeden pod drugim, poziomy splitter miedzy nimi. */
.map-stack { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--surface); }
.map-stack-table { flex: 0 0 55%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); }
.map-stack-scroll { flex: 1; min-height: 0; overflow: auto; }
.map-stack-scroll .table thead th { position: sticky; top: 0; z-index: 1; }
.map-stack-table .table-foot { flex: 0 0 30px; }
.map-stack-map { position: relative; flex: 1; min-height: 0; }

/* ---------- pinezka z liczbą albo inicjałami, kolor z danych przez --map-pin-c (map-pin-count) ---------- */
.map-pin-count { --map-pin-c: var(--accent); position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--map-pin-c); color: var(--chrome-ink-bright); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); font-family: var(--sans); font-size: 11px; font-weight: 600; cursor: pointer; z-index: 2; }
.map-pin-count.is-sm { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 10px; }
.map-pin-count.is-lg { width: 34px; height: 34px; margin: -17px 0 0 -17px; font-size: 12.5px; }
.map-pin-count.is-person { letter-spacing: -.02em; }
.map-pin-count.is-warn { --map-pin-c: var(--warn); }
.map-pin-count.is-danger { --map-pin-c: var(--danger); }
.map-pin-count.is-info { --map-pin-c: var(--info); }
.map-pin-count.is-violet { --map-pin-c: var(--violet); }
.map-pin-count.is-neutral { --map-pin-c: var(--neutral-dot); }
.map-pin-count.is-selected { box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-sm); z-index: 3; }
.map-pin-count.is-dim { opacity: .34; }
/* Wewnątrz ikony Leafletu pozycję ustawia sama biblioteka, więc pinezka siedzi statycznie. */
.leaflet-marker-icon > .map-pin-count, .leaflet-div-icon > .map-pin-count { position: static; margin: 0; }


/* ===== diagram: Diagramy i struktury ===== */
/* diagram: struktury rysowane w przestrzeni - mapy myśli, schematy, tory procesu, macierze,
   drzewa z rozmiarami i rzuty. Węzły to divy pozycjonowane absolutnie, łączniki to warstwa inline SVG. */

/* ---------- rama: canvas, warstwa łączników, warstwa węzłów ---------- */
.diagram {
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0;
  background: var(--canvas); color: var(--ink); overflow: hidden;
  user-select: none; -webkit-user-select: none;
  --diagram-dot: var(--grid-dot);
}
[data-theme="dark"] .diagram { --diagram-dot: var(--grid-dot); }
.diagram.is-plain { background: var(--surface); }
.diagram-canvas { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.diagram-dots { position: absolute; inset: 0; background-image: radial-gradient(var(--diagram-dot) 1px, transparent 1px); background-size: 24px 24px; }
.diagram-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* nagłówek i stopka dla podglądów bez belki narzędzi */
.diagram-head { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding-bottom: 10px; }
.diagram-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.diagram-sub { font-size: 11px; color: var(--muted); }
.diagram-head .diagram-sub { margin-left: auto; }
.diagram-foot { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-3); font-size: 11px; color: var(--muted); }
.diagram-foot .diagram-total { margin-left: auto; font-family: var(--mono); color: var(--ink); }
.diagram-total { font-family: var(--mono); }

/* ---------- łączniki w SVG ---------- */
.diagram-edge { fill: none; stroke: var(--line-input); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.diagram-edge.is-thin { stroke-width: 1; stroke: var(--line); }
.diagram-edge.is-active { stroke: var(--accent); stroke-width: 1.8; }
.diagram-edge.is-dashed { stroke-dasharray: 4 3; }
.diagram-edge.is-dotted { stroke-dasharray: 1.5 3; }
.diagram-edge.is-muted { stroke: var(--line-2); }
.diagram-edge.is-danger { stroke: var(--danger-line); }
.diagram-edge.is-warn { stroke: var(--warn-line); }
.diagram-arrow { fill: var(--line-input); stroke: none; }
.diagram-arrow.is-active { fill: var(--accent); }
.diagram-arrow.is-danger { fill: var(--danger-line); }

/* kształty rysowane w SVG: romb decyzji, prostokąt, kapsuła startu */
.diagram-shape { fill: var(--surface); stroke: var(--line-input); stroke-width: 1.2; }
.diagram-shape.is-soft { fill: var(--accent-soft); stroke: var(--accent-soft-line); }
.diagram-shape.is-warn { fill: var(--warn-soft); stroke: var(--warn-line); }
.diagram-shape.is-chrome { fill: var(--chrome); stroke: var(--chrome); }
.diagram-shape.is-selected { stroke: var(--accent); stroke-width: 1.8; }
.diagram-shape.is-ghost { fill: var(--surface-2); stroke: var(--line-input); stroke-dasharray: 4 3; }
.diagram-svg-text { font: 11px var(--sans); fill: var(--ink-2); }
.diagram-svg-text.is-num { font: 10.5px var(--mono); fill: var(--muted); }
.diagram-svg-text.is-label { font: var(--fs-label) var(--sans); letter-spacing: .8px; text-transform: uppercase; fill: var(--label); }
.diagram-svg-text.is-strong { font-weight: 600; fill: var(--ink); }

/* ---------- węzeł: wspólny klocek mapy myśli, schematu, obiegu statusów ---------- */
.diagram-node {
  position: absolute; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 5px 9px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); font-size: 12px; line-height: 1.3; color: var(--ink); cursor: default;
}
.diagram-node-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diagram-node-title.is-wrap { white-space: normal; }
.diagram-node-sub { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diagram-node-code { font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.diagram-node-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.diagram-node-row .icon { width: 13px; height: 13px; color: var(--label); flex: 0 0 13px; }
.diagram-node.is-center { align-items: center; text-align: center; }
.diagram-node.is-root { background: var(--chrome); border-color: var(--chrome); color: var(--chrome-ink); box-shadow: var(--shadow); }
.diagram-node.is-root .diagram-node-sub { color: var(--chrome-muted); }
.diagram-node.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.diagram-node.is-current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 3px var(--focus-ring); }
.diagram-node.is-current .diagram-node-sub { color: var(--accent-ink); }
.diagram-node.is-soft { background: var(--accent-soft); border-color: var(--accent-soft-line); color: var(--accent-text); }
.diagram-node.is-info { background: var(--info-soft); border-color: var(--info-line); color: var(--info-text); }
.diagram-node.is-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
.diagram-node.is-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-text); }
.diagram-node.is-ghost { background: transparent; border-style: dashed; border-color: var(--line-input); color: var(--label); box-shadow: none; }
.diagram-node.is-flat { box-shadow: none; }
.diagram-node.is-label-only { background: none; border: 0; box-shadow: none; padding: 0; align-items: center; text-align: center; }
.diagram-node .badge { align-self: flex-start; }

/* uchwyt zwijania gałęzi i licznik ukrytych dzieci */
.diagram-toggle {
  position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 16px; height: 16px; padding: 0 4px; border: 1px solid var(--line-input); border-radius: 8px;
  background: var(--surface); font-family: var(--mono); font-size: 9.5px; color: var(--muted); cursor: pointer;
}
.diagram-toggle .icon { width: 9px; height: 9px; }
.diagram-toggle:hover, .diagram-toggle.is-hover { border-color: var(--accent); color: var(--accent-text); }

/* etykieta na łączniku: leży na linii, na tle canvasu */
.diagram-edge-label { position: absolute; transform: translate(-50%, -50%); padding: 0 5px; background: var(--canvas); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.diagram-edge-label.is-plain { background: var(--surface); }
.diagram-edge-label.is-yes { color: var(--accent-text); font-weight: 600; }
.diagram-edge-label.is-no { color: var(--danger-text); font-weight: 600; }

/* ---------- legenda, podpowiedź, przyciski nad canvasem ---------- */
.diagram-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; flex: 0 0 auto; font-size: 11px; color: var(--ink-2); }
.diagram-legend.is-float { position: absolute; left: 12px; bottom: 12px; flex-wrap: nowrap; height: 26px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.diagram-legend.is-top { margin-top: 0; margin-bottom: 8px; }
.diagram-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.diagram-legend-item.is-off { color: var(--label); }
.diagram-swatch { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 2px; background: var(--neutral-soft); border: 1px solid var(--line-input); }
.diagram-swatch.is-accent { background: var(--accent); border-color: var(--accent); }
.diagram-swatch.is-soft { background: var(--accent-soft); border-color: var(--accent-soft-line); }
.diagram-swatch.is-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.diagram-swatch.is-danger { background: var(--danger-soft); border-color: var(--danger-line); }
.diagram-swatch.is-info { background: var(--info-soft); border-color: var(--info-line); }
.diagram-swatch.is-chrome { background: var(--chrome); border-color: var(--chrome); }
.diagram-swatch.is-line { width: 15px; height: 0; border: 0; border-top: 1.5px solid var(--line-input); border-radius: 0; background: none; }
.diagram-swatch.is-dashed { width: 15px; height: 0; border: 0; border-top: 1.5px dashed var(--line-input); border-radius: 0; background: none; }
.diagram-hint { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: 11px; color: var(--muted); }
.diagram-hint .icon { width: 12px; height: 12px; color: var(--label); }
.diagram-hint.is-right { left: auto; right: 12px; }
.diagram-controls { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; }
.diagram-scale { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* ---------- schemat organizacyjny: karta osoby ---------- */
.diagram-person { position: absolute; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 6px 9px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.diagram-person-body { display: block; min-width: 0; }
.diagram-person-name { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diagram-person-role { display: block; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diagram-person.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.diagram-person.is-root { background: var(--chrome); border-color: var(--chrome); }
.diagram-person.is-root .diagram-person-name { color: var(--chrome-ink); }
.diagram-person.is-root .diagram-person-role { color: var(--chrome-muted); }
.diagram-person.is-vacant { background: transparent; border-style: dashed; border-color: var(--line-input); box-shadow: none; }
.diagram-person.is-vacant .diagram-person-name { color: var(--muted); font-weight: 500; }
.diagram-person.is-team { background: var(--surface-2); }

/* ---------- tory procesu i mapa drogowa: wspólna siatka pasów ---------- */
.diagram-lane { position: absolute; left: 0; right: 0; display: flex; align-items: stretch; border-top: 1px solid var(--line); }
.diagram-lane-label { width: 132px; flex: 0 0 132px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 12px; background: var(--surface-2); border-right: 1px solid var(--line); }
.diagram-lane-name { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.diagram-lane-meta { font-size: 10px; color: var(--label); }
.diagram-lane-track { flex: 1; min-width: 0; background: var(--surface); }
.diagram-lane.is-alt .diagram-lane-track { background: var(--surface-3); }
.diagram-lane.is-selected .diagram-lane-label { background: var(--selected); }
.diagram-corner { position: absolute; left: 0; top: 0; width: 132px; height: 28px; background: var(--surface-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.diagram-phases { position: absolute; left: 132px; right: 0; top: 0; height: 28px; display: flex; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.diagram-phase { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; border-left: 1px solid var(--line); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.diagram-phase:first-child { border-left: 0; }
.diagram-phase .diagram-phase-num { font-family: var(--mono); letter-spacing: 0; text-transform: none; color: var(--muted); }
.diagram-col-line { position: absolute; top: 28px; bottom: 0; width: 0; border-left: 1px solid var(--line-2); }
.diagram-col-line.is-strong { border-left-color: var(--line); }

/* krok w torze */
.diagram-step { position: absolute; box-sizing: border-box; padding: 5px 8px; background: var(--surface); border: 1px solid var(--line-input); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: 11px; line-height: 1.3; color: var(--ink); }
.diagram-step-title { font-weight: 600; }
.diagram-step-meta { display: block; margin-top: 2px; font-family: var(--mono); font-size: 10px; color: var(--label); }
.diagram-step.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.diagram-step.is-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.diagram-step.is-soft { background: var(--accent-soft); border-color: var(--accent-soft-line); }
.diagram-step.is-auto { border-style: dashed; }

/* ---------- mapa drogowa: paski kwartałów, kamienie milowe, linia dziś ---------- */
.diagram-road-bar { position: absolute; box-sizing: border-box; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--accent-soft); border: 1px solid var(--accent-soft-line); font-size: 11px; color: var(--accent-text); white-space: nowrap; overflow: hidden; }
.diagram-road-bar.is-info { background: var(--info-soft); border-color: var(--info-line); color: var(--info-text); }
.diagram-road-bar.is-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
.diagram-road-bar.is-neutral { background: var(--neutral-soft); border-color: var(--line); color: var(--ink-2); }
.diagram-road-bar.is-planned { background: transparent; border-style: dashed; border-color: var(--line-input); color: var(--muted); }
.diagram-road-bar.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.diagram-road-bar .diagram-road-num { margin-left: auto; font-family: var(--mono); font-size: 10px; opacity: .85; }
.diagram-road-milestone { position: absolute; display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.diagram-road-diamond { width: 10px; height: 10px; flex: 0 0 10px; transform: rotate(45deg); border-radius: 2px; background: var(--chrome); }
.diagram-road-diamond.is-done { background: var(--accent); }
.diagram-road-diamond.is-risk { background: var(--warn); }
.diagram-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--accent); }
.diagram-today-tag { position: absolute; top: 6px; left: 5px; display: inline-flex; align-items: center; height: 15px; padding: 0 5px; border-radius: 3px; background: var(--accent); color: var(--accent-ink); font-size: 9.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }

/* ---------- schemat danych: tabela z kolumnami ---------- */
.diagram-er-table { position: absolute; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.diagram-er-head { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--ink); }
.diagram-er-head .icon { width: 12px; height: 12px; color: var(--label); }
.diagram-er-count { margin-left: auto; font-family: var(--mono); font-size: 9.5px; font-weight: 400; color: var(--label); }
.diagram-er-row { display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-top: 1px solid var(--line-3); font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); }
.diagram-er-key { width: 16px; flex: 0 0 16px; font-size: 8.5px; font-weight: 700; letter-spacing: .3px; color: transparent; }
.diagram-er-key.is-pk { color: var(--accent-text); }
.diagram-er-key.is-fk { color: var(--info-text); }
.diagram-er-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.diagram-er-type { margin-left: auto; padding-left: 8px; font-size: 9.5px; color: var(--label); }
.diagram-er-row.is-selected { background: var(--selected); color: var(--accent-text); }
.diagram-er-table.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.diagram-er-card { position: absolute; transform: translate(-50%, -50%); padding: 0 4px; background: var(--surface); font-family: var(--mono); font-size: 10px; color: var(--muted); }

/* ---------- graf powiązań ---------- */
.diagram-gnode { position: absolute; width: 116px; margin-left: -58px; margin-top: -19px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.diagram-gnode.is-lg { margin-top: -26px; }
.diagram-gdot { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-input); box-shadow: var(--shadow-sm); font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-2); }
.diagram-gdot.is-lg { width: 52px; height: 52px; font-size: 12px; }
.diagram-gdot.is-client { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.diagram-gdot.is-doc { background: var(--info-soft); border-color: var(--info-line); color: var(--info-text); }
.diagram-gdot.is-person { background: var(--neutral-soft); border-color: var(--line-input); color: var(--muted); }
.diagram-gdot.is-order { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
.diagram-gnode.is-selected .diagram-gdot { box-shadow: 0 0 0 3px var(--focus-ring); }
.diagram-gnode.is-far { opacity: .42; }
.diagram-glabel { font-size: 10.5px; line-height: 1.25; color: var(--ink-2); }
.diagram-gmeta { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--label); }

/* ---------- mapa drzewa ---------- */
.diagram-treemap { position: absolute; inset: 0; }
.diagram-tile { position: absolute; box-sizing: border-box; overflow: hidden; padding: 5px 7px; border: 1px solid var(--surface); border-radius: 3px; color: var(--ink); }
.diagram-tile::before { content: ""; position: absolute; inset: 0; background: var(--accent); opacity: var(--diagram-i, .12); }
.diagram-tile.is-l1 { --diagram-i: .08; }
.diagram-tile.is-l2 { --diagram-i: .16; }
.diagram-tile.is-l3 { --diagram-i: .28; }
.diagram-tile.is-l4 { --diagram-i: .44; }
.diagram-tile.is-l5 { --diagram-i: .62; }
.diagram-tile.is-child { border-color: transparent; box-shadow: inset 0 0 0 1px var(--surface); }
.diagram-tile.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.diagram-tile-name { position: relative; display: block; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diagram-tile-name.is-sm { font-size: 10.5px; font-weight: 500; }
.diagram-tile-val { position: relative; display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--ink-2); }
.diagram-tile-val.is-sm { font-size: 9.5px; color: var(--muted); }

/* ---------- wykres słoneczny ---------- */
.diagram-sun { position: relative; display: flex; align-items: center; gap: 22px; height: 100%; }
.diagram-sun-svg { flex: 0 0 auto; overflow: visible; }
.diagram-arc { stroke: var(--surface); stroke-width: 1.5; fill: var(--accent); }
.diagram-arc.is-l1 { opacity: .82; }
.diagram-arc.is-l2 { opacity: .62; }
.diagram-arc.is-l3 { opacity: .42; }
.diagram-arc.is-l4 { opacity: .28; }
.diagram-arc.is-l5 { opacity: .18; }
.diagram-arc.is-selected { stroke: var(--accent); stroke-width: 2; opacity: 1; }
.diagram-sun-center { position: absolute; left: 140px; top: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.diagram-sun-total { display: block; font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--ink); }
.diagram-sun-caption { display: block; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.diagram-sun-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.diagram-sun-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); }
.diagram-sun-row.is-child { padding-left: 17px; font-size: 11px; color: var(--muted); }
.diagram-sun-row.is-selected { color: var(--accent-text); font-weight: 600; }
.diagram-sun-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diagram-sun-val { font-family: var(--mono); font-size: 11px; color: var(--ink); }
.diagram-sun-pct { width: 42px; text-align: right; font-family: var(--mono); font-size: 10.5px; color: var(--label); }

/* ---------- heatmapa macierzowa ---------- */
.diagram-matrix { border-collapse: separate; border-spacing: 3px; font-size: 11px; }
.diagram-matrix th { height: 18px; padding: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--label); text-align: center; }
.diagram-matrix th.is-row { width: 124px; padding-right: 8px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; text-align: left; color: var(--ink); white-space: nowrap; }
.diagram-matrix th.is-sum { width: 60px; text-align: right; padding-left: 8px; }
.diagram-matrix td { position: relative; width: 52px; height: 28px; text-align: center; font-family: var(--mono); font-size: 10.5px; color: var(--ink); }
.diagram-matrix td::before { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--accent); opacity: var(--diagram-i, 0); }
.diagram-matrix td span { position: relative; }
.diagram-matrix td.is-l0 { color: var(--label); box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 3px; }
.diagram-matrix td.is-l1 { --diagram-i: .10; }
.diagram-matrix td.is-l2 { --diagram-i: .24; }
.diagram-matrix td.is-l3 { --diagram-i: .42; }
.diagram-matrix td.is-l4 { --diagram-i: .62; }
.diagram-matrix td.is-l5 { --diagram-i: .84; }
.diagram-matrix td.is-l4 span, .diagram-matrix td.is-l5 span { color: var(--accent-ink); font-weight: 600; }
.diagram-matrix td.is-selected { box-shadow: 0 0 0 2px var(--accent); border-radius: 3px; }
.diagram-matrix td.is-sum { font-weight: 600; color: var(--ink); text-align: right; padding-right: 2px; }
.diagram-matrix tr.is-sum td { color: var(--muted); font-size: 10px; }
.diagram-scale-steps { display: inline-flex; align-items: center; gap: 3px; }
.diagram-scale-step { position: relative; width: 14px; height: 10px; border-radius: 2px; }
.diagram-scale-step::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--accent); opacity: var(--diagram-i, 0); }
.diagram-scale-step.is-l0 { box-shadow: inset 0 0 0 1px var(--line-2); }
.diagram-scale-step.is-l1 { --diagram-i: .10; }
.diagram-scale-step.is-l2 { --diagram-i: .24; }
.diagram-scale-step.is-l3 { --diagram-i: .42; }
.diagram-scale-step.is-l4 { --diagram-i: .62; }
.diagram-scale-step.is-l5 { --diagram-i: .84; }

/* ---------- drzewo katalogów z rozmiarami ---------- */
.diagram-dir { display: flex; flex-direction: column; min-height: 0; }
.diagram-dir-head { display: flex; align-items: center; height: 22px; border-bottom: 1px solid var(--line-2); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.diagram-dir-row { display: flex; align-items: center; height: 24px; border-radius: 3px; font-size: 12px; cursor: default; }
.diagram-dir-row:hover, .diagram-dir-row.is-hover { background: var(--hover-neutral); }
.diagram-dir-row.is-selected { background: var(--selected); }
.diagram-dir-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.diagram-dir-name .icon { width: 13px; height: 13px; flex: 0 0 13px; color: var(--label); }
.diagram-dir-row.is-selected .diagram-dir-name .icon { color: var(--accent-text); }
.diagram-dir-text { overflow: hidden; text-overflow: ellipsis; }
.diagram-dir-text.is-strong { font-weight: 600; }
.diagram-dir-twist { width: 14px; flex: 0 0 14px; display: flex; align-items: center; justify-content: center; color: var(--label); }
.diagram-dir-twist .icon { width: 10px; height: 10px; }
.diagram-dir-twist.is-leaf { visibility: hidden; }
.diagram-dir-lv1 { padding-left: 4px; }
.diagram-dir-lv2 { padding-left: 22px; }
.diagram-dir-lv3 { padding-left: 40px; }
.diagram-dir-size { width: 74px; flex: 0 0 74px; text-align: right; font-family: var(--mono); font-size: 11px; color: var(--ink); }
.diagram-dir-files { width: 82px; flex: 0 0 82px; text-align: right; font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.diagram-dir-bar { width: 118px; flex: 0 0 118px; display: flex; align-items: center; margin-left: 14px; }
.diagram-dir-pct { width: 44px; flex: 0 0 44px; text-align: right; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* ---------- kolumny hierarchii ---------- */
.diagram-miller { display: flex; flex: 1; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.diagram-miller-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line-2); }
.diagram-miller-col:first-child { border-left: 0; }
.diagram-miller-col.is-active { background: var(--surface-3); }
.diagram-miller-head { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.diagram-miller-head .diagram-miller-count { margin-left: auto; font-family: var(--mono); letter-spacing: 0; }
.diagram-miller-list { flex: 1; min-height: 0; overflow: auto; padding: 3px 0; }
.diagram-miller-item { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; font-size: 12px; color: var(--ink); cursor: pointer; }
.diagram-miller-item .icon { width: 13px; height: 13px; flex: 0 0 13px; color: var(--label); }
.diagram-miller-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diagram-miller-item .diagram-miller-arrow { margin-left: auto; width: 10px; height: 10px; flex: 0 0 10px; color: var(--label); }
.diagram-miller-item:hover, .diagram-miller-item.is-hover { background: var(--hover-neutral); }
.diagram-miller-item.is-selected { background: var(--selected); font-weight: 600; }
.diagram-miller-item.is-selected .icon, .diagram-miller-item.is-selected .diagram-miller-arrow { color: var(--accent-text); }
.diagram-miller-item.is-active { background: var(--chrome); color: var(--chrome-ink); font-weight: 600; }
.diagram-miller-item.is-active .icon, .diagram-miller-item.is-active .diagram-miller-arrow { color: var(--chrome-muted); }
.diagram-miller-preview { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.diagram-miller-foot { height: 24px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-top: 1px solid var(--line-2); background: var(--surface-2); font-size: 10.5px; color: var(--muted); }

/* ---------- konspekt ---------- */
.diagram-outline { display: flex; flex-direction: column; font-size: 12.5px; }
.diagram-out-row { display: flex; align-items: center; gap: 6px; min-height: 26px; border-radius: 3px; }
.diagram-out-row:hover, .diagram-out-row.is-hover { background: var(--hover-neutral); }
.diagram-out-row.is-selected { background: var(--selected); }
.diagram-out-lv1 { padding-left: 2px; }
.diagram-out-lv2 { padding-left: 26px; }
.diagram-out-lv3 { padding-left: 50px; }
.diagram-out-handle { width: 14px; flex: 0 0 14px; display: flex; align-items: center; justify-content: center; color: transparent; cursor: grab; }
.diagram-out-handle .icon { width: 12px; height: 12px; }
.diagram-out-row:hover .diagram-out-handle, .diagram-out-row.is-hover .diagram-out-handle { color: var(--label); }
.diagram-out-twist { width: 14px; flex: 0 0 14px; display: flex; align-items: center; justify-content: center; color: var(--label); }
.diagram-out-twist .icon { width: 10px; height: 10px; }
.diagram-out-twist.is-leaf { visibility: hidden; }
.diagram-out-bullet { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--neutral-dot); }
.diagram-out-bullet.is-collapsed { box-shadow: 0 0 0 3px var(--line-2); }
.diagram-out-bullet.is-done { background: var(--accent); }
.diagram-out-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diagram-out-text.is-strong { font-weight: 600; }
.diagram-out-text.is-done { color: var(--muted); text-decoration: line-through; }
.diagram-out-meta { font-family: var(--mono); font-size: 10.5px; color: var(--label); padding-left: 10px; }
.diagram-out-edit { flex: 1; min-width: 0; }
.diagram-out-caret { width: 1px; height: 15px; background: var(--ink); }

/* ---------- tablica z karteczkami ---------- */
.diagram-frame { position: absolute; box-sizing: border-box; border: 1px solid var(--line-input); border-radius: 6px; background: var(--surface-3); }
.diagram-frame-title { position: absolute; left: 10px; top: -9px; display: inline-flex; align-items: center; height: 18px; padding: 0 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; font-size: 9.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.diagram-note { position: absolute; box-sizing: border-box; padding: 8px 9px; border: 1px solid var(--line); border-radius: 3px; background: var(--neutral-soft); box-shadow: var(--shadow-sm); font-size: 11.5px; line-height: 1.35; color: var(--ink); }
.diagram-note.is-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.diagram-note.is-danger { background: var(--danger-soft); border-color: var(--danger-line); }
.diagram-note.is-ok { background: var(--accent-soft); border-color: var(--accent-soft-line); }
.diagram-note.is-info { background: var(--info-soft); border-color: var(--info-line); }
.diagram-note.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.diagram-note-author { display: block; margin-top: 6px; font-size: 9.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }
.diagram-handles { position: absolute; box-sizing: border-box; border: 1px solid var(--accent); pointer-events: none; }
.diagram-handle { position: absolute; width: 7px; height: 7px; margin: -4px 0 0 -4px; border: 1px solid var(--accent); border-radius: 2px; background: var(--surface); }

/* ---------- diagram sekwencji ---------- */
.diagram-seq-actor { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 40px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: 11.5px; font-weight: 600; text-align: center; }
.diagram-seq-role { font-size: 9.5px; font-weight: 400; letter-spacing: .4px; text-transform: uppercase; color: var(--label); }
.diagram-seq-actor.is-self { background: var(--chrome); border-color: var(--chrome); color: var(--chrome-ink); }
.diagram-seq-actor.is-self .diagram-seq-role { color: var(--chrome-muted); }
.diagram-seq-actor.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.diagram-seq-msg { position: absolute; transform: translate(-50%, -100%); padding: 0 6px; background: var(--canvas); font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.diagram-seq-msg.is-return { color: var(--muted); }
.diagram-seq-msg.is-danger { color: var(--danger-text); }
.diagram-seq-num { font-family: var(--mono); font-size: 9.5px; color: var(--label); padding-right: 4px; }
.diagram-seq-note { position: absolute; box-sizing: border-box; padding: 6px 8px; background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: 3px; font-size: 10.5px; line-height: 1.35; color: var(--warn-text); }
.diagram-life { stroke: var(--line-input); stroke-width: 1; stroke-dasharray: 3 4; }
.diagram-activation { fill: var(--accent-soft); stroke: var(--accent-soft-line); stroke-width: 1; }
.diagram-activation.is-self { fill: var(--chrome-accent-bg); stroke: var(--chrome-line); }

/* ---------- przepływ (sankey) ---------- */
.diagram-flow-node { fill: var(--chrome-3); }
.diagram-flow-node.is-accent { fill: var(--accent); }
.diagram-flow-node.is-warn { fill: var(--warn); }
.diagram-flow-node.is-danger { fill: var(--danger); }
.diagram-flow-node.is-info { fill: var(--info); }
.diagram-flow-link { fill: var(--accent); opacity: .2; }
.diagram-flow-link.is-warn { fill: var(--warn); opacity: .22; }
.diagram-flow-link.is-danger { fill: var(--danger); opacity: .2; }
.diagram-flow-link.is-info { fill: var(--info); opacity: .18; }
.diagram-flow-link.is-selected { opacity: .46; }
.diagram-flow-label { position: absolute; transform: translateY(-50%); padding: 1px 5px; border-radius: 3px; background: var(--surface); font-size: 11px; line-height: 1.25; color: var(--ink); white-space: nowrap; }
.diagram-flow-label.is-right { transform: translate(-100%, -50%); text-align: right; }
.diagram-flow-val { display: block; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.diagram-flow-label.is-selected { color: var(--accent-text); font-weight: 600; box-shadow: 0 0 0 1px var(--accent-soft-line); }

/* ---------- rzut pomieszczeń ---------- */
.diagram-room { fill: var(--surface); stroke: none; }
.diagram-room.is-tech { fill: var(--surface-2); }
.diagram-room.is-selected { fill: var(--accent-soft); }
.diagram-wall { fill: none; stroke: var(--ink-2); stroke-width: 5; stroke-linejoin: miter; }
.diagram-wall.is-inner { stroke: var(--muted); stroke-width: 2.5; }
.diagram-door { fill: none; stroke: var(--muted); stroke-width: 1.1; stroke-dasharray: 3 2; }
.diagram-window { stroke: var(--info); stroke-width: 3.5; stroke-linecap: butt; }
.diagram-dim { stroke: var(--label); stroke-width: 1; }
.diagram-room-label { position: absolute; transform: translate(-50%, -50%); text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--ink); }
.diagram-room-name { font-weight: 600; }
.diagram-room-area { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.diagram-room-label.is-selected .diagram-room-name { color: var(--accent-text); }
.diagram-room-label.is-selected .diagram-room-area { color: var(--accent-text); }
.diagram-dim-label { position: absolute; transform: translate(-50%, -50%); padding: 0 4px; background: var(--canvas); font-family: var(--mono); font-size: 10px; color: var(--label); }
.diagram-dim-label.is-vertical { writing-mode: vertical-rl; padding: 4px 0; }

/* ---------- paleta edytora ---------- */
.diagram-editor { display: flex; flex: 1 1 auto; min-height: 0; }
.diagram-tools { width: 148px; flex: 0 0 148px; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); overflow: auto; }
.diagram-tools-head { display: flex; align-items: center; height: 24px; padding: 8px 12px 0; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.diagram-shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 10px 10px; }
.diagram-shape-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 50px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); font-size: 9px; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); cursor: grab; }
.diagram-shape-tile:hover, .diagram-shape-tile.is-hover { border-color: var(--accent); background: var(--surface); color: var(--accent-text); }
.diagram-shape-tile.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.diagram-shape-mini { stroke: currentColor; fill: none; stroke-width: 1.2; }
.diagram-shape-mini.is-filled { fill: var(--surface); }
.diagram-props { width: 240px; flex: 0 0 240px; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); overflow: auto; }
.diagram-props-head { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--line-2); font-size: 12px; font-weight: 600; }
.diagram-props-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.diagram-props-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.diagram-props-sep { height: 1px; background: var(--line-3); margin: 2px 0; }
.diagram-swatches { display: flex; align-items: center; gap: 5px; }
.diagram-swatch-btn { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--line-input); background: var(--surface); cursor: pointer; }
.diagram-swatch-btn.is-accent { background: var(--accent-soft); border-color: var(--accent-soft-line); }
.diagram-swatch-btn.is-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.diagram-swatch-btn.is-danger { background: var(--danger-soft); border-color: var(--danger-line); }
.diagram-swatch-btn.is-info { background: var(--info-soft); border-color: var(--info-line); }
.diagram-swatch-btn.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }

/* ---------- drobiazgi wspólne dopisane przy elementach ---------- */
.diagram-node-text { font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diagram-node-count { font-family: var(--mono); font-size: 10px; color: var(--label); margin-left: auto; }
.diagram-node.is-invert { color: var(--chrome-ink); }
.diagram-tile.is-group { --diagram-i: 0; background: var(--surface-2); border-color: var(--surface); }
.diagram-tile.is-group > .diagram-tile-name { color: var(--ink); }
.diagram-miller-item .badge { margin-left: auto; }
.diagram-road-milestone.is-left { transform: translateX(-100%); flex-direction: row-reverse; }
.diagram-editor-canvas { position: relative; flex: 1 1 auto; min-width: 0; background: var(--canvas); overflow: hidden; }
.diagram-shape-mini.is-dashed { stroke-dasharray: 3 2; }

/* ---------- drzewo rozprzestrzeniania: krawędź niesie pewność, kolumna niesie czas ---------- */
.diagram-spread-guide { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 4; }
.diagram-spread-daytag { position: absolute; top: 0; transform: translateX(-50%); height: 16px; padding: 0 8px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line-2); font-family: var(--mono); font-size: 10px; line-height: 14px; color: var(--label); white-space: nowrap; }
.diagram-spread-edge { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diagram-spread-edge.is-likely { stroke: var(--muted); stroke-width: 1.2; }
.diagram-spread-edge.is-guess { stroke: var(--label); stroke-width: 1.2; stroke-dasharray: 4 3; }
.diagram-spread-arrow { fill: var(--ink-2); stroke: none; }
.diagram-spread-arrow.is-likely { fill: var(--muted); }
.diagram-spread-arrow.is-guess { fill: var(--label); }
.diagram-spread-key { width: 16px; height: 0; flex: 0 0 16px; border-top: 2px solid var(--ink-2); }
.diagram-spread-key.is-likely { border-top: 1.2px solid var(--muted); }
.diagram-spread-key.is-guess { border-top: 1.2px dashed var(--label); }

/* ---------- gwiazda wspólnego źródła: promień o grubości siły powiązania ---------- */
.diagram-star-ray { fill: none; stroke: var(--line-input); stroke-linecap: round; }
.diagram-star-ray.is-ill { stroke: var(--danger-line); }
.diagram-star-hub { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 132px; height: 56px; padding: 0 8px; border-radius: var(--radius); background: var(--chrome); color: var(--chrome-ink); text-align: center; box-shadow: var(--shadow); z-index: 2; }
.diagram-star-hub.is-weak { width: 118px; height: 52px; background: var(--surface); border: 1px solid var(--line-input); color: var(--ink); box-shadow: var(--shadow-sm); }
.diagram-star-hub-name { font-size: 12px; font-weight: 600; line-height: 1.2; }
.diagram-star-hub-meta { font-family: var(--mono); font-size: 10px; color: var(--chrome-muted); }
.diagram-star-hub.is-weak .diagram-star-hub-meta { color: var(--muted); }
.diagram-star-node { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 11px; color: var(--ink-2); white-space: nowrap; z-index: 1; }
.diagram-star-node.is-w { transform: translate(-100%, -50%); }
.diagram-star-node.is-e { transform: translate(0, -50%); }
.diagram-star-node.is-ill { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-text); font-weight: 600; }
.diagram-star-val { font-family: var(--mono); font-size: 10px; color: var(--label); }
.diagram-star-node.is-ill .diagram-star-val { color: var(--danger-text); }
.diagram-star-cap { position: absolute; transform: translateX(-50%); text-align: center; white-space: nowrap; font-size: 11px; line-height: 1.45; color: var(--muted); }
.diagram-star-cap-main { display: block; font-size: 12px; font-weight: 600; color: var(--ink); }
.diagram-star-key { width: 16px; height: 0; flex: 0 0 16px; border-top: 5px solid var(--line-input); }
.diagram-star-key.is-thin { border-top-width: 1.4px; }

/* ---------- diagram z tekstu (Mermaid) ---------- */
/* Tekst w <pre class="diagram-mermaid-code"> rysuje biblioteka mermaid.min.js (kopia obok ui.css),
   wywołana z ui.js kolorami z tokenów. Dopóki nie narysuje, widać źródło czcionką mono. */
.diagram-mermaid { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; overflow: auto; color: var(--ink); }
.diagram-mermaid.is-plain { border: 0; padding: 0; background: transparent; }
.diagram-mermaid-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.diagram-mermaid-title { font-size: 12.5px; font-weight: 600; }
.diagram-mermaid-kind { font-size: var(--fs-label); letter-spacing: .6px; text-transform: uppercase; color: var(--label); }
.diagram-mermaid-code { margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.45; color: var(--muted); white-space: pre; }
.diagram-mermaid-code[data-processed] { font: inherit; color: inherit; white-space: normal; display: flex; justify-content: center; }
.diagram-mermaid svg { max-width: 100%; height: auto; display: block; }
/* biblioteka nazywa etykiety węzłów .label, jak etykieta pola w base; tu wraca zwykły tekst */
.diagram-mermaid .label, .diagram-mermaid foreignObject span, .diagram-mermaid foreignObject p { font: 13px var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.diagram-mermaid-foot { margin-top: 8px; font-size: 11px; color: var(--muted); }
.diagram-mermaid-src { margin: 10px 0 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); font-family: var(--mono); font-size: 11.5px; line-height: 1.45; color: var(--ink-2); white-space: pre; overflow: auto; }


/* ===== avatar: Avatary ===== */
/* avatar: koła z inicjałami i zdjęciem, stos osób, kropka obecności, wybór przypisanego, kwadrat firmy.
   Rozszerza .avatar, .avatar-xs/-sm/-md/-lg/-xl, .avatar-square, .avatar-light, .avatar-neutral z base.css i nigdy ich nie nadpisuje. */

/* ---------- rusztowanie podglądu: wariant z podpisem pod spodem ---------- */
.avatar-demo { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.avatar-demo-left { align-items: flex-start; }
.avatar-demo-label { font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); white-space: nowrap; }
.avatar-demo-row { gap: 18px; align-items: flex-start; }
.avatar-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- avatar z nazwą i drugą linią ---------- */
.avatar-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.avatar-name-text { display: flex; flex-direction: column; min-width: 0; }
.avatar-name-main { font-size: var(--fs-sm); line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar-name-main.muted { color: var(--muted); }
.avatar-name-sub { font-size: 11px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar-name-strong .avatar-name-main { font-weight: 600; }
.avatar-name-lg { gap: 10px; }
.avatar-name-lg .avatar-name-main { font-size: var(--fs); font-weight: 600; }

/* ---------- stos: nakładka 6px, obwódka w kolorze tła ---------- */
.avatar-group { display: inline-flex; align-items: center; }
.avatar-group .avatar { margin-left: -6px; box-shadow: 0 0 0 1.5px var(--surface); }
.avatar-group .avatar:first-child { margin-left: 0; }
.avatar-group-more { background: var(--neutral-soft); color: var(--muted); font-weight: 600; letter-spacing: 0; cursor: pointer; }
.avatar-group-more:hover, .avatar-group-more.is-hover { background: var(--line); color: var(--ink-2); }
.avatar-group-caption { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }

/* ---------- obecność: kropka .dot z base w prawym dolnym rogu ---------- */
.avatar-presence { position: relative; display: inline-flex; flex: 0 0 auto; }
.avatar-presence .dot { position: absolute; right: 0; bottom: 0; box-shadow: 0 0 0 1.5px var(--surface); }
.avatar-presence-lg .dot { right: 1px; bottom: 1px; }

/* ---------- wybór przypisanego: kotwica plus otwarte menu osób ---------- */
.avatar-assignee { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 6px 0 3px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; cursor: pointer; user-select: none; }
.avatar-assignee:hover, .avatar-assignee.is-hover { background: var(--hover-neutral); }
.avatar-assignee.is-open { background: var(--surface); border-color: var(--line-input); }
.avatar-assignee .icon { width: 11px; height: 11px; color: var(--label); }
.avatar-assignee-empty { color: var(--muted); }
.avatar-assignee-menu { width: 244px; margin-top: 4px; }
.avatar-assignee-role { margin-left: auto; padding-left: 12px; font-size: 11px; color: var(--label); }

/* ---------- nieprzypisane: przerywana obwódka zamiast tła ---------- */
.avatar-placeholder { background: transparent; border: 1px dashed var(--line-input); color: var(--label); }
.avatar-placeholder .icon { width: 14px; height: 14px; }
.avatar-placeholder.avatar-sm .icon { width: 11px; height: 11px; }
.avatar-placeholder.avatar-lg .icon { width: 18px; height: 18px; }
.avatar-placeholder.avatar-xl .icon { width: 24px; height: 24px; }

/* ---------- edycja zdjęcia: nakładka aparatu na najechaniu ---------- */
.avatar-editable { position: relative; display: inline-flex; border-radius: 50%; cursor: pointer; flex: 0 0 auto; }
.avatar-editable-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--overlay); color: var(--chrome-ink-bright); opacity: 0; transition: opacity .12s; }
.avatar-editable-overlay .icon { width: 18px; height: 18px; }
.avatar-editable:hover .avatar-editable-overlay, .avatar-editable.is-hover .avatar-editable-overlay, .avatar-editable-overlay.is-busy { opacity: 1; }
.avatar-editable-panel { display: flex; align-items: center; gap: 14px; min-width: 0; }
.avatar-editable-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }

/* ---------- firma: kafelek kwadratowy, nie koło ---------- */
.avatar-company { border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-weight: 700; letter-spacing: 0; }
.avatar-company.avatar-lg, .avatar-company.avatar-xl { border-radius: var(--radius-lg); }
.avatar-company .icon { width: 15px; height: 15px; stroke-width: 1.5; }
.avatar-company.avatar-lg .icon { width: 20px; height: 20px; }
.avatar-company-mark { background: var(--chrome); border-color: var(--chrome); color: var(--chrome-accent-text); }
.avatar-company-soft { background: var(--accent-soft); border-color: var(--accent-soft-line); color: var(--accent-text); }

/* ---------- uzupełnienia: karta osoby przy avatarze, pole wyboru wielu osób ---------- */

/* karta osoby wywołana z samego koła: kotwica podświetla to koło, dymek .popover wisi pod nim */
.avatar-hover { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.avatar-hover-anchor { display: flex; align-items: center; gap: 12px; padding-left: 10px; min-width: 0; }
.avatar-group .avatar-hover-on { box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--accent); }
.avatar-hover-card { margin-top: 8px; }
.avatar-hover-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; }
.avatar-hover-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.avatar-hover-role { margin-top: 1px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.avatar-hover-here { margin: 0 12px 9px; padding: 5px 8px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-text); font-size: 11px; line-height: 1.4; }
.avatar-hover-rows { display: grid; gap: 1px; padding: 0 12px 10px; }
.avatar-hover-row { display: flex; align-items: center; gap: 8px; height: 22px; font-size: 12px; color: var(--ink-2); }
.avatar-hover-row .icon { width: 13px; height: 13px; flex: 0 0 auto; color: var(--label); }
.avatar-hover-row .mono { font-size: 11.5px; color: var(--ink); }
.avatar-hover-row.is-muted { color: var(--muted); }

/* pole z wieloma osobami: chipy z twarzami w .field-multi, pod nimi lista z checkboxami */
.avatar-chip { padding-left: 3px; }
.avatar-multi-head { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px 3px; }
.avatar-multi-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--label); }
.avatar-multi-box { width: 13px; height: 13px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.avatar-multi-sum { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }


/* ===== icon: Ikony ===== */
/* icon: rodzina ikon - zestaw symboli ze sprite'a, ikona z etykietą, typy plików, chevron,
   sortowanie w nagłówku, znaczek programu, licznik na ikonie, uchwyt, kropki statusu,
   rozmiary i dzwonek. Blok .icon oraz rozmiary .icon-12 do .icon-32 są w base.css. */

/* ---------- rusztowanie podglądów: rząd z podpisem po lewej ---------- */
.icon-demo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.icon-demo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-width: 0; }
.icon-demo-cap { flex: 0 0 104px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.icon-demo-note { font-size: 11px; color: var(--muted); }
.icon-demo-dark { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--radius); background: var(--chrome-2); color: var(--chrome-dim); }
.icon-demo-dark.is-spaced { gap: 20px; padding: 8px 14px; }
.icon-demo-dark .icon-label-v { color: var(--chrome-dim); }
.icon-demo-dark .icon-label-v .icon { color: inherit; }

/* ---------- zestaw ze sprite'a: kafelek 84px, ikona 20px, id pod spodem ---------- */
.icon-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 2px; }
.icon-set-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.icon-set-item { height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 0 3px; border-radius: var(--radius); color: var(--ink-2); cursor: default; }
.icon-set-item:hover, .icon-set-item.is-hover { background: var(--surface-2); color: var(--ink); }
.icon-set-name { max-width: 100%; font-family: var(--mono); font-size: 10px; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-set-item:hover .icon-set-name, .icon-set-item.is-hover .icon-set-name { color: var(--muted); }

/* ---------- przycisk-ikona: sam przycisk to .btn-icon z base, tu tylko dymek ---------- */
.icon-btn-hold { position: relative; display: inline-flex; }
.icon-btn-tip { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px; border-radius: var(--radius); background: var(--chrome); color: var(--chrome-ink); font-size: 11.5px; white-space: nowrap; box-shadow: var(--shadow); z-index: 5; }
.icon-btn-tip::before { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; background: var(--chrome); transform: rotate(45deg); }

/* ---------- ikona z etykietą ---------- */
.icon-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); min-width: 0; }
.icon-label .icon { width: 13px; height: 13px; color: var(--label); }
.icon-label-lg { gap: 8px; font-size: var(--fs); }
.icon-label-lg .icon { width: 16px; height: 16px; }
.icon-label-strong { color: var(--ink); font-weight: 600; }
.icon-label-strong .icon { color: var(--accent-text); }
.icon-label-v { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 68px; height: 46px; font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--ink-2); }
.icon-label-v .icon { width: 17px; height: 17px; color: var(--muted); }

/* ---------- typy plików: jedna kreska var(--label), bez tęczy formatów ---------- */
.icon-file { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--fs-sm); color: var(--ink); }
.icon-file .icon { width: 14px; height: 14px; color: var(--label); }
.icon-file-list { display: flex; flex-direction: column; }
.icon-file-row { display: grid; grid-template-columns: 1fr 72px 118px; align-items: center; gap: 12px; height: 28px; border-bottom: 1px solid var(--line-3); }
.icon-file-row:last-child { border-bottom: 0; }
.icon-file-row.is-head { height: 22px; }
.icon-file-row.is-head .icon-file-size { font-family: var(--sans); font-size: var(--fs-label); color: var(--label); }
.icon-file-size { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; }
.icon-file-sym { font-family: var(--mono); font-size: 10.5px; color: var(--label); }

/* ---------- chevron rozwijania: zamknięty w prawo, otwarty obrócony o 90 stopni ---------- */
.icon-chevron { width: 11px; height: 11px; color: var(--label); flex: 0 0 auto; transition: transform .12s ease; }
.icon-chevron.is-open { transform: rotate(90deg); }
.icon-chevron.is-empty { visibility: hidden; }
.icon-chevron-tree { display: flex; flex-direction: column; }
.icon-chevron-row { display: flex; align-items: center; gap: 7px; height: 26px; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.icon-chevron-row:hover .icon-chevron, .icon-chevron-row.is-hover .icon-chevron { color: var(--ink-2); }
.icon-chevron-row .icon { width: 14px; height: 14px; color: var(--label); }
.icon-chevron-row .icon-chevron { width: 11px; height: 11px; }
.icon-chevron-row.is-selected { color: var(--accent-text); font-weight: 600; }
.icon-chevron-sub { padding-left: 18px; }
.icon-chevron-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.icon-chevron-head { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.icon-chevron-head .icon-chevron { margin-left: auto; }
.icon-chevron-body { padding: 8px 10px 10px; border-top: 1px solid var(--line-3); font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------- sortowanie: chevron przy nazwie kolumny, tylko na kolumnie sortującej ---------- */
.icon-sort-head { display: inline-flex; align-items: center; gap: 5px; color: inherit; cursor: pointer; }
.icon-sort-head:hover, .icon-sort-head.is-hover { color: var(--ink); }
.icon-sort { width: 12px; height: 12px; color: var(--accent-text); flex: 0 0 auto; }
.icon-sort.is-idle { color: var(--label); opacity: 0; }
.icon-sort-head:hover .icon-sort.is-idle, .icon-sort-head.is-hover .icon-sort.is-idle { opacity: 1; }
.icon-sort-rank { font-family: var(--mono); font-size: 9.5px; color: var(--label); }

/* ---------- znaczek programu: kwadrat z literą, ten sam kształt od favicona po instalator ---------- */
.icon-app-mark { width: 20px; height: 20px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; user-select: none; -webkit-user-select: none; }
.icon-app-mark-16 { width: 16px; height: 16px; border-radius: 4px; font-size: 10px; }
.icon-app-mark-32 { width: 32px; height: 32px; border-radius: 8px; font-size: 19px; }
.icon-app-mark-tab { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px 0 8px; border: 1px solid var(--line); border-bottom: 0; border-radius: 5px 5px 0 0; background: var(--surface-2); font-size: 11.5px; color: var(--ink-2); }
.icon-app-mark-tile { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: var(--radius); background: var(--chrome); color: var(--chrome-ink); font-size: 12.5px; font-weight: 600; }

/* ---------- licznik na ikonie: kółko 14px w prawym górnym rogu ---------- */
.icon-badge-host { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.icon-rail-badge { position: absolute; top: -6px; right: -8px; min-width: 14px; height: 14px; padding: 0 4px; border-radius: 7px; background: var(--danger); color: var(--danger-ink); font-size: 9px; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; }
.icon-rail-badge.is-warn { background: var(--warn); color: var(--warn-ink); }
.icon-rail-badge.is-quiet { background: var(--neutral-dot); color: var(--neutral-ink); }
.icon-rail-badge-dot { position: absolute; top: -2px; right: -3px; width: 7px; height: 7px; border-radius: 4px; background: var(--danger); }

/* ---------- uchwyt przeciągania ---------- */
.icon-drag { width: 12px; height: 12px; color: var(--label); cursor: grab; flex: 0 0 auto; }
.icon-drag:hover, .icon-drag.is-hover { color: var(--ink-2); }
.icon-drag.is-grabbing { color: var(--accent-text); cursor: grabbing; }
.icon-drag-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.icon-drag-row { display: grid; grid-template-columns: 12px 1fr 44px 88px; align-items: center; gap: 12px; height: 32px; padding: 0 10px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-sm); }
.icon-drag-row:last-child { border-bottom: 0; }
.icon-drag-row.is-hover { background: var(--hover-neutral); }
.icon-drag-row.is-dragging { position: relative; z-index: 2; border-bottom-color: transparent; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.icon-drag-line { height: 2px; margin: -1px 10px; border-radius: 1px; background: var(--accent); }

/* ---------- kropki statusu: kolor niesie znaczenie, kształt jest zawsze ten sam ---------- */
.icon-status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--ink-2); }
.icon-status-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.icon-status-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.icon-status-row { display: grid; grid-template-columns: 132px 1fr 96px; align-items: center; gap: 12px; height: 28px; padding: 0 10px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-sm); }
.icon-status-row:last-child { border-bottom: 0; }
.icon-status-row.is-muted { color: var(--label); }
.icon-status-hint { font-size: 11px; color: var(--muted); }

/* ---------- rozmiary: 13 w belce, 16 w menu, 17 w szynie, 20 w nagłówku ---------- */
.icon-sizes-ruler { display: flex; align-items: flex-end; gap: 22px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-3); }
.icon-sizes-item { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--ink-2); }
.icon-sizes-px { font-family: var(--mono); font-size: 10px; color: var(--label); }
.icon-sizes-ctx { display: flex; align-items: center; gap: 8px; }
.icon-sizes-menu { width: 190px; }

/* ---------- dzwonek: 16px w pasku, licznik jak na ikonie, lista pod spodem ---------- */
.icon-bell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.icon-bell-host { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; padding: 0 4px 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); font-size: 12px; color: var(--muted); }
.icon-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius); color: var(--muted); cursor: pointer; }
.icon-bell:hover, .icon-bell.is-hover, .icon-bell.is-open { background: var(--hover-neutral); color: var(--ink); }
.icon-bell .icon { width: 16px; height: 16px; }
.icon-bell-count { position: absolute; top: 1px; right: 0; min-width: 14px; height: 14px; padding: 0 4px; border: 1.5px solid var(--surface-2); border-radius: 8px; background: var(--danger); color: var(--danger-ink); font-size: 9px; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; }
.icon-bell-pop { position: absolute; top: calc(100% + 5px); right: -4px; width: 296px; padding: 0; z-index: 10; }
.icon-bell-head { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--line-3); }
.icon-bell-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line-3); cursor: pointer; }
.icon-bell-item:hover, .icon-bell-item.is-hover { background: var(--hover-neutral); }
.icon-bell-item .dot { margin-top: 5px; }
.icon-bell-title { font-size: var(--fs-sm); color: var(--ink); line-height: 1.35; white-space: normal; }
.icon-bell-time { margin-top: 2px; font-family: var(--mono); font-size: 10.5px; color: var(--label); }

/* ---------- uzupełnienia: nakładka stanu na ikonie, strzałki trendu ---------- */

/* nakładka: mały znacznik stanu w dolnym rogu ikony, host to .icon-badge-host wyżej */
.icon-overlay { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 6px; border: 1.5px solid var(--surface); background: var(--neutral-dot); color: var(--neutral-ink); display: flex; align-items: center; justify-content: center; }
.icon-overlay .icon { width: 7px; height: 7px; stroke-width: 2.6; }
.icon-overlay.is-warn { background: var(--warn); color: var(--warn-ink); }
.icon-overlay.is-ok { background: var(--accent); color: var(--accent-ink); }
.icon-overlay.is-danger { background: var(--danger); color: var(--danger-ink); }
.icon-overlay.is-info { background: var(--info); color: var(--info-ink); }
.icon-overlay-plain { right: -2px; bottom: -2px; width: 8px; height: 8px; border-radius: 4px; }
.icon-overlay-dark { border-color: var(--chrome-2); }
.icon-overlay-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.icon-overlay-row { display: grid; grid-template-columns: 1fr 296px; align-items: center; gap: 12px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-sm); }
.icon-overlay-row:last-child { border-bottom: 0; }
.icon-overlay-name { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); }
.icon-overlay-mean { font-size: 11.5px; color: var(--muted); }

/* trend: strzałka niesie kierunek, kolor niesie ocenę, i te dwie rzeczy ustawia się osobno */
.icon-trend { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.icon-trend .icon { width: 12px; height: 12px; }
.icon-trend.is-good { color: var(--accent-text); }
.icon-trend.is-bad { color: var(--danger-text); }
.icon-trend.is-flat { font-weight: 400; color: var(--label); }
.icon-trend-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.icon-trend-row { display: grid; grid-template-columns: 1fr 116px 92px 128px; align-items: center; gap: 12px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-sm); color: var(--ink); }
.icon-trend-row:last-child { border-bottom: 0; }
.icon-trend-row.is-head { height: 24px; }
.icon-trend-val { font-family: var(--mono); font-size: 12px; color: var(--ink); text-align: right; }
.icon-trend-rule { font-size: 11px; color: var(--muted); }


/* ===== system: Ekrany systemowe Tauri ===== */
/* system: ekrany systemowe programu na pulpit (Tauri) - powłoka okna dialogowego, ekran startowy,
   zasobnik, dymek powiadomienia i miniatury motywu, czyli to, czego nie ma w pozostałych rodzinach. */

/* ---------- powłoka okna systemowego ----------
   Osobne okno webview: własny pasek .titlebar-dialog z góry, .dialog-body w środku,
   .dialog-foot z przyciskami na dole. Cień mocniejszy niż w kartach, bo okno leży nad pulpitem. */
.sys-win { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-lg); overflow: hidden; }
.sys-win-md { width: 440px; flex: 0 0 auto; }

/* scena pulpitu pod oknem: używana, gdy w kadrze jest jeszcze coś poza oknem (baner) */
.sys-stage { display: flex; align-items: center; justify-content: center; padding: 20px 16px; background: var(--canvas); }

/* ---------- części wspólne wnętrza okna ---------- */
.sys-sec { margin-top: 14px; }
.sys-sec:first-child { margin-top: 0; }
.sys-sec-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.sys-sec-head .label { flex: 0 0 auto; }
.sys-box { border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.sys-scroll { max-height: 132px; overflow: auto; }
.sys-hint { margin-top: 8px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.sys-choices { display: grid; gap: 6px; }

/* znaczek programu: ten sam kwadrat w kilku rozmiarach (splash, powitanie, dymek, zasobnik) */
.sys-mark { background: var(--accent); color: var(--accent-ink); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sys-mark-18 { width: 18px; height: 18px; border-radius: 4px; font-size: 11px; }
.sys-mark-44 { width: 44px; height: 44px; border-radius: 10px; font-size: 20px; }
.sys-mark-48 { width: 48px; height: 48px; border-radius: 12px; font-size: 22px; }

/* ---------- ekran startowy ---------- */
.sys-splash { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 36px; background: var(--surface); text-align: center; }
.sys-splash-name { margin-top: 13px; font-size: 18px; font-weight: 700; letter-spacing: -.2px; color: var(--ink); }
.sys-splash-ver { margin-top: 3px; font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); }
.sys-splash-bar { display: flex; width: 100%; margin-top: 24px; }
.sys-splash-status { margin-top: 9px; font-size: var(--fs-sm); color: var(--muted); }
.sys-splash-foot { position: absolute; left: 0; right: 0; bottom: 10px; font-size: 11px; color: var(--label); }

/* ---------- aktualizacja: skok wersji i notatki wydania ---------- */
.sys-ver { display: flex; align-items: center; gap: 9px; }
.sys-ver .icon { width: 14px; height: 14px; color: var(--label); flex: 0 0 auto; }
.sys-ver-from { font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); }
.sys-ver-to { font-family: var(--mono); font-size: 17px; font-weight: 700; line-height: 1.1; color: var(--accent-text); }
.sys-notes { display: grid; gap: 5px; margin-top: 8px; }
.sys-note { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
.sys-note::before { content: ""; flex: 0 0 4px; width: 4px; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--accent-soft-line); }

/* ---------- prośba o uprawnienie: co, do czego, po co ---------- */
.sys-perm { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-3); }
.sys-perm:first-child { border-top: 0; padding-top: 2px; }
.sys-perm-icon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--radius); background: var(--neutral-soft); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.sys-perm-icon .icon { width: 15px; height: 15px; }
.sys-perm-main { flex: 1; min-width: 0; }
.sys-perm-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sys-perm-target { margin-top: 2px; font-family: var(--mono); font-size: 11px; color: var(--ink-2); word-break: break-all; }
.sys-perm-why { margin-top: 3px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* ---------- zasobnik systemowy: fragment paska zadań z ikoną programu ---------- */
.sys-tray-stage { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.sys-tray { display: flex; align-items: center; gap: 2px; height: 34px; padding: 0 6px 0 8px; border-radius: var(--radius); background: var(--chrome); box-shadow: var(--shadow-sm); }
.sys-tray-btn { width: 26px; height: 26px; border-radius: 3px; display: flex; align-items: center; justify-content: center; color: var(--chrome-dim); cursor: pointer; }
.sys-tray-btn .icon { width: 14px; height: 14px; }
.sys-tray-btn:hover, .sys-tray-btn.is-hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.sys-tray-btn.is-active { background: var(--chrome-3); color: var(--chrome-ink); }
.sys-tray-clock { padding: 0 4px 0 10px; font-size: 10.5px; line-height: 1.3; text-align: right; color: var(--chrome-ink-2); }
.sys-tray-menu { min-width: 224px; }
.sys-tray-menu .menu-item.is-default { font-weight: 600; color: var(--ink); }

/* ---------- dymek powiadomienia systemu (Windows: prawy dolny róg) ---------- */
.sys-toast { width: 344px; margin-left: auto; padding: 11px 12px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-lg); }
.sys-toast-head { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.sys-toast-time { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.sys-toast-x { width: 20px; height: 20px; margin: -3px -4px 0 2px; border-radius: 3px; display: flex; align-items: center; justify-content: center; color: var(--label); cursor: pointer; flex: 0 0 auto; }
.sys-toast-x:hover, .sys-toast-x.is-hover { background: var(--hover-neutral); color: var(--ink); }
.sys-toast-x .icon { width: 11px; height: 11px; }
.sys-toast-main { display: flex; gap: 11px; margin-top: 9px; }
.sys-toast-body { flex: 1; min-width: 0; }
.sys-toast-title { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.sys-toast-text { margin-top: 3px; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.sys-toast-actions { display: flex; gap: 8px; margin-top: 11px; }
.sys-toast-actions .btn { flex: 1; }

/* ---------- ustawienia skrótów ---------- */
.sys-keys td { height: 34px; }
.sys-keys tbody tr.is-warn td { background: var(--warn-soft); }
.sys-keys-combo { display: flex; align-items: center; gap: 3px; }
.sys-keys-plus { font-size: 10px; color: var(--label); }
.sys-keys-act { width: 88px; text-align: right; }

/* ---------- motyw: miniatura okna programu ----------
   Ciemne wartości wpisane wprost, bo tokeny motywu ciemnego żyją pod [data-theme="dark"],
   a miniatura musi pokazać ciemny motyw na jasnej stronie. */
.sys-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sys-theme { display: flex; flex-direction: column; gap: 7px; cursor: pointer; }
.sys-theme-prev { height: 64px; display: flex; flex-direction: column; border: 1px solid var(--line-input); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.sys-theme.is-selected .sys-theme-prev { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.sys-theme-bar { height: 11px; flex: 0 0 11px; background: var(--chrome); }
.sys-theme-main { flex: 1; min-height: 0; display: flex; }
.sys-theme-side { width: 20px; flex: 0 0 20px; background: var(--surface-2); border-right: 1px solid var(--line-3); }
.sys-theme-body { flex: 1; min-width: 0; padding: 7px; display: flex; flex-direction: column; gap: 5px; background: var(--canvas); }
.sys-theme-line { height: 5px; border-radius: 3px; background: var(--line); }
.sys-theme-line.is-short { width: 58%; }
.sys-theme-prev.is-dark .sys-theme-side { background: #1a2235; border-right-color: #2a3450; }  /* literal: miniatura ciemnego motywu ma być ciemna także w trybie jasnym */
.sys-theme-prev.is-dark .sys-theme-body { background: #0f1524; }  /* literal: miniatura ciemnego motywu ma być ciemna także w trybie jasnym */
.sys-theme-prev.is-dark .sys-theme-line { background: #2a3450; }  /* literal: miniatura ciemnego motywu ma być ciemna także w trybie jasnym */
.sys-theme-prev.is-auto .sys-theme-body { background: linear-gradient(90deg, var(--canvas) 0 50%, #0f1524 50%); }  /* literal: miniatura ciemnego motywu ma być ciemna także w trybie jasnym */
.sys-theme-prev.is-auto .sys-theme-line { background: linear-gradient(90deg, var(--line) 0 50%, #2a3450 50%); }  /* literal: miniatura ciemnego motywu ma być ciemna także w trybie jasnym */

/* ---------- pierwsze uruchomienie: powitanie ---------- */
.sys-welcome { display: flex; align-items: center; gap: 14px; }
.sys-welcome-title { font-size: 15px; font-weight: 700; letter-spacing: -.1px; color: var(--ink); }
.sys-welcome-sub { margin-top: 3px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }

/* ---------- uzupełnienia: migracja bazy, brak miejsca na dysku, przeniesienie licencji ---------- */

/* zajętość woluminu: nazwa dysku, pasek z base i dwie liczby, które muszą się zgadzać z sobą */
.sys-disk { display: grid; gap: 6px; padding: 10px 11px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-3); }
.sys-disk-head { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.sys-disk-name { font-family: var(--mono); }
.sys-disk-free { margin-left: auto; flex: 0 0 auto; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; color: var(--danger-text); }
.sys-disk-foot { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--muted); }
.sys-disk-need { margin-left: auto; flex: 0 0 auto; font-family: var(--mono); font-weight: 600; color: var(--danger-text); }

/* wybór stanowiska do zwolnienia: przycisk radiowy w wierszu listy */
.sys-seat-pick { width: 14px; height: 14px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }


/* ===== screen: Szablony ekranów ===== */
/* screen: szkielet pełnego ekranu 1280x760 (pasek okna, szyna, belki, treść, stopka) plus te
   klocki, których nie ma w żadnej innej rodzinie: sztabka udziałów, plansza kafelków, tory
   kanban, siatka miesiąca, kartka wydruku i karta logowania. Reszta ekranu to cudze klasy. */

/* ---------- szkielet ---------- */
.screen {
  display: flex; flex-direction: column;
  width: 100%; height: 100%; min-height: 0;
  background: var(--canvas); color: var(--ink);
  font: var(--fs)/1.45 var(--sans);
  overflow: hidden;
}
.screen-body { display: flex; flex: 1; min-height: 0; min-width: 0; }
.screen-main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; background: var(--canvas); }
.screen-content { flex: 1; min-height: 0; min-width: 0; overflow: auto; }
.screen-surface { background: var(--surface); }
.screen-pad { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.screen-row { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.screen-side { display: flex; flex-direction: column; flex: 0 0 var(--w-inspector); width: var(--w-inspector); min-height: 0; background: var(--surface); }
.screen-side-sm { flex: 0 0 var(--w-master); width: var(--w-master); }
.screen-list { flex: 0 0 var(--w-master); width: var(--w-master); min-height: 0; }
.screen-center { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; padding: 24px; }

/* ---------- nagłówek treści: tytuł ekranu z akapitem (pierwsze kroki, pusty program) ---------- */
.screen-lead { max-width: 68ch; }
.screen-lead-title { font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--ink); }
.screen-lead-text { margin-top: 5px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.screen-tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }

/* ---------- sztabka udziałów: jeden wiersz na klienta, trzy segmenty w torze ---------- */
.screen-bars { display: flex; flex-direction: column; gap: 8px; }
.screen-bar { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); }
.screen-bar-code { flex: 0 0 92px; width: 92px; font-family: var(--mono); font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-bar-track { display: flex; flex: 1; min-width: 0; height: 16px; border-radius: 3px; overflow: hidden; background: var(--line-3); }
.screen-bar-fill { background: var(--neutral-dot); }
.screen-bar-fill.is-ok { background: var(--accent); }
.screen-bar-fill.is-warn { background: var(--warn); }
.screen-bar-fill.is-danger { background: var(--danger); }
.screen-bar-val { flex: 0 0 122px; width: 122px; font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; }

/* ---------- plansza: kondygnacje z kafelkami na płótnie w kropki 24px ---------- */
.screen-canvas {
  flex: 1; min-height: 0; overflow: auto; padding: 16px 18px;
  background-color: var(--canvas);
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
}
.screen-floor { margin-bottom: 16px; }
.screen-floor-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.screen-floor-name { font-size: 12px; font-weight: 600; color: var(--ink); }
.screen-floor-meta { font-size: 11px; color: var(--muted); }
.screen-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.screen-tile {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  width: 86px; height: 38px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.screen-tile-code { font-family: var(--mono); font-size: 11.5px; font-weight: 700; line-height: 1.1; }
.screen-tile-sub { font-family: var(--mono); font-size: 10px; opacity: .85; line-height: 1.1; }
.screen-tile.is-ok { background: var(--accent-soft); border-color: var(--accent-soft-line); color: var(--accent-text); }
.screen-tile.is-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
.screen-tile.is-muted { background: var(--neutral-soft); border-color: var(--line); color: var(--muted); }
.screen-tile.is-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-text); }
.screen-tile.is-selected { background: var(--chrome); border-color: var(--chrome); color: var(--chrome-ink); box-shadow: 0 0 0 2px var(--focus-ring); }

/* ---------- kanban: tory w poziomie, karty w torze ---------- */
.screen-kanban { display: flex; flex: 1; gap: 12px; min-height: 0; padding: 14px 16px; overflow-x: auto; }
.screen-lane { display: flex; flex-direction: column; flex: 0 0 268px; width: 268px; min-height: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.screen-lane-head { display: flex; align-items: center; gap: 8px; flex: 0 0 34px; height: 34px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--line-2); font-size: 12px; font-weight: 600; color: var(--ink); }
.screen-lane-count { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.screen-lane-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.screen-lane-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--line-2); font-size: 11px; color: var(--muted); }
.screen-lane-foot .num { margin-left: auto; color: var(--ink-2); }
.screen-lane.is-warn .screen-lane-head { color: var(--warn-text); }
.screen-lane.is-danger .screen-lane-head { color: var(--danger-text); }

/* ---------- kalendarz miesięczny: 7 kolumn, wiersze równej wysokości ---------- */
.screen-cal { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--surface); }
.screen-cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); flex: 0 0 24px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.screen-cal-dow { padding: 0 8px; line-height: 24px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.screen-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; flex: 1; min-height: 0; }
.screen-cal-day { display: flex; flex-direction: column; gap: 3px; min-height: 0; padding: 4px 6px 5px; border-right: 1px solid var(--line-3); border-bottom: 1px solid var(--line-3); overflow: hidden; }
.screen-cal-day.is-muted { background: var(--surface-3); }
.screen-cal-day.is-muted .screen-cal-num { color: var(--line-input); }
.screen-cal-day.is-today { background: var(--selected); }
.screen-cal-day.is-selected { box-shadow: inset 0 0 0 2px var(--accent); }
.screen-cal-num { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.screen-cal-day.is-today .screen-cal-num { color: var(--accent-text); font-weight: 700; }
.screen-cal-ev { display: flex; align-items: center; gap: 5px; height: 17px; padding: 0 5px; border-radius: 3px; background: var(--neutral-soft); color: var(--ink-2); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen-cal-ev-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Kwota nie skraca się nigdy: ucięta liczba jest gorsza niż ucięta nazwa. */
.screen-cal-ev .num { flex: 0 0 auto; font-size: 10px; margin-left: auto; }
.screen-cal-ev.is-ok { background: var(--accent-soft); color: var(--accent-text); }
.screen-cal-ev.is-warn { background: var(--warn-soft); color: var(--warn-text); }
.screen-cal-ev.is-danger { background: var(--danger-soft); color: var(--danger-text); }
.screen-cal-ev.is-info { background: var(--info-soft); color: var(--info-text); }
.screen-cal-more { padding-left: 5px; font-size: 10.5px; color: var(--label); }

/* ---------- edytor treści: kartka na płótnie ---------- */
.screen-editor { display: flex; justify-content: center; flex: 1; min-height: 0; overflow: auto; padding: 16px; background: var(--canvas); }
.screen-page { width: 700px; flex: 0 0 auto; align-self: flex-start; }

/* ---------- podgląd wydruku: kartka A4 na szarym tle ---------- */
.screen-paper-stage { display: flex; justify-content: center; flex: 1; min-height: 0; overflow: auto; padding: 18px; background: var(--neutral-dot); }
.screen-paper { width: 720px; min-height: 1018px; flex: 0 0 auto; align-self: flex-start; background: var(--surface); box-shadow: var(--shadow-lg); }

/* ---------- logowanie: karta 400px na środku, bez szyny ---------- */
.screen-auth { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; background: var(--canvas); }
.screen-auth-card { width: 400px; padding: 26px 28px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.screen-auth-mark { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.screen-auth-title { text-align: center; font-size: 16px; font-weight: 700; color: var(--ink); }
.screen-auth-sub { text-align: center; margin-top: 4px; margin-bottom: 18px; font-size: 12px; color: var(--muted); }
.screen-auth-fields { display: flex; flex-direction: column; gap: 12px; }
.screen-auth-row { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 14px; font-size: 12px; }
.screen-auth-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-3); font-size: 11px; color: var(--label); }

/* ---------- drobiazgi treści ---------- */
.screen-mark { padding: 0 2px; border-radius: 2px; background: var(--warn-soft); color: var(--warn-text); font-weight: 600; }
.screen-diff { background: var(--warn-soft); }
.screen-diff .num { color: var(--warn-text); font-weight: 600; }

/* ---------- ekran odtwarzania zdarzeń: mapa nad osią czasu, listy po bokach ---------- */
.screen-stage { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; background: var(--surface); }
.screen-map { flex: 1; min-height: 0; }


/* ===== widget: Widżety złożone ===== */
/* widget: widżety złożone. Gotowe narzędzie sklejone z klocków innych rodzin (belka, tabela,
   lista, pole, menu, panel, zakładki) plus własny układ i te fragmenty, których nie ma nigdzie
   indziej: kolumny diffu, dymki czatu, siatka kolorów, płótno podpisu, kreski kodu, pasy godzin. */

/* ---------- szkielet wspólny każdego widżetu ---------- */
.widget { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.widget.is-dark { background: var(--chrome); border-color: var(--chrome-line-2); }
.widget-body { flex: 1; min-height: 0; overflow: auto; }
.widget-cols { flex: 1; min-height: 0; min-width: 0; display: flex; align-items: stretch; }
.widget-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.widget-scroll { flex: 1; min-height: 0; overflow: auto; }
.widget-side { flex: 0 0 220px; width: 220px; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--surface); }
.widget-side-narrow { flex-basis: 200px; width: 200px; }
.widget-side-list { flex-basis: 320px; width: 320px; }
.widget-side-mid { flex-basis: 264px; width: 264px; }
.widget-side-thin { flex-basis: 168px; width: 168px; }
.widget-aside { flex: 0 0 240px; width: 240px; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--surface-3); }
.widget-aside-wide { flex-basis: 300px; width: 300px; }
.widget-foot { flex: 0 0 30px; display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; background: var(--surface-2); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.widget-foot-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.widget-foot .checkbox { font-size: var(--fs-xs); }
.widget-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); white-space: nowrap; }
.widget-bar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.widget-tabs { flex: 0 0 auto; padding: 0 12px; }
.widget-tabs-right { display: flex; align-items: center; gap: 8px; margin-left: auto; align-self: center; }
.widget-sec { padding: 11px 14px; border-bottom: 1px solid var(--line-3); }
.widget-sec-title { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.widget-sec-title .count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--label); }
.widget-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.widget-caption { font-size: 11.5px; color: var(--muted); }
.widget-pad { padding: 12px 14px; }
.widget-grow { flex: 1; min-width: 0; }
.widget-arrow { flex: 0 0 14px; width: 14px; color: var(--line-input); }

/* ---------- log-viewer: mono wiersze pod belką filtrów ---------- */
.widget-log { padding: 4px 0; }
.widget-log-follow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-size: var(--fs-xs); }
.widget-log-follow.is-warn { color: var(--warn-text); }

/* ---------- diff: dwie kolumny wersji dokumentu ---------- */
.widget-diff { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.widget-diff-side { min-width: 0; display: flex; flex-direction: column; overflow: auto; border-right: 1px solid var(--line); }
.widget-diff-side.is-last { border-right: 0; }
.widget-diff-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.widget-diff-head .badge { margin-left: auto; }
.widget-diff-line { display: flex; align-items: stretch; min-height: 20px; font: 11.5px/20px var(--mono); color: var(--ink-2); }
.widget-diff-no { flex: 0 0 40px; width: 40px; padding-right: 9px; text-align: right; color: var(--label); background: var(--surface-3); border-right: 1px solid var(--line-3); user-select: none; }
.widget-diff-sign { flex: 0 0 16px; width: 16px; text-align: center; font-weight: 700; color: var(--label); }
.widget-diff-text { flex: 1; min-width: 0; padding-right: 10px; white-space: pre-wrap; word-break: break-word; }
.widget-diff-line.is-add { background: var(--accent-soft); color: var(--accent-text); }
.widget-diff-line.is-add .widget-diff-no, .widget-diff-line.is-add .widget-diff-sign { background: var(--accent-soft-line); color: var(--accent-text); }
.widget-diff-line.is-del { background: var(--danger-soft); color: var(--danger-text); }
.widget-diff-line.is-del .widget-diff-no, .widget-diff-line.is-del .widget-diff-sign { background: var(--danger-line); color: var(--danger-text); }
.widget-diff-line.is-empty { background: var(--surface-2); }
.widget-diff-line.is-empty .widget-diff-no { color: transparent; }
.widget-diff-word { border-radius: 2px; padding: 0 2px; background: var(--surface); }

/* ---------- chat: dymki, separator dnia, pole z załącznikiem ---------- */
.widget-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface-3); }
.widget-chat-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }
.widget-chat-day { display: flex; align-items: center; gap: 10px; margin: 2px 0; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.widget-chat-day::before, .widget-chat-day::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.widget-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 72%; }
.widget-msg.is-own { margin-left: auto; flex-direction: row-reverse; }
.widget-msg-main { min-width: 0; }
.widget-msg-bubble { padding: 7px 11px; border-radius: 10px 10px 10px 3px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.widget-msg.is-own .widget-msg-bubble { border-radius: 10px 10px 3px 10px; background: var(--chrome); border-color: var(--chrome); color: var(--chrome-ink); }
.widget-msg-file { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 8px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.widget-msg-meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 10.5px; color: var(--label); }
.widget-msg.is-own .widget-msg-meta { justify-content: flex-end; }
.widget-msg-who { font-weight: 600; color: var(--ink-2); }
.widget-composer { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px; background: var(--surface); border-top: 1px solid var(--line); }
.widget-composer .textarea { min-height: 34px; padding: 7px 10px; resize: none; }
.widget-composer-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.widget-composer-hint { font-size: 10.5px; color: var(--label); }

/* ---------- file-manager: drzewo, lista, podgląd ---------- */
.widget-tree { padding: 4px 0; font-size: 12.5px; }
.widget-tree-item { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.widget-tree-item:hover, .widget-tree-item.is-hover { background: var(--hover-neutral); }
.widget-tree-item.is-selected { background: var(--selected); color: var(--accent-text); font-weight: 600; }
.widget-tree-item .icon { width: 14px; height: 14px; color: var(--label); }
.widget-tree-item.is-selected .icon { color: var(--accent-text); }
.widget-tree-twisty { flex: 0 0 12px; width: 12px; display: inline-flex; align-items: center; color: var(--label); }
.widget-tree-twisty .icon { width: 11px; height: 11px; }
.widget-tree-l1 { padding-left: 26px; }
.widget-tree-l2 { padding-left: 44px; }
.widget-tree-count { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.widget-preview { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.widget-preview-thumb { height: 128px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--line-input); }
.widget-preview-thumb .icon { width: 38px; height: 38px; }
.widget-preview-name { font-size: 12.5px; font-weight: 600; color: var(--ink); word-break: break-all; }

/* ---------- import-mapping: kolumna pliku na pole programu ---------- */
.widget-map-row { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line-3); }
.widget-map-row.is-error { background: var(--danger-soft); }
.widget-map-from { flex: 0 0 214px; width: 214px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.widget-map-name { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.widget-map-sample { font-size: 10.5px; color: var(--label); }
.widget-map-arrow { flex: 0 0 14px; width: 14px; color: var(--line-input); }
.widget-map-to { flex: 0 0 226px; width: 226px; }
.widget-map-note { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted); }
.widget-map-head { display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }

/* ---------- permission-matrix: role w kolumnach, moduły w wierszach ---------- */
.widget-matrix th { text-align: center; }
.widget-matrix td { text-align: center; }
.widget-matrix .widget-matrix-name { width: 260px; text-align: left; }
.widget-matrix-mod { font-weight: 600; color: var(--ink); }
.widget-matrix-sub { font-size: 10.5px; color: var(--label); }
.widget-matrix-role { display: block; font-size: 10.5px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--label); }
.widget-matrix tr.is-all td { background: var(--surface-2); }
.widget-matrix tr.is-all .widget-matrix-mod { text-transform: uppercase; font-size: 10.5px; letter-spacing: .8px; color: var(--muted); }

/* ---------- query-builder: warunki i podgląd liczby wyników ---------- */
.widget-query { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.widget-cond { display: flex; align-items: center; gap: 8px; }
.widget-cond-join { flex: 0 0 76px; width: 76px; }
.widget-cond-first { flex: 0 0 76px; width: 76px; text-align: right; padding-right: 6px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.widget-cond-field { flex: 0 0 196px; width: 196px; }
.widget-cond-op { flex: 0 0 152px; width: 152px; }
.widget-cond-val { flex: 1; min-width: 0; }
.widget-query-group { display: flex; flex-direction: column; gap: 8px; margin-left: 84px; padding: 8px 10px 10px; border: 1px solid var(--line-2); border-left: 2px solid var(--accent-soft-line); border-radius: var(--radius); background: var(--surface-3); }
.widget-query-group .widget-cond-first, .widget-query-group .widget-cond-join { flex-basis: 60px; width: 60px; }
.widget-query-group .widget-cond-field { flex-basis: 168px; width: 168px; }
.widget-query-result { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--accent-soft); border-top: 1px solid var(--accent-soft-line); font-size: var(--fs-sm); color: var(--accent-text); }
.widget-query-count { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.widget-query-sql { padding: 8px 14px 12px; font: 11.5px/1.6 var(--mono); color: var(--muted); }

/* ---------- audit-log: kto, kiedy, co, stara na nową ---------- */
.widget-audit-what { color: var(--ink-2); }
.widget-audit-old { display: inline-block; padding: 1px 5px; border-radius: 3px; background: var(--danger-soft); color: var(--danger-text); font-family: var(--mono); font-size: 11.5px; text-decoration: line-through; }
.widget-audit-new { display: inline-block; padding: 1px 5px; border-radius: 3px; background: var(--accent-soft); color: var(--accent-text); font-family: var(--mono); font-size: 11.5px; }
.widget-audit-arrow { margin: 0 5px; color: var(--line-input); }
.widget-audit-who { display: flex; align-items: center; gap: 7px; }

/* ---------- line-items-editor: pozycje faktury z sumami ---------- */
.widget-items td { padding: 0 6px; }
.widget-items th { padding: 0 6px; }
.widget-items .input { height: 24px; font-size: 12px; padding: 0 6px; }
.widget-items-no { width: 30px; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--label); }
.widget-items-name { width: 260px; }
.widget-items-qty { width: 76px; }
.widget-items-price { width: 104px; }
.widget-items-vat { width: 72px; }
.widget-items-sum { width: 110px; font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.widget-items-x { width: 30px; }
.widget-items-add { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line-3); }
.widget-sums { display: flex; justify-content: flex-end; padding: 10px 14px; background: var(--surface-2); border-top: 1px solid var(--line); }
.widget-sums-grid { display: grid; grid-template-columns: auto 120px; gap: 5px 20px; font-size: 12.5px; }
.widget-sums-label { color: var(--muted); }
.widget-sums-val { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.widget-sums-label.is-total { padding-top: 5px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.widget-sums-val.is-total { padding-top: 5px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; }

/* ---------- pdf-viewer: kartka na płótnie plus miniatury stron ---------- */
.widget-sheet { flex: 0 0 auto; align-self: flex-start; width: 430px; padding: 26px 30px 30px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 10.5px; line-height: 1.6; color: var(--ink-2); }
.widget-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--chrome); }
.widget-sheet-title { font-size: 16px; font-weight: 700; letter-spacing: -.2px; color: var(--ink); }
.widget-sheet-sub { margin-top: 2px; color: var(--muted); }
.widget-sheet-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.widget-sheet-label { font-size: 8.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.widget-sheet-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid var(--line-3); }
.widget-sheet-row.is-head { border-bottom-color: var(--line-input); font-weight: 600; color: var(--ink); }
.widget-sheet-total { display: flex; justify-content: flex-end; gap: 16px; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--ink); }
.widget-sheet-foot { margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--line-3); color: var(--label); }
.widget-page-no { width: 46px; flex: 0 0 46px; text-align: center; }
.widget-pages { flex: 0 0 108px; width: 108px; padding: 10px 0; overflow: auto; background: var(--surface-2); border-right: 1px solid var(--line); }

/* ---------- image-gallery: siatka miniatur, duży podgląd, strzałki ---------- */
.widget-gal-grid { flex: 0 0 234px; width: 234px; display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; gap: 8px; padding: 10px; overflow: auto; background: var(--surface); border-right: 1px solid var(--line); }
.widget-gal-thumb { position: relative; height: 54px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--line-input); cursor: pointer; }
.widget-gal-thumb .icon { width: 18px; height: 18px; }
.widget-gal-thumb:hover, .widget-gal-thumb.is-hover { border-color: var(--line-input); }
.widget-gal-thumb.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.widget-gal-no { position: absolute; left: 4px; bottom: 3px; font-family: var(--mono); font-size: 9.5px; color: var(--label); }
.widget-gal-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--chrome-2); }
.widget-gal-canvas { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 18px; }
.widget-gal-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 420px; height: 100%; border-radius: var(--radius); background: var(--chrome-3); border: 1px solid var(--chrome-line); color: var(--chrome-dim); font-size: 11.5px; }
.widget-gal-photo .icon { width: 40px; height: 40px; }
.widget-gal-arrow { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--chrome-3); border: 1px solid var(--chrome-line); color: var(--chrome-ink); cursor: pointer; }
.widget-gal-arrow:hover, .widget-gal-arrow.is-hover { background: var(--chrome-hover); }
.widget-gal-arrow.is-prev { left: 12px; }
.widget-gal-arrow.is-next { right: 12px; }
.widget-gal-bar { flex: 0 0 30px; display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 12px; background: var(--chrome); border-top: 1px solid var(--chrome-line); font-size: var(--fs-xs); color: var(--chrome-muted); }
.widget-gal-bar .widget-title { color: var(--chrome-ink); }

/* ---------- shortcut-editor: akcja, skrót, nagrywanie, konflikt ---------- */
.widget-key-row { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line-3); font-size: 12.5px; }
.widget-key-row:hover, .widget-key-row.is-hover { background: var(--hover-neutral); }
.widget-key-row.is-recording { background: var(--accent-soft); }
.widget-key-row.is-error { background: var(--danger-soft); }
.widget-key-name { flex: 1; min-width: 0; color: var(--ink); }
.widget-key-scope { flex: 0 0 128px; width: 128px; font-size: 11.5px; color: var(--muted); }
.widget-key-combo { flex: 0 0 176px; width: 176px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.widget-key-rec { display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 10px; border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--surface); font-size: 11.5px; color: var(--accent-text); }
.widget-key-conflict { display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--danger-soft); border-bottom: 1px solid var(--danger-line); font-size: 11.5px; color: var(--danger-text); }
.widget-key-conflict .btn { margin-left: auto; }

/* ---------- notification-center: zakładki, grupy dnia, oznacz przeczytane ---------- */
.widget-notify-title { font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.widget-notify-text { margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.widget-notify-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

/* ---------- terminal: ciemne tło, prompt, wyjście, kursor ---------- */
.widget-term-head { flex: 0 0 30px; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 12px; background: var(--chrome-2); border-bottom: 1px solid var(--chrome-line-2); font-size: var(--fs-xs); color: var(--chrome-ink-2); }
.widget-term-head .btn-icon { color: var(--chrome-dim); }
.widget-term-head .btn-icon:hover { background: var(--chrome-hover); color: var(--chrome-ink-bright); }
.widget-term { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px; background: var(--chrome); font: 12px/1.65 var(--mono); color: var(--chrome-ink-2); }
.widget-term-line { white-space: pre-wrap; word-break: break-word; }
.widget-term-line.is-dim { color: var(--chrome-dim); }
.widget-term-line.is-ok { color: var(--chrome-accent-text); }
.widget-term-line.is-error { color: var(--danger-line); }
.widget-term-line.is-warn { color: var(--warn-line); }
.widget-term-prompt { color: var(--chrome-accent-text); user-select: none; }
.widget-term-path { color: var(--info-line); }
.widget-term-cmd { color: var(--chrome-ink-bright); }
.widget-term-cursor { display: inline-block; width: 7px; height: 14px; margin-left: 1px; background: var(--chrome-accent-text); vertical-align: -3px; }
.widget-term-foot { flex: 0 0 26px; display: flex; align-items: center; gap: 12px; height: 26px; padding: 0 12px; background: var(--chrome-2); border-top: 1px solid var(--chrome-line-2); font-size: var(--fs-xs); color: var(--chrome-dim); }

/* ---------- code-editor: numeracja linii, kolorowanie, pasek błędu ---------- */
.widget-code { flex: 1; min-height: 0; overflow: auto; background: var(--surface); font: 12px/20px var(--mono); }
.widget-code-line { display: flex; align-items: stretch; min-height: 20px; }
.widget-code-line.is-active { background: var(--surface-2); }
.widget-code-line.is-error { background: var(--danger-soft); }
.widget-code-no { flex: 0 0 44px; width: 44px; padding-right: 10px; text-align: right; color: var(--label); background: var(--surface-2); border-right: 1px solid var(--line-2); user-select: none; }
.widget-code-line.is-error .widget-code-no { background: var(--danger-line); color: var(--danger-text); }
.widget-code-txt { flex: 1; min-width: 0; padding: 0 12px; white-space: pre; color: var(--ink-2); }
.widget-tok-key { color: var(--info-text); font-weight: 600; }
.widget-tok-str { color: var(--accent-text); }
.widget-tok-num { color: var(--warn-text); }
.widget-tok-punc { color: var(--label); }
.widget-tok-bad { background: var(--danger-line); border-radius: 2px; }
.widget-code-err { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--danger-soft); border-top: 1px solid var(--danger-line); font-size: 11.5px; color: var(--danger-text); }
.widget-code-err .mono { color: inherit; }

/* ---------- rich-editor i markdown: obszar dokumentu ---------- */
.widget-doc { padding: 18px 26px; font-size: 13px; line-height: 1.62; color: var(--ink-2); }
.widget-doc-h { margin-bottom: 8px; font-size: 16px; font-weight: 700; letter-spacing: -.2px; color: var(--ink); }
.widget-doc-h2 { margin: 14px 0 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.widget-doc-p { margin-bottom: 9px; }
.widget-doc-ul { margin: 0 0 9px 18px; list-style: disc; }
.widget-doc-ul li { margin-bottom: 3px; }
.widget-doc-quote { margin: 0 0 9px; padding: 4px 0 4px 12px; border-left: 3px solid var(--accent-soft-line); color: var(--muted); font-style: italic; }
.widget-doc-sel { background: var(--selected); box-shadow: 0 0 0 1px var(--accent-soft-line); }
.widget-doc-caret { display: inline-block; width: 1px; height: 15px; margin-left: 1px; background: var(--ink); vertical-align: -3px; }
.widget-doc-table { width: 100%; margin-bottom: 10px; border-collapse: collapse; font-size: 12px; }
.widget-doc-table th, .widget-doc-table td { padding: 4px 8px; border: 1px solid var(--line); text-align: left; }
.widget-doc-table th { background: var(--surface-2); font-weight: 600; color: var(--ink); }
.widget-split { flex: 1; min-height: 0; min-width: 0; display: flex; background: var(--canvas); }
.widget-md-src { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px; font: 12px/1.7 var(--mono); color: var(--ink-2); white-space: pre-wrap; }
.widget-md-mark { color: var(--info-text); font-weight: 600; }
.widget-md-link { color: var(--link); }

/* ---------- email-client: foldery, lista, treść ---------- */
.widget-mail-folder { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.widget-mail-folder:hover, .widget-mail-folder.is-hover { background: var(--hover-neutral); }
.widget-mail-folder.is-selected { background: var(--selected); color: var(--accent-text); font-weight: 600; }
.widget-mail-folder .icon { width: 14px; height: 14px; color: var(--label); }
.widget-mail-folder.is-selected .icon { color: var(--accent-text); }
.widget-mail-num { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.widget-mail-head { padding: 12px 16px 9px; border-bottom: 1px solid var(--line-3); }
.widget-mail-subject { font-size: 14px; font-weight: 600; color: var(--ink); }
.widget-mail-from { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.widget-mail-addr { font-size: 11.5px; color: var(--muted); }
.widget-mail-when { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--label); }
.widget-mail-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.widget-mail-p { margin-bottom: 10px; }
.widget-mail-sign { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--line-3); font-size: 11.5px; color: var(--muted); }
.widget-mail-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 9px 16px; border-top: 1px solid var(--line-3); background: var(--surface-3); }

/* ---------- contact-picker i address-book ---------- */
.widget-pick-list { max-height: 196px; overflow: auto; border-top: 1px solid var(--line-3); }
.widget-pick-row { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; cursor: pointer; }
.widget-pick-row:hover, .widget-pick-row.is-hover { background: var(--hover); }
.widget-pick-row.is-selected { background: var(--selected); }
.widget-pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.widget-pick-name { font-size: 12.5px; color: var(--ink); }
.widget-pick-sub { font-size: 11px; color: var(--muted); }
.widget-pick-check { color: var(--accent-text); }
.widget-pick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.widget-alpha { flex: 0 0 34px; width: 34px; display: flex; justify-content: center; padding: 8px 0; overflow: auto; background: var(--surface-2); border-right: 1px solid var(--line); }
.widget-person { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.widget-person-head { display: flex; align-items: center; gap: 12px; }
.widget-person-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.widget-person-role { margin-top: 2px; font-size: 11.5px; color: var(--muted); }

/* ---------- scheduler: zasoby w wierszach, godziny w kolumnach ---------- */
.widget-sched-head { display: flex; align-items: stretch; height: 28px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.widget-sched-corner { flex: 0 0 156px; width: 156px; display: flex; align-items: center; padding: 0 12px; border-right: 1px solid var(--line); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.widget-sched-hours { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(10, 1fr); }
.widget-sched-hour { display: flex; align-items: center; padding-left: 6px; border-left: 1px solid var(--line-2); font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.widget-sched-row { display: flex; align-items: stretch; }
.widget-sched-res { flex: 0 0 156px; width: 156px; display: flex; flex-direction: column; justify-content: center; padding: 0 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-3); }
.widget-sched-res-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.widget-sched-res-sub { font-size: 10.5px; color: var(--label); }
.widget-sched-lane { position: relative; flex: 1; min-width: 0; height: 46px; border-bottom: 1px solid var(--line-3); background-image: repeating-linear-gradient(to right, var(--line-3) 0 1px, transparent 1px 10%); }
.widget-sched-block { position: absolute; top: 5px; bottom: 5px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 0 8px; border: 1px solid var(--accent-soft-line); border-radius: 3px; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; white-space: nowrap; cursor: pointer; }
.widget-sched-block.is-info { border-color: var(--info-line); background: var(--info-soft); color: var(--info-text); }
.widget-sched-block.is-warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn-text); }
.widget-sched-block.is-danger { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-text); }
.widget-sched-block.is-selected { box-shadow: 0 0 0 2px var(--focus-ring); }
.widget-sched-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.widget-sched-time { font-family: var(--mono); font-size: 10px; opacity: .85; }
.widget-sched-rows { position: relative; }
.widget-sched-now { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--danger); z-index: 1; }
.widget-sched-now::before { content: ""; position: absolute; top: -3px; left: -3px; width: 7px; height: 7px; border-radius: 4px; background: var(--danger); }

/* ---------- report-builder: kolumny, grupowanie, sortowanie, podgląd ---------- */
.widget-rep-col { display: flex; align-items: center; gap: 8px; height: 27px; padding: 0 12px; font-size: 12.5px; color: var(--ink-2); }
.widget-rep-col:hover, .widget-rep-col.is-hover { background: var(--hover-neutral); }
.widget-rep-grip { color: var(--line-input); cursor: grab; }
.widget-rep-grip .icon { width: 13px; height: 13px; }
.widget-rep-sort { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.widget-rep-sort-field { flex: 1; min-width: 0; }
.widget-rep-dir { flex: 0 0 110px; width: 110px; }
.widget-rep-preview { flex: 1; min-height: 0; overflow: auto; padding: 14px; background: var(--canvas); }
.widget-rep-sheet { width: 100%; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.widget-rep-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.widget-rep-sub { margin: 2px 0 12px; font-size: 11px; color: var(--muted); }

/* ---------- dashboard-builder: siatka kafelków i paleta ---------- */
.widget-dash { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 94px; align-content: start; gap: 10px; padding: 12px; background: var(--canvas); }
.widget-dash-tile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.widget-dash-tile.is-dragging { border-color: var(--accent); box-shadow: var(--shadow); }
.widget-dash-tile.is-empty { align-items: center; justify-content: center; border-style: dashed; border-color: var(--line-input); background: transparent; box-shadow: none; color: var(--label); font-size: 11.5px; }
.widget-dash-w2 { grid-column: span 2; }
.widget-dash-h2 { grid-row: span 2; }
.widget-dash-grip { position: absolute; top: 6px; right: 6px; color: var(--line-input); cursor: grab; }
.widget-dash-grip .icon { width: 13px; height: 13px; }
.widget-dash-title { font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.widget-dash-val { font-family: var(--mono); font-size: 20px; font-weight: 700; line-height: 1.15; color: var(--ink); }
.widget-dash-sub { font-size: 11px; color: var(--muted); }
.widget-dash-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-top: 4px; }
.widget-dash-bar { flex: 1; border-radius: 2px 2px 0 0; background: var(--accent-soft-line); }
.widget-dash-bar.is-active { background: var(--accent); }
.widget-palette-item { display: flex; align-items: center; gap: 8px; margin: 0 10px 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 12px; color: var(--ink-2); cursor: grab; }
.widget-palette-item .icon { width: 14px; height: 14px; color: var(--label); }
.widget-palette-item:hover, .widget-palette-item.is-hover { border-color: var(--accent); color: var(--link); }

/* ---------- transfer-list: dostępne na wybrane ---------- */
.widget-transfer { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 10px; padding: 12px; }
.widget-transfer-col { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.widget-transfer-head { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.widget-transfer-head .count { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0; }
.widget-transfer-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 0; }
.widget-transfer-item { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.widget-transfer-item:hover, .widget-transfer-item.is-hover { background: var(--hover-neutral); }
.widget-transfer-item.is-selected { background: var(--selected); color: var(--accent-text); }
.widget-transfer-item .icon { width: 13px; height: 13px; color: var(--label); }
.widget-transfer-mid { flex: 0 0 62px; width: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }

/* ---------- tag-manager: wartości słownika z kolorem ---------- */
.widget-tag-row { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line-3); }
.widget-tag-row:hover, .widget-tag-row.is-hover { background: var(--hover-neutral); }
.widget-tag-row.is-selected { background: var(--selected); }
.widget-tag-grip { color: var(--line-input); cursor: grab; }
.widget-tag-grip .icon { width: 13px; height: 13px; }
.widget-tag-swatch { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line-input); }
.widget-tag-name { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink); }
.widget-tag-count { flex: 0 0 78px; width: 78px; text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.widget-tag-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.widget-tag-add { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.widget-tag-merge { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }

/* ---------- color-picker: próbki, hex, ostatnie ---------- */
.widget-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.widget-swatch { position: relative; height: 30px; border-radius: var(--radius); border: 1px solid var(--line-input); cursor: pointer; }
.widget-swatch.is-selected { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.widget-swatch-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--surface); }
.widget-swatch-check .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.widget-color-row { display: flex; align-items: center; gap: 10px; }
.widget-color-now { flex: 0 0 46px; width: 46px; height: 30px; border-radius: var(--radius); border: 1px solid var(--line-input); }
.widget-recent { display: flex; align-items: center; gap: 6px; }
.widget-recent-item { width: 20px; height: 20px; border-radius: 3px; border: 1px solid var(--line-input); cursor: pointer; }

/* ---------- signature: płótno z linią i przyciskami ---------- */
.widget-sign { position: relative; height: 152px; border: 1px dashed var(--line-input); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.widget-sign-ink { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink); }
.widget-sign-base { position: absolute; left: 26px; right: 26px; bottom: 34px; border-bottom: 1px solid var(--line); }
.widget-sign-hint { position: absolute; left: 26px; bottom: 13px; font-size: 11px; color: var(--label); }
.widget-sign-stamp { position: absolute; right: 12px; top: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--label); }

/* ---------- barcode: kreski i siatka QR ---------- */
.widget-bars { display: flex; align-items: stretch; height: 64px; padding: 0 2px; }
.widget-bars-line { height: 100%; background: var(--ink); }
.widget-bars-line.is-gap { background: transparent; }
.widget-qr { display: grid; grid-template-columns: repeat(21, 1fr); width: 126px; height: 126px; }
.widget-qr i { background: transparent; }
.widget-qr i.is-on { background: var(--ink); }
.widget-code-val { margin-top: 8px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--ink); }
.widget-code-box { display: flex; flex-direction: column; align-items: center; padding: 14px 12px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

/* ---------- timer: duży czas i wpisy dnia ---------- */
.widget-timer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.widget-timer-time { font-family: var(--mono); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: 1px; font-variant-numeric: tabular-nums; color: var(--ink); }
.widget-timer-time.is-active { color: var(--accent-text); }
.widget-timer-task { margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.widget-timer-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.widget-timer-entry { display: flex; align-items: center; gap: 10px; height: 28px; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--line-3); }
.widget-timer-name { flex: 1; min-width: 0; }
.widget-timer-dur { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.widget-timer-sum { display: flex; align-items: center; gap: 10px; padding-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); }

/* ---------- sync-status: stan, kolejka, błędy ---------- */
.widget-sync-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line-3); }
.widget-sync-ring { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.widget-sync-ring.is-warn { background: var(--warn-soft); color: var(--warn-text); }
.widget-sync-ring.is-danger { background: var(--danger-soft); color: var(--danger-text); }
.widget-sync-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.widget-sync-sub { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.widget-sync-row { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 16px; border-bottom: 1px solid var(--line-3); font-size: 12px; color: var(--ink-2); }
.widget-sync-op { flex: 0 0 86px; width: 86px; }
.widget-sync-what { flex: 1; min-width: 0; }
.widget-sync-when { font-family: var(--mono); font-size: 11px; color: var(--label); }

/* ---------- find-replace: pole szukania, opcje, trafienia w tekście ---------- */
.widget-find { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.widget-find-row { display: flex; align-items: center; gap: 8px; }
.widget-find-label { flex: 0 0 64px; width: 64px; font-size: var(--fs-label); letter-spacing: .8px; text-transform: uppercase; color: var(--label); }
.widget-find-input { flex: 0 0 280px; width: 280px; }
.widget-find-count { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.widget-find-opts { display: flex; align-items: center; gap: 16px; padding-left: 72px; }
.widget-find-hit { border-radius: 2px; background: var(--warn-soft); box-shadow: 0 0 0 1px var(--warn-line); }
.widget-find-hit.is-current { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); color: var(--accent-text); font-weight: 600; }

/* ---------- porównanie dwóch grup: liczby, z których policzono odsetek, zostają w tabeli ---------- */
.widget-cohort th.widget-cohort-grp { text-align: center; }
.widget-cohort th.widget-cohort-grp.is-exposed { background: var(--danger-soft); color: var(--danger-text); }
.widget-cohort th.widget-cohort-sep, .widget-cohort td.widget-cohort-sep { border-left: 1px solid var(--line); }
.widget-cohort td.widget-cohort-name { font-weight: 600; color: var(--ink); }
.widget-cohort-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.widget-cohort-track { display: inline-block; flex: 0 0 44px; width: 44px; height: 6px; border-radius: 3px; background: var(--line-3); overflow: hidden; }
.widget-cohort-fill { display: block; height: 100%; border-radius: 3px; background: var(--neutral-dot); }
.widget-cohort-fill.is-exposed { background: var(--danger); }
.widget-cohort td.widget-cohort-rr { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; color: var(--ink); }
.widget-cohort td.widget-cohort-rr.is-below { color: var(--label); font-weight: 400; }
.widget-cohort tbody tr.is-top td { background: var(--warn-soft); }
.widget-cohort tbody tr.is-top td.widget-cohort-name { box-shadow: inset 3px 0 0 var(--warn); color: var(--warn-text); }
.widget-cohort tbody tr.is-top td.widget-cohort-rr { color: var(--danger-text); }
.widget-cohort-note { display: flex; align-items: flex-start; gap: 8px; flex: 0 0 auto; padding: 7px 12px; background: var(--info-soft); border-bottom: 1px solid var(--info-line); font-size: 11.5px; line-height: 1.45; color: var(--info-text); }
.widget-cohort-note .icon { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 2px; }

/* ---------- lista styczności: pewność i źródło w osobnych kolumnach ---------- */
.widget-enc-pair { display: flex; align-items: center; gap: 6px; min-width: 0; }
.widget-enc-who { font-weight: 600; color: var(--ink); }
.widget-enc-and { color: var(--label); }
.widget-enc-conf { display: inline-flex; align-items: center; gap: 7px; }
.widget-enc-meter { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.widget-enc-pip { width: 5px; height: 11px; border-radius: 1px; background: var(--line); }
.widget-enc-pip.is-on { background: var(--accent); }
.widget-enc-conf.is-low .widget-enc-pip.is-on { background: var(--warn); }
.widget-enc-conf.is-low { color: var(--warn-text); font-weight: 600; }
.widget-enc-src { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.widget-enc-src .icon { width: 12px; height: 12px; color: var(--label); }
.widget-enc-src.is-machine { background: var(--info-soft); border-color: var(--info-line); color: var(--info-text); }
.widget-enc-src.is-machine .icon { color: var(--info-text); }
.widget-enc-src.is-said { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
.widget-enc-src.is-said .icon { color: var(--warn-text); }
.widget-enc tbody tr.is-low td { background: var(--warn-soft); }
.widget-enc tbody tr.is-low td.widget-enc-first { box-shadow: inset 3px 0 0 var(--warn); }
.widget-enc-gap td { background: var(--surface-2); border-top: 1px dashed var(--line-input); border-bottom: 1px dashed var(--line-input); }
.widget-enc-gap-text { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.widget-enc-gap-text .icon { width: 13px; height: 13px; flex: 0 0 13px; color: var(--label); }
.widget-enc-gap-text .mono { color: var(--ink-2); }

/* ---------- powiązania przez wspólną cechę: osoby z lewej, cechy z prawej ---------- */
.widget-link-person { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--line-3); font-size: var(--fs-sm); cursor: pointer; }
.widget-link-person:hover, .widget-link-person.is-hover { background: var(--hover-neutral); }
.widget-link-person.is-selected { background: var(--selected); box-shadow: inset 3px 0 0 var(--accent); }
.widget-link-person-main { display: flex; flex-direction: column; min-width: 0; }
.widget-link-person-name { font-weight: 600; color: var(--ink); line-height: 1.25; }
.widget-link-person-sub { font-size: 10.5px; color: var(--muted); line-height: 1.25; }
.widget-link-person-count { margin-left: auto; flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; color: var(--label); }
.widget-link-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 12px; border-bottom: 1px solid var(--line-3); cursor: pointer; }
.widget-link-row:hover, .widget-link-row.is-hover { background: var(--hover-neutral); }
.widget-link-row.is-open { background: var(--surface-2); }
.widget-link-row > .icon { width: 15px; height: 15px; flex: 0 0 15px; color: var(--label); }
.widget-link-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.widget-link-val { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-link-kind { font-size: 10.5px; color: var(--muted); }
.widget-link-count { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 24px; height: 20px; padding: 0 7px; border-radius: var(--radius); background: var(--neutral-soft); font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.widget-link-strength { display: inline-flex; align-items: center; flex: 0 0 auto; height: 18px; padding: 0 7px; border-radius: 3px; background: var(--neutral-soft); color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.widget-link-strength.is-strong { background: var(--accent-soft); color: var(--accent-text); }
.widget-link-strength.is-weak { background: var(--warn-soft); color: var(--warn-text); }
.widget-link-share { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 37px; border-bottom: 1px solid var(--line-3); background: var(--surface-3); font-size: var(--fs-xs); color: var(--ink-2); }
.widget-link-share-meta { margin-left: auto; flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; color: var(--label); }

/* Pismo do skopiowania: trzy pola tylko do odczytu, kazde z wlasnym przyciskiem kopiowania. */
.widget-letter { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.widget-letter .widget-bar { gap: 10px; }
.widget-letter-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; }
.widget-letter-row { display: flex; }
.widget-letter-field { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.widget-letter-field > .btn { position: absolute; right: 4px; top: 18px; }
.widget-letter-value { min-height: 28px; padding: 5px 108px 5px 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-3); font-size: var(--fs); line-height: 1.35; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-letter-text { max-height: 260px; overflow: auto; padding: 9px 108px 9px 10px; white-space: pre-wrap; line-height: 1.5; }
.widget-letter-field.is-error .widget-letter-value { border-color: var(--danger); background: var(--danger-soft); }

/* ---------- kadrowanie zdjęcia: przesuń pod maską, przybliż suwakiem (widget-crop) ---------- */
.widget-crop { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.widget-crop-frame { position: relative; width: 256px; height: 256px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); cursor: grab; touch-action: none; user-select: none; }
.widget-crop-frame.is-grabbing { cursor: grabbing; }
.widget-crop-frame img, .widget-crop-frame canvas, .widget-crop-canvas { position: absolute; left: 0; top: 0; max-width: none; display: block; }
.widget-crop-mock { width: 340px; height: 300px; background: radial-gradient(circle at 46% 42%, var(--warn-soft) 0 52px, transparent 53px), linear-gradient(165deg, var(--info-soft), var(--accent-soft) 55%, var(--neutral-soft)); }
.widget-crop-mask { position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 0 999px var(--overlay); }
.widget-crop-mask.is-round { border-radius: 50%; }
.widget-crop-mask.is-ratio { inset: 32px 0; }
.widget-crop-tools { display: flex; align-items: center; gap: 8px; width: 256px; }
.widget-crop-tools .icon { width: 14px; height: 14px; color: var(--label); flex: 0 0 auto; }
.widget-crop-tools > :not(.icon) { flex: 1; }
.widget-crop-hint { font-size: var(--fs-xs); color: var(--muted); }
.widget-crop-out { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.widget-crop-out-round { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); }
.widget-crop-out-round .widget-crop-mock { width: 53px; height: 47px; margin: -3px 0 0 -7px; }


/* ===== explain: Objaśnienia i decyzje ===== */
/* explain: strony objaśniające dla człowieka - pudełka z opisem, przepływ w krokach, role,
   karty decyzji do wyklikania, macierz opcji, oś etapów, fakty sprawdzone. Otwierane w przeglądarce
   przez Playwright, nie w oknie programu; te same tokeny, żeby obrazek wyglądał jak produkt. */

/* ---------- strona ---------- */
.explain { max-width: 1180px; margin: 0 auto; padding: 28px 24px 60px; color: var(--ink); font-size: var(--fs); line-height: 1.5; }
.explain-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.explain-lead { color: var(--muted); margin: 0 0 22px; max-width: 760px; }
.explain-section { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; margin-bottom: 18px; }
.explain-section-title { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.explain-note { margin: 10px 0 0; max-width: 820px; color: var(--ink-2); }
.explain-foot { color: var(--label); font-size: var(--fs-xs); margin-top: 24px; }
.explain-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ---------- pudełka i strzałki ---------- */
.explain-boxes { display: flex; align-items: stretch; gap: 0; }
.explain-box { flex: 1 1 0; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 12px 14px; }
.explain-box-tag { display: block; font-size: var(--fs-label); letter-spacing: .6px; text-transform: uppercase; color: var(--label); margin-bottom: 6px; }
.explain-box-title { font-weight: 600; margin: 0 0 4px; }
.explain-box-text { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.explain-box-list { margin: 8px 0 0; padding-left: 16px; color: var(--muted); font-size: var(--fs-sm); }
.explain-box.is-dark { background: var(--chrome); border-color: var(--chrome); color: var(--chrome-ink); }
.explain-box.is-dark .explain-box-tag, .explain-box.is-dark .explain-box-list { color: var(--chrome-muted); }
.explain-box.is-dark .explain-box-text { color: var(--chrome-ink); }
.explain-box.is-accent { background: var(--accent-soft); border-color: var(--accent); }
.explain-box.is-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.explain-box.is-info { background: var(--info-soft); border-color: var(--info-line); }
.explain-box.is-muted { background: var(--surface-2); color: var(--muted); }
.explain-arrow { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--accent); font-size: var(--fs-xs); }
.explain-arrow .icon { width: 22px; height: 22px; }
.explain-arrow-label { color: var(--muted); text-align: center; line-height: 1.2; }
.explain-arrow.is-back { color: var(--label); }
.explain-arrow.is-back .icon { transform: rotate(180deg); }
.explain-arrow.is-both .icon { transform: none; }

/* ---------- przepływ w krokach ---------- */
.explain-flow { display: flex; flex-direction: column; gap: 10px; }
.explain-flow-row { display: flex; align-items: stretch; gap: 0; }
.explain-flow-actor { flex: 1 1 0; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 10px 12px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.explain-flow-actor.is-dark { background: var(--chrome); border-color: var(--chrome); color: var(--chrome-ink); }
.explain-flow-actor.is-info { background: var(--info-soft); border-color: var(--info-line); }
.explain-flow-actor.is-muted { background: var(--surface-2); color: var(--muted); }
.explain-flow-actor-title { font-weight: 600; }
.explain-flow-actor-sub { font-size: var(--fs-xs); color: var(--muted); }
.explain-flow-actor.is-dark .explain-flow-actor-sub { color: var(--chrome-muted); }
.explain-flow-link { flex: 0 0 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 8px; color: var(--accent); text-align: center; }
.explain-flow-link .icon { width: 26px; height: 26px; }
.explain-flow-link.is-back .icon { transform: rotate(180deg); }
.explain-flow-link.is-muted { color: var(--label); }
.explain-flow-link-label { font-size: var(--fs-xs); color: var(--muted); line-height: 1.25; }
.explain-flow-link .explain-step-n { margin-bottom: 2px; }
.explain-flow-link.is-muted .explain-step-n { background: var(--neutral-dot); color: var(--ink); }
.explain-steps { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.explain-step { display: flex; align-items: flex-start; gap: 10px; }
.explain-step-n { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 11px; background: var(--accent); color: var(--accent-ink); font: 700 11px var(--sans); display: inline-flex; align-items: center; justify-content: center; }
.explain-step.is-muted .explain-step-n { background: var(--neutral-dot); color: var(--ink); }
.explain-step-text { flex: 1; }
.explain-step-text .mono { font-size: var(--fs-xs); }

/* ---------- role ---------- */
.explain-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ---------- decyzje ---------- */
.explain-decisions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.explain-decision { border: 1px solid var(--warn-line); background: var(--warn-soft); border-radius: 6px; padding: 12px 14px; }
.explain-decision.is-done { border-color: var(--accent); background: var(--accent-soft); }
.explain-decision-q { font-weight: 600; margin: 0 0 8px; color: var(--warn-text); }
.explain-decision.is-done .explain-decision-q { color: var(--accent-text); }
.explain-option { display: flex; align-items: flex-start; gap: 9px; padding: 7px 9px; margin: 0 0 4px; border: 1px solid transparent; border-radius: 5px; background: var(--surface); cursor: pointer; }
.explain-option:hover, .explain-option.is-hover { border-color: var(--line); background: var(--surface); }
.explain-option.is-on { border-color: var(--accent); background: var(--surface); }
.explain-option input { margin-top: 3px; accent-color: var(--accent); }
.explain-option-rec { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--accent-soft-line); border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-label); letter-spacing: .5px; text-transform: uppercase; vertical-align: middle; }
.explain-decision-sent { margin-top: 6px; font-size: var(--fs-xs); color: var(--accent-text); }
.explain-decision-note { width: 100%; margin-top: 6px; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line-input); border-radius: var(--radius); background: var(--field); font: inherit; resize: vertical; }
.explain-send { position: sticky; bottom: 0; margin-top: 18px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 6px; background: var(--chrome); color: var(--chrome-ink); box-shadow: var(--shadow); }
.explain-send-status { flex: 1; font-size: var(--fs-sm); color: var(--chrome-muted); }

/* ---------- ustalone / otwarte ---------- */
.explain-settled { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 12px 14px; margin-bottom: 14px; }
.explain-settled-title { font-weight: 600; color: var(--accent-text); margin: 0 0 6px; }
.explain-settled-list { margin: 0; padding-left: 18px; }
.explain-open { border: 1px solid var(--warn-line); background: var(--warn-soft); border-radius: 6px; padding: 12px 14px; }
.explain-open-title { font-weight: 600; color: var(--warn-text); margin: 0 0 6px; }
.explain-open-list { margin: 0; padding-left: 18px; }

/* ---------- tabele na stronie objaśniającej ---------- */
/* Tabela dla człowieka ma w komórkach pełne zdania, więc zawija je i nigdy nie wyjeżdża poza
   kartę: czytelnik nie musi wiedzieć o poziomym pasku przewijania (arkusz bazowy daje komórkom
   nowrap, bo w programie tabela jest rejestrem). Liczby, daty i identyfikatory zostają w jednej linii. */
.explain-section table td { white-space: normal; height: auto; padding: 8px 12px; vertical-align: top; line-height: 1.45; }
.explain-section table td.mono, .explain-section table td.num { white-space: nowrap; }

/* ---------- macierz opcji ---------- */
.explain-matrix th:first-child, .explain-matrix td:first-child { min-width: 180px; max-width: 360px; }
.explain-matrix td.is-good, .explain-matrix td.is-mid, .explain-matrix td.is-bad { white-space: nowrap; width: 1%; }
.explain-matrix th:last-child, .explain-matrix td:last-child { min-width: 160px; }
.explain-matrix td.is-good { background: var(--accent-soft); color: var(--accent-text); }
.explain-matrix td.is-mid { background: var(--warn-soft); color: var(--warn-text); }
.explain-matrix td.is-bad { background: var(--danger-soft); color: var(--danger-text); }
.explain-matrix tr.is-pick td { font-weight: 600; }
.explain-matrix tr.is-anchor td:first-child .badge { margin-left: 6px; }

/* ---------- oś etapów ---------- */
.explain-timeline { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; position: relative; padding-top: 18px; }
.explain-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--line); }
.explain-stage { position: relative; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 10px 12px; }
.explain-stage::before { content: ""; position: absolute; left: 12px; top: -16px; width: 10px; height: 10px; border-radius: 5px; background: var(--neutral-dot); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.explain-stage.is-done::before { background: var(--accent); }
.explain-stage.is-now { border-color: var(--accent); }
.explain-stage.is-now::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.explain-stage-when { font-family: var(--mono); font-size: var(--fs-xs); color: var(--label); }
.explain-stage-title { font-weight: 600; margin: 2px 0 4px; }
.explain-stage-text { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.explain-stage.is-done .explain-stage-text { color: var(--muted); }

/* ---------- fakty sprawdzone ---------- */
.explain-facts th:first-child, .explain-facts td:first-child { max-width: 460px; }
.explain-facts td.explain-fact-src { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); max-width: 300px; }
.explain-facts .badge { text-transform: none; letter-spacing: 0; }