* { box-sizing: border-box; margin: 0; }
/* TOKENY SUITE = ALIASY TOKENÓW POWŁOKI (od 2026-08-10).
   Do tej daty ten blok trzymał WŁASNE wartości i był jedynym miejscem
   w platformie, gdzie kolor padał drugi raz: tło `#F4F5F7`, krawędź
   `#E2E8F0`, tekst `#0F172A`, przygaszenie `#64748B` — czyli skala `slate`,
   z której cała reszta platformy zeszła 1 sierpnia (obok marki #2A47D1
   chłodny slate czyta się jak drugi, konkurencyjny błękit). Konsola Suite
   wyglądała więc o kilka procent inaczej niż osiem paneli obok, i nikt nie
   umiał powiedzieć, dlaczego.

   `shell.css` jest wczytywany PRZED tym plikiem (index.html), więc wszystkie
   `--gd-*` są tu dostępne. Wartość po przecinku to zapas dla wypadku, w którym
   powłoka się nie wczyta — nigdy druga definicja. */
:root {
  --brand: var(--gd-brand); --brand-hover: var(--gd-brand-hover);
  --brand-tint: var(--gd-brand-tint); --brand-border: var(--gd-brand-soft-border);
  /* jasna powłoka marki (2026-07): sidebar biały jak strona www, nie granatowy */
  --sidebar: var(--gd-card); --sidebar-2: var(--gd-sunken);
  --bg: var(--gd-bg); --card: var(--gd-card); --border: var(--gd-border);
  --sunken: var(--gd-sunken);
  --text: var(--gd-text); --muted: var(--gd-muted);
  /* Tony statusu zostają WŁASNE, bo powłoka ich nie ma (kit trzyma je w mapie
     `TONE` Badge'a). Wartości są te same, co w kicie: emerald-700/50,
     amber-800/50, rose-700/50 — sprawdzone w check-contrast.mjs. */
  --ok: #047857; --ok-bg: #ECFDF5;
  --warn: #92400E; --warn-bg: #FFFBEB;
  --err: var(--gd-err); --err-bg: #FFF1F2;
}
body {
  font-family: 'Mundial', -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--text);
}
h1, h2, h3, .title { font-family: 'Eurostile', 'Mundial', sans-serif; }
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 14px; }
.error { color: var(--err); font-size: 14px; }
code { background: var(--brand-tint); color: var(--brand); padding: 2px 6px; border-radius: 6px; font-size: 13px; }


/* ---------- layout ---------- */
/* 56px zarezerwowane po prawej na pasek Unified Shell (gd-shell) — bez tego
   prawa krawędź treści (np. kolumna akcji w tabelach) chowa się pod railем. */
.app-layout { display: flex; height: 100vh; overflow: hidden; padding-right: 56px; }

/* BELKA WIDOKU — odpowiednik `PageHeader`/`PageBody` z @gdigital/shared/ui.
   Suite jest jedynym panelem bez Reacta, więc kanon jest tu przepisany na CSS,
   a nie zaimportowany. Liczby są DOSŁOWNIE te z kitu i mają takie zostać:
   belka `px-6 py-3.5` (24/14 px) z dolną kreską na tle karty, tytuł 18 px
   krojem nagłówkowym, podtytuł 14 px w kolorze przygaszonym, treść `p-6`
   (24 px) i to ONA się przewija. Do 10 sierpnia 2026 Suite nie miał belki
   wcale: widok zaczynał się akapitem opisu, który odjeżdżał z listą. */
