/* ============================================================
   Solve — style aplikacji.
   Sekcje:
     1. Tokeny
     2. Reset + typografia
     3. Layout (app shell, sidebar, topbar, page)
     4. Komponenty (buttons, stats, filters, table, modal, drawer, tags, timeline)
     5. Login
     6. Responsywność
   ============================================================ */

/* ---------- 1. Tokeny — Material 3 / Google style ---------- *
 * Hierarchia kolorów inspirowana Material You:
 *   primary        — Google blue (#1A73E8)
 *   primary-cont.  — jasny tint, używamy do aktywnych stanów (nav, chip, button-tonal)
 *   surface-N      — warstwowe powierzchnie (im wyższy numer, tym wyższa elewacja)
 *   outline        — borderry; outline-variant — subtelniejsze
 *   state-*        — overlay state layers (hover/focus/pressed) na powierzchni
 */
:root {
  /* Tła i powierzchnie (M3 surface tonal palette) */
  --bg:                       oklch(0.985 0.003 250);
  --surface:                  oklch(1 0 0);
  --surface-1:                oklch(0.985 0.004 250);
  --surface-2:                oklch(0.975 0.006 250);
  --surface-3:                oklch(0.965 0.008 250);
  --surface-4:                oklch(0.955 0.010 250);
  --surface-5:                oklch(0.945 0.012 250);

  /* Bordery (M3 outline) */
  --border:                   oklch(0.92 0.006 250);
  --border-strong:            oklch(0.84 0.008 250);
  --outline:                  oklch(0.74 0.008 250);
  --outline-variant:          oklch(0.90 0.006 250);

  /* Tekst */
  --text:                     oklch(0.22 0.015 255);
  --text-2:                   oklch(0.42 0.012 255);
  --text-3:                   oklch(0.60 0.010 255);

  /* Primary — Google blue */
  --primary:                  oklch(0.575 0.17 252);
  --primary-hover:            oklch(0.515 0.18 252);
  --primary-pressed:          oklch(0.46 0.18 252);
  --on-primary:               oklch(1 0 0);
  --primary-container:        oklch(0.92 0.045 252);
  --on-primary-container:     oklch(0.28 0.14 252);

  /* Surface tint (subtelne nadbarwienie powierzchni primary) */
  --surface-tint:             oklch(0.575 0.17 252 / 0.05);

  /* State layers (overlay przy hover/focus/press) */
  --state-hover:              oklch(0.22 0.015 255 / 0.06);
  --state-focus:              oklch(0.22 0.015 255 / 0.10);
  --state-pressed:            oklch(0.22 0.015 255 / 0.12);
  --state-hover-primary:      oklch(0.575 0.17 252 / 0.08);
  --state-focus-primary:      oklch(0.575 0.17 252 / 0.12);

  /* Legacy aliasy — zachowane dla kompatybilności starych selektorów */
  --accent:                   var(--primary);
  --accent-fg:                var(--on-primary);
  --danger:                   var(--c-rej);
  --success:                  var(--c-ok);
  --warning:                  var(--c-prog);
  --text-muted:               var(--text-3);

  /* Kolory statusów leadów (Material 3 semantic) */
  --c-new:                    oklch(0.55 0.17 252);
  --c-new-bg:                 oklch(0.94 0.04 252);
  --c-prog:                   oklch(0.58 0.14 75);
  --c-prog-bg:                oklch(0.95 0.06 80);
  --c-ok:                     oklch(0.52 0.13 155);
  --c-ok-bg:                  oklch(0.94 0.06 155);
  --c-rej:                    oklch(0.55 0.18 25);
  --c-rej-bg:                 oklch(0.95 0.04 25);

  /* Kształt — Material 3 shape scale */
  --shape-xs:                 4px;
  --shape-sm:                 8px;
  --shape-md:                 12px;
  --shape-lg:                 16px;
  --shape-xl:                 28px;
  --shape-full:               999px;
  /* Legacy aliasy */
  --radius:                   var(--shape-md);
  --radius-sm:                var(--shape-sm);

  /* Elewacja — Material 3 (5 poziomów, miękkie cienie) */
  --elev-0:                   none;
  --elev-1:                   0 1px 2px oklch(0 0 0 / 0.05), 0 1px 3px oklch(0 0 0 / 0.07);
  --elev-2:                   0 1px 3px oklch(0 0 0 / 0.07), 0 4px 8px -2px oklch(0 0 0 / 0.08);
  --elev-3:                   0 4px 8px -2px oklch(0 0 0 / 0.08), 0 12px 24px -6px oklch(0 0 0 / 0.10);
  --elev-4:                   0 8px 24px -4px oklch(0 0 0 / 0.12), 0 4px 8px -2px oklch(0 0 0 / 0.06);
  --elev-5:                   0 24px 48px -12px oklch(0 0 0 / 0.18), 0 12px 24px -8px oklch(0 0 0 / 0.10);
  /* Legacy aliasy */
  --shadow-1:                 var(--elev-1);
  --shadow-2:                 var(--elev-3);
  --shadow-3:                 var(--elev-5);
  --shadow-drawer:            -16px 0 32px -8px oklch(0 0 0 / 0.12), -4px 0 8px -2px oklch(0 0 0 / 0.06);

  /* Motion — Material 3 emphasized easing */
  --motion-fast:              120ms;
  --motion-std:               200ms;
  --motion-slow:              320ms;
  --ease-std:                 cubic-bezier(0.2, 0, 0, 1);
  --ease-emph:                cubic-bezier(0.3, 0, 0, 1);
  --ease-decel:               cubic-bezier(0, 0, 0, 1);

  /* Layout */
  --sidebar-w:                260px;
  --topbar-h:                 60px;
  --drawer-w:                 560px;
  --bottom-nav-h:             64px;
}

/* ---------- Dark mode tokens (M3 dark surface palette) ----------
   Włączamy klasą .dark na <html> (toggleTheme() w mobile-tools.js).
   Domyślnie respektuje prefers-color-scheme przy pierwszym ładowaniu. */
html.dark {
  --bg:                       oklch(0.155 0.012 255);
  --surface:                  oklch(0.180 0.014 255);
  --surface-1:                oklch(0.205 0.015 255);
  --surface-2:                oklch(0.230 0.016 255);
  --surface-3:                oklch(0.255 0.017 255);
  --surface-4:                oklch(0.280 0.018 255);
  --surface-5:                oklch(0.305 0.019 255);

  --border:                   oklch(0.30 0.012 255);
  --border-strong:            oklch(0.40 0.014 255);
  --outline:                  oklch(0.50 0.014 255);
  --outline-variant:          oklch(0.30 0.012 255);

  --text:                     oklch(0.95 0.005 255);
  --text-2:                   oklch(0.74 0.012 255);
  --text-3:                   oklch(0.58 0.010 255);

  --primary:                  oklch(0.80 0.135 252);
  --primary-hover:            oklch(0.86 0.13 252);
  --primary-pressed:          oklch(0.74 0.14 252);
  --on-primary:               oklch(0.20 0.10 252);
  --primary-container:        oklch(0.34 0.13 252);
  --on-primary-container:     oklch(0.88 0.08 252);

  --surface-tint:             oklch(0.80 0.135 252 / 0.06);

  --state-hover:              oklch(1 0 0 / 0.08);
  --state-focus:              oklch(1 0 0 / 0.12);
  --state-pressed:            oklch(1 0 0 / 0.16);
  --state-hover-primary:      oklch(0.80 0.135 252 / 0.10);
  --state-focus-primary:      oklch(0.80 0.135 252 / 0.16);

  --c-new:                    oklch(0.78 0.13 252);
  --c-new-bg:                 oklch(0.32 0.08 252);
  --c-prog:                   oklch(0.78 0.13 75);
  --c-prog-bg:                oklch(0.32 0.06 80);
  --c-ok:                     oklch(0.78 0.13 155);
  --c-ok-bg:                  oklch(0.30 0.07 155);
  --c-rej:                    oklch(0.78 0.13 25);
  --c-rej-bg:                 oklch(0.32 0.08 25);

  --shadow-drawer:            -16px 0 32px -8px oklch(0 0 0 / 0.5), -4px 0 8px -2px oklch(0 0 0 / 0.3);
}

/* ---------- 2. Reset + typografia ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mono { font-family: "Geist Mono", ui-monospace, monospace; }
.dim  { color: var(--text-3); font-size: 12px; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

/* Material Symbols Outlined — bazowe ustawienia.
   Wewnątrz selektorów `font-variation-settings` jest dopisywany dla wagi/wypełnienia,
   ale tu ustawiamy sane defaults dla widoków, w których ikona nie ma dedykowanej reguły. */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  font-feature-settings: 'liga';
  vertical-align: middle;
}

/* ---------- 3. Layout: App shell ----------
   Flexbox zamiast Grid — deterministyczne, mniej miejsca na rozjazd.
   Sidebar ma SZTYWNĄ szerokość, main wypełnia resztę. */
.app { display: flex; min-height: 100vh; }
.app > .main { flex: 1; min-width: 0; }

.nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: oklch(0.2 0.02 250 / 0.35);
  backdrop-filter: blur(2px);
  z-index: 40;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--outline-variant);
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  z-index: 50;
  /* Scrollbar Material You: niewidoczny do hovera, cienki, bez tracka */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color var(--motion-std) var(--ease-std);
}
.sidebar:hover { scrollbar-color: var(--outline) transparent; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--shape-full);
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color var(--motion-std) var(--ease-std);
}
.sidebar:hover::-webkit-scrollbar-thumb { background-color: var(--outline); }
.sidebar::-webkit-scrollbar-thumb:hover { background-color: var(--text-3); }
.sidebar-top { display: flex; flex-direction: column; gap: 18px; }

.brand {
  display: flex; gap: 12px; padding: 8px 12px 4px;
  align-items: center;
}
.brand-text { flex: 1; min-width: 0; }
img.brand-mark {
  width: 36px; height: 36px;
  border-radius: var(--shape-sm);
  flex-shrink: 0;
  object-fit: contain;
  background: var(--surface);
}
.brand-name {
  font-weight: 600; font-size: 17px; letter-spacing: -0.02em;
  color: var(--text);
}
.brand-tag  {
  font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 1px;
}

.nav-section { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.nav-label   {
  font-size: 11px; color: var(--text-3);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 16px 6px; font-weight: 500;
}

/* Material 3 navigation drawer item */
.nav-item    {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; height: 40px;
  border-radius: var(--shape-full);
  color: var(--text-2); font-size: 14px; font-weight: 500;
  background: none; border: none; text-align: left;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-std),
              color var(--motion-fast) var(--ease-std);
  text-decoration: none;
  white-space: nowrap; overflow: hidden;
}
.nav-ico {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  font-size: 22px; line-height: 1;
  flex-shrink: 0;
  color: var(--text-3);
  transition: color var(--motion-fast) var(--ease-std);
}
.nav-ico.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.nav-item:hover {
  background: var(--state-hover);
  color: var(--text);
}
.nav-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- Kolorowe ikony nawigacji (Material You expressive) ----------
 * Każdy link ma data-color="X" → tonalny lookup. Lekka, ale wyrazista paleta.
 * Hover: ikona robi się ciemniejsza (większy kontrast). Active: bg pill w
 * pasującym tonal container, ikona w intensywnym kolorze + filled.
 */
.nav-item .nav-ico { color: var(--ico-c, var(--text-3)); }

.nav-item[data-color="amber"]  { --ico-c: oklch(0.68 0.16 80);  --ico-bg: oklch(0.94 0.06 80);  --ico-on: oklch(0.32 0.10 80);  }
.nav-item[data-color="blue"]   { --ico-c: oklch(0.58 0.17 252); --ico-bg: oklch(0.93 0.05 252); --ico-on: oklch(0.28 0.14 252); }
.nav-item[data-color="indigo"] { --ico-c: oklch(0.55 0.18 280); --ico-bg: oklch(0.93 0.05 280); --ico-on: oklch(0.28 0.14 280); }
.nav-item[data-color="green"]  { --ico-c: oklch(0.58 0.14 155); --ico-bg: oklch(0.93 0.06 155); --ico-on: oklch(0.30 0.12 155); }
.nav-item[data-color="purple"] { --ico-c: oklch(0.56 0.18 305); --ico-bg: oklch(0.93 0.05 305); --ico-on: oklch(0.30 0.14 305); }
.nav-item[data-color="teal"]   { --ico-c: oklch(0.58 0.13 195); --ico-bg: oklch(0.93 0.06 195); --ico-on: oklch(0.30 0.10 195); }
.nav-item[data-color="red"]    { --ico-c: oklch(0.60 0.18 25);  --ico-bg: oklch(0.94 0.05 25);  --ico-on: oklch(0.32 0.16 25);  }
.nav-item[data-color="orange"] { --ico-c: oklch(0.66 0.16 50);  --ico-bg: oklch(0.94 0.07 50);  --ico-on: oklch(0.32 0.12 50);  }
.nav-item[data-color="pink"]   { --ico-c: oklch(0.62 0.17 340); --ico-bg: oklch(0.94 0.05 340); --ico-on: oklch(0.30 0.14 340); }
.nav-item[data-color="coral"]  { --ico-c: oklch(0.62 0.18 35);  --ico-bg: oklch(0.94 0.06 35);  --ico-on: oklch(0.32 0.14 35);  }
.nav-item[data-color="gray"]   { --ico-c: oklch(0.55 0.01 255); --ico-bg: var(--surface-3);     --ico-on: oklch(0.30 0.01 255); }

.nav-item:hover .nav-ico { color: var(--ico-on, var(--text)); }

.nav-item.active {
  background: var(--ico-bg, var(--primary-container));
  color: var(--ico-on, var(--on-primary-container));
}
.nav-item.active .nav-ico {
  color: var(--ico-on, var(--on-primary-container));
}
.nav-item.active .nav-ico.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Dark mode: rozjaśniamy tonalne kolory ikon, żeby kontrast trzymał */
html.dark .nav-item[data-color="amber"]  { --ico-c: oklch(0.80 0.14 80);  --ico-bg: oklch(0.32 0.08 80);  --ico-on: oklch(0.92 0.10 80);  }
html.dark .nav-item[data-color="blue"]   { --ico-c: oklch(0.80 0.13 252); --ico-bg: oklch(0.32 0.10 252); --ico-on: oklch(0.92 0.08 252); }
html.dark .nav-item[data-color="indigo"] { --ico-c: oklch(0.78 0.14 280); --ico-bg: oklch(0.32 0.10 280); --ico-on: oklch(0.92 0.08 280); }
html.dark .nav-item[data-color="green"]  { --ico-c: oklch(0.80 0.13 155); --ico-bg: oklch(0.30 0.09 155); --ico-on: oklch(0.92 0.08 155); }
html.dark .nav-item[data-color="purple"] { --ico-c: oklch(0.80 0.13 305); --ico-bg: oklch(0.32 0.10 305); --ico-on: oklch(0.92 0.08 305); }
html.dark .nav-item[data-color="teal"]   { --ico-c: oklch(0.80 0.12 195); --ico-bg: oklch(0.30 0.09 195); --ico-on: oklch(0.92 0.08 195); }
html.dark .nav-item[data-color="red"]    { --ico-c: oklch(0.80 0.13 25);  --ico-bg: oklch(0.32 0.10 25);  --ico-on: oklch(0.92 0.10 25);  }
html.dark .nav-item[data-color="orange"] { --ico-c: oklch(0.82 0.13 50);  --ico-bg: oklch(0.32 0.10 50);  --ico-on: oklch(0.92 0.10 50);  }
html.dark .nav-item[data-color="pink"]   { --ico-c: oklch(0.80 0.13 340); --ico-bg: oklch(0.32 0.10 340); --ico-on: oklch(0.92 0.10 340); }
html.dark .nav-item[data-color="coral"]  { --ico-c: oklch(0.80 0.14 35);  --ico-bg: oklch(0.32 0.10 35);  --ico-on: oklch(0.92 0.10 35);  }
.nav-item.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.nav-item .soon { margin-left: auto; font-size: 10.5px; color: var(--text-3); font-family: "Geist Mono"; }

.sidebar-foot {
  margin-top: auto; padding: 12px;
  border-top: 1px solid var(--outline-variant);
  display: flex; gap: 12px; align-items: center; font-size: 13px;
}
.sidebar-foot .who { flex: 1; min-width: 0; }
.avatar {
  width: 36px; height: 36px; border-radius: var(--shape-full);
  background: linear-gradient(135deg, var(--primary), oklch(0.55 0.17 290));
  color: var(--on-primary); display: grid; place-items: center;
  font-weight: 600; font-size: 13px;
  flex-shrink: 0;
  box-shadow: var(--elev-1);
}
.who-name { font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.who-role { color: var(--text-3); font-size: 11.5px; margin-top: 1px; }

/* ---------- Topbar (Google-search inspired) ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h); border-bottom: 1px solid var(--outline-variant);
  padding: 0 24px; display: flex; align-items: center; gap: 14px;
  background: var(--surface); position: sticky; top: 0; z-index: 30;
  backdrop-filter: saturate(180%) blur(8px);
}
/* nav-toggle: ukryty na desktopie, pokazywany w breakpoincie mobile (poniżej).
   !important bo `.icon-btn` (zdefiniowany niżej w pliku) ma `display: inline-grid` o tej samej specyficzności. */
.icon-btn.nav-toggle { display: none; }
.crumbs { font-size: 13px; color: var(--text-3); display: flex; gap: 6px; align-items: center; min-width: 0; }
.crumbs strong { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs-sep { opacity: 0.5; }

.page { padding: 28px 32px 80px; max-width: 1400px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.page-title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.page-title { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; margin: 0; color: var(--text); }
.page-sub   { color: var(--text-3); font-size: 13.5px; margin-top: 4px; }
.page-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }

/* ---------- 4. Komponenty — Material 3 ---------- */

/* ---------- Buttons ---------- *
 * Warianty M3:
 *   .btn               — Outlined (domyślny: border + bg surface)
 *   .btn.accent        — Filled (primary background, biały tekst)
 *   .btn.tonal         — Filled tonal (primary-container background)
 *   .btn.text          — Text only (bez bg, bez bordera)
 *   .btn.danger        — Outlined w kolorze error
 *   .btn-sm            — kompaktowy
 *   .btn.block         — full-width
 *
 * Każdy ma state layer (overlay) na hover/focus/active dla M3 feel.
 */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--outline);
  background: var(--surface);
  color: var(--text);
  padding: 0 18px; height: 40px; min-width: 0;
  border-radius: var(--shape-full);
  font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease-std),
              border-color var(--motion-fast) var(--ease-std),
              box-shadow var(--motion-fast) var(--ease-std),
              transform var(--motion-fast) var(--ease-std);
  overflow: hidden;
  isolation: isolate;
}
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-std);
  pointer-events: none;
  z-index: -1;
}
.btn:hover::before          { opacity: 0.06; }
.btn:focus-visible          { outline: none; }
.btn:focus-visible::before  { opacity: 0.10; }
.btn:active::before         { opacity: 0.14; }
.btn:active                 { transform: scale(0.98); }
.btn:hover                  { border-color: var(--outline); }

.btn .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

/* Filled — Google blue */
.btn.accent {
  background: var(--primary);
  color: var(--on-primary);
  border-color: transparent;
  box-shadow: var(--elev-0);
}
.btn.accent:hover  { box-shadow: var(--elev-1); }
.btn.accent:active { box-shadow: var(--elev-0); }

/* Filled tonal — light primary tint */
.btn.tonal {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-color: transparent;
}

/* Text — minimal */
.btn.text {
  background: transparent;
  border-color: transparent;
  padding: 0 12px;
}

/* Danger — outlined error */
.btn.danger {
  color: var(--c-rej);
  border-color: var(--c-rej);
  background: var(--surface);
}
.btn.danger:hover { background: var(--c-rej-bg); }

/* Block — full width pill */
.btn.block  { width: 100%; height: 44px; font-size: 14px; }
.btn-sm     { padding: 0 12px; height: 30px; font-size: 12.5px; gap: 6px; }
.btn-sm .material-symbols-outlined { font-size: 16px; }

/* Icon button — okrągły IconButton z M3 */
.icon-btn   {
  position: relative;
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border-radius: var(--shape-full);
  background: none; border: none; color: var(--text-2);
  flex-shrink: 0;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-std);
}
.icon-btn::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; border-radius: inherit;
  opacity: 0; transition: opacity var(--motion-fast) var(--ease-std);
  pointer-events: none;
}
.icon-btn:hover { color: var(--text); }
.icon-btn:hover::before  { opacity: 0.08; }
.icon-btn:active::before { opacity: 0.14; }
.icon-btn .material-symbols-outlined {
  font-size: 22px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---------- Stats — Material 3 filled cards ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.stat {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-md);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-std),
              border-color var(--motion-fast) var(--ease-std),
              box-shadow var(--motion-fast) var(--ease-std),
              transform var(--motion-fast) var(--ease-std);
  overflow: hidden;
  isolation: isolate;
}
.stat::before {
  content: ''; position: absolute; inset: 0;
  background: var(--primary);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-std);
  pointer-events: none;
  z-index: -1;
}
.stat:hover {
  border-color: var(--outline);
  box-shadow: var(--elev-1);
}
.stat:hover::before { opacity: 0.03; }
.stat.selected {
  background: var(--primary-container);
  border-color: var(--primary);
  box-shadow: var(--elev-1);
}
.stat.selected .stat-label,
.stat.selected .stat-value { color: var(--on-primary-container); }
.stat-label     {
  font-size: 11.5px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500; display: flex; gap: 8px; align-items: center;
}
.stat-dot       {
  width: 8px; height: 8px; border-radius: var(--shape-full);
  display: inline-block; flex-shrink: 0;
}
.stat-dot.gray,   .gray   { background: oklch(0.62 0.01 255); }
.stat-dot.blue,   .blue   { background: var(--primary); }
.stat-dot.green,  .green  { background: oklch(0.54 0.15 155); }
.stat-dot.yellow, .yellow { background: oklch(0.76 0.14 82);  }
.stat-dot.red,    .red    { background: oklch(0.58 0.18 25);  }
.stat-dot.purple, .purple { background: oklch(0.54 0.16 295); }
.stat-dot.pink,   .pink   { background: oklch(0.64 0.16 345); }
.stat-dot.orange, .orange { background: oklch(0.68 0.15 52);  }
.c-new          { background: var(--c-new); }
.c-prog         { background: var(--c-prog); }
.c-ok           { background: var(--c-ok); }
.c-rej          { background: var(--c-rej); }
.stat-value     {
  font-size: 32px; font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.05; color: var(--text);
}
.stat-delta     { font-size: 12px; color: var(--text-3); }  /* v3: jedna rodzina pisma */

/* ---------- Toolbar: search + filtry ---------- */
.toolbar {
  display: flex; gap: 10px; align-items: center; margin-bottom: 14px;
  flex-wrap: wrap;
}
.search {
  flex: 1; min-width: 240px;
  position: relative;
  display: flex; align-items: center;
}
.search-icon {
  position: absolute; left: 14px; color: var(--text-3); pointer-events: none;
  font-size: 18px; display: inline-flex;
}
.search-icon.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.search-input {
  width: 100%; background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--shape-full);
  padding: 10px 16px 10px 42px; font-size: 14px; outline: none;
  height: 44px;
  transition: background var(--motion-fast) var(--ease-std),
              border-color var(--motion-fast) var(--ease-std),
              box-shadow var(--motion-fast) var(--ease-std);
}
.search-input:hover  { background: var(--surface-3); }
.search-input:focus  {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--state-focus-primary);
}
.search-input::-webkit-search-cancel-button { cursor: pointer; }