main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
main > section { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page-head { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 16px; padding: 14px 24px; background: var(--card); border-bottom: 1px solid var(--border); }
.page-head-text { min-width: 0; flex-shrink: 0; }
.page-title { font-family: 'Eurostile', 'Mundial', sans-serif; font-size: 18px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-sub { font-size: 14px; color: var(--muted); }
/* Akcje zawsze przy prawej krawędzi i ZAWIJAJĄ SIĘ — na wąskim oknie rząd
   przycisków bez zawijania wychodzi poza ekran i staje się nieklikalny. */
.page-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.page-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; }
.page-body > .inner { max-width: 1060px; margin: 0 auto; }
/* Widoki-ramki (Stopki, Kontakty) dostają CAŁĄ szerokość i całą wysokość:
   moduł w iframie ma własny układ i własny limit szerokości. */
#view-stopki .page-body, #view-kontakty .page-body { overflow: hidden; }
#view-stopki .page-body > .inner,
#view-kontakty .page-body > .inner { max-width: none; height: 100%; }

/* ---------- sidebar ---------- */

/* ---------- PALETA DANYCH (KONCEPCJA-WIZUALNA.md §4.1) ----------
   Bliźniak `HUE` z `shared/src/ui/hue.ts`. Suite jest poza kitem, więc barwa
   wchodzi tu klasą `hue-<klucz>` ustawianą przez `hueFor()` w app.js —
   wartości SĄ TE SAME (osiem barw × trzy role), bo rozjazd oznaczałby, że ta
   sama osoba ma inny kolor awatara w Suite i w czacie. */
.hue-brand   { --h-tint: var(--gd-hue-brand-tint);   --h-line: var(--gd-hue-brand-line);   --h-ink: var(--gd-hue-brand-ink); }
.hue-violet  { --h-tint: var(--gd-hue-violet-tint);  --h-line: var(--gd-hue-violet-line);  --h-ink: var(--gd-hue-violet-ink); }
.hue-magenta { --h-tint: var(--gd-hue-magenta-tint); --h-line: var(--gd-hue-magenta-line); --h-ink: var(--gd-hue-magenta-ink); }
.hue-cyan    { --h-tint: var(--gd-hue-cyan-tint);    --h-line: var(--gd-hue-cyan-line);    --h-ink: var(--gd-hue-cyan-ink); }
.hue-teal    { --h-tint: var(--gd-hue-teal-tint);    --h-line: var(--gd-hue-teal-line);    --h-ink: var(--gd-hue-teal-ink); }
.hue-orange  { --h-tint: var(--gd-hue-orange-tint);  --h-line: var(--gd-hue-orange-line);  --h-ink: var(--gd-hue-orange-ink); }
.hue-olive   { --h-tint: var(--gd-hue-olive-tint);   --h-line: var(--gd-hue-olive-line);   --h-ink: var(--gd-hue-olive-ink); }
.hue-grafit  { --h-tint: var(--gd-hue-grafit-tint);  --h-line: var(--gd-hue-grafit-line);  --h-ink: var(--gd-hue-grafit-ink); }

/* awatary użytkowników (zdjęcie z Google albo inicjały) — barwa z klasy
   `hue-*`; brak klasy degraduje do tinty marki, więc nic się nie wywraca. */
.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; background: var(--h-tint, var(--brand-tint)); color: var(--h-ink, var(--brand));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.nav-section { margin-bottom: 18px; }
.gd-nav-item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- przyciski / formularze ---------- */
button.primary { background: var(--brand); color: #fff; border: none; border-radius: 14px;
  padding: 11px 20px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: all .2s; box-shadow: 0 8px 24px rgba(42,71,209,.20); }
button.primary:hover { background: var(--brand-hover); transform: translateY(-1px); }
button.primary:disabled { opacity: .55; cursor: default; transform: none; }
button.ghost { background: transparent; border: 1.5px solid var(--brand); border-radius: 12px;
  padding: 8px 16px; font-size: 13px; font-family: inherit; cursor: pointer; color: var(--brand); transition: all .2s; }
button.ghost:hover { background: var(--brand); color: #fff; }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }

/* ---------- karty i listy ---------- */
.card-list { display: flex; flex-direction: column; gap: 12px; }
/* Cień z tokenu powłoki (§4.3) — poprzednia wartość `0 4px 20px rgba(0,0,0,.03)`
   była JESZCZE słabsza niż stary `--gd-shadow-raised` w kicie, więc karta Suite
   leżała na tle nawet w porównaniu z resztą platformy. */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 18px 22px;
  box-shadow: var(--gd-shadow-raised);
  transition: box-shadow var(--gd-dur-fast) var(--gd-ease, ease), transform var(--gd-dur-fast) var(--gd-ease, ease); }
/* Unoszenie tylko na wskaźniku i tylko dla kart KLIKALNYCH — na dotyku `:hover`
   zostaje przyklejony po tapnięciu (§4.6/1). */
@media (hover: hover) {
  .card.clickable:hover { box-shadow: var(--gd-shadow-lifted); transform: translateY(-1px); }
}
.row { display: flex; align-items: center; gap: 16px; }
.row .grow { flex: 1; min-width: 0; }
.title { font-weight: 700; font-size: 15px; }
.sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

.pill { border-radius: 999px; padding: 4px 13px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #BBF7D0; }
.pill.warn { background: var(--warn-bg); color: var(--warn); border: 1px solid #FDE68A; }
.pill.err { background: var(--err-bg); color: var(--err); border: 1px solid #FECACA; }
.pill.neutral { background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-border); }

.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--gd-border-strong); border-radius: 26px; transition: background .15s; }
.switch .slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + .slider { background: var(--brand); }
.switch input:checked + .slider::before { transform: translateX(20px); }

.members { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 9px; }
.member-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.link-btn { background: none; border: none; color: var(--brand); font-size: 13px; cursor: pointer;
  padding: 0; font-family: inherit; }
.link-btn:hover { text-decoration: underline; }

/* ---------- moduł stopek (iframe) / placeholder kontaktów ----------
   Wysokość bierze się z KONTENERA, nie z `100vh` minus zgadywany margines:
   od kiedy widok ma własną belkę, `calc(100vh - 64px)` zostawiałby pod ramką
   pasek pustego tła albo wypychał ją poza ekran. `.page-body` jest tu jedynym
   elementem o znanej wysokości, więc łańcuch `height:100%` idzie od niego. */
#stopki-frame, #kontakty-frame { display: block; width: 100%; height: 100%; border: 1px solid var(--border);
  border-radius: 20px; background: #fff; }
.empty-module { text-align: center; padding: 64px 32px; }
.empty-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--brand-tint);
  color: var(--brand); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.empty-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.empty-module .title { font-size: 19px; margin-bottom: 6px; }

.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--gd-text);
  color: #fff; padding: 13px 24px; border-radius: 14px; font-size: 14px;
  box-shadow: var(--gd-shadow-modal); z-index: 10; max-width: 90vw; }

/* ---------- Moduł 0: konsola zespołu (siatka kolumnowa) ---------- */
/* stałe kolumny = skanowanie listy w pionie; puste wartości pokazują "—" */
/* Kolumny: Osoba | Stanowisko | Dział | Telefony | Grupy | Sync grup | Akcje.
   Dział wydzielony ze stanowiska, telefony w dwóch wierszach (służbowy +
   komórkowy) — brakujący numer zostaje jako kreska, żeby luki były widoczne. */
.user-grid { display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(90px, 0.8fr) minmax(90px, 0.7fr) 118px 96px 200px;
  gap: 8px; align-items: center; }
/* Na węższych ekranach dział i sync ustępują miejsca — dane pozostają
   dostępne w modalu profilu, a wiersz nie ucieka poza kartę. */
@media (max-width: 1180px) {
  .user-grid { grid-template-columns: minmax(140px, 1fr) 116px 104px 84px 170px; }
  .user-grid > .dept-cell,
  .user-cols > :nth-child(3) { display: none; }
}
.phone-line { display: block; line-height: 1.45; white-space: nowrap; }
.user-cell button.link-btn { line-height: 1.35; }