.filters-popover { position: relative; }
.filters-popover summary { list-style: none; display: inline-flex; }
.filters-popover summary::-webkit-details-marker { display: none; }
.filters-popover .badge {
  background: var(--primary); color: var(--on-primary);
  font-size: 11px; padding: 1px 7px; border-radius: var(--shape-full);
  font-weight: 600; margin-left: 4px;
}
.popover {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 480px; max-width: 92vw;
  background: var(--surface); border: 1px solid var(--outline-variant);
  border-radius: var(--shape-md); box-shadow: var(--elev-3);
  padding: 18px; z-index: 25;
}
.filter-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.popover-foot {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--outline-variant);
}

/* ---------- Filter chips — Material 3 ---------- */
.filters { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 32px;
  border: 1px solid var(--outline);
  border-radius: var(--shape-sm);
  background: var(--surface);
  color: var(--text-2); font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-std),
              color var(--motion-fast) var(--ease-std),
              border-color var(--motion-fast) var(--ease-std);
  overflow: hidden;
}
.chip::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-std);
  pointer-events: none;
}
.chip:hover::before  { opacity: 0.06; }
.chip:active::before { opacity: 0.12; }
.chip:hover  { color: var(--text); }
.chip.active {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-color: transparent;
}
.chip.active .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 500; }
.chip .count { font-family: "Geist Mono"; font-size: 11.5px; opacity: 0.7; }
.chip .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

/* ---------- Dropdown (eksport, menus) ---------- */
.dropdown { position: relative; }
.dropdown-menu {
  display: none;
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-sm);
  box-shadow: var(--elev-2);
  min-width: 200px; z-index: 25;
  padding: 6px;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  font-size: 13.5px; color: var(--text);
  border-radius: var(--shape-xs);
  text-decoration: none;
  cursor: pointer;
}
.dropdown-item::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-std);
  border-radius: inherit;
  pointer-events: none;
}
.dropdown-item:hover::before { opacity: 0.06; }

/* ---------- Table — Material 3 data table ---------- */
.tbl-wrap {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-md);
  overflow: hidden;
}
table.leads { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.leads th {
  text-align: left;
  background: var(--surface-1);
  border-bottom: 1px solid var(--outline-variant);
  padding: 12px 16px;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap;
}
table.leads td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--outline-variant);
  vertical-align: middle;
}
table.leads tr.row:last-child td { border-bottom: none; }
table.leads tr.row {
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-std);
}
table.leads tr.row:hover { background: var(--state-hover); }
.col-actions  { width: 48px; text-align: right; }

.who-cell    { display: flex; align-items: center; gap: 10px; }
.who-avatar  {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 600;
  color: var(--text-2);
  flex-shrink: 0;
}
.who-avatar.lg { width: 44px; height: 44px; font-size: 14px; }
.who-name-row { font-weight: 500; }
.who-extra    { color: var(--text-3); font-size: 11.5px; }
td.contact    { font-family: "Geist Mono"; font-size: 12px; color: var(--text-2); }
td.contact a  { color: inherit; }
td.contact a:hover { color: var(--text); text-decoration: underline; }
td.contact .em{ display: block; color: var(--text-3); font-size: 11.5px; }
td.subj .lvl  { color: var(--text-3); font-size: 11px; display: block; margin-top: 1px; }
td.date       { white-space: nowrap; color: var(--text-2); font-size: 12px; }

.who-mini { display: inline-flex; align-items: center; gap: 6px; }
.mini-avatar {
  width: 22px; height: 22px; border-radius: 999px;
  background: linear-gradient(135deg, oklch(0.78 0.08 258), oklch(0.62 0.12 290));
  color: white; display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
}
.mini-name { font-size: 12.5px; }

/* ---------- Tagi (kolorowe) ---------- */
.tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--shape-full);
  font-size: 11.5px; font-weight: 500;
  margin: 1px 2px 1px 0;
}
.tag-slate  { background: oklch(0.94 0.005 255); color: oklch(0.42 0.02 255); }
.tag-blue   { background: oklch(0.94 0.04 258); color: oklch(0.42 0.16 258); }
.tag-green  { background: oklch(0.94 0.05 155); color: oklch(0.4 0.13 155); }
.tag-amber  { background: oklch(0.94 0.06 75);  color: oklch(0.48 0.14 75); }
.tag-red    { background: oklch(0.94 0.04 25);  color: oklch(0.5 0.17 25); }
.tag-violet { background: oklch(0.94 0.04 295); color: oklch(0.46 0.16 295); }
.tag-pink   { background: oklch(0.94 0.04 350); color: oklch(0.5 0.16 350); }
.tag-teal   { background: oklch(0.94 0.04 195); color: oklch(0.46 0.12 195); }
.tag-row { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- Status badge / select — Material 3 chips ---------- */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--shape-full);
  font-size: 11.5px; font-weight: 500;
}
.st-new  { background: var(--c-new-bg);  color: var(--c-new); }
.st-prog { background: var(--c-prog-bg); color: var(--c-prog); }
.st-ok   { background: var(--c-ok-bg);   color: var(--c-ok); }
.st-rej  { background: var(--c-rej-bg);  color: var(--c-rej); }

.status-form  { margin: 0; }
.status-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 10px;
  padding: 5px 26px 5px 12px;
  border-radius: var(--shape-full); border: 1px solid transparent;
  font-size: 12px; font-weight: 500; cursor: pointer;
  min-height: 28px;
  transition: filter var(--motion-fast) var(--ease-std);
}
.status-select:hover { filter: brightness(0.97); }
html.dark .status-select:hover { filter: brightness(1.1); }
.status-select.status-new  { background-color: var(--c-new-bg);  color: var(--c-new);  border-left: 3px solid var(--c-new); }
.status-select.status-prog { background-color: var(--c-prog-bg); color: var(--c-prog); border-left: 3px solid var(--c-prog); }
.status-select.status-ok   { background-color: var(--c-ok-bg);   color: var(--c-ok);   border-left: 3px solid var(--c-ok); }
.status-select.status-rej  { background-color: var(--c-rej-bg);  color: var(--c-rej);  border-left: 3px solid var(--c-rej); }

/* ---------- Empty ---------- */
.empty { padding: 60px 20px; text-align: center; color: var(--text-3); }
.empty-title { color: var(--text); font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.empty-body  { font-size: 13px; max-width: 360px; margin: 0 auto 14px; }

/* ---------- Modal — Material 3 dialog ----------
   WAŻNE: <dialog> jest domyślnie display:none.
   `display: flex` MUSI iść tylko gdy modal jest faktycznie otwarty.
*/
.modal {
  border: none; border-radius: var(--shape-xl);
  padding: 0; width: 560px; max-width: 96vw;
  max-height: 90vh; overflow: hidden;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--elev-5);
}
.modal[open] {
  display: flex; flex-direction: column;
  animation: m3-dialog-enter var(--motion-std) var(--ease-emph);
}
.modal::backdrop {
  background: oklch(0.10 0.02 250 / 0.40);
  backdrop-filter: blur(2px);
}
@keyframes m3-dialog-enter {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-head {
  padding: 24px 28px 16px; border-bottom: 1px solid var(--outline-variant);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.drawer-title { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.drawer-sub   { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.modal-body   { padding: 20px 28px 8px; flex: 1; overflow-y: auto; }
.modal-foot   {
  padding: 16px 24px;
  border-top: 1px solid var(--outline-variant);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--surface);
  flex-shrink: 0;
}
.modal-form   { margin: 0; display: flex; flex-direction: column; max-height: 100%; flex: 1; min-height: 0; }
.modal-form .modal-body { flex: 1; }

.field        { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field-label  { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.field-label .req { color: var(--c-rej); }
.field-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.input, .textarea, .select {
  width: 100%; background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--shape-sm);
  padding: 11px 14px; font-size: 14px; outline: none;
  min-height: 44px;
  color: var(--text);
  transition: background var(--motion-fast) var(--ease-std),
              border-color var(--motion-fast) var(--ease-std),
              box-shadow var(--motion-fast) var(--ease-std);
}
.input:hover, .textarea:hover, .select:hover { background: var(--surface-3); }
.input:focus, .textarea:focus, .select:focus {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--state-focus-primary);
}
.textarea { resize: vertical; min-height: 92px; }

/* RODO collapsible */
.rodo-section {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; margin-bottom: 8px;
}
.rodo-section summary { cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 4px 0; }
.rodo-body { padding-top: 8px; }

/* Duplicate modal cards */
.dup-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.dup-card .btn-sm { align-self: flex-start; margin-top: 4px; }
.dup-name { font-weight: 500; display: flex; gap: 8px; align-items: center; }
.dup-meta { font-size: 12px; color: var(--text-2); }

/* ============================================================
   DRAWER (z prawej) — Material 3 modal side sheet
   ============================================================ */
.drawer {
  position: fixed; top: 0; right: 0;
  width: var(--drawer-w); max-width: 96vw;
  height: 100dvh;
  background: var(--surface);
  border-left: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-drawer);
  z-index: 45;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--motion-std) var(--ease-emph);
}
.drawer-open .drawer { transform: translateX(0); }
.drawer-open .nav-overlay { display: block; z-index: 44; }

.drawer-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--outline-variant);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-shrink: 0;
}
.drawer-head-l { display: flex; gap: 12px; align-items: center; min-width: 0; }
.drawer-head-r { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.drawer-body {
  flex: 1; overflow-y: auto; padding: 20px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.drawer-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--outline-variant);
  display: flex; gap: 8px; justify-content: flex-end;
  background: var(--surface);
  flex-shrink: 0;
}

.drawer-quick {
  display: flex; gap: 8px; flex-wrap: wrap;
}

.dr-section {
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-md);
  padding: 14px 16px;
  background: var(--surface-1);
}
.dr-section-label {
  font-size: 11px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 500; margin-bottom: 10px;
}
.dr-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
}
.dr-label { font-size: 11px; color: var(--text-3); margin-bottom: 2px; }
.dr-value { font-size: 13.5px; color: var(--text); word-break: break-word; }
.dr-value a:hover { text-decoration: underline; color: var(--accent); }
.dr-notes {
  font-size: 13px; color: var(--text); white-space: pre-wrap;
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 12px; line-height: 1.55;
}

.dr-rodo { background: oklch(0.97 0.015 90); border-color: oklch(0.88 0.06 90); }
.dr-danger { background: oklch(0.98 0.012 25); border-color: oklch(0.88 0.05 25); }
.danger-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Komentarze (timeline) */
.comment-form {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}
.timeline { display: flex; flex-direction: column; gap: 14px; }
.timeline-item { display: flex; gap: 10px; align-items: flex-start; }
.timeline-avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: var(--text-2);
  flex-shrink: 0;
}
.timeline-body { flex: 1; min-width: 0; }
.timeline-meta { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 4px; }
.timeline-meta strong { color: var(--text); font-weight: 500; }
.timeline-text {
  font-size: 13.5px; margin-top: 4px; line-height: 1.5;
  white-space: pre-wrap;
}

/* ---------- Logo na stronie logowania ---------- */
.login-brand img.brand-mark { width: 40px; height: 40px; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 24px; }
.login-card {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-xl);
  padding: 40px 36px;
  width: 100%; max-width: 400px;
  box-shadow: var(--elev-2);
}
.login-brand { display: flex; gap: 12px; margin-bottom: 24px; align-items: center; }
.login-title { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.login-sub   { margin: 0 0 22px; color: var(--text-3); font-size: 13px; }
.login-form  { display: flex; flex-direction: column; gap: 4px; }
.login-foot  { margin: 22px 0 0; font-size: 11.5px; color: var(--text-3); text-align: center; line-height: 1.6; }
.alert {
  background: var(--c-rej-bg); color: var(--c-rej);
  border: 1px solid oklch(0.85 0.05 25 / 0.5);
  padding: 12px 16px; border-radius: var(--shape-sm);
  font-size: 13.5px; margin-bottom: 14px;
}

/* ---------- Form card (admin) ---------- */
.form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  max-width: 640px;
}
.form-card .modal-form { width: 100%; }

/* ---------- Role badges ---------- */
.role-admin { background: oklch(0.94 0.04 295); color: oklch(0.42 0.16 295); }
.role-tutor { background: var(--c-new-bg);  color: var(--c-new); }
.role-staff { background: var(--c-ok-bg);   color: var(--c-ok); }

/* ---------- Audit log table ---------- */
.audit-tbl { font-size: 12.5px; }
.audit-tbl code {
  font-size: 11px; background: var(--surface-2);
  padding: 2px 6px; border-radius: 4px;
}
.audit-diff summary { cursor: pointer; font-size: 12px; color: var(--accent); }
.audit-diff[open] summary { margin-bottom: 6px; }
.audit-diff pre {
  background: var(--surface-2); padding: 8px 10px;
  border-radius: 6px; font-size: 11px;
  max-width: 480px; max-height: 300px;
  overflow: auto; margin: 0;
}

/* ============================================================
   KANBAN — Material 3 vibe
   ============================================================ */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 40px;
  min-height: 60vh;
}
.kanban-col {
  background: var(--surface-2);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-lg);
  display: flex; flex-direction: column;
  min-height: 200px;
}
.kanban-col-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface);
  border-radius: var(--shape-lg) var(--shape-lg) 0 0;
  display: flex; align-items: center; gap: 8px;
}
.kanban-col-label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.kanban-col-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-col-count {
  margin-left: auto;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--text-3);
  background: var(--surface-2);
  padding: 1px 7px; border-radius: 999px;
}
.kanban-col-body {
  flex: 1; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 60px;
}
.kanban-card {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-md);
  padding: 12px 14px;
  cursor: grab;
  transition: box-shadow var(--motion-fast) var(--ease-std),
              transform var(--motion-fast) var(--ease-std),
              border-color var(--motion-fast) var(--ease-std);
  display: flex; flex-direction: column; gap: 8px;
}
.kanban-card:hover { box-shadow: var(--elev-2); border-color: transparent; transform: translateY(-1px); }
.kanban-card:active { cursor: grabbing; transform: scale(0.99); }
.kanban-card-head { display: flex; align-items: center; gap: 8px; }
.kanban-card-name {
  font-weight: 500; font-size: 13.5px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kanban-card-meta { font-size: 11.5px; color: var(--text-3); }
.kanban-card-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.kanban-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 2px; padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.kanban-date { font-size: 11px; }

/* Drag states (Sortable.js) */
.kanban-ghost {
  opacity: 0.4;
  background: var(--c-new-bg);
  border: 1px dashed var(--accent);
}
.kanban-drag {
  box-shadow: var(--shadow-3);
  transform: rotate(1deg);
}

/* ============================================================
   ZAŁĄCZNIKI
   ============================================================ */
.attach-form { margin-bottom: 10px; }
.attach-drop {
  display: block;
  border: 1.5px dashed var(--outline);
  border-radius: var(--shape-md);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-std),
              background var(--motion-fast) var(--ease-std);
  background: var(--surface-2);
}
.attach-drop:hover {
  border-color: var(--primary);
  background: var(--primary-container);
}
.attach-drop input[type="file"] {
  display: none;
}
.attach-drop-text strong {
  display: block; font-size: 13.5px; color: var(--text);
}
.attach-drop-text span {
  display: block; font-size: 11.5px; margin-top: 2px;
}

.attach-list { display: flex; flex-direction: column; gap: 6px; }
.attach-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.attach-ico { font-size: 22px; flex-shrink: 0; }
.attach-meta { flex: 1; min-width: 0; }
.attach-name {
  font-size: 13px; font-weight: 500;
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-name:hover { color: var(--accent); text-decoration: underline; }
.attach-sub { font-size: 11.5px; }

/* ============================================================
   BOTTOM NAV + FAB (mobile) — Material 3 navigation bar
   ============================================================ */
.bottom-nav {
  display: none;                          /* włączane w breakpoincie mobile */
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  /* glass bar — spójny z topbar/sidebar theme'u Premium */
  background: color-mix(in oklch, var(--surface) 85%, transparent);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-top: 1px solid var(--outline-variant);
  z-index: 35;
  box-shadow: 0 -4px 24px oklch(0 0 0 / 0.06);
  align-items: stretch;
  gap: 2px;
  /* clip blokuje horyzontalny overflow ale pozwala FAB wystawać pionowo */
  overflow-x: clip;
  /* nigdy nie wybieraj tekstu w pasku — typowe „long-press accident" na mobile */
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bnav-item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 25%;                          /* hard-cap: max 5 itemów = po 20% */
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 4px;
  background: none; border: none;
  color: var(--text-3); font-size: 10.5px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  padding: 8px 2px 6px;
  position: relative;
  transition: color var(--motion-fast) var(--ease-std),
              transform var(--motion-fast) var(--ease-std);
}
.bnav-item .bnav-ico {
  font-size: 24px; line-height: 1;
  width: 56px; height: 32px;               /* Material 3 selection indicator pill */
  max-width: 100%;
  display: inline-grid; place-items: center;
  border-radius: var(--shape-full);
  flex-shrink: 0;
  transition: background var(--motion-std) var(--ease-emph);
}
.bnav-item .bnav-ico.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  transition: font-variation-settings var(--motion-std) var(--ease-emph),
              background var(--motion-std) var(--ease-emph);
}
.bnav-item .bnav-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
  line-height: 1.2;
}
.bnav-item.active { color: var(--on-primary-container); }
.bnav-item.active .bnav-ico {
  background: var(--primary-container);
}
.bnav-item.active .bnav-ico.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.bnav-item:active { transform: scale(0.94); }

/* FAB — wystaje 14px nad pasek, 48x48, nie zwiększa szerokości slotu */
.bnav-fab {
  position: relative;
  /* FAB w pasku, nie nad nim — koniec z 'wylewającą się' lupką */
  margin-top: 0;
  padding-top: 0; padding-bottom: 0;
  justify-content: center;
  gap: 0;
}
.bnav-fab .bnav-ico {
  width: 44px; height: 44px;
  border-radius: var(--shape-full);
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center;
  font-size: 22px; font-weight: 400;
  box-shadow: var(--elev-1);
  transition: box-shadow var(--motion-fast) var(--ease-std),
              transform var(--motion-fast) var(--ease-std);
}
.bnav-fab.active .bnav-ico { background: var(--primary); }
.bnav-fab:active .bnav-ico {
  box-shadow: var(--elev-1);
  transform: scale(0.96);
}

/* Bardzo wąskie ekrany — zwężamy pill i font, żeby na 320px nadal się mieściło */
@media (max-width: 360px) {
  .bnav-item { font-size: 10px; padding: 6px 1px 4px; }
  .bnav-item .bnav-ico { width: 48px; height: 28px; font-size: 22px; }
  .bnav-fab .bnav-ico { width: 40px; height: 40px; font-size: 20px; }
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; left: 50%; bottom: 90px;
  transform: translate(-50%, 60px);
  background: oklch(0.22 0.015 255);
  color: oklch(0.95 0 0);
  padding: 12px 20px; border-radius: var(--shape-xs);
  font-size: 13.5px; font-weight: 500;
  box-shadow: var(--elev-3);
  opacity: 0; transition: all var(--motion-std) var(--ease-emph);
  z-index: 100; pointer-events: none;
  max-width: 92vw;
}
html.dark .toast { background: oklch(0.88 0.005 255); color: oklch(0.20 0.012 255); }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* Warianty: success / error — kolorowy lewy pasek + ikona przez ::before */
.toast-success,
.toast-error {
  display: inline-flex; align-items: center; gap: 10px;
  padding-left: 16px;
  border-left: 4px solid var(--c-ok);
}
.toast-success { border-left-color: var(--c-ok); }
.toast-error   { border-left-color: var(--c-rej); }
.toast-success::before,
.toast-error::before {
  font-family: 'Material Symbols Outlined';
  font-size: 18px; line-height: 1;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  flex-shrink: 0;
}
.toast-success::before { content: 'check_circle'; color: var(--c-ok); }
.toast-error::before   { content: 'error';        color: var(--c-rej); }
html.dark .toast-success::before { color: oklch(0.72 0.13 155); }
html.dark .toast-error::before   { color: oklch(0.72 0.16 25); }

/* ============================================================
   KBD — klawisze + okno pomocy skrótów
   ============================================================ */
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-bottom-width: 2px;
  border-radius: var(--shape-xs);
  font: 500 11.5px/1 ui-monospace, 'SF Mono', Consolas, monospace;
  color: var(--text-1);
  box-shadow: 0 1px 0 oklch(0 0 0 / 0.04);
}
html.dark kbd {
  background: oklch(0.24 0.012 255);
  border-color: oklch(0.32 0.012 255);
}
.kbd-section { margin-bottom: 18px; }
.kbd-section:last-child { margin-bottom: 0; }
.kbd-section-title {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  margin-bottom: 8px;
}
.kbd-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--outline-variant);
  font-size: 13.5px;
}
.kbd-row:last-child { border-bottom: none; }
.kbd-row span { color: var(--text-2); margin-left: 4px; }

/* ============================================================
   PULL-TO-REFRESH indicator
   ============================================================ */
.ptr-indicator {
  position: fixed; top: -60px; left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12.5px; font-weight: 500;
  color: var(--text-2);
  box-shadow: var(--shadow-2);
  z-index: 100;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ============================================================
   Voice recording state
   ============================================================ */
.recording {
  background: var(--c-rej-bg) !important;
  color: var(--c-rej) !important;
  border-color: oklch(0.85 0.05 25) !important;
  animation: rec-pulse 1.2s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.55 0.17 25 / 0.4); }
  50% { box-shadow: 0 0 0 8px oklch(0.55 0.17 25 / 0); }
}

/* ============================================================
   DAILY VIEW
   ============================================================ */
.daily-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 22px;
}
.dsum {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-md); padding: 16px;
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: inherit;
  transition: border-color var(--motion-fast) var(--ease-std),
              box-shadow var(--motion-fast) var(--ease-std);
}
.dsum:hover { border-color: var(--outline); box-shadow: var(--elev-1); }
.dsum-num { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; }
.dsum-label { font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.dsum-reminders { border-left: 3px solid var(--c-prog); }
.dsum-fresh { border-left: 3px solid var(--c-new); }
.dsum-stale { border-left: 3px solid var(--c-rej); }

.daily-section { margin-bottom: 30px; }
.daily-h { font-size: 15px; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.015em; }
.daily-list { display: flex; flex-direction: column; gap: 8px; }
.daily-card {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-md); padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow var(--motion-fast) var(--ease-std),
              border-color var(--motion-fast) var(--ease-std),
              transform var(--motion-fast) var(--ease-std);
  display: flex; flex-direction: column; gap: 10px;
}
.daily-card:hover {
  box-shadow: var(--elev-2);
  border-color: transparent;
  transform: translateY(-1px);
}
.daily-card:active { transform: scale(0.99); }
.daily-card-head { display: flex; align-items: center; gap: 10px; }
.daily-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.daily-card--reminder { border-left: 3px solid var(--c-prog); }
.daily-card--stale { border-left: 3px solid var(--c-rej); opacity: 0.92; }
.daily-card--rating { border-left: 3px solid oklch(0.78 0.18 75); text-decoration: none; color: inherit; }
.daily-card-time { white-space: nowrap; margin-left: auto; }
.daily-card-meta { font-size: 12.5px; margin-top: 4px; line-height: 1.45; }
.daily-card-body { font-size: 12.5px; color: var(--text-2); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); word-wrap: break-word; }
.daily-empty {
  padding: 24px; text-align: center; color: var(--text-3);
  background: var(--surface-2); border-radius: var(--radius);
  font-size: 13px;
}