/* Modal profilu pracownika (stanowisko, dział, telefony) */
.profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.profile-fields label { display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted); }
.profile-fields input { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 400; color: var(--text); background: #fff; }
.profile-fields input:focus { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--gd-brand-soft); }
/* Modal działu dokłada listę wyboru i liczbę — te same krawędzie co inputy,
   inaczej `select` renderuje się systemowo i wyłamuje się z formularza. */
.profile-fields select { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  font: inherit; font-size: 14px; color: var(--text); background: #fff; }
.profile-fields select:focus { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--gd-brand-soft); }
/* Pole wyłączone MUSI wyglądać na wyłączone — to jedyny sygnał, że wartość
   nadaje inny moduł (stanowisko ze słownika Kadr). */
.profile-fields input:disabled { background: var(--sunken); color: var(--muted); cursor: default; }
@media (max-width: 720px) { .profile-fields { grid-template-columns: 1fr; } }
.user-cols { padding: 2px 22px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); }
.user-cell-empty { color: var(--gd-border-strong); }
.user-cell button.link-btn { text-align: left; }
.user-actions { display: flex; gap: 12px; justify-content: flex-end; white-space: nowrap; }

/* ---------- Moduł 0: konsola zespołu ---------- */
.section-heading { font-size: 17px; margin: 28px 0 6px; display: flex; align-items: center; gap: 10px; }
.card.guest { border-left: 3px solid #D97706; }
.card.guest .avatar { background: var(--warn-bg); color: var(--warn); }
.pill.role { background: var(--sunken); color: var(--gd-hue-grafit-ink); border: 1px solid var(--border); }

/* modal uprawnień */
.modal-backdrop { position: fixed; inset: 0; background: rgb(17 24 39 / .45); z-index: 20;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 26px;
  width: 100%; max-width: 480px; box-shadow: var(--gd-shadow-modal); }
.modal .modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.perm-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--border); }
.perm-row .perm-name { flex: 1; font-weight: 600; font-size: 14px; }
.perm-row .perm-name .sub { font-weight: 400; }
.perm-row select { border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px;
  font: inherit; font-size: 13px; background: #fff; }
.perm-row select:disabled { opacity: .55; }
/* Kreska rozdzielająca przeszła z wiersza na CAŁĄ pozycję — inaczej linia
   biegła między przełącznikiem a jego własnym opisem i wiązała opis
   z modułem NIŻEJ. */
.perm-item { border-top: 1px solid var(--border); }
.perm-item .perm-row { border-top: 0; padding-bottom: 4px; }
.perm-help { padding: 0 0 12px; font-size: 12.5px; line-height: 1.5; }
.perm-help-now { margin: 0; color: var(--muted); }
.perm-help-now.off { font-style: italic; opacity: .8; }
.perm-help details { margin-top: 6px; }
.perm-help summary { cursor: pointer; color: var(--brand); font-size: 12px;
  width: fit-content; list-style: none; }
.perm-help summary::-webkit-details-marker { display: none; }
.perm-help summary::before { content: '▸ '; }
.perm-help details[open] summary::before { content: '▾ '; }
.perm-help dl { margin: 8px 0 0; padding: 10px 12px; background: var(--sunken);
  border-radius: 10px; }
.perm-help dt { font-weight: 600; margin-top: 8px; }
.perm-help dt:first-child { margin-top: 0; }
.perm-help dd { margin: 2px 0 0; color: var(--muted); }
.perm-const { font-weight: 400; font-size: 11px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.perm-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; }

/* ---------- Moduł 0: edytor zdjęcia (kadr miniaturki) ---------- */
.photo-modal { max-width: 560px; }
.crop-stage { max-width: 100%; border-radius: 14px; overflow: hidden; background: var(--sunken);
  min-height: 120px; text-align: center; }
.crop-stage.muted { padding: 40px 24px; }
.crop-wrap { position: relative; display: inline-block; line-height: 0; }
/* UWAGA: max-width w px, nie %: procent wewnątrz inline-block (shrink-to-fit
   wrapa) tworzy cykl wymiarów i clientWidth=0 */
.crop-img { display: block; max-width: 508px; max-height: 440px; width: auto; height: auto;
  user-select: none; }
.crop-overlay { position: absolute; border: 2px solid #fff; border-radius: 10px; cursor: move;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55); outline: 1px solid rgba(15,23,42,.4); }
.crop-overlay::after { content: ''; position: absolute; inset: 0; border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.6); pointer-events: none; }
.crop-handle { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px;
  background: var(--brand); border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; }
.photo-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.photo-actions .grow { flex: 1; }

/* ---------- Moduł 0: struktura firmy (core_departments) ---------- */
/* Własna siatka, bo kolumny są inne niż w konsoli zespołu:
   Dział | Kod | Kierownik | Osoby | Akcje. Nadpisujemy `grid-template-columns`
   PO .user-grid, więc kolejność reguł w pliku ma znaczenie. */
.dept-grid { grid-template-columns: minmax(200px, 1.6fr) 150px minmax(160px, 1fr) 70px 150px; }
/* Bez `min-width: 0` komórka siatki nie może być WĘŻSZA od swojej treści —
   długi adres kierownika rozpychał kolumnę i wchodził pod licznik osób. */
.dept-grid > * { min-width: 0; }
.dept-manager { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1180px) {
  .dept-grid { grid-template-columns: minmax(160px, 1.4fr) 120px 60px 140px; }
  .dept-grid > .dept-code, .dept-grid.user-cols > :nth-child(2) { display: none; }
}
/* Hierarchia: wcięcie robi kod (paddingLeft z `depth`), kreska daje jej kotwicę */
.dept-branch { color: var(--gd-border);  font-weight: 700; }
.dept-name { font-weight: 600; }
.dept-code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); }
/* Dział wyłączony wygląda na wyłączony — inaczej różni go tylko mała plakietka */
.card.dept-off { background: var(--sunken); }
.card.dept-off .dept-name { color: var(--muted); }
.link-btn.danger { color: var(--err); }
/* Komórka, której NIE MOŻNA tu edytować (stanowisko nadane w Kadrach):
   wygląda jak tekst, nie jak link — inaczej kursor obiecuje kliknięcie,
   które nic nie robi. */