/* ============================================================
   6. Responsywność
   ============================================================ */
@media (max-width: 1100px) {
  .page { padding: 24px 24px 80px; }
  .stat { padding: 14px; }
  .stat-value { font-size: 26px; }
}

/* ----- Mobile (sidebar = szuflada; tabela = kompaktowe wiersze) ----- */
@media (max-width: 900px) {
  .app { flex-direction: column; }

  .sidebar {
    position: fixed; top: 0; left: 0;
    width: 280px; max-width: 85vw; height: 100dvh;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow-3);
  }
  .app.menu-open .sidebar { transform: translateX(0); }
  .app.menu-open .nav-overlay { display: block; }

  .icon-btn.nav-toggle { display: inline-grid; }

  .topbar { padding: 0 14px; gap: 8px; }
  .page { padding: 16px 14px 80px; }

  .page-head { gap: 14px; margin-bottom: 16px; }
  .page-title { font-size: 22px; }
  .page-actions { width: 100%; flex-wrap: wrap; }
  .page-actions .btn { flex: 1 1 auto; min-width: 0; }
  .page-actions .dropdown { flex: 1 1 auto; }
  .page-actions .dropdown .btn { width: 100%; }
  /* Field row: na małym ekranie wszystko w jedną kolumnę żeby pola się nie ucinały */
  .field-row { grid-template-columns: 1fr; gap: 0; }

  /* Stats — poziomy scroll (zamiast zlewania się) */
  .stats {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin: 0 -14px 14px;
    padding: 0 14px 8px;
  }
  .stats::-webkit-scrollbar { display: none; }
  .stat {
    flex: 0 0 auto;
    min-width: 130px;
    padding: 10px 14px;
    scroll-snap-align: start;
  }
  .stat-value { font-size: 22px; }
  .stat-delta { display: none; }
  .stat-label { font-size: 10.5px; }

  /* Toolbar — search pełna szerokość, filtry obok */
  .toolbar { gap: 6px; }
  .search { flex: 1 1 100%; }
  .toolbar > .btn:last-child { display: none; }   /* submit "Szukaj" — Enter w polu działa */
  .popover { position: fixed; right: 8px; left: 8px; width: auto; }

  /* Filtry chipy — poziomy scroll */
  .filters {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px 12px; padding: 0 14px 8px;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; }

  /* Bulk bar — stack */
  .bulk-bar { flex-direction: column; align-items: stretch; }
  .bulk-actions { margin-left: 0; }

  /* Tabela na mobile — KOMPAKTOWE WIERSZE:
     widoczne tylko: imię | status (badge) | strzałka */
  .tbl-wrap { border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
  /* Tabela leadów na mobile — całkowicie rezygnujemy z table-layout
     (różne implementacje przeglądarek walczyły z grid). Flex na .row
     daje pełną kontrolę nad rozkładem i overflow nie ma jak się zdarzyć. */
  table.leads, table.leads tbody, table.leads tr.row { display: block; width: 100%; }
  table.leads { font-size: 13.5px; }
  table.leads thead { display: none; }
  table.leads td { padding: 12px 8px; vertical-align: middle; display: block; }
  table.leads tr.row {
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border);
  }
  table.leads tr.row:last-child { border-bottom: none; }
  table.leads tr.row td.who-td {
    padding: 12px 0 12px 14px;
    flex: 1 1 auto; min-width: 0; overflow: hidden;
  }
  table.leads tr.row td.status-td {
    padding: 12px 0; flex: 0 0 auto;
    text-align: right; white-space: nowrap;
  }
  table.leads tr.row td.col-actions {
    padding: 12px 10px 12px 0;
    flex: 0 0 32px; text-align: right;
  }
  table.leads tr.row td.who-td .who-cell { min-width: 0; display: flex; align-items: center; gap: 10px; }
  table.leads tr.row td.who-td .who-avatar { flex-shrink: 0; }
  table.leads tr.row td.who-td .who-meta { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  table.leads tr.row td.who-td .who-name-row { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.leads tr.row td.who-td .who-extra { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Ukrywamy kolumny — pokazujemy je tylko w drawerze */
  table.leads .hide-mobile { display: none !important; }

  /* Etykieta "Uczeń" mała wyłączona — wiersz jest sam w sobie czytelny */
  table.leads td.who-td::before { content: none; }

  /* Status na mobile — patrz sekcja 10 (Sprint 1 v4) używająca .tag z _row.html.
     Stary pseudo-element ::after wycięty (był źródłem hard-cropping z max-width 90px). */

  /* Modal pełnoekranowy na mobile (!important żeby pobić inline width na <dialog>). */
  .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0;
    margin: 0;
  }
  .modal-body { max-height: none; flex: 1; padding-left: 18px; padding-right: 18px; }
  .modal-head { padding-left: 18px; padding-right: 18px; }
  .modal-foot { padding-left: 18px; padding-right: 18px; }

  /* Drawer pełnoekranowy */
  .drawer { width: 100vw; max-width: 100vw; box-shadow: none; }
  .drawer-body { padding: 14px; gap: 12px; }
  .drawer-head { padding: 14px; }
  .dr-grid { grid-template-columns: 1fr; gap: 8px; }
  .drawer-foot { padding: 12px 14px; }
  /* Bottom navigation widoczne tylko na mobile */
  .bottom-nav { display: flex; }

  /* Padding bottom żeby treść się nie chowała pod bottom nav */
  .page { padding-bottom: calc(var(--bottom-nav-h) + 24px + env(safe-area-inset-bottom)); }

  /* Akcje w drawerze: 2-kolumnowy grid na mobile — ikona + tekst mieszczą się
     bez ucinania. Pełna szerokość gdy nieparzysta ostatnia (default behaviour). */
  .drawer-quick {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .drawer-quick .btn {
    width: 100%; justify-content: center;
    padding: 10px 12px; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Edytuj zawsze na pełną szerokość (główne CTA) */
  .drawer-quick .btn.accent { grid-column: 1 / -1; }

  /* Kanban — przewijanie poziome zamiast 4 ciasnych kolumn */
  .kanban-board {
    grid-template-columns: repeat(4, 80vw);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px;
    padding: 0 14px 16px;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
  }
  .kanban-col { scroll-snap-align: start; }

  /* Daily summary — 1 kolumna na małych */
  .daily-summary { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dsum { padding: 12px 10px; }
  .dsum-num { font-size: 24px; }
  .dsum-label { font-size: 10px; }
}

/* ----- Mały telefon ----- */
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .filter-grid { grid-template-columns: 1fr; }
  .page-title { font-size: 20px; }
  .crumbs-root, .crumbs-sep { display: none; }
}

/* ============================================================
   7. Extensions — historycznie style-new.css.
   Zmerge'owane do app.css w Sprincie 1 audytu (jeden plik,
   jeden request, zero duplikacji headera).
   ============================================================ */
/* ---------- Prototype router screens ---------- */
.screen { display: none; }
.screen.active { display: block; }

/* ---------- Layout helpers ---------- */
.split-2 { display: grid; grid-template-columns: 320px 1fr; gap: 24px; }
.split-2 > .col-side { min-width: 0; }
.split-2 > .col-main { min-width: 0; }
@media (max-width: 900px) { .split-2 { grid-template-columns: 1fr; } }

.stack { display: flex; flex-direction: column; gap: 12px; }
.cluster { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
.dim-12 { font-size: 12px; color: var(--text-3); }

/* ---------- Card (rozszerzenie) — M3 outlined / elevated ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-md);
  padding: 18px 20px;
  transition: box-shadow var(--motion-fast) var(--ease-std);
}
.card.elevated {
  border-color: transparent;
  box-shadow: var(--elev-1);
}
.card.elevated:hover { box-shadow: var(--elev-2); }
.card.tight { padding: 14px 16px; }
.card-h {
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.card-h .dim-12 { margin-left: auto; font-weight: 400; }

/* ---------- Tabs — Material 3 primary tabs ---------- */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--outline-variant);
  margin-bottom: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  background: none; border: none;
  padding: 12px 18px;
  font-size: 13.5px; color: var(--text-2); font-weight: 500;
  cursor: pointer;
  margin-bottom: -1px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  transition: color var(--motion-fast) var(--ease-std);
}
.tab::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-std);
  pointer-events: none;
}
.tab::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 3px;
  background: var(--primary);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--motion-std) var(--ease-emph);
}
.tab:hover::before { opacity: 0.06; }
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--primary);
  font-weight: 600;
}
.tab.active::after { transform: scaleX(1); }
.tab .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.tab.active .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 600; }
.tab-count {
  font-family: "Geist Mono"; font-size: 11.5px; color: var(--text-3);
  background: var(--surface-2);
  padding: 2px 8px; border-radius: var(--shape-full);
}
.tab.active .tab-count { background: var(--primary); color: var(--on-primary); }

/* ---------- Level badges ---------- */
.lvl-badge {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 4px; font-size: 11px; font-weight: 500;
  letter-spacing: 0.02em;
}
.lvl-podst   { background: oklch(0.94 0.05 155); color: oklch(0.4 0.13 155); }
.lvl-srednia { background: oklch(0.94 0.04 258); color: oklch(0.42 0.16 258); }
.lvl-matura  { background: oklch(0.94 0.06 75);  color: oklch(0.48 0.14 75); }
.lvl-wyzsze  { background: oklch(0.94 0.04 295); color: oklch(0.46 0.16 295); }
.lvl-inne    { background: oklch(0.94 0.005 255); color: oklch(0.42 0.02 255); }
html.dark .lvl-podst   { background: oklch(0.32 0.05 155); color: oklch(0.85 0.10 155); }
html.dark .lvl-srednia { background: oklch(0.32 0.05 258); color: oklch(0.85 0.10 258); }
html.dark .lvl-matura  { background: oklch(0.32 0.06 75);  color: oklch(0.85 0.10 75); }
html.dark .lvl-wyzsze  { background: oklch(0.32 0.05 295); color: oklch(0.85 0.10 295); }
html.dark .lvl-inne    { background: var(--surface-3); color: var(--text-2); }

/* ---------- Difficulty dots ---------- */
.diff-dots { display: inline-flex; gap: 2px; vertical-align: middle; }
.diff-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--border-strong);
}
.diff-dot.on { background: var(--c-prog); }

/* ---------- STUDENTS list (uses table.leads style, no override needed) ---------- */
.students-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.student-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  cursor: pointer; transition: box-shadow 0.12s, border-color 0.12s;
  display: flex; flex-direction: column; gap: 10px;
}
.student-card:hover { box-shadow: var(--shadow-1); border-color: var(--border-strong); }
.student-card-head { display: flex; align-items: center; gap: 10px; }
.student-card-head .who-avatar { width: 36px; height: 36px; font-size: 13px; }
.student-card-name { font-weight: 500; font-size: 14px; }
.student-card-sub  { font-size: 11.5px; color: var(--text-3); }
.student-card-progress {
  display: flex; flex-direction: column; gap: 4px;
}
.student-card-progress-meta {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--text-3);
  font-family: "Geist Mono";
}
.progress {
  height: 6px; background: var(--surface-2);
  border-radius: 999px; overflow: hidden;
}
.progress-bar {
  height: 100%; background: var(--accent);
  border-radius: 999px;
  transition: width 0.24s ease;
}
.progress-bar.warn { background: var(--c-prog); }
.progress-bar.ok   { background: var(--c-ok); }
.student-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--text-3);
  padding-top: 8px; border-top: 1px dashed var(--border);
}

/* ---------- Student profile ---------- */
.profile-head {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 24px;
  margin-bottom: 16px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
}
.profile-avatar {
  width: 56px; height: 56px; border-radius: 999px;
  background: linear-gradient(135deg, oklch(0.7 0.12 258), oklch(0.55 0.15 290));
  color: white; display: grid; place-items: center;
  font-weight: 600; font-size: 18px;
}
.profile-meta-main {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.profile-name { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.profile-sub  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); }
.profile-actions { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .profile-head { grid-template-columns: 1fr; padding: 16px; }
  .profile-actions { flex-direction: column; align-items: stretch; }
  .profile-actions .btn { width: 100%; }
}

.profile-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.profile-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
.profile-stat-label {
  font-size: 10.5px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 500; margin-bottom: 4px;
}
.profile-stat-value {
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
}
@media (max-width: 900px) { .profile-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Timeline (profile, lekcje history) ---------- */
.lesson-timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.lesson-timeline::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 11px;
  width: 1px; background: var(--border);
}
.lesson-row {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.lesson-row:last-child { border-bottom: none; }
.lesson-dot {
  width: 22px; height: 22px; border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface);
  display: grid; place-items: center;
  font-size: 11px;
  z-index: 1;
  margin-top: 4px;
}
.lesson-dot.done { background: var(--c-ok); border-color: var(--c-ok); color: var(--bg); }
.lesson-dot.pending { background: var(--surface); }
.lesson-dot.skipped { background: var(--c-rej-bg); border-color: var(--c-rej); color: var(--c-rej); }
.lesson-dot.rescheduled { background: var(--c-prog-bg); border-color: var(--c-prog); color: var(--c-prog); }