.link-btn.cell-locked { color: var(--text); cursor: default; }
.link-btn.cell-locked:hover { text-decoration: none; }
.dept-active-row { justify-content: flex-end; }

/* ---------- Moduł 0: ustawienia firmy ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--gd-text-2); }
.form-grid input[type="text"] { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px;
  font: inherit; font-size: 14px; font-weight: 400; }
.form-grid input[type="text"]:focus { outline: none; border-color: var(--brand); }
.color-row { display: flex; gap: 10px; align-items: center; }
.color-row input[type="color"] { width: 46px; height: 42px; border: 1px solid var(--border);
  border-radius: 12px; padding: 4px; background: #fff; cursor: pointer; }
.color-row input[type="text"] { flex: 1; font-family: ui-monospace, monospace; }
.logo-preview { max-height: 56px; max-width: 240px; object-fit: contain; }

/* ==========================================================================
   TELEFON (od 2026-08-10) — KONCEPCJA-MOBILE.md, faza 1
   --------------------------------------------------------------------------
   Suite jest JEDYNYM panelem poza kitem `@gdigital/shared/ui` (waniliowy JS,
   własny arkusz). Poprawki w kicie go NIE OBEJMUJĄ, więc reguły telefonu
   trzeba tu przepisać ręcznie — dokładnie tak, jak przepisano belkę widoku.

   Sam DOLNY PASEK NAWIGACJI przychodzi z `shell.css` (`.gd-sidebar` jest
   rodzeństwem `<main>` także tutaj). Poniżej jest wyłącznie to, czego tamten
   plik nie może wiedzieć: układ `#app` i struktura menu Suite.

   Próg 767 px — TEN SAM, co w shell.css, tokens.css i gd-shell.js.
   ========================================================================== */