.lesson-body { min-width: 0; }
.lesson-date {
  font-size: 11.5px; color: var(--text-3);
  font-family: "Geist Mono"; letter-spacing: -0.01em;
}
.lesson-topic {
  font-size: 14px; font-weight: 500; margin-top: 2px;
}
.lesson-topic-cat { color: var(--text-3); font-weight: 400; font-size: 12px; }
.lesson-notes {
  font-size: 12.5px; color: var(--text-2); margin-top: 4px;
  white-space: pre-wrap;
  background: var(--surface-2); padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.lesson-homework, .lesson-links {
  font-size: 12px; color: var(--text-2); margin-top: 4px;
}
.lesson-homework .lbl, .lesson-links .lbl {
  font-size: 10.5px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 500; margin-right: 4px;
}
.lesson-attachments {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.lesson-attachment {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: var(--radius-sm);
  font-size: 11.5px; color: var(--text-2);
}
.lesson-attachment::before { content: "📎"; font-size: 11px; }
.lesson-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ---------- Topics tree ---------- */
.topics-tree {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.topics-cat {
  border-bottom: 1px solid var(--border);
}
.topics-cat:last-child { border-bottom: none; }
.topics-cat-head {
  padding: 10px 16px;
  background: var(--surface-2);
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  user-select: none;
}
.topics-cat-head .chev { transition: transform 0.16s; }
.topics-cat.open .topics-cat-head .chev { transform: rotate(90deg); }
.topics-cat-count {
  margin-left: auto; font-family: "Geist Mono"; font-size: 11px;
  color: var(--text-3);
}
.topics-list { display: none; padding: 4px 0; }
.topics-cat.open .topics-list { display: block; }
.topic-row {
  display: grid;
  grid-template-columns: 18px 24px 1fr 80px 80px 32px;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.08s;
}
.topic-row:hover { background: var(--surface-2); }
.topic-check {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.topic-check.checked {
  background: var(--text); border-color: var(--text);
  color: var(--bg);
}
.topic-check.checked::after { content: "✓"; font-size: 11px; font-weight: 700; }
/* Mała kropka licznika linków + plików tematu — pokazujemy w miejscu checkboxa na liście */
.topic-row-badge {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: var(--shape-full);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 10px; font-weight: 600;
  display: grid; place-items: center;
  font-family: "Geist Mono";
}
.topic-row .topic-check { position: relative; }
.topic-title { font-weight: 500; }
.topic-desc { color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
.topic-time {
  font-family: "Geist Mono"; font-size: 11.5px; color: var(--text-3); text-align: right;
}
@media (max-width: 700px) {
  .topic-row { grid-template-columns: 18px 24px 1fr 50px 32px; }
  .topic-row .topic-diff { display: none; }
}

/* ---------- Wizard (plan nauki) ---------- */
.wizard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.wizard-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.wizard-step {
  padding: 16px 18px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--text-3);
  border-right: 1px solid var(--border);
  position: relative;
}
.wizard-step:last-child { border-right: none; }
.wizard-step-num {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-3);
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600;
  flex-shrink: 0;
}
.wizard-step.active { color: var(--text); background: var(--surface); }
.wizard-step.active .wizard-step-num { background: var(--text); border-color: var(--text); color: var(--bg); }
.wizard-step.done .wizard-step-num { background: var(--c-ok); border-color: var(--c-ok); color: var(--bg); }
.wizard-step.done .wizard-step-num::before { content: "✓"; font-weight: 700; }
.wizard-step.done .wizard-step-num-text { display: none; }
.wizard-step-label { font-weight: 500; line-height: 1.2; }
.wizard-step-hint { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.wizard-body { padding: 24px 28px; min-height: 320px; }
.wizard-foot {
  border-top: 1px solid var(--border);
  padding: 14px 22px;
  background: var(--surface-2);
  display: flex; justify-content: space-between; align-items: center;
}
.wizard-foot .meta {
  font-size: 12px; color: var(--text-3);
}
@media (max-width: 800px) {
  .wizard-head { grid-template-columns: repeat(4, 1fr); }
  .wizard-step { padding: 10px 8px; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 11px; }
  .wizard-step-hint { display: none; }
  .wizard-body { padding: 16px; }
}

/* Level cards on step 1 */
.level-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (max-width: 700px) { .level-cards { grid-template-columns: 1fr; } }
.level-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
  cursor: pointer;
  transition: all 0.14s;
  display: flex; flex-direction: column; gap: 6px;
}
.level-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.level-card.selected { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.level-card-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.level-card-desc { font-size: 12.5px; color: var(--text-3); }
.level-card-stats { font-family: "Geist Mono"; font-size: 11.5px; color: var(--text-3); margin-top: 4px; }

/* Paths picker on step 2 */
.path-cards { display: flex; flex-direction: column; gap: 8px; }
.path-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: all 0.12s;
}
.path-card:hover { border-color: var(--border-strong); }
.path-card.selected { border-color: var(--text); background: var(--surface-2); }
.path-card-meta { flex: 1; min-width: 0; }
.path-card-name { font-weight: 500; font-size: 13.5px; }
.path-card-stats { font-size: 11.5px; color: var(--text-3); font-family: "Geist Mono"; margin-top: 2px; }
.path-card .badge-add {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2);
}
.path-card.selected .badge-add { background: var(--text); color: var(--bg); }

/* Schedule step */
.schedule-mode {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 20px;
}
.schedule-mode-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
}
.schedule-mode-card.selected { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.schedule-mode-card .mode-name { font-weight: 600; font-size: 14px; }
.schedule-mode-card .mode-desc { font-size: 12px; color: var(--text-3); }
@media (max-width: 700px) { .schedule-mode { grid-template-columns: 1fr; } }

.schedule-summary {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 16px;
}
.schedule-summary-item { display: flex; flex-direction: column; gap: 2px; }
.schedule-summary-label { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.schedule-summary-value { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
@media (max-width: 700px) { .schedule-summary { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Lesson card (in plan view) ---------- */
.lesson-cards { display: flex; flex-direction: column; gap: 10px; }
.lesson-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: start;
  transition: box-shadow 0.12s;
}
/* Wersja sortowalna — z dodatkowa kolumna 18px na drag handle ⋮⋮ */
.lessons-sortable .lesson-card { grid-template-columns: 18px 56px 1fr auto; }
.lesson-card:hover { box-shadow: var(--shadow-1); }
.lesson-card.done { background: oklch(0.985 0.01 155 / 0.6); }
html.dark .lesson-card.done { background: oklch(0.22 0.02 155 / 0.5); }
.lesson-card-date {
  text-align: center;
  font-family: "Geist Mono"; font-size: 11.5px; color: var(--text-3);
  line-height: 1.3;
  padding-top: 2px;
}
.lesson-card-date .day { font-size: 22px; color: var(--text); font-weight: 600; display: block; line-height: 1.1; }
.lesson-card-body { min-width: 0; }
.lesson-card-title {
  font-size: 14.5px; font-weight: 500;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.lesson-card-cat { color: var(--text-3); font-size: 12px; }
.lesson-card-status {
  margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap;
}
.lesson-card-status .btn { padding: 4px 9px; font-size: 11.5px; min-height: 26px; }
.lesson-card-status .btn.is-on {
  background: var(--text); color: var(--bg); border-color: var(--text);
}
.lesson-card-extra { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.lesson-extra-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px;
  padding: 6px 8px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.lesson-extra-row .ico { flex-shrink: 0; margin-top: 1px; font-size: 14px; }
.lesson-extra-row .lbl { color: var(--text-3); margin-right: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.lesson-card-actions { display: flex; gap: 4px; flex-direction: column; }
@media (max-width: 700px) {
  .lesson-card { grid-template-columns: 48px 1fr; }
  .lessons-sortable .lesson-card { grid-template-columns: 18px 48px 1fr; }
  .lesson-card-actions { grid-column: 1 / -1; flex-direction: row; }
}

/* ---------- Plan summary header ---------- */
.plan-summary {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
  margin-bottom: 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
}
.plan-summary-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plan-summary-name { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.plan-summary-info { font-size: 12.5px; color: var(--text-3); display: flex; gap: 12px; flex-wrap: wrap; }
.plan-summary-info span { display: inline-flex; align-items: center; gap: 4px; }
.plan-summary-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.plan-progress-row {
  margin-top: 8px; display: flex; align-items: center; gap: 12px;
}
.plan-progress-row .progress { flex: 1; height: 8px; }
.plan-progress-row .pct {
  font-family: "Geist Mono"; font-size: 12px; font-weight: 600;
  min-width: 80px; text-align: right;
}
@media (max-width: 700px) {
  .plan-summary { grid-template-columns: 1fr; }
  .plan-summary-actions { flex-wrap: wrap; }
}

/* ---------- LISTINGS table ---------- */
.listing-row .listing-title {
  font-weight: 500;
  font-size: 13.5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.listing-row .listing-source {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--text-2);
  background: var(--surface-2); padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.listing-row .listing-source::before {
  content: ""; width: 6px; height: 6px;
  border-radius: 999px; background: var(--c-new);
}
/* override col-actions: dla ogłoszeń mamy 3 akcje, potrzebujemy więcej miejsca */
.listing-row td.actions-cell { width: auto; min-width: 130px; }
.listing-row td.actions-cell .row-actions {
  display: flex; gap: 4px; justify-content: flex-end; align-items: center;
  flex-wrap: nowrap;
}
.listing-row td.actions-cell .btn { white-space: nowrap; }

.listing-status-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 10px;
  padding: 4px 22px 4px 10px;
  border-radius: 999px; border: 1px solid transparent;
  font-size: 11.5px; font-weight: 500; cursor: pointer;
  min-height: 26px;
}
.listing-status-pending    { background-color: var(--c-new-bg);  color: var(--c-new); }
.listing-status-offer_sent { background-color: var(--c-prog-bg); color: var(--c-prog); }
.listing-status-closed     { background-color: var(--c-ok-bg);   color: var(--c-ok); }
.listing-status-archived   { background-color: var(--surface-2); color: var(--text-3); }

/* ---------- Sources admin ---------- */
.sources-list { display: flex; flex-direction: column; gap: 8px; }
.source-row {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
}
.source-row.disabled { opacity: 0.55; }
.source-name { font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.source-url { font-size: 11.5px; color: var(--text-3); font-family: "Geist Mono";
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50ch; }
.source-stats { font-size: 11.5px; color: var(--text-3); font-family: "Geist Mono"; }
.source-actions { display: flex; gap: 6px; }
.source-toggle {
  appearance: none; width: 32px; height: 18px;
  background: var(--border-strong); border-radius: 999px;
  position: relative; cursor: pointer; outline: none;
  transition: background 0.16s;
}
.source-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 999px;
  background: white;
  transition: transform 0.16s;
}
.source-toggle:checked { background: var(--c-ok); }
.source-toggle:checked::after { transform: translateX(14px); }

.kw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 999px; font-size: 12.5px;
}
.kw-chip.disabled { opacity: 0.55; text-decoration: line-through; }
.kw-chip .x {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--text-3); font-size: 14px; line-height: 1;
  margin-left: 2px;
}
.kw-chip .hits {
  font-family: "Geist Mono"; font-size: 10.5px; color: var(--text-3);
  background: var(--surface); padding: 1px 6px; border-radius: 999px;
}

/* ---------- Bottom sheet (kanban mobile move) ---------- */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: oklch(0.2 0.02 250 / 0.4);
  z-index: 60;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.bottom-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  z-index: 61;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 36px -8px oklch(0.2 0.02 250 / 0.2);
  transform: translateY(110%);
  transition: transform 0.22s cubic-bezier(.2,.7,.2,1);
  max-height: 78vh; overflow-y: auto;
}
.bottom-sheet.open { transform: translateY(0); }
.sheet-grabber {
  width: 38px; height: 4px; border-radius: 999px;
  background: var(--border-strong);
  margin: 4px auto 12px;
}
.sheet-head {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.sheet-title { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.sheet-sub   { font-size: 12px; color: var(--text-3); }
.sheet-options { display: flex; flex-direction: column; gap: 2px; }
.sheet-option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 6px;
  background: none; border: none; cursor: pointer;
  font-size: 14.5px; color: var(--text);
  border-radius: var(--radius-sm);
  width: 100%; text-align: left;
  min-height: 48px;
}
.sheet-option:hover { background: var(--surface-2); }
.sheet-option .dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.sheet-option.current { color: var(--text-3); pointer-events: none; }
.sheet-option.current::after {
  content: "Aktualny"; margin-left: auto;
  font-size: 11px; color: var(--text-3);
  background: var(--surface-2); padding: 2px 8px; border-radius: 999px;
}
.sheet-option .ico { width: 18px; }

/* ---------- Presentation mode ---------- */
.pres-stage {
  background: var(--bg);
  min-height: 100vh;
  padding: 60px 24px 80px;
}
.pres-container {
  max-width: 820px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 56px 64px;
  box-shadow: var(--shadow-2);
}
.pres-brand {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.pres-brand-mark {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--text); color: var(--bg);
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px;
}
.pres-brand-name { font-weight: 600; letter-spacing: -0.02em; font-size: 17px; }
.pres-brand-tag { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }

.pres-title {
  font-size: 30px; font-weight: 600; letter-spacing: -0.025em;
  margin: 0 0 8px;
}
.pres-sub {
  font-size: 14px; color: var(--text-3);
  margin-bottom: 36px;
}

.pres-meta-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 36px;
}
.pres-meta-item { display: flex; flex-direction: column; gap: 4px; }
.pres-meta-label { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.pres-meta-value { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }

.pres-section-h {
  font-size: 17px; font-weight: 600; letter-spacing: -0.015em;
  margin: 36px 0 14px;
}
.pres-section-h:first-of-type { margin-top: 0; }

.pres-lesson-row {
  display: grid; grid-template-columns: 28px 80px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
}
.pres-lesson-row:last-child { border-bottom: none; }
.pres-num {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: 11px; color: var(--text-3); font-weight: 600;
}
.pres-num.done { background: var(--c-ok); border-color: var(--c-ok); color: var(--bg); }
.pres-date { font-family: "Geist Mono"; font-size: 12.5px; color: var(--text-2); padding-top: 4px; }
.pres-lesson-content { min-width: 0; }
.pres-lesson-content .pres-lesson-title { font-size: 14px; font-weight: 500; word-break: break-word; }
.pres-lesson-content .pres-lesson-cat { font-size: 12px; color: var(--text-3); }
.pres-lesson-content .pres-lesson-note {
  font-size: 12.5px; color: var(--text-2); margin-top: 4px;
  word-wrap: break-word; overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .pres-lesson-row {
    grid-template-columns: 24px 60px minmax(0, 1fr); gap: 10px;
  }
  .pres-date { font-size: 11.5px; }
}

.pres-foot {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: var(--text-3);
}

.pres-toolbar {
  position: fixed; top: 16px; right: 16px; left: 16px;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 5;
}
.pres-toolbar .btn { box-shadow: var(--shadow-1); }

@media (max-width: 700px) {
  .pres-stage { padding: 80px 8px 60px; }
  .pres-container { padding: 28px 22px; border-radius: 12px; }
  .pres-title { font-size: 22px; }
  .pres-meta-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media print {
  .pres-toolbar, .sidebar, .topbar, .bottom-nav { display: none !important; }
  .pres-stage { padding: 0; }
  .pres-container { box-shadow: none; border: none; border-radius: 0; padding: 24px; }
  body { background: white; }
}

/* ---------- Parent view ---------- */
.parent-shell {
  min-height: 100vh;
  background: var(--bg);
  padding: 60px 16px;
}
.parent-container {
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
.parent-brand {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.parent-brand-link {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
  min-width: 0; flex: 1;
}
.parent-brand-logo {
  width: 36px; height: 36px;
  flex-shrink: 0; display: block;
  border-radius: 8px;
}
.parent-brand-text {
  min-width: 0; line-height: 1.2;
  display: flex; flex-direction: column; justify-content: center;
}
.parent-brand-link .pres-brand-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 600; line-height: 1.25;
}
.parent-brand-link .pres-brand-tag {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; line-height: 1.3; margin-top: 1px;
  text-transform: none; letter-spacing: 0;
}

@media (max-width: 600px) {
  .parent-shell { padding: 24px 14px; }
  .parent-brand { gap: 10px; align-items: flex-start; padding-bottom: 8px; }
  .parent-brand-link { gap: 8px; align-items: flex-start; }
  .parent-brand-logo { width: 32px; height: 32px; margin-top: 2px; }
  /* Na mobile nie obcinamy ellipsisem — pozwalamy się zawinąć, bo email
     potrafi być długi i widok wyglądał głupio z "Solve · Strefa rodz…" */
  .parent-brand-link .pres-brand-name {
    white-space: normal; overflow: visible; text-overflow: clip;
    font-size: 14px; line-height: 1.2;
  }
  .parent-brand-link .pres-brand-tag {
    white-space: normal; overflow: visible; text-overflow: clip;
    word-break: break-all;
    font-size: 11px; line-height: 1.3;
  }
}

.parent-promo {
  display: block; text-decoration: none; color: inherit;
  margin-top: 4px;
  border-radius: var(--radius);
  padding: 18px 20px;
  background: linear-gradient(135deg, oklch(0.96 0.04 258) 0%, oklch(0.94 0.06 295) 100%);
  border: 1px solid oklch(0.88 0.04 258);
  position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.parent-promo:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(80, 80, 200, 0.12);
}
.parent-promo-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: oklch(0.48 0.16 258);
  margin-bottom: 6px;
}
.parent-promo-title {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 4px; color: var(--text);
}
.parent-promo-sub {
  font-size: 13px; color: var(--text-2); line-height: 1.45;
  margin-bottom: 12px;
}
.parent-promo-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: oklch(0.45 0.18 258);
}
html.dark .parent-promo {
  background: linear-gradient(135deg, oklch(0.22 0.04 258) 0%, oklch(0.22 0.05 295) 100%);
  border-color: oklch(0.32 0.05 258);
}
html.dark .parent-promo-eyebrow { color: oklch(0.78 0.12 258); }
html.dark .parent-promo-cta { color: oklch(0.78 0.14 258); }

/* ---------- Homework rating (ocena rodzica) ---------- */
.hw-rating {
  margin-top: 10px; padding: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.hw-rating-summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; font-size: 13px;
  user-select: none;
}
.hw-rating-summary::-webkit-details-marker { display: none; }
.hw-rating-summary:hover { background: var(--surface-3, var(--surface-2)); }
.hw-rating-label { color: var(--text); }
.hw-rating-toggle { font-size: 11px; color: var(--text-3); flex-shrink: 0; margin-left: 8px; }
.hw-rating-form {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.hw-stars {
  display: inline-flex; flex-direction: row-reverse;
  gap: 2px; align-self: flex-start;
}
.hw-stars input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.hw-stars label {
  font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--border); transition: color .1s ease, transform .1s ease;
  padding: 2px 1px;
}
/* Hover: ta i wszystkie na lewo (czyli wyżej w DOM bo row-reverse) podświetlone */
.hw-stars label:hover,
.hw-stars label:hover ~ label,
.hw-stars input[type="radio"]:checked ~ label {
  color: oklch(0.78 0.18 75);
}
.hw-stars label:active { transform: scale(1.15); }
html.dark .hw-stars label { color: var(--surface-3, oklch(0.3 0.01 255)); }
html.dark .hw-stars label:hover,
html.dark .hw-stars label:hover ~ label,
html.dark .hw-stars input[type="radio"]:checked ~ label {
  color: oklch(0.82 0.18 75);
}
.hw-rating-comment {
  width: 100%; max-width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 13px;
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text); resize: vertical; min-height: 60px;
}
.hw-rating-comment:focus {
  outline: none; border-color: var(--accent);
}
.hw-rating-actions { display: flex; gap: 8px; }

/* Read-only widok oceny — dla tutora w plans/view, students/profile, presentation */
.hw-rating-readonly {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
}
.hw-rating-readonly > span:not(.dim-12) {
  font-size: 15px; color: var(--border); line-height: 1;
}
.hw-rating-readonly > span.filled { color: oklch(0.78 0.18 75); }
html.dark .hw-rating-readonly > span:not(.dim-12) { color: var(--surface-3, oklch(0.3 0.01 255)); }
html.dark .hw-rating-readonly > span.filled { color: oklch(0.82 0.18 75); }
.hw-rating-readonly strong { font-size: 13px; margin-left: 2px; }

.lesson-feedback-row .lbl { color: oklch(0.55 0.13 75); }
.lesson-feedback-comment {
  font-size: 12.5px; color: var(--text-2);
  margin-top: 6px; padding: 6px 10px;
  background: var(--surface); border-radius: 4px;
  border-left: 3px solid oklch(0.78 0.18 75);
  white-space: pre-wrap;
}
.lesson-feedback-inline {
  margin-top: 6px; padding: 6px 10px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 4px;
}
.pres-feedback-note {
  border-left: 3px solid oklch(0.78 0.18 75);
  padding-left: 10px;
}

.tutor-grade-form {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.tutor-grade-row {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
}
.lesson-tutor-grade-row .lbl { color: oklch(0.45 0.16 155); }
html.dark .lesson-tutor-grade-row .lbl { color: oklch(0.78 0.14 155); }

.parent-tutor-grade {
  margin-top: 8px; padding: 10px 12px;
  background: oklch(0.96 0.04 155);
  border: 1px solid oklch(0.86 0.06 155);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 6px;
}
.parent-tutor-grade .lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: oklch(0.42 0.16 155); font-weight: 600;
}
html.dark .parent-tutor-grade {
  background: oklch(0.22 0.04 155);
  border-color: oklch(0.32 0.05 155);
}
html.dark .parent-tutor-grade .lbl { color: oklch(0.78 0.14 155); }

/* Materiały tematu w widoku planu (read-only z notką że to z ustawień tematu) */
.lesson-topic-materials {
  margin-top: 8px; padding: 10px 12px;
  background: oklch(0.97 0.02 280);
  border: 1px dashed oklch(0.82 0.05 280);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px;
}
html.dark .lesson-topic-materials {
  background: oklch(0.22 0.02 280);
  border-color: oklch(0.36 0.05 280);
}
.lesson-topic-materials .lbl {
  font-size: 11.5px; color: oklch(0.42 0.12 280); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
html.dark .lesson-topic-materials .lbl { color: oklch(0.78 0.12 280); }
.lesson-topic-materials .topic-edit-link {
  margin-left: auto; text-decoration: none; color: var(--text-3);
  padding: 2px 6px; border-radius: 4px;
}
.lesson-topic-materials .topic-edit-link:hover { background: var(--surface); color: var(--accent); }
.topic-mat-content {
  font-size: 12.5px; color: var(--text-2); white-space: pre-wrap;
  word-wrap: break-word;
}
.topic-mat-links { display: flex; flex-wrap: wrap; gap: 6px; }
.topic-mat-files { display: flex; flex-direction: column; gap: 4px; }
.topic-mat-file {
  display: inline-block; padding: 4px 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; text-decoration: none; color: var(--text);
  font-size: 12.5px;
}
.topic-mat-file:hover { background: var(--surface-2); }
.parent-materials {
  margin-top: 8px; padding: 10px 12px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.parent-materials-text { font-size: 12.5px; color: var(--text-2); white-space: pre-wrap; }
.parent-materials-links { display: flex; flex-wrap: wrap; gap: 6px; }
.parent-materials-files { display: flex; flex-direction: column; gap: 4px; }
.parent-material-file {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px;
  text-decoration: none; color: var(--text); font-size: 12.5px;
}
.parent-material-file > .name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.parent-material-file > .size { flex-shrink: 0; }

.parent-plan-stats { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
.parent-lesson-item { cursor: default; align-items: flex-start; }
.parent-lesson-time { min-width: 80px; }
.parent-lesson-meta { flex: 1; min-width: 0; }
.parent-lesson-link { color: var(--accent); margin-right: 6px; }
.parent-tutor-row { display: flex; align-items: center; gap: 12px; }
.parent-child-switcher {
  position: absolute; left: 0; top: 100%; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  min-width: 220px; max-width: calc(100vw - 32px);
  z-index: 50; padding: 4px;
}
.parent-child-switcher-item {
  display: block; padding: 8px 12px;
  text-decoration: none; color: var(--text);
  font-size: 13px; border-radius: 4px;
}
.parent-child-switcher-divider { height: 1px; background: var(--border); margin: 4px 0; }

.parent-children-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.parent-child-card {
  text-decoration: none; color: inherit;
  display: flex; align-items: center; gap: 14px;
}
.parent-greeting {
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.parent-greeting-sub { font-size: 13px; color: var(--text-3); }

.parent-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 22px;
}
.parent-card-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.parent-card-h .dim-12 { margin-left: auto; font-weight: 400; }

/* ---------- Sources / keywords specific layouts ---------- */
.scrape-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 1100px) { .scrape-grid { grid-template-columns: 1fr; } }

/* ---------- Wizard topic picker (step 3) ---------- */
.picker-summary {
  margin-top: 14px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.picker-summary strong { color: var(--text); }

/* ---------- Modal sheet (used for kanban move) ---------- */
@media (min-width: 901px) {
  .bottom-sheet {
    width: 380px; left: auto; right: 24px; bottom: 24px;
    border-radius: 14px;
    padding-bottom: 16px;
  }
  .bottom-sheet.open { transform: translateY(0); }
  .sheet-grabber { display: none; }
}

/* ---------- Today (Dzisiaj) — overrides for nowsze layout ---------- */
.today-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 900px) { .today-grid { grid-template-columns: 1fr; } }
.today-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.today-card-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.today-card-h .count {
  margin-left: auto;
  font-family: "Geist Mono"; font-size: 11px; color: var(--text-3);
  background: var(--surface-2); padding: 2px 8px; border-radius: 999px;
  font-weight: 400;
}
.today-list { display: flex; flex-direction: column; gap: 8px; }
.today-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
}
.today-item:hover { background: var(--surface-3); }
.today-item-time {
  font-family: "Geist Mono"; font-size: 12px; font-weight: 600;
  min-width: 48px;
  color: var(--text);
}
.today-item-meta { flex: 1; min-width: 0; }
.today-item-title { font-size: 13.5px; font-weight: 500; }
.today-item-sub   { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.today-item-action { flex-shrink: 0; }

.today-empty {
  padding: 18px 14px; text-align: center;
  color: var(--text-3); font-size: 12.5px;
  background: var(--surface-2); border-radius: var(--radius-sm);
}

/* ---------- Tag-edit chip (used in plan lesson actions) ---------- */
.action-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-2);
  cursor: pointer;
}
.action-chip:hover { background: var(--surface-3); color: var(--text); }

/* ---------- Header inline title row ---------- */
.crumb-back {
  background: none; border: none;
  color: var(--text-3); font-size: 13px;
  cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 4px;
}
.crumb-back:hover { background: var(--surface-2); color: var(--text); }

/* ---------- Sidebar additions (new nav items) ---------- */
.nav-item.danger { color: var(--c-rej); }
.nav-item .badge-dot {
  margin-left: auto;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--c-rej);
}

/* ---------- Mobile shell tweaks ---------- */
@media (max-width: 900px) {
  /* Tabs stay scrollable */
  .tabs { padding-left: 4px; padding-right: 4px; }
  .profile-head { padding: 14px; gap: 12px; }
  .profile-name { font-size: 18px; }
  .pres-toolbar { left: 8px; right: 8px; }
}

/* ---------- Print-friendly plan ---------- */
@media print {
  .lesson-card-actions, .lesson-card-status { display: none; }
}

/* ---------- Misc ---------- */
.muted { color: var(--text-3); }
.spacer-y-8 { height: 8px; }
.spacer-y-16 { height: 16px; }
.spacer-y-24 { height: 24px; }

/* ============================================================
   NEW: Next-action banner, Sticky notes, Resources, Billing, Streak, Color tags
   ============================================================ */

/* ---------- Next action callout (na górze profilu) ---------- */
.next-action {
  background: linear-gradient(180deg, oklch(0.96 0.05 90 / 0.7), oklch(0.97 0.04 90 / 0.4));
  border: 1px solid oklch(0.86 0.07 90 / 0.7);
  border-left: 3px solid var(--c-prog);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex; gap: 14px; align-items: flex-start;
}
html.dark .next-action {
  background: oklch(0.24 0.05 90 / 0.5);
  border-color: oklch(0.45 0.08 90 / 0.5);
}
.next-action .ico-big { font-size: 22px; line-height: 1.1; }
.next-action-body { flex: 1; }
.next-action-label {
  font-size: 11px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 500; margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.next-action-text { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--text); }
.next-action-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- Color tag (badge u góry karty ucznia / profilu) ---------- */
.color-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid;
}
.color-tag.color-red    { background: var(--c-rej-bg);   color: var(--c-rej);   border-color: oklch(0.85 0.05 25 / 0.6); }
.color-tag.color-amber  { background: var(--c-prog-bg);  color: var(--c-prog);  border-color: oklch(0.85 0.07 90 / 0.6); }
.color-tag.color-green  { background: var(--c-ok-bg);    color: var(--c-ok);    border-color: oklch(0.85 0.07 155 / 0.6); }
.color-tag.color-blue   { background: var(--c-new-bg);   color: var(--c-new);   border-color: oklch(0.85 0.06 258 / 0.6); }
.color-tag.color-violet { background: oklch(0.94 0.04 295); color: oklch(0.46 0.16 295); border-color: oklch(0.85 0.06 295 / 0.6); }
html.dark .color-tag.color-violet { background: oklch(0.30 0.05 295); color: oklch(0.85 0.10 295); }

/* ---------- Streak counter (płomyk z liczbą) ---------- */
.streak-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(90deg, oklch(0.93 0.13 50), oklch(0.92 0.12 35));
  color: oklch(0.32 0.16 35);
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
html.dark .streak-badge {
  background: linear-gradient(90deg, oklch(0.40 0.12 50 / 0.5), oklch(0.38 0.12 35 / 0.5));
  color: oklch(0.88 0.14 50);
}
.streak-badge .flame { font-size: 12px; }

/* ---------- Sticky notes (post-it) ---------- */
.sticky-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.sticky-note {
  background: oklch(0.96 0.06 90);
  border-radius: 6px;
  padding: 12px 14px;
  min-height: 100px;
  font-size: 13px; line-height: 1.45;
  position: relative;
  box-shadow: 0 1px 3px oklch(0.2 0.02 250 / 0.06), 0 2px 6px oklch(0.2 0.02 250 / 0.04);
  transform: rotate(-0.4deg);
  transition: transform 0.16s, box-shadow 0.16s;
  display: flex; flex-direction: column; gap: 8px;
}
.sticky-note:nth-child(2n) { transform: rotate(0.4deg); }
.sticky-note:nth-child(3n) { transform: rotate(-0.2deg); }
.sticky-note:hover { transform: rotate(0) scale(1.015); box-shadow: 0 2px 6px oklch(0.2 0.02 250 / 0.1), 0 6px 16px oklch(0.2 0.02 250 / 0.08); }
.sticky-amber  { background: oklch(0.96 0.06 90); color: oklch(0.32 0.04 90); }
.sticky-red    { background: oklch(0.95 0.05 20); color: oklch(0.32 0.04 20); }
.sticky-green  { background: oklch(0.95 0.06 145); color: oklch(0.30 0.04 145); }
.sticky-blue   { background: oklch(0.95 0.05 230); color: oklch(0.32 0.04 230); }
.sticky-violet { background: oklch(0.95 0.05 295); color: oklch(0.32 0.04 295); }
html.dark .sticky-amber  { background: oklch(0.34 0.06 90); color: oklch(0.92 0.04 90); }
html.dark .sticky-red    { background: oklch(0.34 0.06 20); color: oklch(0.92 0.05 20); }
html.dark .sticky-green  { background: oklch(0.32 0.07 145); color: oklch(0.92 0.05 145); }
html.dark .sticky-blue   { background: oklch(0.32 0.06 230); color: oklch(0.92 0.04 230); }
html.dark .sticky-violet { background: oklch(0.32 0.06 295); color: oklch(0.92 0.05 295); }
.sticky-body { flex: 1; white-space: pre-wrap; word-break: break-word; }
.sticky-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; opacity: 0.7;
  font-family: "Geist Mono"; padding-top: 4px;
  border-top: 1px dashed currentColor;
}
.sticky-foot .x {
  background: none; border: none; padding: 0; cursor: pointer;
  color: currentColor; opacity: 0.5; font-size: 12px;
}
.sticky-foot .x:hover { opacity: 1; }
.sticky-color-pick {
  display: flex; gap: 4px; padding: 4px 0;
}
.sticky-swatch {
  width: 16px; height: 16px; border-radius: 999px;
  border: 1.5px solid var(--border);
  cursor: pointer;
}
.sticky-swatch.checked { border-color: var(--text); transform: scale(1.1); }
.sticky-swatch.amber  { background: oklch(0.85 0.12 90); }
.sticky-swatch.red    { background: oklch(0.78 0.13 20); }
.sticky-swatch.green  { background: oklch(0.78 0.12 145); }
.sticky-swatch.blue   { background: oklch(0.78 0.10 230); }
.sticky-swatch.violet { background: oklch(0.78 0.10 295); }

.sticky-new {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface-2); border: 1.5px dashed var(--border-strong);
  border-radius: 6px; padding: 12px;
}
.sticky-new textarea {
  width: 100%; min-height: 70px;
  border: none; background: none; resize: vertical;
  font-family: inherit; font-size: 13px; outline: none;
  color: var(--text);
}

/* ---------- Resources / external links ---------- */
.resources-list { display: flex; flex-direction: column; gap: 6px; }
.resource-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text);
  transition: all 0.12s;
}
.resource-item:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1);
  /* Bez transform: przesuwanie wiersza przy hoverze powoduje że
     wewnętrzny przycisk "Usuń" odjeżdża spod kursora i klik nie łapie. */
}
.resource-ico {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 18px;
  flex-shrink: 0;
}
.resource-meta { flex: 1; min-width: 0; }
.resource-label {
  font-size: 13.5px; font-weight: 500; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resource-url {
  font-size: 11.5px; color: var(--text-3);
  font-family: "Geist Mono";
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resource-actions { display: flex; gap: 4px; flex-shrink: 0; }

.resource-quick-add {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  padding: 10px 0;
}
.resource-quick {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.resource-quick:hover { background: var(--surface); border-color: var(--border-strong); }
.resource-quick .emoji { font-size: 16px; }

/* ---------- Billing card ---------- */
.billing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 700px) { .billing-grid { grid-template-columns: 1fr; } }
.billing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.billing-card.highlight {
  background: oklch(0.97 0.04 155 / 0.4);
  border-color: oklch(0.85 0.07 155 / 0.5);
}
html.dark .billing-card.highlight { background: oklch(0.24 0.04 155 / 0.4); border-color: oklch(0.4 0.07 155 / 0.4); }
.billing-card-label {
  font-size: 10.5px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 500;
}
.billing-card-value {
  font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
}
.billing-card-sub {
  font-size: 11.5px; color: var(--text-3); font-family: "Geist Mono";
}

/* ---------- AI summary card ---------- */
.ai-card {
  background: linear-gradient(135deg, oklch(0.97 0.04 290 / 0.4), oklch(0.97 0.04 220 / 0.4));
  border: 1px solid oklch(0.85 0.06 280 / 0.4);
  border-radius: var(--radius);
  padding: 18px 20px;
}
html.dark .ai-card {
  background: linear-gradient(135deg, oklch(0.26 0.05 290 / 0.5), oklch(0.26 0.05 220 / 0.5));
  border-color: oklch(0.45 0.08 280 / 0.4);
}
.ai-card-h {
  font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.ai-card-h .sparkle { font-size: 16px; }
.ai-card-body {
  font-size: 13.5px; line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  min-height: 60px;
}
.ai-card-body.loading::before {
  content: "💭 Generuję podsumowanie…";
  color: var(--text-3);
}
.ai-card-foot {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed oklch(0.85 0.06 280 / 0.5);
  display: flex; gap: 6px; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: var(--text-3);
}

/* ============================================================
   COMMAND PALETTE (⌘K)
   ============================================================ */
.cmdk-backdrop {
  position: fixed; inset: 0;
  background: oklch(0.15 0.02 250 / 0.4);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity 0.16s;
}
.cmdk-backdrop.open { opacity: 1; pointer-events: auto; }

.cmdk {
  position: fixed; left: 50%; top: 88px;
  transform: translateX(-50%) scale(0.96);
  width: 680px; max-width: 92vw;
  max-height: 70vh;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-xl);
  box-shadow: var(--elev-5);
  z-index: 201;
  opacity: 0; pointer-events: none;
  transition: all var(--motion-std) var(--ease-emph);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cmdk.open {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

.cmdk-search {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.cmdk-search .ico { color: var(--text-3); font-size: 18px; }
.cmdk-search input {
  flex: 1;
  background: none; border: none; outline: none;
  font-size: 16px;
  color: var(--text);
  font-family: inherit;
}
.cmdk-search .esc-hint {
  font-family: "Geist Mono"; font-size: 11px;
  color: var(--text-3); background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 2px 6px; border-radius: 4px;
}

.cmdk-results {
  flex: 1; overflow-y: auto;
  padding: 6px;
}
.cmdk-group {
  padding: 8px 12px 4px;
  font-size: 10.5px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
}
.cmdk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  border: none; background: none; width: 100%; text-align: left;
  color: var(--text);
  transition: background 0.08s;
}
.cmdk-item:hover, .cmdk-item.focused {
  background: var(--surface-2);
}
.cmdk-item.focused {
  outline: 1px solid var(--text);
}
.cmdk-item .icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.cmdk-item .meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.cmdk-item .label {
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmdk-item .sub {
  font-size: 11.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmdk-item .kbd {
  font-family: "Geist Mono"; font-size: 10.5px;
  color: var(--text-3); background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 4px;
}

.cmdk-empty {
  padding: 40px 20px; text-align: center;
  color: var(--text-3); font-size: 13px;
}
.cmdk-foot {
  border-top: 1px solid var(--border);
  padding: 8px 14px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--text-3); font-family: "Geist Mono";
  background: var(--surface-2);
}
.cmdk-foot .kbds { display: flex; gap: 10px; }
.cmdk-foot .kbds span { display: inline-flex; align-items: center; gap: 4px; }
.cmdk-foot kbd {
  background: var(--surface); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 4px; font-size: 10px;
}

/* ---------- Student card extensions ---------- */
.student-card-tags {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 4px;
}

/* ---------- Profile head extension ---------- */
.profile-head-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}

/* ---------- Inline add form (Dodaj element / Dodaj checklistę / Dodaj cokolwiek) ---------- *
 * Wzorzec: <input flex:1> + <button btn-sm>. Bez tego inputy się zwijają
 * i button wylewa się poza kontener. */
.inline-add-form {
  display: flex; gap: 8px; align-items: center; flex-wrap: nowrap;
}
.inline-add-form > .input {
  flex: 1 1 auto; min-width: 0;
  min-height: 36px; height: 36px; padding: 6px 12px;
  font-size: 13px;
}
.inline-add-form > .btn { flex-shrink: 0; }
.inline-add-form > .btn .material-symbols-outlined { font-size: 18px; }

/* ---------- Color picker (modal kolumn zadań / sticky notes itp.) ---------- */
.color-picker {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 4px 0;
}
.color-swatch {
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--shape-full);
  border: 2px solid transparent;
  transition: transform var(--motion-fast) var(--ease-std),
              border-color var(--motion-fast) var(--ease-std);
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch .color-radio { display: none; }
.color-swatch .stat-dot { width: 22px; height: 22px; border-radius: var(--shape-full); display: block; }
.color-swatch:has(.color-radio:checked) {
  border-color: var(--text);
  transform: scale(1.12);
}

/* ---------- Topbar search trigger — Google-search pill ---------- */
.topbar-search {
  margin-left: auto;
  width: 100%; max-width: 480px;
  cursor: pointer;
  background: var(--surface-2);
  border: 1px solid transparent;
  padding: 0 16px;
  border-radius: var(--shape-full);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-3);
  font-size: 14px;
  height: 44px;
  flex-shrink: 1;
  min-width: 0;
  font-family: inherit;
  transition: background var(--motion-fast) var(--ease-std),
              border-color var(--motion-fast) var(--ease-std),
              box-shadow var(--motion-fast) var(--ease-std);
}
.topbar-search:hover {
  background: var(--surface-3);
  color: var(--text-2);
}
.topbar-search:focus-visible {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--state-focus-primary);
  outline: none;
}
.topbar-search .material-symbols-outlined {
  font-size: 20px; color: var(--text-3);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.topbar-search-text {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-search .kbd-hint {
  font-family: "Geist Mono"; font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  padding: 2px 6px; border-radius: var(--shape-xs);
  color: var(--text-3);
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .topbar-search-text { display: none; }
  .topbar-search .kbd-hint { display: none; }
  .topbar-search { max-width: none; width: 44px; padding: 0; justify-content: center; }
}

/* ============================================================
   8. Mobile fixes — Sprint 1 audytu (text overflow, safe-area).
   Naprawia konkretne miejsca z briefu: "tekst nagminnie wylewa się
   na ekranach mobilnych".
   ============================================================ */

/* M1: .search miało min-width:240px, na ekranach <360px overflow.
   Pozwalamy się zwinąć do pełnej szerokości toolbara. */
@media (max-width: 480px) {
  .search { min-width: 0; width: 100%; flex-basis: 100%; }
  .toolbar { flex-wrap: wrap; }
}

/* M3: Małe ekrany — page miało dziedziczone 24px paddingu z @1100,
   na 320-360px to za dużo (zostaje za mało miejsca na content). */
@media (max-width: 480px) {
  .page { padding: 14px 12px 90px; }
  .page-head { gap: 12px; margin-bottom: 14px; }
  .page-title { font-size: 22px; line-height: 1.2; }
}

/* M4: Profile-stat-value (22px font) z długimi liczbami wylewał się
   z grid komórki. min-width:0 + ellipsis. */
.profile-stat-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-stats { min-width: 0; }
.profile-stat  { min-width: 0; }

/* M5: status badge cleanup — zastąpiony przez .tag w sekcji 10. */
/* M9: Mikrotypografia (12.5px inline w drawerze, daily.html itd.) jest
   nieczytelna na małych ekranach. Wymuszamy minimum 13px dla .dim-12
   i .drawer-body p na mobile. */
@media (max-width: 480px) {
  .dim-12,
  .drawer-sub,
  .who-extra,
  .who-role { font-size: 12.5px; }
}

/* M10: iPhone z notchem zasłania bottom-nav. safe-area-inset-bottom. */
.bottom-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* M-extra: drawer + modal też powinny respektować safe-area na iOS,
   żeby przyciski w stopce drawera nie wpadały pod home-bar. */
@media (max-width: 900px) {
  .drawer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .modal-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* M-extra: kolumna .contact (telefon + email) na desktopie ma długie
   maile bez break-anywhere — overflow do horizontal scroll.
   Permitujemy łamanie maila po @ i kropce. */
td.contact a,
td.contact .em a {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* M-extra: kanban-card-name miał white-space:nowrap → ucinał długie
   nazwy zgłoszeń. Zmiana na clamp-2-lines (line-clamp). */
.kanban-card-name {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   9. v3 hotfixes — mobile status badge / dropdown / bottom-nav.
   ============================================================ */

/* F6: status badge — przeniesione do sekcji 10 (v4) używającej .tag. */

/* F9: dropdown menu (Eksport) na mobile lecąca z prawej strony była
   przycinana od lewej. Zmieniamy anchor na prawą krawędź + max-width 92vw. */
@media (max-width: 600px) {
  .dropdown-menu {
    right: 0;
    left: auto;
    max-width: calc(100vw - 24px);
    min-width: 200px;
  }
}

/* F10: bottom-nav za mały + zjadany od góry.
   - większa wysokość (62 → 72 px łącznie z safe-area),
   - większe ikony,
   - shadow z góry żeby się odcinał od scrollowanej treści. */
@media (max-width: 900px) {
  .bottom-nav {
    padding-top: 8px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    box-shadow: 0 -1px 0 var(--border), 0 -8px 24px -12px oklch(0 0 0 / 0.15);
  }
  .bnav-item .bnav-ico {
    font-size: 26px;
    width: 60px; height: 34px;
  }
  .bnav-item .bnav-label {
    font-size: 11.5px;
    margin-top: 3px;
  }
  .bnav-fab .bnav-ico {
    width: 52px; height: 52px;
    font-size: 26px;
  }
  /* Dodatkowe padding-bottom na .page żeby content nie wchodził pod bottom-nav. */
  .page { padding-bottom: 96px; }
}

/* ============================================================
   10. v4 — mobile status badge dla /leady używa wprost klasy .tag
   (tej samej co /wspolprace). Zero pseudo-elementów, zero hard
   max-width. Tag jest standardowym chipem z padding i radius.
   ============================================================ */

/* Domyślnie (desktop) ukrywamy badge — select w formie jest widoczny */
.lead-status-tag { display: none; }

@media (max-width: 900px) {
  /* Mobile: schowaj select, pokaż badge jako standardowy .tag */
  table.leads td.status-td .status-form { display: none; }
  table.leads td.status-td .lead-status-tag {
    display: inline-flex;
    /* Cała reszta wyglądu z .tag (padding 3px 10px, border-radius, font-size 11px).
       Tag dziedziczy kolory z .tag-{slate,blue,amber,green,red,...} per status. */
  }
}


/* ============================================================
   11. Strony błędów (404 / 500) — standalone, bez base.html,
   żeby renderowały się nawet gdy kontekst requestu jest zepsuty.
   ============================================================ */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}
.error-card {
  text-align: center;
  max-width: 440px;
}
.error-code {
  font-size: 88px;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
  letter-spacing: -0.03em;
}
.error-title {
  margin: 12px 0 8px;
  font-size: 22px;
  color: var(--text);
}
.error-text {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.error-text code {
  font-size: 13px;
  background: var(--surface-2, var(--surface));
  padding: 2px 8px;
  border-radius: var(--shape-sm);
}

/* ============================================================
   12. Pager (paginacja list — /leady)
   ============================================================ */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0 8px;
  flex-wrap: wrap;
}
.pager-info {
  font-size: 13px;
  color: var(--text-muted);
}

/* ============================================================
   13. Strefa rodzica — klasy wyekstrahowane z inline styles (Faza 2.1)
   ============================================================ */

/* ── Utility: marginesy (przeniesione 1:1 z inline) ── */
.pz-m-0   { margin: 0 !important; }
.pz-mb-0  { margin-bottom: 0 !important; }
.pz-mb-2  { margin-bottom: 2px !important; }
.pz-mb-6  { margin-bottom: 6px !important; }
.pz-mb-8  { margin-bottom: 8px !important; }
.pz-mb-10 { margin-bottom: 10px !important; }
.pz-mb-12 { margin-bottom: 12px !important; }
.pz-mb-14 { margin-bottom: 14px !important; }
.pz-mb-16 { margin-bottom: 16px !important; }
.pz-mb-20 { margin-bottom: 20px !important; }
.pz-mt-2  { margin-top: 2px !important; }
.pz-mt-4  { margin-top: 4px !important; }
.pz-mt-6  { margin-top: 6px !important; }
.pz-mt-8  { margin-top: 8px !important; }
.pz-mt-10 { margin-top: 10px !important; }
.pz-mt-16 { margin-top: 16px !important; }

/* ── Utility: typografia ── */
.pz-fs-11 { font-size: 11px !important; }
.pz-fs-12 { font-size: 12px !important; }
.pz-fs-13 { font-size: 13px !important; }
.pz-fs-15 { font-size: 15px !important; }
.pz-fs-16 { font-size: 16px !important; }
.pz-fs-18 { font-size: 18px !important; }
.pz-text  { color: var(--text) !important; }
.pz-dim      { color: var(--text-2) !important; }
.pz-dim-10   { font-size: 10px !important; color: var(--text-2) !important; }
.pz-dim-11   { font-size: 11px !important; color: var(--text-2) !important; }
.pz-dim-12   { font-size: 12px !important; color: var(--text-2) !important; }
.pz-dim-13   { font-size: 13px !important; color: var(--text-2) !important; }
.pz-faint-10 { font-size: 10px !important; color: var(--text-3) !important; }
.pz-faint-11 { font-size: 11px !important; color: var(--text-3) !important; }
.pz-strong-13 { font-weight: 600 !important; font-size: 13px !important; }
.pz-strong-14 { font-weight: 600 !important; font-size: 14px !important; }
.pz-strong-15 { font-weight: 600 !important; font-size: 15px !important; }
.pz-bold-15   { font-size: 15px !important; font-weight: 700 !important; }
.pz-btn-danger  { color: oklch(0.65 0.20 25) !important; }
.pz-link-accent { color: var(--accent) !important; }

/* ── Utility: layout ── */
.pz-flex-1   { flex: 1 !important; }
.pz-flex-min { flex: 1 !important; min-width: 0 !important; }
.pz-shrink-0 { flex-shrink: 0 !important; }
.pz-rel      { position: relative !important; }
.pz-w-full   { width: 100% !important; }
.pz-col-4  { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.pz-col-6  { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.pz-col-7  { display: flex !important; flex-direction: column !important; gap: 7px !important; }
.pz-col-8  { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.pz-col-10 { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.pz-chip-row    { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.pz-chip-row-lg { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.pz-stat-row   { display: flex !important; justify-content: space-between !important; align-items: baseline !important; }
.pz-abs-center { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.pz-btn-grow  { flex: 1 !important; justify-content: center !important; }
.pz-btn-block { width: 100% !important; text-align: center !important; justify-content: center !important; }
.pz-summary-btn { cursor: pointer !important; list-style: none !important; }

/* ── Nagłówek strony ── */
.pz-page-head  { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 16px !important; gap: 10px !important; flex-wrap: wrap !important; }
.pz-page-title { font-size: 20px !important; }

/* ── Empty state ── */
.pz-empty-card  { text-align: center !important; padding: 40px 24px !important; }
.pz-empty-ico   { font-size: 40px !important; margin-bottom: 12px !important; }
.pz-empty-title { font-weight: 600 !important; font-size: 15px !important; margin-bottom: 8px !important; }

/* ── Karty: padding warianty ── */
.pz-card-14 { padding: 14px 16px !important; }
.pz-card-16 { padding: 16px 18px !important; }
.pz-card-18 { padding: 18px 20px !important; }
.pz-card-h-13 { font-size: 13px !important; margin-bottom: 10px !important; }

/* ── Modale ── */
.pz-modal-380 { max-width: 380px !important; width: 95vw !important; }
.pz-modal-400 { max-width: 400px !important; width: 95vw !important; }
.pz-modal-420 { max-width: 420px !important; width: 95vw !important; }
.pz-modal-body-col { display: flex !important; flex-direction: column !important; gap: 14px !important; }

/* ── Kalendarz rezerwacji (book + reschedule) ── */
.pz-step-title       { font-weight: 600 !important; font-size: 14px !important; margin-bottom: 12px !important; }
.pz-step-title-tight { font-weight: 600 !important; font-size: 14px !important; margin-bottom: 10px !important; }
.pz-step-badge {
  display: inline-block !important; width: 22px !important; height: 22px !important; background: var(--accent) !important;
  color: white !important; border-radius: 50% !important; text-align: center !important; line-height: 22px !important;
  font-size: 12px !important; margin-right: 6px !important; }
.pz-week-card    { margin-bottom: 10px !important; padding: 0 !important; overflow: hidden !important; }
.pz-week-summary {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 12px 16px !important; cursor: pointer !important; list-style: none !important;
  font-weight: 600 !important; font-size: 13px !important; }
.pz-week-chevron { font-size: 18px !important; color: var(--text-2) !important; }
.pz-week-body    { padding: 0 16px 14px !important; }
.pz-day-label    { font-size: 12px !important; font-weight: 600 !important; color: var(--text-2) !important; margin-bottom: 6px !important; }
.pz-slot-booked {
  padding: 6px 12px !important; border-radius: var(--radius-sm) !important; background: var(--surface-2) !important;
  border: 1px solid var(--border) !important; font-size: 12px !important; color: var(--text-3) !important;
  text-decoration: line-through !important; }
.pz-slot-free {
  padding: 6px 12px !important; border-radius: var(--radius-sm) !important;
  background: color-mix(in oklch,var(--accent) 10%,var(--surface)) !important;
  border: 1px solid color-mix(in oklch,var(--accent) 30%,var(--border)) !important;
  font-size: 12px !important; font-weight: 600 !important; color: var(--accent) !important; cursor: pointer !important; }
.pz-slot-free--anim { transition: all .1s ease !important; }
.pz-slot-free--selected { background: var(--accent) !important; border-color: var(--accent) !important; color: white !important; }
.pz-autoconfirm-note { font-size: 12px !important; color: oklch(0.65 0.18 145) !important; margin-top: 4px !important; font-weight: 600 !important; }
.pz-duration-btn {
  padding: 10px 16px !important; border-radius: var(--radius-sm) !important; font-size: 13px !important;
  cursor: pointer !important; transition: all .15s ease !important;
  border: 1px solid var(--border) !important; background: var(--surface-2) !important; }
.pz-duration-btn--active {
  border-color: var(--accent) !important;
  background: color-mix(in oklch,var(--accent) 12%,var(--surface)) !important;
  color: var(--accent) !important; font-weight: 600 !important; }
.pz-duration-link {
  padding: 8px 14px !important; border-radius: var(--radius-sm) !important; font-size: 13px !important;
  text-decoration: none !important; border: 1px solid var(--border) !important; background: var(--surface-2) !important; }
.pz-duration-link--active {
  border-color: var(--accent) !important;
  background: color-mix(in oklch,var(--accent) 12%,var(--surface)) !important;
  color: var(--accent) !important; font-weight: 600 !important; }

/* ── Pigułki statusu rezerwacji ── */
.pz-status-pill { font-size: 11px !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 99px !important; }
.pz-status-pill--pending   { color: oklch(0.72 0.18 55) !important;  background: color-mix(in oklch,oklch(0.75 0.18 55) 15%,var(--surface-2)) !important; }
.pz-status-pill--confirmed { color: oklch(0.65 0.18 145) !important; background: color-mix(in oklch,oklch(0.65 0.18 145) 12%,var(--surface-2)) !important; }
.pz-status-pill--rejected  { color: oklch(0.65 0.20 25) !important;  background: color-mix(in oklch,oklch(0.65 0.20 25) 12%,var(--surface-2)) !important; }
.pz-status-pill--cancelled { color: var(--text-2) !important; background: var(--surface-2) !important; }

/* ── student.html (pz-st-) ── */
.pz-st-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 18px !important; flex-wrap: wrap !important; }
.pz-st-streak-badge { margin-left: 6px !important; font-size: 13px !important; color: oklch(0.72 0.18 55) !important; font-weight: 600 !important; }
.pz-st-cta { text-decoration: none !important; display: flex !important; align-items: center !important; gap: 14px !important; padding: 16px 20px !important; }
.pz-st-cta-ico {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background: color-mix(in oklch,var(--accent) 15%,var(--surface-2)) !important;
  display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.pz-st-cta-glyph { font-size: 20px !important; color: var(--accent) !important; }
.pz-st-cta-title { font-weight: 600 !important; font-size: 14px !important; color: var(--accent) !important; }
.pz-st-cta-sub   { font-size: 12px !important; color: var(--text-2) !important; margin-top: 1px !important; }
.pz-st-cta-arrow { font-size: 18px !important; color: var(--text-3) !important; }
.pz-st-hero {
  padding: 20px !important;
  background: linear-gradient(135deg,color-mix(in oklch,var(--accent) 9%,var(--surface-2)),var(--surface-2)) !important;
  border: 1px solid color-mix(in oklch,var(--accent) 25%,var(--border)) !important; }
.pz-st-hero-label {
  font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .07em !important;
  color: var(--accent) !important; margin-bottom: 10px !important; display: flex !important; align-items: center !important; gap: 5px !important; }
.pz-st-hero-row { display: flex !important; align-items: flex-start !important; gap: 16px !important; }
.pz-st-countdown {
  flex-shrink: 0 !important; width: 72px !important; height: 72px !important; border-radius: 50% !important;
  background: color-mix(in oklch,var(--accent) 12%,var(--surface)) !important;
  border: 2px solid color-mix(in oklch,var(--accent) 35%,var(--border)) !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  text-align: center !important; }
.pz-st-countdown-today { font-size: 10px !important; font-weight: 800 !important; color: var(--accent) !important; letter-spacing: .04em !important; }
.pz-st-countdown-soon  { font-size: 10px !important; font-weight: 800 !important; color: var(--accent) !important; }
.pz-st-countdown-num   { font-size: 24px !important; font-weight: 800 !important; color: var(--accent) !important; line-height: 1 !important; }
.pz-st-hero-title { font-size: 17px !important; font-weight: 700 !important; margin-bottom: 3px !important; line-height: 1.3 !important; }
.pz-st-hero-when  { font-size: 13px !important; font-weight: 600 !important; color: var(--accent) !important; }
.pz-st-prenote {
  margin-top: 10px !important; padding: 8px 12px !important;
  background: color-mix(in oklch,var(--accent) 6%,var(--surface-2)) !important;
  border-radius: var(--radius-sm) !important; font-size: 12px !important; font-style: italic !important; color: var(--accent) !important; }
.pz-st-resched-note {
  margin-top: 8px !important; padding: 8px 12px !important;
  background: color-mix(in oklch,oklch(0.60 0.18 250) 8%,var(--surface-2)) !important;
  border-radius: var(--radius-sm) !important; border-left: 3px solid oklch(0.60 0.18 250) !important;
  font-size: 12px !important; font-weight: 700 !important; color: oklch(0.55 0.18 250) !important; }
.pz-st-resched-note-sm {
  margin-top: 8px !important; padding: 6px 10px !important;
  background: color-mix(in oklch,oklch(0.60 0.18 250) 8%,var(--surface-2)) !important;
  border-radius: var(--radius-sm) !important; border-left: 2px solid oklch(0.60 0.18 250) !important;
  font-size: 11px !important; font-weight: 700 !important; color: oklch(0.55 0.18 250) !important; }
.pz-st-hero-actions { margin-top: 12px !important; display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.pz-st-pending-card  { border-left: 3px solid oklch(0.75 0.18 55) !important; }
.pz-st-pending-title { color: oklch(0.68 0.18 55) !important; }
.pz-st-pending-row {
  display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important;
  background: color-mix(in oklch,oklch(0.75 0.18 55) 6%,var(--surface-2)) !important;
  border-radius: var(--radius-sm) !important; }
.pz-st-lesson-item {
  padding: 12px 14px !important; background: var(--surface-2) !important;
  border-radius: var(--radius-sm) !important; border-left: 3px solid var(--accent) !important; }
.pz-st-lesson-row  { display: flex !important; align-items: flex-start !important; gap: 12px !important; }
.pz-st-lesson-date { flex-shrink: 0 !important; text-align: center !important; min-width: 40px !important; }
.pz-st-lesson-day  { font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important; color: var(--accent) !important; }
.pz-st-lesson-prenote { font-size: 12px !important; color: var(--accent) !important; margin-top: 3px !important; font-style: italic !important; }
.pz-st-lesson-actions { margin-top: 8px !important; display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
.pz-st-empty-title { font-weight: 600 !important; font-size: 15px !important; margin-bottom: 6px !important; }
.pz-st-complete-card {
  text-align: center !important; padding: 24px 16px !important;
  background: linear-gradient(135deg,color-mix(in oklch,oklch(0.65 0.18 145) 12%,var(--surface-2)),var(--surface-2)) !important;
  border: 1px solid color-mix(in oklch,oklch(0.65 0.18 145) 30%,var(--border)) !important; }
.pz-st-complete-ico   { font-size: 36px !important; margin-bottom: 8px !important; }
.pz-st-complete-title { font-size: 16px !important; font-weight: 700 !important; margin-bottom: 4px !important; }
.pz-st-ring-row  { display: flex !important; align-items: center !important; gap: 16px !important; margin-bottom: 14px !important; }
.pz-st-ring-wrap { flex-shrink: 0 !important; position: relative !important; width: 72px !important; height: 72px !important; }
.pz-st-ring-svg  { transform: rotate(-90deg) !important; display: block !important; }
.pz-st-ring-arc  { transition: stroke-dasharray .6s ease !important; }
.pz-st-ring-pct  { font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; }
.pz-st-plan-title {
  font-size: 13px !important; font-weight: 600 !important; margin-bottom: 8px !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.pz-st-stat-frac  { font-size: 12px !important; font-weight: 400 !important; color: var(--text-2) !important; }
.pz-st-streak-val { font-size: 14px !important; font-weight: 700 !important; color: oklch(0.72 0.18 55) !important; }
.pz-st-progress-track { height: 6px !important; background: var(--border) !important; border-radius: 3px !important; overflow: hidden !important; margin-bottom: 10px !important; }
.pz-st-progress-bar   { height: 6px !important; background: var(--accent) !important; border-radius: 3px !important; transition: width .6s ease !important; }
.pz-st-plan-link {
  display: flex !important; align-items: center !important; gap: 8px !important; padding: 9px 11px !important;
  border-radius: var(--radius-sm) !important; border: 1px solid var(--border) !important;
  background: var(--surface-2) !important; text-decoration: none !important; color: inherit !important; font-size: 12px !important; }
.pz-st-plan-link--active {
  border-color: var(--accent) !important;
  background: color-mix(in oklch,var(--accent) 10%,var(--surface-2)) !important; }
.pz-st-plan-link-name { font-weight: 400 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.pz-st-plan-link-name--active { font-weight: 700 !important; }
.pz-st-exam-card {
  padding: 16px 18px !important;
  background: linear-gradient(135deg,color-mix(in oklch,var(--accent) 7%,var(--surface-2)),var(--surface-2)) !important;
  border: 1px solid color-mix(in oklch,var(--accent) 18%,var(--border)) !important; }
.pz-st-exam-row   { display: flex !important; align-items: center !important; gap: 14px !important; }
.pz-st-exam-label {
  font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: .06em !important; color: var(--accent) !important; margin-bottom: 3px !important; }
.pz-st-exam-count {
  text-align: center !important; flex-shrink: 0 !important; min-width: 56px !important; padding: 8px !important;
  background: color-mix(in oklch,var(--accent) 12%,var(--surface)) !important;
  border-radius: var(--radius-sm) !important; }
.pz-st-exam-today { font-size: 13px !important; font-weight: 800 !important; color: var(--accent) !important; }
.pz-st-exam-days  { font-size: 22px !important; font-weight: 800 !important; line-height: 1 !important; color: var(--accent) !important; }
.pz-st-exam-days--urgent { color: oklch(0.65 0.20 25) !important; }
.pz-st-exam-days--soon   { color: oklch(0.72 0.18 55) !important; }
.pz-st-resource-btn { gap: 4px !important; text-decoration: none !important; }
.pz-st-notes-text { font-size: 13px !important; line-height: 1.7 !important; white-space: pre-wrap !important; }
.pz-st-sticky {
  padding: 9px 12px !important; border-radius: var(--radius-sm) !important; font-size: 13px !important;
  line-height: 1.6 !important; background: var(--surface-2) !important;
  border-left: 3px solid oklch(0.75 0.18 80) !important; }
.pz-st-sticky--red    { border-left-color: oklch(0.65 0.20 25) !important; }
.pz-st-sticky--green  { border-left-color: oklch(0.65 0.18 145) !important; }
.pz-st-sticky--blue   { border-left-color: oklch(0.60 0.18 250) !important; }
.pz-st-sticky--violet { border-left-color: oklch(0.60 0.18 300) !important; }
.pz-st-tutor-row { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 12px !important; }
.pz-st-tutor-avatar {
  width: 42px !important; height: 42px !important; min-width: 42px !important; font-size: 14px !important; font-weight: 700 !important;
  border-radius: 50% !important; background: color-mix(in oklch,var(--accent) 15%,var(--surface-2)) !important;
  color: var(--accent) !important; display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; }
.pz-st-cancel-info {
  padding: 12px !important; background: color-mix(in oklch,oklch(0.65 0.20 25) 8%,var(--surface-2)) !important;
  border-radius: var(--radius-sm) !important; font-size: 13px !important; }

/* ── book.html (pz-bk-) ── */
.pz-bk-empty-title  { font-weight: 600 !important; font-size: 16px !important; margin-bottom: 8px !important; }
.pz-bk-step-hint    { font-size: 12px !important; font-weight: 400 !important; color: var(--text-2) !important; margin-left: 6px !important; }
.pz-bk-slot-summary { padding: 12px 14px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; }

/* ── reschedule.html (pz-rs-) ── */
.pz-rs-error {
  padding: 12px 16px !important;
  background: color-mix(in oklch,oklch(0.65 0.20 25) 8%,var(--surface-2)) !important;
  border: 1px solid color-mix(in oklch,oklch(0.65 0.20 25) 25%,var(--border)) !important;
  border-radius: var(--radius-sm) !important; margin-bottom: 14px !important; }
.pz-rs-error-title { font-weight: 600 !important; font-size: 13px !important; color: oklch(0.65 0.20 25) !important; }
.pz-rs-empty       { text-align: center !important; padding: 32px !important; }
.pz-rs-empty-ico   { font-size: 32px !important; margin-bottom: 8px !important; }
.pz-rs-empty-title { font-weight: 600 !important; margin-bottom: 6px !important; }
.pz-rs-old-slot {
  padding: 10px 12px !important;
  background: color-mix(in oklch,oklch(0.65 0.20 25) 8%,var(--surface-2)) !important;
  border-radius: var(--radius-sm) !important; font-size: 13px !important; }
.pz-rs-new-slot {
  padding: 12px 14px !important;
  background: color-mix(in oklch,oklch(0.65 0.18 145) 8%,var(--surface-2)) !important;
  border-radius: var(--radius-sm) !important; }

/* ── reservations.html (pz-rv-) ── */
.pz-rv-success {
  padding: 16px 18px !important;
  background: linear-gradient(135deg, color-mix(in oklch,oklch(0.65 0.18 145) 12%,var(--surface-2)), var(--surface-2)) !important;
  border: 1px solid color-mix(in oklch,oklch(0.65 0.18 145) 35%,var(--border)) !important;
  border-radius: var(--radius) !important; margin-bottom: 16px !important; }
.pz-rv-success-ico   { font-size: 28px !important; margin-bottom: 8px !important; }
.pz-rv-success-title { font-weight: 700 !important; font-size: 16px !important; color: oklch(0.65 0.18 145) !important; margin-bottom: 6px !important; }
.pz-rv-success-when  { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 4px !important; }
.pz-rv-cancelled {
  padding: 12px 16px !important; background: var(--surface-2) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important; margin-bottom: 14px !important; font-size: 13px !important; color: var(--text-2) !important; }
.pz-rv-booking { padding: 14px 16px !important; border-left: 3px solid var(--border) !important; }
.pz-rv-booking--pending   { border-left-color: oklch(0.75 0.18 55) !important; }
.pz-rv-booking--confirmed { border-left-color: oklch(0.65 0.18 145) !important; }
.pz-rv-booking--rejected  { border-left-color: oklch(0.65 0.20 25) !important; }
.pz-rv-booking-row { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; flex-wrap: wrap !important; }
.pz-rv-note-quote  { font-size: 12px !important; color: var(--text-2) !important; margin-top: 4px !important; font-style: italic !important; }
.pz-rv-tutor-reply { font-size: 12px !important; margin-top: 6px !important; padding: 6px 10px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; }
.pz-rv-actions     { display: flex !important; flex-direction: column !important; gap: 6px !important; align-items: flex-end !important; }

/* ── dashboard.html (pz-db-) ── */
.pz-db-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 14px !important; }
.pz-db-child-card { text-decoration: none !important; display: flex !important; align-items: center !important; gap: 16px !important; padding: 18px 20px !important; }
.pz-db-avatar {
  width: 48px !important; height: 48px !important; min-width: 48px !important; font-size: 16px !important; font-weight: 700 !important;
  border-radius: 50% !important; background: color-mix(in oklch,var(--accent) 18%,var(--surface-2)) !important;
  color: var(--accent) !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.pz-db-child-name { font-weight: 600 !important; font-size: 15px !important; margin-bottom: 3px !important; }
.pz-db-progress-track { height: 4px !important; background: var(--border) !important; border-radius: 2px !important; overflow: hidden !important; margin-bottom: 3px !important; }
.pz-db-progress-bar   { height: 4px !important; background: var(--accent) !important; border-radius: 2px !important; }
.pz-db-arrow { font-size: 20px !important; color: var(--text-3) !important; flex-shrink: 0 !important; }

/* ── parent/_base.html (pz-base-) ── */

/* ── Specyficzność: motyw premium.css ładuje się PO app.css i ustawia
      `.parent-dash-main/.parent-dash-side .parent-card { padding: 20px 22px; }`
      oraz `... .parent-card-h { margin-bottom: 16px; }` (bez !important).
      Inline style wygrywał z tymi regułami — poniższe selektory (0-3-0)
      odtwarzają to pierwszeństwo 1:1 dla kart w siatce dashboardu rodzica. ── */
.parent-dash-grid .parent-card.pz-st-cta           { padding: 16px 20px !important; }
.parent-dash-grid .parent-card.pz-st-hero          { padding: 20px !important; }
.parent-dash-grid .parent-card.pz-st-complete-card { padding: 24px 16px !important; }
.parent-dash-grid .parent-card.pz-st-exam-card     { padding: 16px 18px !important; }
.parent-dash-grid .parent-card.pz-card-14          { padding: 14px 16px !important; }
.parent-dash-grid .parent-card.pz-card-16          { padding: 16px 18px !important; }
.parent-dash-grid .parent-card.pz-card-18          { padding: 18px 20px !important; }
.parent-dash-grid .parent-card.pz-empty-card       { padding: 40px 24px !important; }
.parent-dash-grid .parent-card-h.pz-card-h-13      { margin-bottom: 10px !important; }

/* ── Utilities wygenerowane w transzach 2+ (Faza 2) ── */
.pz-ai-center { align-items: center !important; }
.pz-bc-border { border-color: var(--border) !important; }
.pz-bc-text { border-color: var(--text) !important; }
.pz-bg-surface-2 { background: var(--surface-2) !important; }
.pz-bg-text { background: var(--text) !important; }
.pz-br-99 { border-radius: 99px !important; }
.pz-c-bg { color: var(--bg) !important; }
.pz-c-c-rej { color: var(--c-rej) !important; }
.pz-c-inherit { color: inherit !important; }
.pz-c-text-3 { color: var(--text-3) !important; }
.pz-flex { display: flex !important; }
.pz-fs-10 { font-size: 10px !important; }
.pz-fs-14 { font-size: 14px !important; }
.pz-fs-9 { font-size: 9px !important; }
.pz-fw-400 { font-weight: 400 !important; }
.pz-fw-500 { font-weight: 500 !important; }
.pz-gap-10 { gap: 10px !important; }
.pz-gap-12 { gap: 12px !important; }
.pz-gap-4 { gap: 4px !important; }
.pz-gap-6 { gap: 6px !important; }
.pz-gap-8 { gap: 8px !important; }
.pz-h-26 { height: 26px !important; }
.pz-h-5 { height: 5px !important; }
.pz-h-6 { height: 6px !important; }
.pz-h-8 { height: 8px !important; }
.pz-hidden { display: none !important; }
.pz-inline-block { display: inline-block !important; }
.pz-italic { font-style: italic !important; }
.pz-jc-between { justify-content: space-between !important; }
.pz-maxw-100 { max-width: 100px !important; }
.pz-maxw-140 { max-width: 140px !important; }
.pz-maxw-150 { max-width: 150px !important; }
.pz-maxw-200 { max-width: 200px !important; }
.pz-mb-18 { margin-bottom: 18px !important; }
.pz-mb-4 { margin-bottom: 4px !important; }
.pz-ml-4 { margin-left: 4px !important; }
.pz-mr-4 { margin-right: 4px !important; }
.pz-mr-8 { margin-right: 8px !important; }
.pz-mt-12 { margin-top: 12px !important; }
.pz-nowrap { white-space: nowrap !important; }
.pz-op-4 { opacity: 0.4 !important; }
.pz-op-6 { opacity: 0.6 !important; }
.pz-p-4 { padding: 4px !important; }
.pz-p-40 { padding: 40px !important; }
.pz-pointer { cursor: pointer !important; }
.pz-self-start { align-self: flex-start !important; }
.pz-ta-center { text-align: center !important; }
.pz-td-none { text-decoration: none !important; }
.pz-w-26 { width: 26px !important; }

/* ============================================================
   14. Plany + uczniowie — klasy wyekstrahowane z inline styles (Faza 2.2)
   ============================================================ */
/* ── wspólne ── */
.pz-btn-ghost-sm { background: none !important; border: none !important; cursor: pointer !important; color: var(--text-3) !important; font-size: 11px !important; }
.pz-empty-dashed { background: var(--surface) !important; border: 1px dashed var(--border-strong) !important; border-radius: var(--radius) !important; padding: 40px 24px !important; }
.pz-sep-top      { border-top: 1px solid var(--border) !important; padding-top: 14px !important; margin-top: 4px !important; }
.pz-c-success    { color: oklch(0.65 0.18 145) !important; }
.pz-acc-summary        { cursor: pointer !important; font-weight: 500 !important; padding: 8px 0 !important; }
.pz-acc-summary-strong { cursor: pointer !important; padding: 8px 0 !important; font-weight: 600 !important; font-size: 13.5px !important; }
.pz-link-contents { display: contents !important; color: inherit !important; text-decoration: none !important; }
.pz-head-row-20   { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 20px !important; flex-wrap: wrap !important; }
.pz-inline-form   { display: inline !important; margin: 0 !important; }
.pz-kbd       { font-family: 'Geist Mono' !important; padding: 1px 4px !important; background: var(--surface-2) !important; border-radius: 3px !important; }
.pz-fs-115    { font-size: 11.5px !important; }
.pz-overline  { font-size: 11px !important; color: var(--text-3) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin-bottom: 8px !important; }
.pz-h-sub     { font-size: 14px !important; font-weight: 600 !important; margin: 18px 0 10px !important; }
.pz-note-compact { font-size: 11px !important; line-height: 1.3 !important; }
.pz-strong-135   { font-weight: 500 !important; font-size: 13.5px !important; }
.pz-callout-info        { margin-bottom: 14px !important; padding: 10px 12px !important; background: oklch(0.95 0.04 230 / 0.4) !important; border-left: 3px solid oklch(0.70 0.10 230) !important; border-radius: 4px !important; }
.pz-callout-success     { margin-bottom: 14px !important; padding: 10px 14px !important; background: oklch(0.95 0.07 155 / 0.5) !important; border: 1px solid oklch(0.78 0.10 155) !important; border-radius: var(--radius-sm) !important; font-size: 13px !important; }
.pz-callout-success-box { margin-top: 14px !important; padding: 14px !important; background: oklch(0.95 0.07 155 / 0.5) !important; border: 1px solid oklch(0.78 0.10 155) !important; border-radius: var(--radius-sm) !important; }
.pz-ml-auto    { margin-left: auto !important; }
.pz-tt-cap     { text-transform: capitalize !important; }
.pz-img-contain { object-fit: contain !important; background: transparent !important; }
.pz-abs-tr     { position: absolute !important; top: 6px !important; right: 6px !important; margin: 0 !important; z-index: 2 !important; }
.pz-logo-36    { width: 36px !important; height: 36px !important; object-fit: contain !important; }
.pz-modal-480  { width: 480px !important; max-width: 96vw !important; }
/* ── profil ucznia (pz-sp-) ── */
.pz-sp-grid-2    { background: var(--surface-2) !important; padding: 14px !important; border-radius: var(--radius-sm) !important; margin-top: 8px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.pz-sp-stack-box { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-top: 8px !important; padding: 12px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; }
.pz-sp-row-box   { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; padding: 10px 12px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; }
.pz-sp-code      { font-size: 18px !important; font-family: 'Geist Mono' !important; background: var(--surface) !important; padding: 4px 10px !important; border-radius: 4px !important; letter-spacing: 0.1em !important; }
.pz-sp-grp-label          { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--text-3) !important; padding: 8px 0 4px !important; border-bottom: 1px solid var(--border) !important; margin-bottom: 8px !important; }
.pz-sp-grp-label--success { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: oklch(0.65 0.18 145) !important; padding: 6px 0 4px !important; border-bottom: 1px solid var(--border) !important; margin-bottom: 8px !important; }
.pz-sp-flex2     { margin: 0 !important; flex: 2 !important; }
/* ── raport ucznia (pz-sr-) ── */
.pz-sr-ico    { flex-shrink: 0 !important; padding-top: 2px !important; }
.pz-sr-footer { margin-top: 32px !important; padding-top: 16px !important; border-top: 1px solid var(--border) !important; font-size: 11px !important; color: var(--text-2) !important; display: flex !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 8px !important; }
/* ── widok planu (pz-pv-) ── */
.pz-pv-cal-grid  { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 4px !important; font-size: 11px !important; }
.pz-pv-cal-cell  { background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: 6px !important; padding: 6px !important; min-height: 60px !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
.pz-pv-hw-box    { background: var(--surface-2) !important; padding: 10px !important; border-radius: var(--radius-sm) !important; margin-top: 6px !important; }
.pz-pv-drag-handle { cursor: grab !important; padding: 0 6px !important; color: var(--text-3) !important; font-family: 'Geist Mono' !important; user-select: none !important; align-self: stretch !important; display: flex !important; align-items: center !important; font-size: 16px !important; }
.pz-pv-list-row  { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 0 !important; border-bottom: 1px solid var(--border) !important; }
.pz-pv-select-compact { flex: 0 0 auto !important; width: auto !important; min-width: 110px !important; }
.pz-pv-modal-filter   { margin-bottom: 10px !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--border) !important; display: flex !important; gap: 6px !important; align-items: end !important; }
.pz-pv-sub       { margin: 4px 0 10px !important; font-size: 12px !important; }
/* ── wizard planu (pz-pw-) ── */
.pz-pw-info-strip  { background: var(--surface-2) !important; padding: 10px 12px !important; border-radius: var(--radius-sm) !important; border-left: 3px solid oklch(0.70 0.10 230) !important; }
.pz-pw-sublist     { display: flex !important; flex-direction: column !important; gap: 4px !important; padding-left: 16px !important; }
.pz-pw-actions     { display: flex !important; gap: 8px !important; justify-content: flex-end !important; padding: 14px 0 40px !important; }
.pz-pw-topic-label { flex: 1 !important; font-size: 12.5px !important; cursor: pointer !important; }
.pz-pw-mono-hint   { margin-top: 4px !important; font-family: 'Geist Mono' !important; font-size: 11px !important; display: none !important; }
.pz-pw-num-input   { width: 50px !important; padding: 3px 6px !important; font-size: 12px !important; text-align: center !important; border: 1px solid var(--border) !important; border-radius: 4px !important; background: var(--surface) !important; color: var(--text) !important; font-family: 'Geist Mono' !important; }
/* ── warianty warunkowe (plan view + wizard) ── */
.pz-pv-cal-day          { font-size: 11px !important; color: var(--text-3) !important; font-family: 'Geist Mono' !important; }
.pz-pv-cal-day--today   { color: var(--text) !important; }
.pz-pv-cal-lesson { font-size: 10.5px !important; padding: 2px 5px !important; border-radius: 3px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-decoration: none !important; background: var(--c-new-bg) !important; color: var(--c-new) !important; }
.pz-pv-cal-lesson--done    { background: var(--c-ok-bg) !important; color: var(--c-ok) !important; }
.pz-pv-cal-lesson--skipped { background: var(--c-rej-bg) !important; color: var(--c-rej) !important; }
.pz-pv-mono-count       { font-family: 'Geist Mono' !important; font-size: 12px !important; color: var(--text-3) !important; }
.pz-pv-mono-count--done { color: var(--c-ok) !important; }
.pz-pw-topic-row          { display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px !important; border-radius: 4px !important; }
.pz-pw-topic-row--checked { background: var(--surface-2) !important; }
.pz-pw-lessons-wrap          { display: none !important; align-items: center !important; gap: 4px !important; }
.pz-pw-lessons-wrap--visible { display: flex !important; }

/* ── Utilities wygenerowane w transzach 2+ (Faza 2) ── */
.pz-ai-start { align-items: flex-start !important; }
.pz-fs-24 { font-size: 24px !important; }
.pz-fs-26 { font-size: 26px !important; }
.pz-fw-600 { font-weight: 600 !important; }
.pz-h-28 { height: 28px !important; }
.pz-h-32 { height: 32px !important; }
.pz-h-4 { height: 4px !important; }
.pz-h-44 { height: 44px !important; }
.pz-mb-3 { margin-bottom: 3px !important; }
.pz-minw-0 { min-width: 0 !important; }
.pz-minw-130 { min-width: 130px !important; }
.pz-minw-180 { min-width: 180px !important; }
.pz-minw-200 { min-width: 200px !important; }
.pz-p-12 { padding: 12px !important; }
.pz-p-12-4 { padding: 12px 4px !important; }
.pz-p-14 { padding: 14px !important; }
.pz-p-16 { padding: 16px !important; }
.pz-p-24 { padding: 24px !important; }
.pz-p-3-6 { padding: 3px 6px !important; }
.pz-p-4-8 { padding: 4px 8px !important; }
.pz-p-6-10 { padding: 6px 10px !important; }
.pz-w-28 { width: 28px !important; }
.pz-w-32 { width: 32px !important; }
.pz-w-36 { width: 36px !important; }
.pz-w-40 { width: 40px !important; }
.pz-w-44 { width: 44px !important; }
.pz-w-80 { width: 80px !important; }
.pz-wrap { flex-wrap: wrap !important; }

/* ============================================================
   15. Panel korepetytora — klasy wyekstrahowane z inline styles (Faza 2.3)
   ============================================================ */
/* ── wspólne wiersze/boxy listowe ── */
.pz-col-12      { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.pz-row-box-10  { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 14px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; }
.pz-row-box-sm  { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 10px !important; background: var(--surface) !important; border-radius: var(--radius-sm) !important; }
.pz-row-box-12  { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; }
.pz-row-box-12--muted { opacity: 0.8 !important; }
.pz-row-box-ok  { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 14px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; border-left: 3px solid oklch(0.65 0.18 145) !important; }
.pz-row-link    { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 10px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; text-decoration: none !important; color: inherit !important; }
.pz-row-between     { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 10px !important; }
.pz-row-between-12  { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; flex-wrap: wrap !important; }
.pz-stat-strip      { display: flex !important; justify-content: space-between !important; padding: 8px 12px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; }
.pz-stat-strip--accent { background: color-mix(in oklch,var(--accent) 6%,var(--surface-2)) !important; }
.pz-meta-strip  { display: flex !important; gap: 8px !important; padding: 5px 8px !important; background: var(--surface-2) !important; border-radius: 4px !important; font-size: 12px !important; }
.pz-check-inline { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; cursor: pointer !important; }
/* ── gridy ── */
.pz-grid-7      { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 8px !important; overflow-x: auto !important; }
.pz-grid-fill-180 { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 8px !important; }
.pz-grid-kpi    { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; gap: 12px !important; margin-bottom: 20px !important; }
.pz-grid-kpi-sm { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; gap: 10px !important; margin-bottom: 16px !important; }
/* ── typografia / ellipsis ── */
.pz-ellipsis-dim    { color: var(--text-2) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.pz-ellipsis-dim-12 { font-size: 12px !important; color: var(--text-2) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.pz-ellipsis-500-12 { font-size: 12px !important; font-weight: 500 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.pz-ellipsis-500    { font-weight: 500 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.pz-h-page      { font-size: 20px !important; font-weight: 700 !important; margin: 0 0 2px !important; }
.pz-h-page-4    { font-size: 20px !important; font-weight: 700 !important; margin: 0 0 4px !important; }
.pz-overline-accent { font-size: 11px !important; color: var(--accent) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .05em !important; }
.pz-overline-dim    { font-size: 12px !important; font-weight: 600 !important; color: var(--text-2) !important; text-transform: uppercase !important; letter-spacing: .05em !important; margin-bottom: 8px !important; }
.pz-list-hint   { font-size: 12px !important; color: var(--text-2) !important; margin: 0 !important; padding-left: 16px !important; line-height: 1.9 !important; }
.pz-c-info      { color: oklch(0.60 0.18 250) !important; }
.pz-strong-warn { font-weight: 600 !important; font-size: 13px !important; color: oklch(0.62 0.18 55) !important; }
/* ── badge / pigułki ── */
.pz-count-badge { background: white !important; color: var(--accent) !important; border-radius: 99px !important; padding: 1px 7px !important; font-size: 11px !important; margin-left: 4px !important; }
.pz-pill-info   { font-size: 10px !important; font-weight: 700 !important; background: color-mix(in oklch,oklch(0.60 0.18 250) 15%,var(--surface-2)) !important; color: oklch(0.55 0.18 250) !important; padding: 2px 8px !important; border-radius: 99px !important; }
.pz-legend-dot         { display: inline-block !important; width: 10px !important; height: 10px !important; background: var(--accent) !important; border-radius: 2px !important; margin-right: 4px !important; }
.pz-legend-dot--ok     { background: oklch(0.65 0.18 145) !important; }
.pz-legend-dot--info   { background: oklch(0.60 0.18 250) !important; }
.pz-bg-warn     { background: oklch(0.72 0.18 55) !important; }
/* ── callouty / karty statusowe ── */
.pz-card-ok-outline  { margin-bottom: 14px !important; border: 1px solid color-mix(in oklch,oklch(0.65 0.18 145) 35%,var(--border)) !important; background: color-mix(in oklch,oklch(0.65 0.18 145) 6%,var(--surface-2)) !important; }
.pz-banner-ok        { padding: 10px 14px !important; background: color-mix(in oklch,oklch(0.65 0.18 145) 12%,var(--surface-2)) !important; border-radius: var(--radius-sm) !important; margin-bottom: 12px !important; font-size: 13px !important; color: oklch(0.65 0.18 145) !important; font-weight: 600 !important; }
.pz-banner-ok-bordered { padding: 10px 14px !important; background: color-mix(in oklch,oklch(0.65 0.18 145) 12%,var(--surface-2)) !important; border: 1px solid color-mix(in oklch,oklch(0.65 0.18 145) 30%,var(--border)) !important; border-radius: var(--radius-sm) !important; margin-bottom: 14px !important; font-size: 13px !important; color: oklch(0.65 0.18 145) !important; font-weight: 600 !important; }
.pz-banner-warn      { padding: 12px 16px !important; background: color-mix(in oklch,oklch(0.72 0.18 55) 10%,var(--surface-2)) !important; border: 1px solid color-mix(in oklch,oklch(0.72 0.18 55) 30%,var(--border)) !important; border-radius: var(--radius-sm) !important; margin-bottom: 14px !important; }
.pz-banner-warn-row  { padding: 12px 16px !important; background: color-mix(in oklch,oklch(0.75 0.18 55) 10%,var(--surface-2)) !important; border: 1px solid color-mix(in oklch,oklch(0.75 0.18 55) 30%,var(--border)) !important; border-radius: var(--radius) !important; margin-bottom: 14px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
.pz-note-private     { padding: 10px 14px !important; border-radius: var(--radius-sm) !important; font-size: 13px !important; line-height: 1.6 !important; background: color-mix(in oklch,oklch(0.55 0.10 280) 8%,var(--surface-2)) !important; border: 1px dashed oklch(0.55 0.10 280) !important; border-left: 3px solid oklch(0.55 0.10 280) !important; }
.pz-exam-chip   { padding: 8px 14px !important; background: color-mix(in oklch,var(--accent) 8%,var(--surface-2)) !important; border: 1px solid color-mix(in oklch,var(--accent) 20%,var(--border)) !important; border-radius: var(--radius-sm) !important; text-align: center !important; flex-shrink: 0 !important; }
.pz-card-accent-l    { margin-bottom: 14px !important; padding: 14px 16px !important; border-left: 3px solid var(--accent) !important; }
.pz-card-warn-l      { padding: 14px 16px !important; border-left: 3px solid oklch(0.72 0.18 55) !important; }
.pz-card-warn-l4     { border-left: 4px solid oklch(0.75 0.18 55) !important; }
.pz-info-box-10 { margin-top: 10px !important; padding: 12px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; }
.pz-info-box-8  { margin-top: 8px !important; padding: 10px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; }
.pz-info-box-13 { font-size: 13px !important; padding: 8px 12px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; margin-bottom: 10px !important; }
/* ── layout drobne ── */
.pz-card-flush  { padding: 0 !important; overflow: hidden !important; margin-bottom: 16px !important; }
.pz-legend-row  { margin-top: 14px !important; display: flex !important; gap: 12px !important; flex-wrap: wrap !important; font-size: 12px !important; color: var(--text-2) !important; }
.pz-mv-16-20    { margin: 16px 0 20px !important; }
.pz-modal-440   { max-width: 440px !important; width: 95vw !important; }
/* ── warianty warunkowe (tutor) ── */
.pz-sch-day          { text-align: center !important; padding: 8px 4px !important; border-radius: var(--radius-sm) !important; margin-bottom: 6px !important; font-size: 12px !important; font-weight: 600 !important; background: var(--surface-2) !important; color: var(--text-2) !important; }
.pz-sch-day--today   { background: var(--accent) !important; color: white !important; }
.pz-sch-lesson       { display: block !important; padding: 6px 8px !important; border-radius: var(--radius-sm) !important; text-decoration: none !important; font-size: 11px !important; line-height: 1.4 !important; border-left: 3px solid var(--accent) !important; background: var(--surface-2) !important; color: inherit !important; }
.pz-sch-lesson--done        { border-left-color: oklch(0.65 0.18 145) !important; }
.pz-sch-lesson--rescheduled { border-left-color: oklch(0.60 0.18 250) !important; }
.pz-av-day           { padding: 14px 18px !important; border-bottom: 1px solid var(--border) !important; }
.pz-av-day--last     { border-bottom: none !important; }
.pz-av-day-head      { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 0 !important; }
.pz-av-day-head--open { margin-bottom: 10px !important; }
.pz-kpi-num          { font-size: 26px !important; font-weight: 700 !important; color: var(--accent) !important; }
.pz-kpi-num--warn    { color: oklch(0.72 0.18 55) !important; }
.pz-db-lesson-row        { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; border-left: 3px solid var(--accent) !important; }
.pz-db-lesson-row--done  { border-left-color: oklch(0.65 0.18 145) !important; }
.pz-db-day-label         { font-size: 11px !important; font-weight: 600 !important; color: var(--text-2) !important; text-transform: uppercase !important; letter-spacing: .05em !important; margin-top: 0 !important; }
.pz-db-day-label--gap    { margin-top: 6px !important; }
.pz-status-glyph         { color: var(--text-3) !important; }
.pz-status-glyph--done   { color: oklch(0.65 0.18 145) !important; }
.pz-sv-exam-days         { font-size: 20px !important; font-weight: 700 !important; color: var(--accent) !important; }
.pz-sv-exam-days--urgent { color: oklch(0.65 0.20 25) !important; }
.pz-sv-exam-days--soon   { color: oklch(0.72 0.18 55) !important; }
.pz-sv-lesson        { padding: 12px 14px !important; border-left: 3px solid var(--accent) !important; }
.pz-sv-lesson--done        { border-left-color: oklch(0.65 0.18 145) !important; }
.pz-sv-lesson--rescheduled { border-left-color: oklch(0.60 0.18 250) !important; }
.pz-sv-lesson--skipped     { border-left-color: var(--text-3) !important; }
.pz-sv-sticky { padding: 10px 14px !important; border-radius: var(--radius-sm) !important; font-size: 13px !important; line-height: 1.6 !important; background: var(--surface-2) !important; border-left: 3px solid oklch(0.75 0.18 80) !important; }
.pz-sv-sticky--red    { border-left-color: oklch(0.65 0.20 25) !important; }
.pz-sv-sticky--green  { border-left-color: oklch(0.65 0.18 145) !important; }
.pz-sv-sticky--blue   { border-left-color: oklch(0.60 0.18 250) !important; }
.pz-sv-sticky--violet { border-left-color: oklch(0.60 0.18 300) !important; }

/* ── Utilities wygenerowane w transzach 2+ (Faza 2) ── */
.pz-fs-22 { font-size: 22px !important; }
.pz-fs-28 { font-size: 28px !important; }
.pz-jc-end { justify-content: flex-end !important; }
.pz-maxw-120 { max-width: 120px !important; }
.pz-minw-140 { min-width: 140px !important; }
.pz-ml-6 { margin-left: 6px !important; }
.pz-mt-14 { margin-top: 14px !important; }
.pz-mt-18 { margin-top: 18px !important; }
.pz-p-1-6 { padding: 1px 6px !important; }
.pz-p-10 { padding: 10px !important; }
.pz-p-10-10 { padding: 10px 10px !important; }
.pz-p-20 { padding: 20px !important; }
.pz-p-6-8 { padding: 6px 8px !important; }
.pz-p-8 { padding: 8px !important; }
.pz-p-8-10 { padding: 8px 10px !important; }
.pz-p-8-8 { padding: 8px 8px !important; }
.pz-ta-left { text-align: left !important; }
.pz-ta-right { text-align: right !important; }

/* ============================================================
   16. Panel admina — klasy wyekstrahowane z inline styles (Faza 2.4)
   ============================================================ */
.pz-bb-1       { border-bottom: 1px solid var(--border) !important; }
.pz-bb-2       { border-bottom: 2px solid var(--border) !important; }
.pz-bt-2-bg    { border-top: 2px solid var(--border) !important; background: var(--surface-2) !important; }
.pz-scroll-x   { overflow-x: auto !important; }
.pz-tbl        { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; }
.pz-tbl-12     { width: 100% !important; border-collapse: collapse !important; font-size: 12px !important; }
.pz-bar-mini   { width: 50px !important; height: 5px !important; display: inline-block !important; vertical-align: middle !important; }
.pz-grid-fit-140 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 12px !important; margin-bottom: 20px !important; }
.pz-grid-fit-160 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 10px !important; }
.pz-grid-fit-180 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 12px !important; max-width: 100% !important; }
.pz-grid-fit-220 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 12px !important; }
.pz-grid-fit-240 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 12px !important; }
.pz-quicklink    { padding: 14px 16px !important; text-decoration: none !important; color: inherit !important; display: flex !important; align-items: center !important; gap: 10px !important; }
.pz-inline-ml4   { display: inline !important; margin-left: 4px !important; }
.pz-checkbox-lbl { display: flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; font-size: 13px !important; }
.pz-checkbox-in  { width: 16px !important; height: 16px !important; accent-color: var(--accent) !important; }
.pz-row-end      { display: flex !important; align-items: flex-end !important; gap: 10px !important; flex-wrap: wrap !important; }
.pz-row-stretch  { display: flex !important; gap: 8px !important; align-items: stretch !important; }
.pz-list-hint-2  { font-size: 12px !important; color: var(--text-2) !important; margin: 0 !important; padding-left: 16px !important; line-height: 2 !important; }
.pz-h-m-0-10     { margin: 0 0 10px !important; }
.pz-box-10-12    { padding: 10px 12px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; }
.pz-sep-top-12   { margin-top: 16px !important; padding-top: 12px !important; border-top: 1px solid var(--border) !important; }
.pz-sep-top-16   { margin-top: 20px !important; padding-top: 16px !important; border-top: 1px solid var(--border) !important; }
.pz-sep-top-fine { margin-top: 32px !important; padding-top: 16px !important; border-top: 1px solid var(--border) !important; font-size: 11px !important; color: var(--text-2) !important; }
.pz-sep-top-flush { margin: 0 !important; padding-top: 10px !important; border-top: 1px solid var(--border) !important; }
.pz-sep-top-ok   { padding-top: 10px !important; border-top: 1px solid var(--border) !important; font-size: 13px !important; color: oklch(0.65 0.18 145) !important; }
.pz-banner-ok-16 { padding: 10px 14px !important; background: color-mix(in oklch,oklch(0.65 0.18 145) 12%,var(--surface-2)) !important; border: 1px solid color-mix(in oklch,oklch(0.65 0.18 145) 30%,var(--border)) !important; border-radius: var(--radius-sm) !important; margin-bottom: 16px !important; font-size: 13px !important; color: oklch(0.65 0.18 145) !important; font-weight: 600 !important; }
.pz-cell-ok      { padding: 14px 16px !important; text-align: center !important; border: 1px solid color-mix(in oklch,oklch(0.65 0.18 145) 30%,var(--border)) !important; }
.pz-underline    { text-decoration: underline !important; }
.pz-px-4         { padding: 0 4px !important; }
/* trends — wykres słupkowy */
.pz-tr-chip      { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 10px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; margin: 0 !important; }
.pz-tr-chart     { display: flex !important; align-items: flex-end !important; gap: 6px !important; height: 180px !important; padding: 12px 0 !important; border-bottom: 1px solid var(--border) !important; }
.pz-tr-bar-val   { position: absolute !important; top: -16px !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 9px !important; color: var(--text-3) !important; font-family: 'Geist Mono' !important; }
.pz-tr-bar-lbl   { flex: 1 !important; text-align: center !important; font-size: 10px !important; color: var(--text-3) !important; font-family: 'Geist Mono' !important; }
.pz-mono-10      { font-size: 10px !important; font-family: 'Geist Mono' !important; }
.pz-tr-row       { display: flex !important; justify-content: space-between !important; padding: 8px 0 !important; border-bottom: 1px solid var(--border) !important; }
.pz-tr-summary   { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 14px !important; }
.pz-tr-chip-2    { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 10px !important; background: var(--surface-2) !important; border-radius: var(--radius-sm) !important; }
.pz-tr-row-plain { display: flex !important; justify-content: space-between !important; padding: 8px 0 !important; }
.pz-billing-total       { font-size: 14px !important; font-weight: 700 !important; color: oklch(0.72 0.18 55) !important; }
.pz-billing-total--paid { color: oklch(0.65 0.18 145) !important; }
.pz-tr-bar { width: 100% !important; background: linear-gradient(180deg, oklch(0.62 0.16 258), oklch(0.42 0.20 258)) !important; border-radius: 3px 3px 0 0 !important; position: relative !important; }

/* ── Utilities wygenerowane w transzach 2+ (Faza 2) ── */
.pz-bc-danger { border-color: var(--danger) !important; }
.pz-block { display: block !important; }
.pz-c-danger { color: var(--danger) !important; }
.pz-c-text-muted { color: var(--text-muted) !important; }
.pz-gap-2 { gap: 2px !important; }
.pz-h-24 { height: 24px !important; }
.pz-ls-none { list-style: none !important; }
.pz-maxw-160 { max-width: 160px !important; }
.pz-maxw-180 { max-width: 180px !important; }
.pz-maxw-560 { max-width: 560px !important; }
.pz-minw-120 { min-width: 120px !important; }
.pz-minw-28 { min-width: 28px !important; }
.pz-op-7 { opacity: .7 !important; }
.pz-p-2-7 { padding: 2px 7px !important; }
.pz-p-3-8 { padding: 3px 8px !important; }
.pz-p-8-12 { padding: 8px 12px !important; }
.pz-p-8-6 { padding: 8px 6px !important; }
.pz-self-end { align-self: flex-end !important; }
.pz-w-120 { width: 120px !important; }
.pz-w-140 { width: 140px !important; }
.pz-w-24 { width: 24px !important; }
.pz-w-440 { width: 440px !important; }
.pz-w-64 { width: 64px !important; }

/* ============================================================
   17. Pozostałe widoki (topics/collabs/tasks/postings/scrape/leads/auth/public)
   — klasy wyekstrahowane z inline styles (Faza 2.5)
   ============================================================ */
.pz-span-all     { grid-column: 1/-1 !important; }
.pz-grid-2-10    { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.pz-grid-2-12    { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.pz-drawer-body  { overflow-y: auto !important; padding: 20px 24px !important; display: flex !important; flex-direction: column !important; gap: 20px !important; }
.pz-mr-auto      { margin-right: auto !important; }
.pz-prewrap-13   { font-size: 13px !important; white-space: pre-wrap !important; line-height: 1.6 !important; }
.pz-prewrap-13-5 { font-size: 13px !important; white-space: pre-wrap !important; line-height: 1.5 !important; }
.pz-prewrap-13-7 { font-size: 13px !important; white-space: pre-wrap !important; line-height: 1.7 !important; font-family: inherit !important; }
.pz-modal-700    { width: 700px !important; max-width: 96vw !important; }
.pz-modal-560    { width: 560px !important; max-width: 96vw !important; }
.pz-modal-600    { width: 600px !important; max-height: 90dvh !important; }
.pz-modal-660    { max-width: 660px !important; width: 95vw !important; }
.pz-modal-680    { max-width: 680px !important; width: 95vw !important; }
.pz-callout-amber   { padding: 14px !important; background: var(--color-amber-50, #fffbeb) !important; border: 1px solid var(--color-amber-200, #fde68a) !important; }
.pz-sep-top-12f  { padding-top: 12px !important; border-top: 1px solid var(--border) !important; }
.pz-sep-top-ov   { padding-top: 12px !important; border-top: 1px solid var(--outline-variant) !important; }
.pz-m-8-0-0      { margin: 8px 0 0 !important; }
.pz-h-18         { font-size: 18px !important; font-weight: 600 !important; margin: 0 0 4px !important; }
.pz-h-18-flush   { font-size: 18px !important; font-weight: 600 !important; line-height: 1.4 !important; margin: 0 !important; }
.pz-btn-link-danger { font-size: 11px !important; color: var(--danger) !important; background: none !important; border: none !important; cursor: pointer !important; padding: 0 !important; }
.pz-btn-link-accent { background: none !important; border: none !important; cursor: pointer !important; color: var(--accent) !important; padding: 0 !important; font: inherit !important; text-decoration: underline !important; }
.pz-font-inherit    { font-family: inherit !important; line-height: 1.6 !important; }
.pz-font-inherit-15 { font-family: inherit !important; line-height: 1.5 !important; }
.pz-font-inherit-0  { font-family: inherit !important; }
.pz-row-end-8    { display: flex !important; gap: 8px !important; align-items: flex-end !important; margin-top: 8px !important; }
.pz-check-row    { display: flex !important; align-items: center !important; gap: 8px !important; padding: 4px 6px !important; cursor: pointer !important; }
.pz-checkbox-18  { width: 18px !important; height: 18px !important; accent-color: var(--accent) !important; }
.pz-color-dot    { width: 24px !important; height: 24px !important; border-radius: 50% !important; display: inline-block !important; border: 2px solid transparent !important; cursor: pointer !important; }
.pz-note-muted   { margin: 10px 0 0 !important; font-size: 13px !important; color: var(--text-muted) !important; white-space: pre-wrap !important; }
.pz-m-0-12       { margin: 0 0 12px !important; }
.pz-mt-n8-4      { margin-top: -8px !important; margin-bottom: 4px !important; }
.pz-mt-n8        { margin-top: -8px !important; }
.pz-float-right  { margin-left: auto !important; float: right !important; margin-top: -2px !important; }
.pz-ico-16       { font-size: 16px !important; vertical-align: -3px !important; }
.pz-url-break    { font-size: 13px !important; color: var(--accent) !important; word-break: break-all !important; }
.pz-fs-125-p8    { font-size: 12.5px !important; padding: 8px 0 !important; }
.pz-fs-125       { font-size: 12.5px !important; }
.pz-overline-muted   { font-size: 11px !important; font-weight: 600 !important; color: var(--text-muted) !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin-bottom: 8px !important; }
.pz-overline-muted-6 { font-size: 11px !important; font-weight: 600 !important; color: var(--text-muted) !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin-bottom: 6px !important; }
.pz-overline-muted-0 { font-size: 11px !important; font-weight: 600 !important; color: var(--text-muted) !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
.pz-overline-dim-3   { font-size: 11px !important; font-weight: 600 !important; color: var(--text-3) !important; text-transform: uppercase !important; letter-spacing: .05em !important; margin-bottom: 8px !important; }
.pz-overline-amber   { font-size: 11px !important; font-weight: 600 !important; color: #b45309 !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin-bottom: 8px !important; }
.pz-overline-amber-6 { font-size: 11px !important; font-weight: 600 !important; color: #b45309 !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin-bottom: 6px !important; }
.pz-faint-tiny   { font-size: 10px !important; opacity: .4 !important; }
.pz-row-14-12    { font-size: 14px !important; padding: 12px 0 !important; }
.pz-hint-hidden  { font-size: 12px !important; margin: -6px 0 10px !important; display: none !important; }
.pz-overline-500 { font-size: 12px !important; margin-bottom: 10px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 500 !important; }
.pz-list-fine    { font-size: 12.5px !important; color: var(--text-2) !important; line-height: 1.7 !important; padding-left: 20px !important; margin: 0 !important; }
.pz-hint-115     { font-size: 11.5px !important; margin-top: 6px !important; line-height: 1.6 !important; }
.pz-textarea-grow    { flex: 1 !important; resize: none !important; font-size: 13px !important; }
.pz-textarea-grow-60 { flex: 1 !important; min-width: 0 !important; resize: none !important; min-height: 60px !important; }
.pz-track-4      { flex: 1 !important; height: 4px !important; background: var(--border) !important; border-radius: 2px !important; overflow: hidden !important; }
.pz-track-3      { flex: 1 !important; height: 3px !important; background: var(--border) !important; border-radius: 2px !important; overflow: hidden !important; }
.pz-inline-mlauto    { display: inline !important; margin-left: auto !important; }
.pz-inline-check     { display: inline-flex !important; gap: 8px !important; align-items: center !important; padding: 6px 0 !important; }
.pz-meta-wrap-16 { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; padding: 12px !important; background: var(--surface-alt) !important; border-radius: 8px !important; font-size: 12px !important; }
.pz-meta-wrap-12 { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; padding: 12px !important; background: var(--surface-alt) !important; border-radius: 8px !important; font-size: 12px !important; }
.pz-stack-box-sm { display: flex !important; flex-direction: column !important; gap: 8px !important; background: var(--surface-2) !important; padding: 10px 12px !important; border-radius: var(--shape-sm) !important; }
.pz-res-row      { display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px 0 !important; border-bottom: 1px solid var(--border) !important; }
.pz-row-link-grow    { display: flex !important; align-items: center !important; gap: 12px !important; flex: 1 !important; min-width: 0 !important; color: inherit !important; text-decoration: none !important; }
.pz-pick-list    { display: flex !important; flex-direction: column !important; gap: 4px !important; max-height: 320px !important; overflow-y: auto !important; background: var(--surface-2) !important; padding: 8px !important; border-radius: var(--radius-sm) !important; }
.pz-pick-list-280 { display: flex !important; flex-direction: column !important; gap: 4px !important; max-height: 280px !important; overflow-y: auto !important; background: var(--surface-2) !important; padding: 8px !important; border-radius: var(--radius-sm) !important; }
.pz-col-20       { display: flex !important; flex-direction: column !important; gap: 20px !important; }
.pz-drag-handle-sm   { cursor: grab !important; padding: 0 3px !important; color: var(--text-3) !important; user-select: none !important; font-size: 14px !important; }
.pz-cursor-default   { cursor: default !important; }
.pz-on-accent-tiny   { color: #fff !important; font-size: 10px !important; line-height: 1 !important; }
.pz-hr-flush     { border: none !important; border-top: 1px solid var(--border) !important; margin: 0 !important; }
.pz-code-block   { background: var(--surface-2) !important; padding: 12px 14px !important; border-radius: var(--radius-sm) !important; font-family: 'Geist Mono' !important; font-size: 12.5px !important; overflow-x: auto !important; }
/* Strażnik specyficzności: premium.css (ładowany PO app.css) ustawia
   font-family na .input/.textarea — inline style wygrywał, klasa 0-1-0 by
   przegrała. Podwójna klasa (0-2-0) odtwarza pierwszeństwo inline'a. */
.input.pz-font-inherit, .textarea.pz-font-inherit,
.input.pz-font-inherit-0, .textarea.pz-font-inherit-0,
.input.pz-font-inherit-15, .textarea.pz-font-inherit-15 { font-family: inherit !important; }
.pz-consent-box   { background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 16px 18px !important; margin: 16px 0 !important; font-size: 13px !important; line-height: 1.7 !important; }
.pz-consent-check { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; cursor: pointer !important; font-size: 13px !important; line-height: 1.5 !important; }
.pz-consent-check--gap { margin-bottom: 14px !important; }
.pz-task-progress-4 { height: 4px !important; background: var(--accent) !important; border-radius: 2px !important; }
.pz-task-progress-3 { height: 3px !important; background: var(--accent) !important; border-radius: 2px !important; }
.pz-checklist-toggle { background: none !important; border: 1.5px solid var(--border) !important; border-radius: 3px !important; width: 16px !important; height: 16px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; padding: 0 !important; }
.pz-checklist-toggle--done { background: var(--accent) !important; border-color: var(--accent) !important; }
.pz-checklist-item { font-size: 12px !important; flex: 1 !important; }
.pz-checklist-item--done { text-decoration: line-through !important; opacity: .5 !important; }
.pz-due-tag { font-size: 10px !important; }
.pz-due-tag--overdue { color: var(--danger) !important; }
.pz-stat--danger { border-color: var(--danger) !important; }
.pz-row--overdue { background: var(--danger-bg, oklch(0.97 0.02 20)) !important; }
.pz-avatar--overdue { background: var(--danger) !important; color: #fff !important; }
.pz-days--warn { color: var(--warning, #d97706) !important; }

/* ── Utilities wygenerowane w transzach 2+ (Faza 2) ── */
.pz-op-3 { opacity: .3 !important; }
.pz-modal-560w { max-width: 560px !important; width: 95vw !important; }

/* ============================================================
   18. Polish v1 (Faza 2) — globalne dopieszczenie
   ============================================================ */
/* Nic się nie wylewa: media nigdy szersze niż kontener,
   długie słowa/URL-e łamią się zamiast rozpychać karty */
img, svg, video, canvas { max-width: 100%; }
.card, .parent-card, .modal, .drawer-body, .kanban-card { overflow-wrap: break-word; }

/* Typografia: ciaśniejsze, pewniejsze nagłówki; zbalansowane łamanie */
h1, h2, h3, .page-title, .drawer-title { letter-spacing: -0.015em; text-wrap: balance; }

/* Liczby tabelaryczne — kwoty/liczniki nie skaczą szerokością */
.mono, .stat-value, .kanban-col-count, .pager-info { font-variant-numeric: tabular-nums; }

/* Spójny, wyraźny focus dla klawiatury (nie nadpisuje .btn — ten ma własny) */
a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--shape-xs);
}

/* Zaznaczenie tekstu w kolorze marki */
::selection { background: color-mix(in oklch, var(--primary) 22%, transparent); }

/* Subtelne scrollbary (Firefox + WebKit) */
html { scrollbar-width: thin; scrollbar-color: var(--outline-variant) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   19. Design pass v2 — dane w mono, lift kart, gradientowe paski
   ============================================================ */
/* JEDNA czcionka dla wartości danych: terminy lekcji, %, liczniki,
   odliczania, kwoty. Mono + tabular = równo, technicznie, czytelnie. */
.stat-value, .pz-kpi-num, .pz-st-ring-pct, .pz-st-exam-days, .pz-sv-exam-days,
.pz-st-countdown-num, .pz-st-lesson-day, .pz-st-exam-today, .pz-st-countdown-today,
.pz-billing-total, .kanban-col-count, .tab-count, .pz-st-streak-val {
  font-family: inherit !important;   /* jedna rodzina: Plus Jakarta Sans */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Interaktywne karty — subtelny lift przy hover (desktop) */
@media (hover: hover) {
  a.parent-card, a.card, a.stat {
    transition: transform var(--motion-std) var(--ease-std),
                box-shadow var(--motion-std) var(--ease-std);
  }
  a.parent-card:hover, a.card:hover, a.stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--elev-2);
  }
}

/* Paski postępu — gradient zamiast płaskiego koloru */
.pz-st-progress-bar, .pz-db-progress-bar, .pz-task-progress-3, .pz-task-progress-4 {
  background: linear-gradient(90deg,
    var(--primary),
    color-mix(in oklch, var(--primary) 65%, oklch(0.72 0.16 200))) !important;
}

/* ============================================================
   20. Design pass v4 — oddech + dotyk
   Cel: większe strefy dotyku na mobile (≥44px), luźniejszy rytm
   w kluczowych widokach (hero dziecka, karty lekcji, "Dzisiaj"
   tutora, lista leadów). Nadpisuje sekcje 13-17 (!important,
   później w pliku = wygrywa przy równej specyficzności).
   ============================================================ */

/* ── Oddech: kluczowe karty i wiersze ── */
.pz-st-hero        { padding: 24px !important; }
.pz-st-hero-row    { gap: 18px !important; }
.pz-st-hero-title  { font-size: 18px !important; }
.pz-st-lesson-item { padding: 14px 16px !important; }
.pz-st-lesson-row  { gap: 14px !important; }
.pz-db-lesson-row  { padding: 12px 14px !important; gap: 12px !important; }
.pz-row-box-10, .pz-row-box-12 { padding: 12px 14px !important; }

/* ── Dotyk: mobile ≥44px tam, gdzie się klika palcem ── */
@media (max-width: 900px) {
  .btn, .icon-btn { min-height: 44px; }
  .btn { padding-top: 10px; padding-bottom: 10px; }
  .icon-btn { min-width: 44px; }
  .chip { min-height: 38px; display: inline-flex; align-items: center; }
  .input, .select, .textarea, select, input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 44px;
  }
  /* Sloty rezerwacji i czasy trwania — główne cele dotyku rodzica */
  .pz-slot-free, .pz-slot-booked { padding: 10px 14px !important; min-height: 42px; display: inline-flex; align-items: center; }
  .pz-duration-btn, .pz-duration-link { padding: 12px 18px !important; min-height: 44px; display: inline-flex; align-items: center; }
  /* Lista leadów (karty na mobile) — luźniejsze wiersze, łatwiejszy tap */
  table.leads td { padding: 14px 12px; }
  .pager .btn { min-width: 44%; justify-content: center; }
}

/* ── Spokój: nagłówki sekcji w kartach oddychają ── */
.card-h, .parent-card-h { margin-bottom: 12px; }

/* ============================================================
   21. FINAL PASS — kompletna warstwa modernizacyjna (jedna,
   najwyższa w kaskadzie). Wszystko, co dotąd szło transzami,
   domknięte na raz: dashboardy, drawer, tabele, modale, przyciski.
   ============================================================ */

/* ── Przyciski: pill — sygnatura nowoczesnego UI ── */
.btn { border-radius: var(--shape-full) !important; }
.icon-btn { border-radius: var(--shape-full) !important; }

/* ── Pola formularzy: spójne zaokrąglenie, wyraźny focus ── */
.input, .select, .textarea { border-radius: var(--shape-md) !important; }

/* ── Tabele (desktop): nagłówki jako overline, luźniejsze wiersze ── */
table.leads th, .pz-tbl th, .pz-tbl-12 th {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600 !important;
  color: var(--text-3) !important;
}
@media (min-width: 901px) {
  table.leads td { padding-top: 13px; padding-bottom: 13px; }
}

/* ── Drawer (lead/zadanie/temat): czytelne sekcje, lepszy rytm ── */
.drawer-head {
  position: sticky; top: 0; z-index: 2;
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.drawer-body section + section { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--outline-variant); }
.dr-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); font-weight: 600; }
.timeline .tl-item, .timeline > div { border-radius: var(--shape-md); }

/* ── Dashboardy (tutor/admin): KPI z oddechem ── */
.pz-grid-kpi, .pz-grid-kpi-sm { gap: 14px !important; }
.stat, .card.pz-ta-center { border-radius: var(--shape-lg); }

/* ── Kanban: karty miękkie, kolumny z oddechem ── */
.kanban-card { border-radius: var(--shape-md); }
.kanban-col-body { gap: 10px; }
.kanban-ghost { opacity: .35; transform: rotate(2deg); }

/* ── Modale: większy radius, oddech w stopce ── */
.modal { border-radius: var(--shape-xl); }
.modal-foot, .modal-footer { padding-top: 14px; gap: 10px; }
@media (max-width: 600px) {
  /* bottom-sheet feel na telefonie */
  .modal { border-radius: var(--shape-xl) var(--shape-xl) 0 0; margin-bottom: 0; width: 100vw !important; max-width: 100vw !important; }
}

/* ── Empty states: wyśrodkowane, łagodne ── */
.empty, .pz-empty-card, .pz-empty-dashed { border-radius: var(--shape-lg); }
.empty-title { font-size: 16px; font-weight: 700; }

/* ── Toasty ── */
.toast { border-radius: var(--shape-full); box-shadow: var(--elev-3); }

/* ── Strona logowania: karta z głębią ── */
.login-card { border-radius: var(--shape-xl); box-shadow: var(--elev-3); }

/* ── Topbar crumbs: spokojniejsze ── */
.crumbs { font-size: 13px; }
.crumbs-sep { color: var(--text-3); opacity: .5; }

/* ── Sticky notes / callouty: miększe rogi ── */
.pz-st-sticky, .pz-sv-sticky, .pz-callout-info, .pz-callout-success,
.pz-banner-ok, .pz-banner-warn, .pz-note-private { border-radius: var(--shape-md) !important; }

/* ── Dostępność ruchowa: szanujemy prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   22. ANTY-OVERFLOW (mobile) — twarde domknięcie poziomu strony
   ============================================================ */
/* Strona NIGDY nie scrolluje w bok — wewnętrzne scrollery (.stats,
   .pz-scroll-x, kanban) działają dalej, bo mają własny overflow-x. */
html, body { overflow-x: clip; }

@media (max-width: 900px) {
  /* Drawer (lead/zadanie/temat/współpraca) na pełną szerokość, mniejszy padding */
  .drawer { width: 100vw !important; max-width: 100vw !important; }
  .pz-drawer-body { padding: 16px !important; gap: 16px !important; }

  /* Pola formularzy nie wymuszają szerokości (flex/grid min-width fix) */
  .input, .select, .textarea, select, textarea { max-width: 100%; min-width: 0; }

  /* Komórki tabel łamią długie treści zamiast rozpychać układ */
  td, th { overflow-wrap: anywhere; }
  table { max-width: 100%; }

  /* Metki w detalach (współprace/ogłoszenia) — ciaśniej, zawijają się */
  .pz-meta-wrap-16, .pz-meta-wrap-12 { gap: 10px !important; padding: 10px !important; }
}

@media (max-width: 600px) {
  /* Dwukolumnowe gridy detali → jedna kolumna na telefonie */
  .pz-grid-2-10, .pz-grid-2-12, .pz-sp-grid-2,
  .pz-grid-fit-180, .pz-grid-fit-220, .pz-grid-fit-240 {
    grid-template-columns: 1fr !important;
  }
  .pz-grid-2-10 > *, .pz-grid-2-12 > *, .pz-sp-grid-2 > * { min-width: 0; }
}

/* ============================================================
   23. Pass B — skeleton loading + lejek leadów
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3, var(--surface)) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--shape-sm);
}
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton-title { height: 22px; width: 45%; margin-bottom: 16px; }
.skeleton-line  { height: 13px; margin-bottom: 10px; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-block { height: 120px; margin-top: 16px; }

.funnel-row   { display: flex; align-items: center; gap: 12px; }
.funnel-label { width: 110px; flex-shrink: 0; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.funnel-track { flex: 1; height: 22px; background: var(--surface-2); border-radius: var(--shape-sm); overflow: hidden; }
.funnel-bar   { height: 100%; border-radius: var(--shape-sm); transition: width .6s var(--ease-std, ease); min-width: 2px; }
.funnel-bar--new  { background: var(--c-new); }
.funnel-bar--prog { background: var(--c-prog); }
.funnel-bar--ok   { background: var(--c-ok); }
.funnel-bar--rej  { background: var(--c-rej); }
.funnel-num   { width: 44px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* C1: dzwoneczek w topbarze */
.topbar-bell { position: relative; }
.bell-badge {
  position: absolute; top: 2px; right: 2px;
  background: var(--c-rej); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 5px; border-radius: var(--shape-full);
  min-width: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   24. P4 Premium feel — view transitions, puls, hover, mesh
   ============================================================ */
/* Płynne przejścia między stronami (MPA cross-fade; starsze przeglądarki ignorują) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }

/* Pulsowanie elementów "oczekujących" — delikatny oddech */
@keyframes pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--c-prog) 45%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in oklch, var(--c-prog) 0%, transparent); }
}
.pz-status-pill--pending { animation: pulse-soft 2.2s ease-in-out infinite; }
.bell-badge { animation: pulse-soft 2.2s ease-in-out 3; }

/* Hover wiersza: akcentowy pasek z lewej (bez przesuwania layoutu) */
table.leads tr.row:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary); }

/* Topbar nabiera cienia dopiero po scrollu */
.topbar { transition: box-shadow var(--motion-std) var(--ease-std); }
.topbar.scrolled { box-shadow: 0 4px 18px oklch(0 0 0 / 0.08); }

/* Taby: płynniejsze przejścia wskaźnika */
.tab { transition: color var(--motion-std) var(--ease-std); }
.tab::after { transition: transform var(--motion-std) var(--ease-emph, var(--ease-std)), opacity var(--motion-std) var(--ease-std); }

/* Gradient-mesh za nagłówkiem strony — subtelna sygnatura marki */
.page-head { position: relative; }
.page-head::before {
  content: '';
  position: absolute; inset: -28px -24px auto -24px; height: 150px;
  background:
    radial-gradient(420px 120px at 12% 0%, color-mix(in oklch, var(--primary) 7%, transparent), transparent 70%),
    radial-gradient(360px 100px at 85% 10%, color-mix(in oklch, var(--accent) 5%, transparent), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  .pz-status-pill--pending, .bell-badge { animation: none; }
}

/* Sortowanie kolumn (leady) */
.th-sort { color: inherit; text-decoration: none; }
.th-sort:hover { color: var(--primary); }

/* ============================================================
   25. FullCalendar — theming tokenami (fix: granatowe przyciski
   FC wyglądały jak "czarne kafle" w jasnym motywie) + mobile
   ============================================================ */
#calendar {
  --fc-page-bg-color: transparent;
  --fc-border-color: var(--outline-variant);
  --fc-button-bg-color: var(--surface-2);
  --fc-button-border-color: var(--outline-variant);
  --fc-button-text-color: var(--text);
  --fc-button-hover-bg-color: color-mix(in oklch, var(--primary) 12%, var(--surface-2));
  --fc-button-hover-border-color: var(--outline-variant);
  --fc-button-active-bg-color: var(--primary);
  --fc-button-active-border-color: var(--primary);
  --fc-today-bg-color: color-mix(in oklch, var(--primary) 7%, transparent);
  --fc-event-bg-color: var(--primary);
  --fc-event-border-color: transparent;
  --fc-event-text-color: #fff;
  --fc-list-event-hover-bg-color: var(--state-hover, var(--surface-2));
  --fc-neutral-bg-color: var(--surface-2);
}
#calendar .fc-button { border-radius: var(--shape-full); text-transform: none; font-weight: 600; }
#calendar .fc-button-active { color: var(--on-primary, #fff); }
#calendar .fc-toolbar-title { font-size: 18px; letter-spacing: -0.01em; }
#calendar .fc-event { border-radius: var(--shape-sm); font-size: 12px; cursor: pointer; }
#calendar .fc-col-header-cell-cushion, #calendar .fc-daygrid-day-number,
#calendar .fc-list-day-text, #calendar .fc-list-day-side-text { color: var(--text); text-decoration: none; }
#calendar .fc-timegrid-slot-label, #calendar .fc-timegrid-axis-cushion { color: var(--text-3); font-size: 11px; }

/* Toolbar filtrów nad kalendarzem */
.cal-toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.cal-toolbar .field { min-width: 180px; }

/* Legenda */
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--outline-variant); font-size: 12px; color: var(--text-2); }
.cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.cal-dot[data-c="pending"]     { background: var(--primary); }
.cal-dot[data-c="done"]        { background: #22a06b; }
.cal-dot[data-c="rescheduled"] { background: #5b7fd6; }
.cal-dot[data-c="skipped"]     { background: #9aa0a6; }
.cal-dot[data-c="av"]          { background: rgba(80, 200, 120, 0.45); }
.cal-dot[data-c="off"]         { background: rgba(220, 70, 70, 0.45); }

/* Mobile: mniejsze fonty, toolbar w pionie, eventy czytelne */
@media (max-width: 700px) {
  #calendar .fc-toolbar { flex-direction: column; gap: 8px; }
  #calendar .fc-toolbar-title { font-size: 15px; }
  #calendar .fc-button { padding: 6px 10px; font-size: 12px; }
  #calendar .fc-event { font-size: 11px; }
  #calendar .fc-timegrid-slot { height: 1.6em; }
  .cal-toolbar .field { min-width: 100%; }
}

/* ============================================================
   26. Fala 3b — pola edycji w drawerach nie wylewają się
   (inputy mają intrinsic width; w gridach 2-kol drawera 560px
   wymuszały overflow). Obowiązuje na KAŻDEJ szerokości.
   ============================================================ */
.field .input, .field .select, .field .textarea,
.pz-grid-2-10 .input, .pz-grid-2-10 .select, .pz-grid-2-10 .textarea,
.pz-grid-2-12 .input, .pz-grid-2-12 .select, .pz-grid-2-12 .textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.pz-grid-2-10 > *, .pz-grid-2-12 > * { min-width: 0; }
.drawer-body .field { min-width: 0; }
/* Wąski drawer (<=640px viewport albo zawsze w drawerze przy 2 kolumnach
   z długimi labelami): pozwól gridowi łamać do 1 kolumny gdy ciasno */
.drawer-body .pz-grid-2-10, .drawer-body .pz-grid-2-12 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}
/* E3: lekcje w siatce — wyraźna separacja gdy obok siebie */
#calendar .fc-timegrid-event { box-shadow: 0 0 0 1.5px var(--surface); border-radius: var(--shape-sm); }
#calendar .fc-timegrid-event .fc-event-main { padding: 2px 4px; }

/* ============================================================
   27) Akordeony strefy rodzica + profil ucznia (fala 3, pkt 8)
   <details class="parent-card pz-st-acc"> z summary = nagłówkiem karty.
   ============================================================ */
.pz-st-acc-sum { cursor: pointer; list-style: none; user-select: none; }
.pz-st-acc-sum::-webkit-details-marker { display: none; }
.pz-st-acc-chev {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-3);
  transition: transform .18s ease;
}
details[open] > .pz-st-acc-sum .pz-st-acc-chev { transform: rotate(180deg); }
.pz-st-acc-sum:hover .pz-st-acc-chev { color: var(--text); }

/* Karta płatności u rodzica (fala 3) */
.pz-st-pkg {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--shape-sm, 8px);
  background: var(--surface-2);
}
.pz-st-pkg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}