@media (max-width: 767px) {
  /* Rezerwa 56 px na pionowy pasek powłoki znika razem z paskiem — na 375 px
     to była piętnasta część ekranu oddana elementowi, który się schował. */
  .app-layout { padding-right: 0; height: 100dvh; }

  /* Menu Suite jest POGRUPOWANE (`.nav-section` z nagłówkiem), a shell.css
     układa w rzędzie DZIECI `.gd-sidebar-nav` — czyli grupy, nie pozycje.
     Bez tego pasek stałby się rzędem pionowych kolumienek. `display: contents`
     wypuszcza pozycje wprost do rzędu i nie wymaga ruszania znaczników
     w `index.html`, których używa też logika przełączania widoków. */
  .gd-sidebar-nav .nav-section { display: contents; }

  /* Dziewięć pozycji nie zmieści się w 375 px — pasek przewija się poziomo
     (shell.css), a to tylko gwarantuje, że aktywna pozycja jest widoczna
     po wejściu, zamiast czekać schowana za krawędzią. */
  .gd-nav-item.active { scroll-margin-inline: 24px; }

  /* Belka widoku: tytuł i akcje jedno pod drugim. W rzędzie tytuł skracał się
     do trzech znaków, żeby zmieścić dwa przyciski, które i tak się zawijały. */
  .page-head { padding: 12px 14px; gap: 10px; }
  .page-head-text { flex-shrink: 1; }
  .page-actions { margin-left: 0; width: 100%; }
  .page-actions > * { min-height: 44px; }
  .page-body { padding: 14px; }

  /* Karta: mniejszy margines wewnętrzny i mniejszy promień — przy 22 px
     na 375 px zostawało 331 px na treść, a przy promieniu 20 px karta
     dotykająca krawędzi wygląda na uciętą. */
  .card { padding: 14px 16px; border-radius: 16px; }

  /* Formularze: dwie kolumny na 375 px to dwa pola po 170 px — w takim polu
     nie mieści się ani NIP, ani adres e-mail. */
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .form-grid input[type="text"] { min-height: 48px; }

  /* Tabele Suite są szerokie z natury (użytkownicy: 6 kolumn). Przewijanie
     zamykamy w POJEMNIKU — strona nie ma prawa jechać w poziomie. */
  .card table, table { display: block; overflow-x: auto; max-width: 100%; }
}

/* ── START: pierwsze wejście na platformę ─────────────────────────────────
   Kafelki są DUŻE i mają zdanie opisu, bo to ekran dla osoby, która jeszcze
   nie wie, gdzie iść — waffle w pasku jest dla tych, którzy już wiedzą
   (tam wystarczy ikona i nazwa). Siatka schodzi do jednej kolumny na
   telefonie: to ekran klasy KCIUK, wchodzi się na niego z linku w wiadomości. */
.start-tiles {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.start-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-r-surface, 14px);
  background: var(--gd-card, #fff);
  box-shadow: var(--gd-shadow-raised);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 120ms var(--gd-ease, ease), transform 120ms var(--gd-ease, ease);
}
@media (hover: hover) {
  .start-tile:hover { box-shadow: var(--gd-shadow-lifted); transform: translateY(-2px); }
}
.start-tile-glyph {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 15px;
}
.start-tile-name { display: block; font-family: var(--gd-font-heading, inherit); font-size: 15px; }
.start-tile-desc { display: block; margin-top: 2px; font-size: 12.5px; color: var(--gd-muted); line-height: 1.45; }
.start-empty { max-width: 46ch; font-size: 14px; color: var(--gd-muted); line-height: 1.6; }
/* Ikona modułu na kafelku Startu — ta sama grafika co w waffle powłoki.
   Kolorowe koło jest CZĘŚCIĄ pliku SVG, więc kafelek nie maluje tła. */
.start-tile-icon { width: 40px; height: 40px; flex: 0 0 auto; display: block; }
.start-tile-icon svg { width: 100%; height: 100%; display: block; border-radius: 50%; }