/* ===== FONT OUTFIT — HOSTOWANY U NAS (28.07, RUN PIERWSZE WEJŚCIE §A2) =====================
   Do 28.07 stał tu `@import` do fonts.googleapis.com. `@import` w CSS to NAJGORSZY wariant:
   przeglądarka musi najpierw pobrać nasz arkusz, dopiero z niego dowiaduje się o kolejnym
   arkuszu na OBCEJ domenie, i dopiero z tamtego o pliku fontu — trzy rundy, dwa uściski TLS,
   render czeka. Na produkcji to zapytanie potrafiło PAŚĆ (`ERR_FAILED` na ekranie logowania
   i w aplikacji), czyli pierwsze wejście zależało od cudzego serwera.
   Teraz: wariant zmienny (jeden plik = wagi 100-900) z `vendor/fonts/outfit`, licencja SIL OFL 1.1
   (`vendor/fonts/outfit/LICENSE.txt`). `font-display: swap` = tekst widać od razu, font podmienia
   się po dociągnięciu. `unicode-range` sprawia, że plik z polskimi znakami leci tylko wtedy,
   gdy strona ich realnie używa. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url('/vendor/fonts/outfit/outfit-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url('/vendor/fonts/outfit/outfit-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ===== DR DESIGN TOKENS — UX-STANDARD.md sek. 2+4 (baza GRAFIT, akcent=--color-brand) ===== */
:root{
  /* spacing (base 4px) */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
  /* typografia */
  --text-xs:12px;--text-sm:14px;--text-base:16px;--text-lg:18px;--text-xl:24px;--text-2xl:32px;
  --leading-tight:1.25;--leading-normal:1.5;
  /* radius */
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-full:9999px;
  /* legacy alias radius + sidebar */
  --radius:10px;--sw:240px;--sw-collapsed:62px;--mobile-nav-h:58px;
  /* ===== SKALA WARSTW (z-index) — JEDNO ZRODLO PRAWDY, zgl. `aeb48a0c` =====================
     Wlasciciel DI (01.08, telefon 349x594): „nie dziala zaksieguj wplate po zapisie do grupy —
     przycisk nieaktywny", a chwile pozniej: przycisk JEST aktywny, tylko zaslania go otwarty profil.
     Przyczyna nie byla w tym jednym przycisku. Panel uczestnika (`#stud-qp`) stal na warstwie 620,
     a KAZDE okno dialogowe (`.modal-ov`) na 300 — czyli pod nim. Dialog otwarty Z PROFILU rysowal
     sie POD profilem: czesc widoku byla zakryta, a klikniecia lapala przykrywka panelu.
     Do 01.08 lepiono to per okno (`issue-pass-ov` 640, `sp-adjustment-ov` 650, `sp-hold-ov` 650) —
     czwarte okno (forma wplaty) plastra nie dostalo i wrocil ten sam blad. Dlatego kolejnosc warstw
     jest teraz TU, raz, dla calej platformy — a nie w kazdym oknie osobno.
     PORZADEK (od dolu): nawigacja i arkusze mobilne -> panel boczny -> DIALOG -> dialog w dialogu ->
     lista rozwijana doklejona do body -> TOAST (potwierdzenie musi byc widoczne takze nad dialogiem). */
  --z-nav:605;--z-sheet:610;--z-panel-ov:619;--z-panel:620;
  --z-modal:700;--z-modal-nested:710;--z-float:720;--z-toast:860;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--tx);height:100%;display:flex;flex-direction:column;font-size:13px;transition:background .25s,color .25s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
[data-theme="dark"] body{background:radial-gradient(ellipse 900px 400px at 15% 0%,rgba(var(--brand-rgb),.05),transparent 50%),var(--color-bg-base);}
[data-theme="light"] body{background:radial-gradient(ellipse 900px 400px at 15% 0%,rgba(var(--brand-rgb),.05),transparent 55%),var(--color-bg-base);}
*{scrollbar-width:thin;scrollbar-color:rgba(var(--brand-rgb),.28) transparent;}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:transparent;border:2px solid transparent;border-radius:999px;background-clip:padding-box}
*:hover::-webkit-scrollbar-thumb{background:rgba(var(--brand-rgb),.24);background-clip:padding-box}
[data-theme="light"] *:hover::-webkit-scrollbar-thumb{background:rgba(var(--tx-rgb),.24);background-clip:padding-box}

/* ROLE BAR */
.role-bar{background:var(--bg);border-bottom:1px solid var(--bd);padding:0 20px;display:none;align-items:center;gap:2px;flex-shrink:0;height:36px;z-index:200;}
.role-bar-lbl{font-size:9px;color:var(--tx3);font-weight:500;margin-right:10px;letter-spacing:.06em;text-transform:uppercase;}
.role-btn{padding:3px 12px;border-radius:5px;border:none;background:transparent;color:var(--tx3);font-size:11px;font-weight:400;cursor:pointer;transition:all .18s;font-family:inherit;letter-spacing:-.1px;}
.role-btn:hover{color:var(--tx2);background:var(--sf2);}
.role-btn.active{background:linear-gradient(180deg,rgba(var(--brand-rgb),.22),rgba(var(--brand-rgb),.10));border:1px solid rgba(var(--brand-rgb),.35);color:var(--tx);font-weight:600;}

/* LAYOUT */
.app{display:flex;flex:1;overflow:hidden;height:calc(100vh - 36px);}

/* SIDEBAR */
#sidebar{width:var(--sw);background:var(--sf);border-right:1px solid var(--bd);display:flex;flex-direction:column;flex-shrink:0;transition:width .18s ease,transform .28s cubic-bezier(.4,0,.2,1);}
.s-logo{padding:18px 14px 15px;border-bottom:1px solid var(--bd);}
.logo-mark{display:flex;align-items:center;gap:10px;}
/* 4a: logo wyrazne szersze niz wyzsze przestaje byc wciskane w kwadrat 28×28 (wtedy `cover`
   pokazywal z niego waski slupek, a pasek boczny wygladal na pusty). Wysokosc zostaje ta sama,
   wiec rzad sie nie rozjezdza; rosnie tylko szerokosc, do tego, co pasek realnie daje.
   Ksztalt mierzy przegladarka po zaladowaniu obrazu — `space-core.js` §_applySidebarBrand. */
.logo-ico--szerokie{width:auto;max-width:112px;min-width:28px;flex-shrink:1;background:none;border-color:transparent;}
/* `overflow:hidden` jest warunkiem powiekszenia logo w kafelku (05.08): odwracamy strefe bezpieczna
   maski wbudowana w ikone, wiec obraz musi miec gdzie wyjsc poza ramke i zostac przyciety. */
.logo-ico{width:28px;height:28px;border-radius:8px;background:linear-gradient(145deg,var(--sf2),var(--sf3));border:1px solid rgba(var(--brand-rgb),.25);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--gold);flex-shrink:0;letter-spacing:-.3px;overflow:hidden;}
.logo-txt h1{font-size:13px;font-weight:700;letter-spacing:-.5px;}
.logo-txt p{font-size:9px;color:var(--tx3);margin-top:1px;letter-spacing:.04em;text-transform:uppercase;}
.nav-collapse-btn{margin-left:auto;width:28px;height:28px;border:1px solid var(--bd);border-radius:8px;background:var(--sf2);color:var(--tx2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;}
.nav-collapse-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--adim);}
.bot-st{margin-top:10px;display:flex;align-items:center;gap:5px;font-size:10px;color:var(--tx3);}
.bdot{width:5px;height:5px;border-radius:50%;background:var(--ok);animation:pulse 3s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.15}}
.s-nav{flex:1;min-height:0;padding:6px;overflow-y:auto;}
/* NAGLOWEK GRUPY MENU — kroj maszynowy, jak etykiety na makiecie. Cztery grupy potrzebuja
   naglowka, ktory da sie ODROZNIC od pozycji, a nie takiego, ktory z nia konkuruje. */
.nav-sec{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9px;font-weight:600;
  color:var(--tx3);text-transform:uppercase;letter-spacing:.13em;padding:16px 8px 4px;user-select:none;}
.s-nav>.nav-sec:first-child{padding-top:8px;}
.nav-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;cursor:pointer;color:var(--tx2);font-size:11px;font-weight:400;transition:all .18s;margin-bottom:1px;position:relative;}
.nav-item:hover{background:var(--sf2);color:var(--tx);}
.nav-item.active{background:var(--adim);color:var(--gold);font-weight:600;box-shadow:inset 2px 0 0 var(--gold);}
.nav-item .ic{width:16px;height:16px;flex-shrink:0;opacity:.4;display:flex;align-items:center;justify-content:center;transition:opacity .18s;}
.nav-item:hover .ic{opacity:.7;}
.nav-item.active .ic{opacity:1;}
.nav-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nbadge{margin-left:auto;background:var(--err);color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:8px;min-width:16px;text-align:center;}
.nbadge.w{background:var(--warn);color:#000;}
.nlock{margin-left:auto;opacity:.2;font-size:9px;letter-spacing:.02em;}
.user-badge{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;}
.uav{width:28px;height:28px;border-radius:7px;background:linear-gradient(145deg,rgba(var(--brand-rgb),.25),rgba(var(--brand-rgb),.10));border:1px solid rgba(var(--brand-rgb),.25);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--gold);flex-shrink:0;}
.uinfo p{font-size:12px;font-weight:600;letter-spacing:-.3px;}
.uinfo span{font-size:10px;color:var(--tx3);}
@media(min-width:961px){
  body.nav-collapsed #sidebar{width:var(--sw-collapsed);}
  body.nav-collapsed .s-logo{padding:16px 8px 12px;}
  body.nav-collapsed .logo-mark{justify-content:center;}
  body.nav-collapsed .logo-txt,
  body.nav-collapsed .bot-st,
  body.nav-collapsed .nav-sec,
  body.nav-collapsed .nav-lbl,
  body.nav-collapsed .uinfo,
  body.nav-collapsed #foot-arr{display:none;}
  body.nav-collapsed .nav-collapse-btn{position:absolute;left:45px;top:16px;z-index:20;width:24px;height:24px;background:var(--sf);box-shadow:0 4px 16px rgba(0,0,0,.25);}
  body.nav-collapsed .nav-collapse-btn svg{transform:rotate(180deg);}
  body.nav-collapsed .s-nav{padding:8px 6px;}
  body.nav-collapsed .nav-item{justify-content:center;padding:10px 0;margin-bottom:3px;}
  body.nav-collapsed .nav-item .ic{width:20px;height:20px;}
  body.nav-collapsed .nav-item .nbadge{position:absolute;right:5px;top:5px;margin:0;min-width:14px;line-height:14px;padding:0 4px;}
  body.nav-collapsed .nlock{display:none;}
  body.nav-collapsed .nav-item:hover::after,
  body.nav-collapsed .s-foot-trigger:hover::after{
    content:attr(data-label);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
    background:var(--sf);border:1px solid var(--bd);color:var(--tx);font-size:12px;font-weight:600;
    padding:6px 10px;border-radius:8px;white-space:nowrap;z-index:620;box-shadow:0 8px 26px rgba(0,0,0,.32);
  }
  body.nav-collapsed .s-foot{padding:10px 8px;}
  body.nav-collapsed .s-foot-trigger{justify-content:center;position:relative;}
  body.nav-collapsed .user-badge{padding:8px 0;}
  body.nav-collapsed .s-foot-menu{left:calc(100% + 10px);right:auto;bottom:10px;width:220px;}
}

/* MAIN */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);}
.topbar{padding:0 24px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;background:var(--sf);flex-shrink:0;height:52px;}
/* CIENKA TYPOGRAFIA — TYLKO TYTUL EKRANU (08.08, makieta `platforma-pulpit-C-2026-08-07.html`).
   ⛔ Waga 200 i wersaliki NIE schodza nizej: w liscie dwustu uczestnikow taki krój jest
   nieczytelny, a tu recepcja siedzi osiem godzin. To jest jedno miejsce w calej aplikacji,
   w ktorym wydajemy smialosc. */
.tb-left h2{font-size:15px;font-weight:200;letter-spacing:.11em;text-transform:uppercase;}
.tb-left p{font-size:10px;color:var(--tx3);margin-top:2px;letter-spacing:.01em;}
.tb-right{display:flex;align-items:center;gap:8px;}
.live-badge{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--ok);padding:4px 10px;border-radius:6px;background:rgba(var(--success-rgb), .06);border:1px solid rgba(var(--success-rgb), .14);font-weight:500;letter-spacing:.01em;}
.ldot{width:5px;height:5px;border-radius:50%;background:var(--ok);animation:pulse 2.5s infinite;display:inline-block;}
.theme-btn{width:30px;height:30px;border-radius:7px;border:1px solid var(--bd);background:transparent;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .18s;color:var(--tx3);}
.theme-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--adim);}
/* A4 (real-check 26.07): strzałka powrotu istnieje TYLKO na desktopie. Na telefonie użytkownik ma
   systemowe „wstecz" (_onPopState cofa modal->panel->sidebar->widok), więc drugi przycisk zabierał
   miejsce w topbarze. Widocznością steruje KLASA (.has-history), nie inline style — inaczej media
   query nie miałaby jak wygrać z `style.display` ustawianym w `_updateBackBtn`. */
.back-btn{display:none;width:30px;height:30px;border-radius:7px;border:1px solid var(--bd);background:transparent;cursor:pointer;font-size:20px;line-height:1;align-items:center;justify-content:center;transition:all .18s;color:var(--tx2);flex-shrink:0;margin-right:4px;}
.back-btn.has-history{display:flex;}
.back-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--adim);}
.tb-time{font-size:10px;color:var(--tx3);font-variant-numeric:tabular-nums;letter-spacing:.03em;}

/* VIEWS */
.views{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg);}
.view{display:none;padding:26px 28px;}
.view.active{display:block;}
/* UKLAD NAGLOWKA NIE MOZE ZALEZEC OD LICZBY WIDOCZNYCH DZIECI (05.08, zrzut Jerzego z Zespolu).
   Bylo `justify-content:space-between`, ktore rozsuwa tylko wtedy, gdy JEST co rozsuwac. Od 04.08
   tytul `h1` bywa ukryty (`_ukryjPowtorzonyTytul`), wiec w Zespole zostawalo JEDNO dziecko
   (`#prow-head-actions`) i „space-between" stawialo je na POCZATKU — czyli przycisk „Szybka akcja"
   ladowal po LEWEJ. Teraz odpychanie jest jawne i nie liczy dzieci: tytul spycha reszte w prawo,
   a gdy tytulu nie widac, robi to pierwszy element po nim. Dziala tak samo dla Zespolu, Wydarzen,
   Zajec i kazdego nowego widoku z akcjami w naglowku. */
.pg-head{display:flex;align-items:center;justify-content:flex-start;margin-bottom:24px;}
.pg-head>h1{margin-right:auto;}
.pg-head>h1[hidden]+*{margin-left:auto;}
.pg-head h1{font-size:17px;font-weight:800;letter-spacing:-.65px;}
/* 1a: nagłówek powtarzający tytuł z górnej belki dostaje `hidden` (`space-core.js`
   §`_ukryjPowtorzonyTytul`). Reguła jest tu jawnie, bo `.pg-head` jest kontenerem `flex` i sam
   `[hidden]` bywa przykrywany przez `display` odziedziczone z reguł układu. */
.pg-head h1[hidden]{display:none;}
/* Nagłówek, w którym po ukryciu tytułu nie zostaje NIC widocznego, przestaje zajmować 24 px odstępu.
   Bez tego zdjęcie powtórzonego tytułu zamieniałoby napis na pustą lukę — czyli ten sam balast,
   tylko niewidoczny. Nie chowamy nagłówków z paskiem akcji: tam warunek `:has` nie jest spełniony. */
.pg-head:not(:has(> :not([hidden]))){display:none;}

/* PASEK „NOWA WERSJA JEST GOTOWA" — W UKLADZIE, NIE NAD TRESCIA (05.08, CZWARTY raz ta klasa).
   Historia jest tu pouczajaca: 04.08 pasek dostal `pointer-events:none`, bo zjadal kliki z gory
   ekranu — ale jego dwa przyciski MUSZA je lapac, wiec problem zostal. Przesuniecie na dol
   przesunelo tylko kolizje (zaslonil kafel ankiety). Element z wlasnymi przyciskami nie ma
   bezpiecznego rogu: w kazdym cos stoi. Dlatego przestaje plywac i jest zwyklym paskiem nad
   kolumna widokow — zajmuje swoje miejsce i z definicji niczego nie przykrywa. */
.sw-update-bar{display:flex;align-items:center;gap:12px;margin:10px 28px 0;padding:10px 14px;background:var(--sf2);color:var(--tx);border:1px solid var(--brand,#5b8cff);border-radius:12px;font-size:13px;font-weight:600;}
.sw-update-bar>span{min-width:0;flex:1 1 auto;}
@media(max-width:600px){.sw-update-bar{margin:8px 12px 0;}}
/* Wariant zapasowy dla strony bez kolumny widokow — komunikat ma nie zniknac, gdyby rdzen trafil
   kiedys na inna strone. Nie jest domyslna droga i nie powinien byc uzywany w aplikacji szkoly. */
.sw-update-bar--float{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:9000;margin:0;max-width:calc(100vw - 20px);box-shadow:0 8px 28px rgba(0,0,0,.4);}

/* SAMOUCZEK W MIEJSCU PRACY (05.08) — dwa zdania przy PIERWSZYM wejsciu na ekran.
   Swiadomie NIE jest modalem na cala strone: ma stac NAD trescia, ktorej dotyczy, i dac sie
   przeczytac bez zamykania czegokolwiek. `D-2026-08-05-ZERO-OPISOW-W-UI` obowiazuje dalej —
   to jest jawny wyjatek, ktory pokazuje sie raz i znika na stale po klik „Rozumiem". */
.lekcja-wskaz{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;padding:12px 14px;border:1px solid var(--bd);border-left:3px solid var(--color-brand);border-radius:10px;background:var(--sf2);}
.lekcja-wskaz .lekcja-tresc{min-width:0;flex:1 1 auto;}
.lekcja-wskaz b{display:block;font-size:12.5px;color:var(--tx);margin-bottom:3px;}
.lekcja-wskaz span{display:block;font-size:11.5px;color:var(--tx3);line-height:1.5;}
.lekcja-wskaz>.btn{flex:0 0 auto;}
@media(max-width:600px){.lekcja-wskaz{flex-direction:column;align-items:stretch;gap:8px;}}

/* BUTTONS */
.btn{padding:6px 14px;border-radius:8px;border:none;cursor:pointer;font-size:11px;font-weight:500;transition:all .2s;display:inline-flex;align-items:center;gap:6px;font-family:inherit;letter-spacing:-.1px;}
.btn-p{background:var(--color-brand);border:1px solid var(--color-brand);color:var(--color-on-brand);font-weight:600;box-shadow:var(--shadow-sm);}
.btn-p:hover:not(:disabled){background:var(--color-brand-hover);border-color:var(--color-brand-hover);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.btn:disabled{opacity:1;cursor:not-allowed;transform:none!important;box-shadow:none!important;filter:none;}
.btn-p:disabled{background:var(--sf3);border-color:var(--bd);color:var(--tx2);}
.btn-g:disabled,.btn-s:disabled{background:var(--sf2);border-color:var(--bd);color:var(--tx3);}
.btn-p:disabled{background:var(--sf3);border-color:var(--bd);color:var(--tx3);}
/* DR: focus-visible na wszystkim interaktywnym (SC 2.4.13) */
.btn:focus-visible,.nav-item:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[role="button"]:focus-visible,.cf:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px;}
/* DR: touch target >=44px na mobile (user 40+) */
@media(max-width:768px){.btn{min-height:44px;padding:10px 16px;}.btn-sm{min-height:40px;}}
.btn-s{background:transparent;color:var(--tx2);border:1px solid var(--bd);}
.btn-s:hover{color:var(--tx);border-color:rgba(var(--brand-rgb),.4);background:var(--adim);}
.btn-g{background:var(--sf2);border:1px solid var(--bd);color:var(--tx3);}
.btn-g:hover{border-color:rgba(var(--brand-rgb),.4);color:var(--gold);background:var(--adim);}
.btn-sm{padding:4px 10px;font-size:10px;border-radius:6px;}
.btn-err{background:transparent;color:var(--err);border:1px solid rgba(var(--error-rgb), .18);}
.btn-err:hover{background:rgba(var(--error-rgb), .06);border-color:var(--err);}
.view-bottom-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin:10px 0 12px;}
.view-bottom-actions .btn{white-space:nowrap;}
/* 23b81fcb: na DUZYM ekranie pasek plynie w tresci i nie ma czego chowac — przycisk „Akcje" oraz tlo
   arkusza istnieja w DOM (tworzy je space-app-4.js), ale sa niewidoczne az do progu telefonu. */
.view-actions-trigger,.view-actions-backdrop{display:none;}
.view-actions-sheet-head{display:none;}

/* CARDS */
.card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius);padding:18px;position:relative;}
[data-theme="dark"] .card{box-shadow:0 4px 20px rgba(0,0,0,.25);border-top-color:rgba(255,255,255,.10);}
[data-theme="light"] .card{box-shadow:0 2px 16px rgba(var(--tx-rgb),.10);}
[data-theme="light"] .card-title{color:var(--tx2);}
[data-theme="light"] .nav-item .ic{opacity:.7;}
[data-theme="light"] .nav-item:hover .ic{opacity:.9;}

/* SHOP */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.shop-card{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0;}
.shop-img,.shop-img-empty{width:100%;height:120px;border-radius:8px;margin-bottom:2px;}
.shop-img{object-fit:cover;background:var(--sf2);}
.shop-img-empty{display:flex;align-items:center;justify-content:center;background:var(--sf2);border:1px dashed var(--bd);color:var(--tx3);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;text-align:center;}
.shop-title{font-size:13px;font-weight:700;color:var(--tx);}
.shop-desc{font-size:11px;color:var(--tx3);line-height:1.4;}
.shop-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;}
.shop-price{font-size:16px;font-weight:800;color:var(--tx);}
.shop-stock{font-size:10px;color:var(--tx3);white-space:nowrap;}
.shop-actions{display:flex;gap:6px;margin-top:4px;}
.shop-actions .btn-p{flex:1;justify-content:center;}
.shop-edit-btn{min-width:34px;justify-content:center;}
[data-theme="light"] .nav-item.active .ic{opacity:1;}
[data-theme="light"] .tb-left h2{color:var(--tx);}
[data-theme="light"] .tb-left p{color:var(--tx2);}
.card-title{font-size:9px;font-weight:700;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:16px;border:1px solid var(--bd);border-radius:var(--radius);overflow:hidden;background:var(--bd);}
.stat-card{background:var(--sf);padding:12px;}
.stat-card.clickable{cursor:pointer;transition:background .15s,filter .15s;}
.stat-card.clickable:hover{background:var(--sf2);filter:brightness(1.04);}
.stat-card.clickable:hover .stat-val{color:var(--gold);}
.stat-card.clickable::after{content:'→';position:absolute;bottom:14px;right:16px;font-size:11px;color:var(--tx3);opacity:0;transition:opacity .15s;}
.stat-card.clickable:hover::after{opacity:.6;}
.stat-card{position:relative;}
/* ETYKIETY KROJEM MASZYNOWYM (08.08, makieta pulpitu C). Etykieta ma sie ODROZNIC od liczby,
   a nie z nia konkurowac — kroj maszynowy robi to bez dokladania koloru ani ramki. */
.stat-lbl{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9px;font-weight:600;
  color:var(--tx3);text-transform:uppercase;letter-spacing:.11em;margin-bottom:8px;}
.stat-val{font-size:24px;font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--gold);}
.stat-sub{font-size:10px;color:var(--tx3);margin-top:8px;}
.stat-up{color:var(--ok);}
.stat-dn{color:var(--err);}

/* GRIDS */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
/* Zajęcia i grupy — lista (G2) */
.zaj-list{display:flex;flex-direction:column;gap:8px;}
.zaj-row{display:flex;align-items:center;gap:12px;background:var(--sf2);border:1px solid var(--bd);border-radius:var(--radius);padding:11px 14px;cursor:pointer;transition:border-color .15s,background .15s;}
.zaj-row:hover{border-color:var(--gold);background:var(--adim);}
.zaj-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.zaj-main{flex:1;min-width:0;}
.zaj-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.zaj-meta{font-size:11px;color:var(--tx3);margin-top:3px;}
.zaj-hint{font-size:11px;color:var(--tx3);margin-top:4px;font-style:italic;}
.zaj-fill{font-size:12px;color:var(--tx2);text-align:right;min-width:92px;flex-shrink:0;}
.zaj-fill .prog{margin-top:4px;}
.zaj-actions{display:flex;gap:6px;flex-shrink:0;}
@media(max-width:680px){
  .zaj-row{flex-wrap:wrap;}
  .zaj-fill{text-align:left;min-width:0;}
  .zaj-actions{width:100%;}
  .zaj-actions .btn{flex:1;}
}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}

/* CHIPS */
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:6px;font-size:10px;font-weight:600;letter-spacing:.01em;}
.ck{background:rgba(var(--success-rgb), .1);color:var(--ok);border:1px solid rgba(var(--success-rgb), .2);}
.cw{background:rgba(var(--warning-rgb), .1);color:var(--warn);border:1px solid rgba(var(--warning-rgb), .2);}
.ce{background:rgba(var(--error-rgb), .1);color:var(--err);border:1px solid rgba(var(--error-rgb), .2);}
/* `.cb` to ten sam wariant co `.ci` — informacja neutralna. Do 07.08 klasa NIE ISTNIALA w zadnym
   arkuszu, wiec piec chipow (profil prowadzacego, licznik „N razem", dzieci w rodzinie, „dolaczony",
   „Realtime" na pulpicie) renderowalo sie jako goly tekst: `.chip` daje uklad i czcionke, ale tlo,
   kolor i obramowanie daje dopiero WARIANT. Dopisanie do istniejacego selektora zamiast wymyslania
   nowej barwy — zeby nie powstal siodmy kolor chipa bez powodu. */
.ci,.cb{background:rgba(var(--info-rgb), .1);color:var(--info);border:1px solid rgba(var(--info-rgb), .2);}
.cr{background:var(--adim);color:var(--gold);border:1px solid rgba(var(--brand-rgb),.2);}
.cg{background:var(--sf3);color:var(--tx3);border:1px solid var(--bd);}
/* Data „od kiedy w grupie" wewnatrz chipa grupy (zgloszenie `126a2992`, wlasciciel DI 06.08).
   Bez wlasnego koloru — dziedziczy po wariancie chipa (.cr/.cg/…), wiec dziala w obu motywach
   i przy kazdym stanie zapisu. `white-space:nowrap`, zeby data nie lamala sie w polowie na 349 px. */
.chip-since{font-size:9px;font-weight:500;opacity:.72;white-space:nowrap;}

/* TABLE */
table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:10px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;padding:10px 12px;border-bottom:1px solid var(--bd);}
td{padding:11px 12px;border-bottom:1px solid var(--bd);font-size:13px;}
[data-theme="dark"] td{border-bottom-color:var(--bd);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--sf2);}

/* CALENDAR */
/* 1d (Jerzy 04.08: „nie moge przewinac grafiku i nie widze soboty, polowy i niedzieli"):
   ramka/zaokrąglenie/overflow siedzą na SCROLLERZE (`.cal-wrap`), nie na siatce — dokładnie ten sam
   wzorzec, który widok DNIA dostał już przy `#a6586310` (`.daygrid-scroller`), a widok TYGODNIA nie.
   ROOT (zmierzony 04.08 na 768px): `1fr` = `minmax(auto,1fr)`, więc ścieżki rosły do min-content kafli
   (890px), ale pudełko grid miało szerokość rodzica (712px) i własne `overflow:hidden` → 178px treści
   było CIĘTE, a `.cal-wrap` nie miał czego przewijać (scrollWidth == clientWidth == 712).
   Sobota ucięta, niedziela poza kadrem, zero scrolla. Reguła stałych kolumn istniała tylko
   w `@media(max-width:600px)`, więc dziura obejmowała 601-948px: tablet i zwykłe okno na komputerze. */
.cal-wrap{overflow-x:auto;border:1px solid var(--bd);border-radius:var(--radius);}
/* #fdd5ea6a (owner Pulse, GRAFIK) — decyzja Jerzego 12.07: JEDEN pasek przewijania NA DOLE, ZAWSZE widoczny
   (nie znika). Wcześniejszy GÓRNY pasek + jego mirror (`_wrapDayGridWithTopScroll`) USUNIĘTY — dwa
   zsynchronizowane paski szarpały obraz przy przewijaniu w bok („coś się zacina"). Fix u źródła: siatka to
   WŁASNY obszar przewijania (`max-height`), jej natywny dolny scrollbar jest w kadrze (nie kilkaset px pod
   foldem) i ma ZAWSZE widoczny, kolorowy thumb (globalny styl chowa thumb do hover — tu nadpisany).
   Nagłówek sal (`daygrid-hd-room`, sticky top) i oś godzin (`cal-time`, sticky left) przymrożone: w dół widać
   KTÓRA sala, w bok godziny zostają, a nazwy sal jadą z kolumnami (widać jak się przesuwają). */
.daygrid-scroller{overflow-x:scroll;overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:min(74vh,720px);border:1px solid var(--bd);border-radius:var(--radius);scrollbar-width:auto;scrollbar-color:var(--tx3) rgba(127,127,127,.16);}
.daygrid-scroller::-webkit-scrollbar{height:13px;width:11px;}
.daygrid-scroller::-webkit-scrollbar-thumb{background:var(--tx3)!important;border-radius:7px;border:3px solid var(--bg);min-width:48px;}
.daygrid-scroller::-webkit-scrollbar-track{background:rgba(127,127,127,.16);border-radius:7px;}
.daygrid-scroller .daygrid-hd-room{position:sticky;top:0;z-index:8;}
.daygrid-scroller .cal-time{position:sticky;left:0;z-index:6;}
.daygrid-scroller .daygrid-hd-corner{position:sticky;top:0;left:0;z-index:10;}
/* 1d: kolumna dnia NIE MOŻE zejść poniżej czytelnego minimum (128px zmierzone 06.07 jako min-content
   kafla), a suma ścieżek nigdy nie może przekroczyć pudełka siatki — inaczej treść wypada poza kadr.
   `minmax(128px,1fr)` + `min-width` równe dokładnej sumie 52+7×128 znaczy: na szerokim ekranie kolumny
   rosną jak dotąd, na wąskim siatka staje się szersza od scrollera i `.cal-wrap` ma co przewijać.
   To ta sama para reguł, co w widoku dnia (`space-app-1.js` §`_renderDayGrid`, kolumny sal). */
.cal-grid{display:grid;grid-template-columns:52px repeat(7,minmax(128px,1fr));min-width:948px;}
.cal-hd{background:var(--sf2);padding:9px 6px;text-align:center;font-size:11px;font-weight:600;border-bottom:1px solid var(--bd);color:var(--tx2);}
.cal-hd.today{color:var(--gold);background:var(--adim);border-bottom:2px solid var(--gold);}
/* P5 (c5580fc6): pasek grupujący sale tej samej lokalizacji koło siebie */
.cal-loc-corner{background:var(--sf2);}
.cal-loc-band{background:var(--sf2);padding:6px 8px;text-align:center;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tx2);border-bottom:1px solid var(--bd);border-left:2px solid var(--bd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 78d0152b: cała dzisiejsza kolumna podświetlona (nie tylko nagłówek) — szybkie „gdzie jesteśmy". */
.cal-cell.today{background:var(--adim);}
[data-theme="light"] .cal-cell.today{background:var(--adim);}
.cal-time{background:var(--sf2);padding:7px 5px;text-align:right;font-size:11px;font-weight:600;color:var(--tx2);border-right:1px solid var(--bd);border-bottom:1px solid var(--bd);}
.cal-cell{border-right:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);min-height:42px;position:relative;cursor:pointer;transition:background .15s;background:var(--sf2);display:flex;flex-direction:column;gap:3px;padding:3px;}
[data-theme="light"] .cal-cell{background:#fff;border-color:rgba(0,0,0,.12);}
[data-theme="light"] .cal-hd{background:var(--sf2);}
[data-theme="light"] .cal-time{background:var(--sf2);border-color:rgba(0,0,0,.12);}
.cal-cell:not(:has(.cal-ev:hover)):hover{background:var(--adim);}
/* B7: obłożenie „Zajęte" (instruktor) = wyszarzona komórka; sąsiadujące godziny wyglądają jak jeden spójny blok. */
/* N6 (zgl. a35e1001): AFORDANCJA WOLNEJ KRATKI. Recepcja napisala „luki od razu mozna by bylo
   rezerwowac", czyli nie wiedziala, ze klik juz dziala. Znak jest ledwo widoczny (nie zaglusza
   zajec) i wyrazniejszy pod kursorem oraz przy nawigacji klawiatura. */
.cal-cell-free{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:var(--tx3);opacity:.22;pointer-events:none;transition:opacity .15s;}
.cal-cell:hover .cal-cell-free,.cal-cell:focus-within .cal-cell-free{opacity:.6;}
@media (hover:none){.cal-cell-free{opacity:.3;}}
.cal-cell.cal-cell-busy{background:repeating-linear-gradient(135deg,rgba(138,143,152,.20),rgba(138,143,152,.20) 6px,rgba(138,143,152,.28) 6px,rgba(138,143,152,.28) 12px);cursor:default;}
[data-theme="light"] .cal-cell.cal-cell-busy{background:repeating-linear-gradient(135deg,rgba(138,143,152,.16),rgba(138,143,152,.16) 6px,rgba(138,143,152,.24) 6px,rgba(138,143,152,.24) 12px);}
.cal-cell.cal-cell-busy:hover{background:repeating-linear-gradient(135deg,rgba(138,143,152,.24),rgba(138,143,152,.24) 6px,rgba(138,143,152,.32) 6px,rgba(138,143,152,.32) 12px);}
.cal-busy-lbl{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3);padding:2px 3px;}
/* RUN AD P4: puls podświetlenia nowej rezerwacji po powrocie z formularza (light+dark) */
@keyframes grafEvFlash{0%{box-shadow:0 0 0 0 rgba(99,102,241,.0);outline-color:rgba(99,102,241,0)}15%{box-shadow:0 0 0 4px rgba(99,102,241,.55);outline-color:rgba(99,102,241,1)}100%{box-shadow:0 0 0 0 rgba(99,102,241,0);outline-color:rgba(99,102,241,0)}}
.cal-ev.graf-ev-flash{outline:2px solid rgba(99,102,241,1);outline-offset:1px;animation:grafEvFlash 1.3s ease-out 2;z-index:5;position:relative;}
.cal-ev{position:relative;border-radius:6px;padding:4px 7px;overflow:hidden;cursor:pointer;line-height:1.25;border-left:3px solid;box-shadow:0 1px 3px rgba(0,0,0,.3);color:#fff;transition:filter .13s,box-shadow .13s;}
.cal-ev:hover{filter:brightness(1.12);box-shadow:0 3px 10px rgba(0,0,0,.45);}
[data-theme="light"] .cal-ev{color:#fff;}
.cal-ev .cev-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11px;font-weight:700;line-height:1.2;white-space:normal;word-break:break-word;overflow:hidden;}
.cal-ev .cev-typ{font-size:10px;opacity:.85;font-weight:400;}
.cal-ev .cev-time{display:block;font-size:9px;font-weight:600;opacity:.9;margin-top:1px;}
.cal-ev .cev-sub{display:block;font-size:9px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Wyjątki lekcji nałożone na grafik */
.cal-ev-cancelled{opacity:.5;background:var(--sf3)!important;border-left-color:var(--err)!important;color:var(--tx2)!important;box-shadow:none!important;}
.cal-ev-cancelled .cev-name{text-decoration:line-through;}
.cal-ev-moved{opacity:.6;font-style:italic;border-left-style:dashed!important;box-shadow:none!important;}
.cal-ev-extra{border-left-style:dashed!important;border-left-width:3px!important;}
/* RUN AE pkt6: propozycja wydarzenia „czeka na akcept" — slot zajęty, ale wyraźnie niepotwierdzony. */
.cal-ev-pending{border:2px dashed var(--gold)!important;background:rgba(var(--brand-rgb),.10)!important;color:var(--tx)!important;box-shadow:none!important;}
.cal-ev-pending .cev-name{font-style:italic;}
/* bd34f9e6 (P2): kafle REZERWACJI sali — pełne tło, czytelne w light+dark (białe litery). Wcześniej
   booking miał klasę koloru 'cm'/'cy' bez reguły .cal-ev → przezroczysty kafel = nieczytelny. */
.cal-ev.cal-ev-booking{background:linear-gradient(160deg,#4f46e5 0%,#4338ca 100%);border-left-color:#818cf8;color:#fff;}
.cal-ev.cal-ev-booking-pending{background:linear-gradient(160deg,#b45309 0%,#92400e 100%);border-left-color:#f59e0b;border-left-style:dashed;color:#fff;}
.cal-ev.cal-ev-booking-busy{background:linear-gradient(160deg,#4b5563 0%,#374151 100%);border-left-color:#9ca3af;color:#fff;}
.ev-r{background:linear-gradient(160deg,#c8971c 0%,#9a6e0d 100%);border-color:#e0b030;}
.ev-v{background:linear-gradient(160deg,#7c3aed 0%,#5b21b6 100%);border-color:#9d5cf4;}
.ev-t{background:linear-gradient(160deg,#0d9488 0%,#0e7066 100%);border-color:#14b8a6;}
.ev-a{background:linear-gradient(160deg,#d97706 0%,#b45309 100%);border-color:#f59e0b;}
.ev-b{background:linear-gradient(160deg,#2563eb 0%,#1d4ed8 100%);border-color:#60a5fa;}
.ev-g{background:linear-gradient(160deg,#059669 0%,#047857 100%);border-color:#34d399;}
.ev-e{background:linear-gradient(160deg,#dc2626 0%,#991b1b 100%);border-color:#f87171;}

/* CONVERSATIONS */
.msgs-layout{display:grid;grid-template-columns:320px minmax(0,1fr) 300px;gap:14px;height:calc(100vh - 220px);min-height:520px;}
.msgs-layout.client-msgs{grid-template-columns:340px minmax(0,1fr);}
.msgs-layout.client-msgs .conv-context{display:none;}
/* RUN AM pkt2 (394ff2fb/3d56c469): prawy panel Komunikacji „ucinał prawą stronę" i „rozjeżdżał napisy",
   bo wartości (email/telefon) w .contact-row/.ctx-row nie miały min-width:0 ani zawijania — długi token
   (np. e-mail) przepychał się poza kolumnę 300px. Fix u podstawy: każdy element panelu zawija tekst i
   respektuje szerokość kolumny (min-width:0 + overflow-wrap:anywhere), zero ucinania treści. */
.conv-context{background:var(--sf);border:1px solid var(--bd);border-radius:8px;display:flex;flex-direction:column;overflow-y:auto;min-width:0;max-width:100%;padding:14px;gap:16px;}
.conv-context .ctx-sec-lbl{font-size:9px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
.conv-context .ctx-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;color:var(--tx2);padding:4px 0;min-width:0;}
.conv-context .ctx-row>span:first-child{flex-shrink:0;}
.conv-context .ctx-row>*:last-child{min-width:0;overflow-wrap:anywhere;word-break:break-word;text-align:right;}
.conv-context .ctx-actions{display:flex;flex-direction:column;gap:7px;}
.conv-context .ctx-actions .btn{justify-content:center;}
.contact-card{border:1px solid var(--bd);border-radius:8px;background:var(--sf2);padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0;max-width:100%;}
.contact-card .contact-name{font-size:14px;font-weight:800;color:var(--tx);line-height:1.25;overflow-wrap:anywhere;word-break:break-word;}
.contact-card .contact-sub{font-size:11px;color:var(--tx3);line-height:1.35;overflow-wrap:anywhere;word-break:break-word;}
.contact-card .contact-grid{display:grid;gap:6px;min-width:0;}
.contact-card .contact-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px;color:var(--tx2);border-top:1px solid var(--bd);padding-top:7px;min-width:0;}
.contact-card .contact-row span:first-child{color:var(--tx3);font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;flex-shrink:0;}
.contact-card .contact-row strong,.contact-card .contact-row>*:last-child{min-width:0;overflow-wrap:anywhere;word-break:break-word;text-align:right;}
.contact-card .contact-row .contact-list{text-align:left;}
.contact-card .contact-list{display:flex;flex-wrap:wrap;gap:5px;min-width:0;}
.contact-card .contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.assign-box{border:1px solid var(--bd);border-radius:8px;background:var(--sf2);padding:10px;display:flex;flex-direction:column;gap:8px;}
.assign-box .assign-row{display:flex;gap:7px;}
.assign-box select{min-width:0;}
@media(max-width:1100px){.msgs-layout{grid-template-columns:320px minmax(0,1fr);}.conv-context{display:none;}}
.conv-wrap{background:var(--sf);border:1px solid var(--bd);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.conv-head{padding:12px 14px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.conv-head b{font-size:14px;}
.conv-search{padding:10px 12px;border-bottom:1px solid var(--bd);}
.conv-search input{width:100%;background:var(--sf2);border:1px solid var(--bd);border-radius:7px;padding:8px 10px;color:var(--tx);font-size:12px;outline:none;font-family:inherit;}
.conv-search input:focus{border-color:var(--gold);}
.conv-filters{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid var(--bd);flex-wrap:wrap;}
.cf{padding:4px 9px;border-radius:6px;font-size:10px;cursor:pointer;border:1px solid var(--bd);color:var(--tx3);background:transparent;transition:all .1s;font-weight:700;line-height:1.2;}
.cf.active{border-color:rgba(var(--brand-rgb),.35);color:var(--gold);background:var(--adim);}
.conv-filters .cf-more{display:none;}
.conv-filters.show-more .cf-more{display:inline-flex;}
.cf-toggle{color:var(--tx2);border-style:dashed;}
.cf:hover:not(.active){color:var(--tx2);}
.cf-tag{padding:3px 7px;border-radius:6px;font-size:10px;border:1px solid var(--bd);color:var(--tx3);background:var(--sf2);font-weight:700;line-height:1.2;outline:none;cursor:pointer;max-width:130px;}
.cf-tag:focus{border-color:var(--gold);}
.cf-tag.on{border-color:rgba(var(--brand-rgb),.35);color:var(--gold);}
.conv-list{flex:1;overflow-y:auto;padding:8px;}
.conv-item{padding:10px 11px;border:1px solid transparent;border-radius:7px;cursor:pointer;transition:background .1s,border-color .1s;margin-bottom:3px;}
.conv-item:hover{background:var(--sf2);}
.conv-item.active{background:var(--adim);border-color:var(--gold);}
.ch-ic{padding:1px 6px;border-radius:4px;font-size:10px;font-weight:600;}
.ic-fb{background:rgba(24,119,242,.1);color:#1877f2;}
.ic-ig{background:rgba(225,48,108,.1);color:#e1306c;}
.ic-www{background:rgba(var(--info-rgb), .1);color:var(--info);}
.sc{font-size:10px;font-weight:500;padding:1px 7px;border-radius:5px;}
.sc-bot{background:rgba(var(--info-rgb), .1);color:var(--info);}
.sc-pending{background:rgba(var(--warning-rgb), .1);color:var(--warn);}
.sc-active{background:rgba(var(--success-rgb), .1);color:var(--ok);}
.sc-closed{background:var(--sf3);color:var(--tx3);}
.chat-panel{background:var(--sf);border:1px solid var(--bd);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.chat-hdr{padding:12px 14px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.chat-title{min-width:0;flex:1;}
.chat-title-main{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-title-sub{font-size:11px;color:var(--tx2);margin-top:2px;}
.chat-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.bot-toggle{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--tx3);font-weight:700;}
.note-box{border-top:1px solid var(--bd);background:var(--bg);}
.note-box summary{padding:10px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;}
.note-box summary::-webkit-details-marker{display:none;}
.note-box-body{padding:0 14px 12px;display:flex;flex-direction:column;gap:8px;}
.conv-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;}
.conv-tag{display:inline-flex;align-items:center;border:1px solid rgba(var(--brand-rgb),.28);background:rgba(var(--brand-rgb),.08);color:var(--gold);border-radius:5px;padding:2px 6px;font-size:10px;font-weight:700;line-height:1.25;}
.tag-row{display:grid;grid-template-columns:150px minmax(160px,1fr) auto;gap:8px;align-items:center;}
.tag-row select,.tag-row input{min-width:0;}
.tag-row .btn{white-space:nowrap;}
@media(max-width:600px){.tag-row{grid-template-columns:1fr;}.tag-row .btn{width:100%;}}
/* `745b5dd2`: nazwa grupy na profilu uczestnika PROWADZI do tej grupy. Wyglada jak nazwa (nie jak
   przycisk), ale ma afordancje pod kursorem i widoczny fokus z klawiatury — inaczej nikt nie zgadnie,
   ze da sie w nia kliknac, i zgloszenie wroci w brzmieniu „nie wszystkie pola sa klikalne". */
.sp-group-name{display:block;width:100%;text-align:left;background:none;border:0;padding:0;margin:0;font:inherit;font-size:12px;font-weight:600;color:var(--tx);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-group-name:hover,.sp-group-name:focus-visible{color:var(--gold);text-decoration:underline;}
.sp-group-name:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;}
/* Kwota naliczona przy grupie prowadzi do SWOJEJ naleznosci nizej w tym samym panelu (05.08, `8b7b59ec`). */
.sp-group-money{background:none;border:0;padding:0;margin:0;font:inherit;font-size:10px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.sp-group-money:hover,.sp-group-money:focus-visible{color:var(--gold);}
.sp-group-money:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;}
/* Podswietlenie wskazanej naleznosci — bez niego skok do sekcji wyglada jak przypadkowy. */
.sp-charge-flash{animation:spChargeFlash 1.6s ease-out;border-radius:6px;}
@keyframes spChargeFlash{0%{background:rgba(var(--brand-rgb),.28)}100%{background:transparent}}
.dash-more{border-bottom:1px solid var(--bd);}
.dash-more summary{cursor:pointer;font-size:12px;font-weight:650;color:var(--gold);padding:9px 0;list-style:none;}
.dash-more summary::-webkit-details-marker{display:none;}
.dash-more[open] summary{color:var(--tx3);}
.dash-more .dm-less{display:none;}
.dash-more[open] .dm-more{display:none;}
.dash-more[open] .dm-less{display:inline;}

/* EKRAN RODZINY — jedna kompozycja na istniejacym scope `action=me`.
   Klasy sa prefiksowane, zeby warstwa wizualna klienta nie zmieniala pulpitow staffu. */
.client-family-view{--family-1:#4776e6;--family-2:#8e54e9;--family-3:#d97706;--family-4:#0f9f8f;--family-5:#db4f76;}
.client-family-view #dash-action-cards{display:flex;flex-direction:column;gap:14px;margin:0!important;max-width:1120px;}
.client-family-view #dash-stats,.client-family-view #dash-qa,.client-family-view>.g2{display:none!important;}
.client-family-home{display:contents;}
.client-family-welcome{order:1;padding:4px 2px 0;}
.client-family-welcome>span{display:block;color:var(--tx3);font-size:11px;font-weight:700;text-transform:capitalize;letter-spacing:.03em;}
.client-family-welcome h1{font-size:25px;line-height:1.15;letter-spacing:-.7px;margin:4px 0 3px;color:var(--tx);}
.client-family-welcome p{font-size:12px;color:var(--tx3);margin:0;}
.client-family-people{order:2;display:flex;align-items:flex-start;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 2px 7px;scrollbar-width:thin;}
.client-family-person{--family-tone:var(--family-1);flex:0 0 68px;border:0;background:transparent;color:var(--tx2);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;}
.client-family-person.tone-1{--family-tone:var(--family-2)}.client-family-person.tone-2{--family-tone:var(--family-3)}.client-family-person.tone-3{--family-tone:var(--family-4)}.client-family-person.tone-4{--family-tone:var(--family-5)}
.client-family-person::before{content:attr(data-initials);width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--family-tone) 18%,var(--sf));border:2px solid color-mix(in srgb,var(--family-tone) 55%,var(--bd));color:var(--family-tone);font-size:16px;font-weight:850;box-sizing:border-box;box-shadow:0 3px 12px rgba(0,0,0,.12);transition:transform .16s,border-color .16s,background .16s;}
.client-family-person:hover::before{transform:translateY(-2px);border-color:var(--family-tone);}
.client-family-person.active{color:#fff;background:var(--family-tone);border-radius:12px;padding:4px 0 5px;}.client-family-person.active::before{background:var(--family-tone);border-color:#fff;color:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--family-tone) 65%,var(--sf));}
.client-family-person span{max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.client-family-event{order:3;display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--bd));border-radius:12px;background:linear-gradient(105deg,var(--adim),var(--sf));color:var(--tx);text-decoration:none;transition:border-color .15s,transform .15s;}
.client-family-event:hover{border-color:var(--gold);transform:translateY(-1px);}
.client-family-event-kicker{flex:0 0 auto;color:var(--gold);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;}
.client-family-event-main{min-width:0;display:flex;flex:1;align-items:baseline;gap:8px;}.client-family-event-main b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.client-family-event-main span{font-size:11px;color:var(--tx3);white-space:nowrap;}
.client-family-chevron{font-size:20px;color:var(--gold);}.client-family-event.is-error{border-color:color-mix(in srgb,var(--err) 42%,var(--bd));background:var(--sf);}.client-family-event.is-error div{display:flex;flex-direction:column;gap:2px}.client-family-event.is-error b{font-size:12px}.client-family-event.is-error span{font-size:11px;color:var(--tx3)}
.client-family-day{order:4;border:1px solid var(--bd);border-radius:16px;background:var(--sf);overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.11);}
.client-family-day-head{display:flex;align-items:center;gap:10px;padding:15px 17px;border-bottom:1px solid var(--bd);background:linear-gradient(100deg,var(--adim),transparent);}
.client-family-day-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--adim);}.client-family-day-head>div{display:flex;flex-direction:column;gap:2px}.client-family-day-head b{font-size:16px}.client-family-day-head span{font-size:11px;color:var(--tx3)}
.client-family-day-block{padding:14px 17px;border-bottom:1px solid var(--bd);}.client-family-section-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-bottom:8px;}
.client-family-class,.client-family-pay{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--bd);}.client-family-class:last-child{border-bottom:0}
.client-family-row-icon{width:36px;height:36px;flex:0 0 36px;border-radius:9px;background:var(--adim);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:850;letter-spacing:-.03em;}
.client-family-row-body{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}.client-family-row-body b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.client-family-row-body span{font-size:11px;color:var(--tx3);line-height:1.35}
.client-family-pay{border:0;border-radius:10px;padding:9px 10px;background:var(--sf2);cursor:pointer;outline:none}.client-family-pay:hover,.client-family-pay:focus-visible{box-shadow:0 0 0 2px var(--gold)}.client-family-pay.is-overdue{box-shadow:inset 3px 0 0 var(--err)}.client-family-pay.is-clear .client-family-row-icon{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--sf2))}
.client-family-pay-value{font-size:12px;font-weight:800;color:var(--tx);white-space:nowrap}.client-family-pay.is-overdue .client-family-pay-value{color:var(--err)}.client-family-pay.is-clear .client-family-pay-value{color:var(--ok)}
.client-family-passes>div{margin-top:0!important}.client-family-passes .pass-card{background:var(--sf2)!important}.client-family-passes .pass-card+.pass-card{margin-top:8px}
.client-family-actions{display:flex;gap:8px;justify-content:flex-end;padding:12px 17px;background:var(--sf2)}
.client-family-empty,.client-family-error{order:4;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:24px;border:1px dashed var(--bd);border-radius:14px;background:var(--sf);}.client-family-empty b,.client-family-error b{font-size:14px}.client-family-empty span,.client-family-error span{font-size:12px;color:var(--tx3)}.client-family-empty .btn,.client-family-error .btn{margin-top:5px}
.client-family-loading{order:1;display:flex;flex-direction:column;gap:10px}.client-family-skeleton{display:block;height:18px;width:62%;border-radius:8px;background:linear-gradient(90deg,var(--sf2),var(--sf3),var(--sf2));background-size:220% 100%;animation:familySkeleton 1.2s linear infinite}.client-family-skeleton.short{width:35%;height:12px}.client-family-skeleton.card{width:100%;height:210px;border-radius:16px}.client-family-event .client-family-skeleton{width:100%;height:14px}
@keyframes familySkeleton{to{background-position:-220% 0}}
@media(min-width:900px){.client-family-view #dash-action-cards{margin-inline:auto!important}.client-family-people{overflow:visible;flex-wrap:wrap}.client-family-day{display:grid;grid-template-columns:1.05fr .95fr}.client-family-day-head,.client-family-actions{grid-column:1/-1}.client-family-day-block{border-right:1px solid var(--bd)}.client-family-day-block:nth-of-type(2){border-right:0}.client-family-day-block:nth-of-type(3){grid-column:1/-1;border-right:0}}
@media(max-width:600px){.client-family-view{padding:18px 14px 88px}.client-family-welcome h1{font-size:22px}.client-family-event{align-items:flex-start}.client-family-event-kicker{display:none}.client-family-event-main{flex-direction:column;gap:2px}.client-family-event-main span{white-space:normal}.client-family-day-block{padding:12px}.client-family-day-head{padding:13px}.client-family-class{align-items:flex-start}.client-family-class .chip{display:none}.client-family-actions{padding:10px 12px}.client-family-actions .btn{flex:1;justify-content:center;padding-inline:7px}}
.sys-toggle{display:flex;align-items:flex-start;gap:9px;padding:8px 0;cursor:pointer;font-size:13px;}
.sys-toggle input{margin-top:2px;flex-shrink:0;width:16px;height:16px;}
.hoff-bar{padding:8px 14px;font-size:12px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.hoff-bar.pending{background:rgba(var(--warning-rgb), .05);color:var(--warn);}
.hoff-bar.active-h{background:rgba(var(--success-rgb), .05);color:var(--ok);}
.toggle{position:relative;display:inline-block;width:36px;height:20px;}
.toggle input{opacity:0;width:0;height:0;}
.ts{position:absolute;inset:0;background:var(--sf3);border:1px solid var(--bd);border-radius:10px;cursor:pointer;transition:all .2s;}
.ts::before{content:'';position:absolute;height:12px;width:12px;left:3px;bottom:3px;background:var(--tx3);border-radius:50%;transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.toggle input:checked+.ts{background:rgba(var(--brand-rgb),.28);border-color:rgba(var(--brand-rgb),.5);}
.toggle input:checked+.ts::before{transform:translateX(16px);background:var(--gold);}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px;}
.chat-msg{display:flex;flex-direction:column;}
.chat-msg-u{align-items:flex-start;}
.chat-msg-b{align-items:flex-end;}
.chat-bubble{max-width:74%;padding:9px 14px;border-radius:16px;font-size:13px;line-height:1.6;word-break:break-word;white-space:pre-wrap;}
.chat-bubble-u{background:var(--sf2);border:1px solid var(--bd);border-bottom-left-radius:4px;}
.chat-bubble-b{background:rgba(var(--brand-rgb),.08);border:1px solid rgba(var(--brand-rgb),.18);border-bottom-right-radius:4px;}
.msg-row{display:flex;flex-direction:column;}
.msg-row.right{align-items:flex-end;}
.msg-row.left{align-items:flex-start;}
.msg-bbl{max-width:72%;padding:9px 13px;border-radius:11px;font-size:13px;line-height:1.55;word-break:break-word;white-space:pre-wrap;}
.msg-row.left .msg-bbl{background:var(--sf2);border:1px solid var(--bd);}
.msg-row.right.bot .msg-bbl{background:rgba(var(--brand-rgb),.06);border:1px solid rgba(var(--brand-rgb),.15);}
.msg-row.right.human .msg-bbl{background:var(--adim);border:1px solid rgba(var(--brand-rgb),.2);}
.msg-meta{font-size:10px;color:var(--tx3);margin-top:2px;}
.qr-row{display:flex;gap:6px;margin-top:5px;}
.qr{padding:3px 11px;border-radius:5px;border:1px solid var(--bd);background:var(--sf2);color:var(--tx2);font-size:11px;cursor:pointer;transition:all .1s;}
.qr.yes:hover{border-color:var(--ok);color:var(--ok);}
.qr.no:hover{border-color:var(--err);color:var(--err);}
.sum-bar{margin:5px 0;padding:7px 11px;border-radius:6px;background:rgba(var(--success-rgb), .06);border:1px solid rgba(var(--success-rgb), .12);font-size:12px;color:var(--ok);display:flex;align-items:center;gap:7px;}
.chat-reply{padding:11px 14px;border-top:1px solid var(--bd);display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;}
.reply-in{flex:1;background:var(--sf2);border:1px solid var(--bd);border-radius:6px;padding:8px 12px;color:var(--tx);font-size:12px;outline:none;font-family:inherit;resize:none;}
.chat-reply .reply-in{min-width:180px;}
.chat-reply .btn{flex-shrink:0;}
.reply-in:focus{border-color:var(--gold);}
.reply-in:disabled{opacity:.4;cursor:not-allowed;}

/* TEAM CHAT */
.team-layout{display:grid;grid-template-columns:176px 1fr;gap:12px;height:calc(100vh - 178px);}
.t-sidebar{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius);padding:8px 0;overflow-y:auto;}
.t-sec{font-size:10px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.6px;padding:10px 12px 4px;}
.t-ch{display:flex;align-items:center;gap:7px;padding:6px 11px;cursor:pointer;font-size:12px;color:var(--tx2);border-radius:6px;margin:1px 5px;transition:all .1s;}
.t-ch:hover{background:var(--sf2);color:var(--tx);}
.t-ch.active{background:var(--adim);color:var(--gold);font-weight:600;}
.t-main{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;}
.t-head{padding:12px 16px;border-bottom:1px solid var(--bd);font-weight:600;font-size:13px;letter-spacing:-.2px;}
.t-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:13px;}
.t-msg{display:flex;gap:9px;}
.t-av{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;}
.t-body strong{font-size:12px;font-weight:600;}
.t-body small{color:var(--tx3);font-size:10px;margin-left:5px;}
.t-body p{font-size:13px;margin-top:3px;line-height:1.55;color:var(--tx2);}
.t-sec-row{display:flex;align-items:center;justify-content:space-between;padding-right:7px;}
.t-sec-add{background:none;border:none;color:var(--gold);cursor:pointer;font-size:17px;line-height:1;padding:0 4px;}
.t-search-wrap{padding:8px 8px 4px;}
.t-search{width:100%;box-sizing:border-box;font-size:12px;padding:7px 10px;border:1px solid var(--bd);border-radius:8px;background:var(--sf2);color:var(--tx);}
.t-search::placeholder{color:var(--tx3);}
/* V-D (7543571f): combobox wyboru grupy w „Zapisz do grupy" */
.ee-combo-dd{display:none;position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:30;background:var(--sf);border:1px solid var(--bd);border-radius:8px;max-height:240px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.3);}
.ee-combo-dd.open{display:block;}
.ee-combo-opt{padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:1px;border-bottom:1px solid var(--bd);}
.ee-combo-opt:hover{background:var(--sf2);}
.ee-combo-nm{font-size:13px;font-weight:600;color:var(--tx);}
.ee-combo-sub{font-size:11px;color:var(--tx3);}
.ee-combo-empty{padding:10px;font-size:12px;color:var(--tx3);}
.t-ch-av{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;flex-shrink:0;}
.t-ch-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.t-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.t-dot.on{background:var(--ok);}
.t-dot.off{background:var(--bd);}
.t-unread{background:var(--gold);color:var(--color-on-brand);font-size:9px;font-weight:800;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;flex-shrink:0;}
.t-ch.has-unread .t-ch-name{font-weight:700;color:var(--tx);}
.t-rt{font-size:9px;color:var(--tx3);padding:2px 12px 6px;display:flex;align-items:center;gap:5px;}
.t-rt .t-dot{width:6px;height:6px;}
.t-input{padding:11px 14px;border-top:1px solid var(--bd);display:flex;gap:8px;}
/* RUN O: reakcje emoji + @wzmianki w czacie zespolu */
.t-reacts{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;align-items:center;}
/* Zalaczniki w czacie zespolu i kanalach grup (ankieta wlasciciela: „zeby mozna bylo… wlaczac takze
   pliki"). Obraz dostaje miniature, reszta ikone i nazwe — zeby nie trzeba bylo klikac w kazdy plik,
   zeby wiedziec, co to jest. Nazwa lamie sie zamiast rozpychac babelek. */
.t-attachments{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px;}
.t-attach{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:5px 9px;border:1px solid var(--bd);border-radius:9px;background:var(--sf2);color:var(--tx2);text-decoration:none;font-size:11.5px;line-height:1.3;}
.t-attach:hover{border-color:var(--gold);color:var(--gold);}
.t-attach img{width:34px;height:34px;object-fit:cover;border-radius:6px;flex-shrink:0;}
.t-attach-ic{font-size:14px;flex-shrink:0;}
.t-attach-name{min-width:0;overflow-wrap:anywhere;}
.t-react{border:1px solid var(--bd);background:var(--sf2);border-radius:12px;padding:1px 8px;font-size:11px;cursor:pointer;color:var(--tx2);line-height:18px;}
.t-react.mine{border-color:var(--gold);color:var(--gold);background:var(--adim);}
.t-react-add-wrap{position:relative;display:inline-flex;}
.t-react-add{border:1px dashed var(--bd);background:transparent;border-radius:12px;width:24px;height:20px;font-size:12px;cursor:pointer;color:var(--tx3);line-height:1;opacity:.65;}
.t-msg:hover .t-react-add{opacity:1;}
/* V-E (e8ec170e): moje wiadomości po prawej, cudze po lewej (jak każdy komunikator) */
.t-msg.mine{flex-direction:row-reverse;}
.t-msg.mine .t-body{text-align:right;}
.t-msg.mine .t-body small{margin-left:0;margin-right:5px;}
.t-msg.mine .t-reacts{justify-content:flex-end;}
.t-msg.mine .t-body p{color:var(--tx);}
/* W-B1: optimistic — bąbelek „wysyłanie…" przygaszony, „nie wysłano" z Ponów */
.t-msg.t-pending .t-body p{opacity:.6;}
.t-msg.t-pending.failed .t-body p{opacity:1;}
.t-pend{color:var(--tx3);font-style:italic;}
.t-pend-fail{color:var(--err);}
.t-retry{background:none;border:none;color:var(--color-brand);font-size:10px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;}
#t-react-picker{position:absolute;bottom:24px;left:0;background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:4px 6px;display:flex;gap:2px;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:640;}
#t-react-picker button{background:transparent;border:0;font-size:16px;cursor:pointer;padding:3px 5px;border-radius:6px;}
#t-react-picker button:hover{background:var(--sf2);}
.t-mention{color:var(--gold);font-weight:700;}
#t-mention-dd{position:absolute;bottom:52px;left:14px;right:14px;max-width:340px;background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:4px;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:640;}
.t-mention-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:0;padding:7px 9px;border-radius:7px;font-size:12px;color:var(--tx);cursor:pointer;}
.t-mention-opt:hover{background:var(--sf2);}
.t-input input{flex:1;background:var(--sf2);border:1px solid var(--bd);border-radius:6px;padding:8px 12px;color:var(--tx);font-size:12px;outline:none;font-family:inherit;}
.t-input input:focus{border-color:var(--gold);}

/* EVENTS - nowy panel */
.ev-filters{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;}
.ev-f{padding:4px 13px;border-radius:6px;font-size:11.5px;font-weight:600;cursor:pointer;border:1px solid var(--bd);color:var(--tx3);background:transparent;transition:all .12s;font-family:inherit;}
.ev-f:hover,.ev-f.on{border-color:rgba(var(--brand-rgb),.4);color:var(--gold);background:var(--adim);}
/* GRAFIK: toolbar widoku + FILTRY (wzór ActiveNow) */
.graf-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.graf-view-wrap{position:relative;flex:1 1 150px;min-width:130px;max-width:210px;}
.graf-view-btn{width:100%;height:34px;min-width:0;justify-content:space-between;gap:10px;}
.graf-view-caret{font-size:9px;opacity:.7;}
.graf-view-menu{display:none;position:absolute;top:calc(100% + 5px);left:0;z-index:60;min-width:270px;background:var(--bg-elevated,var(--sf2));border:1px solid var(--bd);border-radius:12px;box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.4));padding:6px;}
.graf-view-menu.open{display:block;}
.gv-opt{display:block;width:100%;text-align:left;padding:9px 12px;border:none;background:transparent;color:var(--tx);font-size:13px;font-family:inherit;border-radius:8px;cursor:pointer;transition:background .1s;}
.gv-opt:hover{background:var(--adim);}
.gv-opt.on{color:var(--gold);font-weight:600;background:var(--adim);}
.gv-sep{height:1px;background:var(--bd);margin:6px 4px;}
.gv-tog{display:flex;align-items:center;gap:9px;padding:8px 12px;font-size:12.5px;color:var(--tx2);cursor:pointer;border-radius:8px;}
.gv-tog:hover{background:var(--adim);}
.gv-tog input{width:16px;height:16px;flex-shrink:0;accent-color:var(--gold);cursor:pointer;}
.graf-filters-btn{gap:7px;}
.gfb-ic{font-size:13px;transform:rotate(90deg);display:inline-block;}
.gfb-count{font-size:10px;padding:1px 7px;}
/* Inline kafelki-listy filtrow nad kalendarzem (decyzja DI 01.07: filtry w widoku glownym, bez przycisku) */
/* RUN I blok 3: chevron ▾ jak przelacznik widoku — czytelnie, ze to rozwijana lista (nie pole tekstowe). */
.graf-kafelek{height:34px;padding:6px 26px 6px 10px;font-size:12px;min-width:130px;max-width:210px;flex:1 1 150px;cursor:pointer;}
/* wyższa specyficzność niż .fi i .fi:focus (shorthand background resetuje obrazek) — chevron zostaje też po kliknięciu */
input.graf-kafelek,input.graf-kafelek:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8f98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
.graf-clear-btn{height:34px;}
@media(max-width:600px){ .graf-kafelek{min-width:0;flex:1 1 45%;max-width:none;} }
/* #69321e0f — ROOT CAUSE: pasek akcji panelu bocznego (Uczniowie/Obecność/Edytuj/Działanie oraz
   Zapisz/Przenieś/Wypisz/Edytuj/Zaproś) miał `flex-wrap:nowrap` + `overflow-x:auto`. Panel ma
   `min(380px,100vw)`, a przyciski w sumie są odrobinę szersze — więc zawsze wychodził pasek
   przewijania w poziomie i OSTATNI przycisk był ucięty w połowie słowa. `overflow-x:auto` chroniło
   stronę przed h-scrollem, ale SCHOWAŁO treść zamiast ją zmieścić (AGENTS §anty-regresja: fix ma
   zmieścić treść u źródła, nie ukryć objaw). Fix: pasek ZAWIJA się do drugiego rzędu — nic nie jest
   ucięte, nic nie scrolluje. `overflow-x:auto` zostaje wyłącznie jako bezpiecznik na wypadek
   pojedynczej etykiety szerszej niż panel (wtedy scrolluje kontener, nigdy strona). */
.side-panel-foot{padding:12px 16px;border-top:1px solid var(--bd);display:flex;gap:8px;flex-shrink:0;overflow-x:auto;flex-wrap:wrap;-webkit-overflow-scrolling:touch;}
.side-panel-foot .btn{flex:0 0 auto;min-height:34px;padding:6px 10px;font-size:10px;white-space:nowrap;}

/* ── PANEL BOCZNY: PROFIL UCZESTNIKA I SZYBKI PODGLĄD ZAJĘĆ (zgłoszenie a0820bac, 03.08) ──────
   CO ZGŁOSIŁ WŁAŚCICIEL (Dance Imperium, 1376×628, ciemny): „profil jest za mgłą na kompie —
   mało czytelny obraz". Zmierzone na produkcji: profil to pasek 380 px na ekranie 1376 px, a
   pozostałe 996 px jest przyciemnione I ROZMYTE (`backdrop-filter:blur(1px)`). Na telefonie
   panel zajmuje cały ekran, więc mgły nie widać wcale — problem istnieje WYŁĄCZNIE na komputerze,
   i dokładnie tak został zgłoszony.

   DWIE ZMIANY, OBIE ZA PROGIEM 1100 px (telefon i tablet bez zmian):
   1. panel jest SZERSZY — profil ma miejsce na treść zamiast przewijania w pionie w wąskim pasku;
   2. rozmycie tła SCHODZI, zostaje samo delikatne przyciemnienie. Rozmycie na dużym ekranie nie
      pomaga skupić wzroku (panel i tak jest oddzielony cieniem i krawędzią), a zamienia widoczne
      73% ekranu w nieczytelną plamę.

   DLACZEGO KLASA, A NIE STYL PRZY ELEMENCIE (naprawa u podstaw, nie plaster): zamknięcie panelu
   jechało UJEMNYM `right` w pikselach (`-400px` w `space-app-2.js`, `-340px` przy zajęciach),
   dobranym ręcznie do ówczesnej szerokości. Każde poszerzenie panelu zostawiłoby jego kawałek
   wystający zza krawędzi ekranu — czyli sama próba naprawy tego zgłoszenia rodziła następny błąd.
   Zamknięcie robi teraz `transform`, który NIE ZALEŻY od szerokości, a szerokość mieszka w jednym
   miejscu (`--side-panel-w`). Panel dodajesz klasą, nie liczbą.

   Przykrywka też jest klasą, bo `backdrop-filter` wpisany przy elemencie w HTML wygrywa z każdą
   regułą media i mgły nie dałoby się zdjąć na dużym ekranie. */
.side-panel{position:fixed;top:0;right:0;bottom:0;width:min(var(--side-panel-w,380px),100vw);background:var(--sf);border-left:1px solid var(--bd);z-index:var(--z-panel);display:flex;flex-direction:column;transform:translateX(101%);transition:transform .22s cubic-bezier(.4,0,.2,1);}
/* Cien TYLKO przy otwartym panelu. Rozmyty na 40 px siega poza wlasna krawedz, wiec zamkniety panel
   zostawialby ciemna smuge przy prawym brzegu ekranu — dokladnie ten rodzaj brudu, o ktorym mowilo
   zgloszenie. Zamkniety panel ma byc NIEWIDOCZNY, a nie „prawie schowany". */
.side-panel.open{transform:translateX(0);box-shadow:-14px 0 40px rgba(0,0,0,.32);}
.side-panel-ov{display:none;position:fixed;inset:0;z-index:var(--z-panel-ov);background:rgba(0,0,0,.22);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);}
/* Szerokosci domyslne MUSZA stac w arkuszu, nie w atrybucie `style` przy elemencie: styl przy
   elemencie ma wyzsza waznosc niz KAZDA regula z arkusza, wiec zapis „380 px" w znaczniku wygrywal
   z regula dla duzego ekranu i panel zostawal waski mimo poprawnej media query. Zmierzone na
   produkcji `space-v345`: 380 px na ekranie 1376 px, czyli dokladnie stan sprzed naprawy. */
#stud-qp{--side-panel-w:380px;}
#cal-qp{--side-panel-w:320px;}
@media (min-width:1100px){
  #stud-qp{--side-panel-w:600px;}
  #cal-qp{--side-panel-w:460px;}
  .side-panel-ov{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.10);}
}
@media (prefers-reduced-motion:reduce){.side-panel{transition:none;}}
/* Combobox filtrow grafiku (RUN G D + RUN I): klik ZAWSZE otwiera pelna liste, "Wszystkie" = reset. */
/* z-index MUSI być nad oknem dialogowym i nad dialogiem w dialogu: dropdown jest doklejany
   do <body> jako rodzeństwo modala, więc combo w modalach zajęć (poziom/styl/nazwa/gość) renderowało się
   ZA modalem i było niewidoczne/nieklikalne (zgłoszenie DI: „klik w poziom, brak listy"). `--z-float` =
   nad modalami, pod toastem, więc bez regresji w combo filtrów grafiku (widok bazowy).
   01.08: wartość bierze się ze SKALI WARSTW w `:root`, a nie z liczby wpisanej tu z palca — inaczej
   podniesienie warstwy dialogu (zgł. `aeb48a0c`) po cichu chowa tę listę pod modalem. */
.gk-combo-dd{position:fixed;z-index:var(--z-float);background:var(--bg-elevated,var(--sf2));border:1px solid var(--bd);border-radius:10px;box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.4));max-height:280px;overflow-y:auto;padding:4px;display:none;-webkit-overflow-scrolling:touch;}
.gk-combo-dd.open{display:block;}
.gk-combo-opt{padding:9px 11px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gk-combo-opt:hover,.gk-combo-opt.on{background:var(--sf3,rgba(127,127,127,.12));color:var(--tx);}
.gk-combo-all{font-weight:600;color:var(--gold);border-bottom:1px solid var(--bd);border-radius:7px 7px 0 0;margin-bottom:2px;}
.gk-combo-empty{padding:9px 11px;font-size:12px;color:var(--tx3);}
/* U-A (RUN U): menu akcji po kliku w wolne miejsce grafiku (prefilled dzień+godzina) */
#grid-act-menu{position:fixed;z-index:660;background:var(--bg-elevated,var(--sf2));border:1px solid var(--bd);border-radius:12px;box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.4));min-width:230px;max-width:min(300px,92vw);max-height:min(420px,72vh);overflow-y:auto;padding:6px;display:none;-webkit-overflow-scrolling:touch;}
#grid-act-menu.open{display:block;}
.gam-hd{padding:7px 11px 8px;font-size:11px;font-weight:700;color:var(--tx3);border-bottom:1px solid var(--bd);margin-bottom:4px;}
.gam-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;background:transparent;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--tx2);}
.gam-opt:hover{background:var(--sf3,rgba(127,127,127,.12));color:var(--tx);}
.gam-opt .gam-ic{width:18px;text-align:center;flex-shrink:0;}
.gam-sub{font-size:11px;color:var(--tx3);padding:2px 11px 6px;}
/* PANEL FILTRY (modal/bottom-sheet) — grafik i uczestnicy */
.filters-modal{width:min(520px,94vw);max-width:520px;}
.filters-clear{background:transparent;border:none;color:var(--gold);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;padding:4px 2px;}
.filters-clear:hover{text-decoration:underline;}
.filters-body .fg{margin-bottom:14px;}
.filters-body .fg label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);margin-bottom:6px;}
.filters-foot{display:flex;gap:10px;}
.filters-foot .btn{flex:1;justify-content:center;}
@media(max-width:600px){
  .filters-ov{align-items:flex-end;}
  .filters-modal{width:100vw;max-width:100vw;max-height:88vh;border-radius:16px 16px 0 0;}
  .graf-view-wrap{flex:1 1 45%;min-width:0;max-width:none;}
  .graf-view-menu{min-width:min(290px,90vw);}
}
/* UCZESTNICY: segmented Aktywni/Archiwalni + duża szukajka + pasek akcji */
.stu-scope-seg{display:inline-flex;gap:0;margin-left:12px;border:1px solid var(--bd);border-radius:8px;overflow:hidden;vertical-align:middle;}
.stu-scope-seg button{padding:5px 13px;border:none;background:transparent;color:var(--tx3);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .12s;}
.stu-scope-seg button.on{background:var(--adim);color:var(--gold);}
.stu-search-big{width:100%;height:44px;font-size:14px;padding:10px 14px;}
.stu-actionbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.stu-bulk{display:flex;align-items:center;gap:12px;margin-left:auto;}
.stu-bulk-count{font-size:12px;font-weight:600;color:var(--tx2);}
/* C2 (26.07): przełącznik zakresu listy to WSKAŹNIK STANU („co teraz pokazuję"), nie zwykły przycisk —
   dlatego nieprzezroczyste tło z tokenu (--sf2) i pełny kolor tekstu (--tx). Świadomie bez półprzezroczystego
   akcentu: przy alpha kontrast bywa realnie słabszy niż wygląda, a to element czytany na każdym wejściu. */
#stu-scope-btn{background:var(--sf2);color:var(--tx);border:1px solid var(--bd);font-weight:700;min-width:96px;}
#stu-scope-btn:hover{border-color:var(--gold);}
/* C4 (26.07): nudge „jest co sprawdzić" — pojawia się tylko przy realnym liczniku i znika po ogarnięciu.
   Ton informacyjny (nie alarm): tło powierzchni + akcent na krawędzi, żeby nie krzyczał przy każdym wejściu. */
.stu-nudge{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--bd);border-left:3px solid var(--warn);border-radius:10px;background:var(--sf);margin-bottom:6px;}
.stu-nudge-txt{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--tx2);}
/* `1a894a37`: pasek kontekstu „to jest lista TEJ grupy" nad lista uczestnikow. Ten sam jezyk wizualny
   co nudge wyzej, tylko akcent marki zamiast ostrzezenia — to informacja o kontekscie, nie alarm. */
.stu-group-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--bd);border-left:3px solid var(--gold);border-radius:10px;background:var(--sf);}
.stu-group-bar>div:first-child{flex:1;min-width:0;}
.stu-group-bar-title{font-size:13px;font-weight:700;color:var(--tx);overflow:hidden;text-overflow:ellipsis;}
.stu-group-bar-sub{font-size:11.5px;color:var(--tx3);margin-top:2px;}
.stu-bulk-menu-wrap{position:relative;}
.stu-bulk-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;z-index:60;min-width:220px;background:var(--bg-elevated,var(--sf2));border:1px solid var(--bd);border-radius:10px;box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.4));padding:6px;}
.stu-bulk-menu.open{display:block;}
/* KURSY C2: cykl życia kursu (daty + multi-slot + przerwy + podgląd) */
.course-c2{margin-top:6px;border-top:1px solid var(--bd);padding-top:14px;}
.c2-sec{margin-top:14px;}
.c2-sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.c2-sec-hd span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);}
.c2-slots,.c2-breaks{display:flex;flex-direction:column;gap:8px;}
.c2-row{display:grid;gap:6px;align-items:center;}
.c2-row.brk{grid-template-columns:1fr 1fr auto;}
.c2-row .fi{height:34px;padding:6px 8px;font-size:12px;}
.c2-row-rm{background:transparent;border:1px solid var(--bd);color:var(--tx3);border-radius:6px;width:32px;height:32px;cursor:pointer;font-size:13px;flex-shrink:0;}
.c2-row-rm:hover{border-color:var(--err);color:var(--err);}
/* Termin kursu = karta (wszystkie terminy równorzędne: dzień, godziny, miasto→lokalizacja→sala, prowadzący) */
.c2-slot-card{position:relative;border:1px solid var(--bd);border-radius:10px;padding:10px;background:var(--sf2);}
.c2-slot-card .c2-row-rm{position:absolute;top:8px;right:8px;width:26px;height:26px;font-size:12px;}
.c2-slot-grid{display:grid;gap:6px;margin-bottom:6px;}
.c2-slot-grid:last-child{margin-bottom:0;}
.c2-sg-when{grid-template-columns:1.4fr 1fr 1fr;padding-right:32px;}
.c2-sg-where{grid-template-columns:1fr 1.2fr 1fr;}
.c2-sg-who{grid-template-columns:1fr;}
.c2-slot-card .fi{height:36px;padding:6px 8px;font-size:12px;width:100%;}
.c2-slot-card label{display:block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);margin-bottom:3px;}
.c2-slot-card select.fi:disabled{opacity:.5;cursor:not-allowed;}
.c2-hint{font-size:10px;color:var(--tx3);margin-top:6px;line-height:1.5;}
.c2-instr{display:flex;flex-direction:column;gap:6px;}
.c2-instr-chips{display:flex;flex-wrap:wrap;gap:5px;min-height:18px;align-items:center;}
.c2-instr-chip{gap:6px;padding:3px 6px 3px 9px;font-size:11px;}
.c2-instr-rm{border:none;background:transparent;color:inherit;cursor:pointer;font-size:10px;line-height:1;padding:1px 2px;opacity:.7;}
.c2-instr-rm:hover{opacity:1;}
.c2-instr-empty{font-size:10px;color:var(--tx3);}
.c2-brk-locked{font-size:11px;color:var(--tx3);padding:6px 8px;background:var(--sf2);border-radius:6px;border:1px solid var(--bd);}
.c2-preview{margin-top:14px;background:var(--adim);border:1px solid rgba(var(--brand-rgb),.25);border-radius:10px;padding:11px 13px;font-size:12.5px;color:var(--tx2);line-height:1.6;}
.c2-preview b{color:var(--gold);font-size:14px;}
@media(max-width:600px){
  .c2-sg-when{grid-template-columns:1fr 1fr;padding-right:0;}
  .c2-sg-when>div:first-child{grid-column:1/-1;padding-right:32px;}
  .c2-sg-where{grid-template-columns:1fr;}
  .c2-slot-card .fi{height:42px;font-size:13px;}
}
.ev-card-new{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius);padding:0;margin-bottom:12px;transition:border-color .18s;overflow:hidden;cursor:pointer;}
.ev-card-new:hover{border-color:rgba(var(--brand-rgb),.35);}
[data-theme="dark"] .ev-card-new{border-top-color:rgba(255,255,255,.08);}
.ev-card-past{opacity:.6;}
.ev-card-past:hover{opacity:.85;}
.ev-card-past .ev-date-badge{filter:grayscale(1);}
.ev-card-top{display:flex;gap:14px;padding:16px 18px;}
.ev-date-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:46px;border-radius:10px;background:var(--sf2);border:1px solid var(--bd);flex-shrink:0;}
.ev-date-badge .dd{font-size:17px;font-weight:800;line-height:1;letter-spacing:-.5px;}
.ev-date-badge .mm{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--tx3);letter-spacing:.04em;}
.ev-main{flex:1;min-width:0;}
.ev-top-row{display:flex;align-items:center;gap:7px;margin-bottom:6px;flex-wrap:wrap;}
.ev-title{font-size:14px;font-weight:700;letter-spacing:-.3px;margin-bottom:5px;}
.ev-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--tx3);}
.ev-meta-row span{display:flex;align-items:center;gap:4px;}
.ev-groups{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px;}
.ev-group-tag{font-size:10px;padding:2px 8px;border-radius:4px;background:var(--sf3);color:var(--tx3);border:1px solid var(--bd);}
.ev-card-bottom{border-top:1px solid var(--bd);padding:11px 18px;display:flex;align-items:center;gap:12px;background:var(--sf2);}
.ev-rsvp-info{font-size:12px;color:var(--tx2);display:flex;align-items:center;gap:8px;}
.rsvp-bar-wrap{flex:1;height:4px;background:var(--sf3);border-radius:2px;overflow:hidden;min-width:60px;max-width:120px;}
.rsvp-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--warn));}
.ev-card-actions{display:flex;gap:6px;margin-left:auto;}
.ev-share-box{background:var(--sf2);border:1px solid var(--bd);border-radius:8px;padding:10px 12px;margin-bottom:10px;}
.ev-share-url{font-size:11px;color:var(--tx3);font-family:monospace;word-break:break-all;margin-bottom:8px;}
.ev-share-btns{display:flex;gap:6px;}

/* MODAL events */
.modal-ev-detail{width:100%;max-width:620px;}
.ev-detail-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
.ev-detail-date{width:52px;height:52px;border-radius:10px;background:var(--sf2);border:1px solid var(--bd);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;}
.rsvp-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.rsvp-table th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);padding:8px 10px;border-bottom:1px solid var(--bd);}
.rsvp-table td{padding:9px 10px;border-bottom:1px solid var(--bd);}
.rsvp-table tr:last-child td{border-bottom:none;}
.rsvp-list-wrap{overflow-x:visible;}
.rsvp-list{display:grid;gap:8px;}
.rsvp-row{display:grid;grid-template-columns:32px minmax(0,1.15fr) minmax(0,1.35fr) minmax(0,.95fr);gap:10px;align-items:center;background:var(--sf2);border:1px solid var(--bd);border-radius:8px;padding:10px;font-size:12px;min-width:0;}
.rsvp-row strong,.rsvp-row span{min-width:0;overflow-wrap:anywhere;}
.rsvp-row small{display:block;color:var(--tx3);font-size:10px;margin-top:2px;overflow-wrap:anywhere;}
@media(max-width:700px){.rsvp-row{grid-template-columns:1fr}.rsvp-index{display:none}}
.role-hidden{display:none!important;}

/* TICKETS */
.tkt-layout{display:grid;grid-template-columns:320px 1fr;gap:12px;align-items:start;}
.tkt-wrap{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius);overflow:hidden;}
#tkt-detail{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 88px);overflow-y:auto;}
.tkt-item{padding:11px 13px;border-bottom:1px solid var(--bd);cursor:pointer;transition:background .1s;}
[data-theme="dark"] .tkt-item{border-bottom-color:var(--bd);}
.tkt-item:hover{background:var(--sf2);}
.tkt-item.active{background:var(--adim);border-left:2px solid var(--gold);padding-left:11px;}

/* KB EDITOR */
.kb-layout{display:grid;grid-template-columns:230px 1fr;gap:14px;min-height:500px;}
.kb-catsidebar{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius);padding:6px;display:flex;flex-direction:column;gap:1px;}
.kb-catitem{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:7px;cursor:pointer;color:var(--tx2);font-size:12px;font-weight:500;transition:all .18s;}
.kb-catitem:hover{background:var(--sf2);color:var(--tx);}
.kb-catitem.active{background:var(--adim);color:var(--gold);font-weight:600;box-shadow:inset 2px 0 0 var(--gold);}
.kb-catitem .kb-cnt{margin-left:auto;font-size:10px;color:var(--tx3);background:var(--sf3);padding:1px 8px;border-radius:6px;}
.kb-detail{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;}
.kb-det-hdr{padding:14px 18px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.kb-det-hdr h2{font-size:14px;font-weight:700;flex:1;letter-spacing:-.3px;}
.kb-det-body{flex:1;overflow-y:auto;padding:16px 18px;}
.kb-entry{background:var(--sf2);border:1px solid var(--bd);border-radius:9px;padding:14px 16px;margin-bottom:10px;position:relative;transition:all .18s;}
.kb-entry:hover{border-color:rgba(var(--brand-rgb),.4);box-shadow:0 4px 16px rgba(var(--brand-rgb),.06);}
.kb-entry-q{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:5px;padding-right:110px;letter-spacing:-.2px;}
.kb-entry-a{font-size:12px;color:var(--tx2);line-height:1.65;padding-right:110px;}
.kb-entry-actions{position:absolute;top:12px;right:12px;display:flex;gap:5px;align-items:center;}
.kb-ord{display:flex;flex-direction:column;gap:2px;margin-right:3px;}
.kb-ord button{background:none;border:1px solid var(--bd);border-radius:4px;width:20px;height:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--tx3);padding:0;transition:all .15s;}
.kb-ord button:hover:not(:disabled){border-color:rgba(var(--brand-rgb),.4);color:var(--gold);}
.kb-ord button:disabled{opacity:.25;cursor:not-allowed;}
.kb-preview-entry{margin-top:12px;padding:12px 14px;border-radius:8px;background:rgba(var(--info-rgb), .06);border:1px solid rgba(var(--info-rgb), .14);}
.kb-preview-entry .pv-lbl{font-size:9px;font-weight:700;color:var(--info);text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px;}
.kb-sync-bar{padding:11px 18px;border-top:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--tx3);flex-shrink:0;}

/* FOOTER MENU */
.s-foot{padding:10px;border-top:1px solid var(--bd);flex-shrink:0;position:relative;}
.s-foot-trigger{cursor:pointer;border-radius:8px;transition:background .18s;}
.s-foot-trigger:hover{background:var(--sf2);}
.s-foot-menu{position:absolute;bottom:calc(100% + 8px);left:10px;right:10px;background:var(--sf2);border:1px solid var(--bd);border-radius:12px;padding:6px;box-shadow:0 -12px 40px rgba(0,0,0,.35);display:none;z-index:50;}
[data-theme="dark"] .s-foot-menu{border-top-color:rgba(255,255,255,.1);}
.s-foot-menu.open{display:block;}
.s-foot-item{padding:8px 12px;border-radius:7px;cursor:pointer;font-size:12px;font-weight:500;color:var(--tx2);transition:all .15s;display:flex;align-items:center;gap:8px;}
.s-foot-item:hover{background:var(--sf3);color:var(--tx);}
.s-foot-item.err{color:var(--err);}
.s-foot-item.err:hover{background:rgba(var(--error-rgb), .08);}
.ml{margin-left:auto;}

/* SETTINGS */
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.set-sec h3{font-size:9px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--bd);}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--bd);}
.set-row:last-child{border-bottom:none;}
/* Settings tabs */
/* ── STANDARD PASKA PRZYCISKÓW (Jerzy 22.07: „żeby te wszystkie przyciski wpasowywały się w szerokość") ──
   PROBLEM, który to zamyka: dotąd każdy pasek radził sobie sam — jedne miały `flex-wrap:wrap`, inne
   `overflow-x:auto` (czyli chowały akcje przed userem), a jeszcze inne zawijanie WYŁĄCZNIE w media query
   pod konkretny telefon. Dlatego pasek Ustawień pękał dopiero przy 768px: media query pyta o szerokość
   EKRANU, a problem zależy od szerokości KONTENERA i długości etykiet, których nikt nie zna z góry.

   NARZĘDZIE: CSS Grid `repeat(auto-fit, minmax(...))`. Przeglądarka SAMA liczy, ile przycisków zmieści
   się w rzędzie, i zawija resztę — bez media queries, bez JS, bez zgadywania breakpointów. `min()` w
   minmax chroni przed przepełnieniem, gdy kontener jest węższy niż pojedynczy przycisk.
   `1fr` wyrównuje szerokości, więc rząd wygląda równo, a nie poszarpanie jak przy zwykłym `flex-wrap`.

   UŻYCIE: `<div class="btn-row">` dla każdego nowego paska z 2+ przyciskami. Wariant `.btn-row.tight`
   dla krótkich etykiet (zakładki), `.btn-row.wide` dla długich („Wyślij wiadomość grupową").
   Pilnuje tego bramka `test:paski-przyciskow` — nowy pasek, który nie mieści się w kontenerze na
   320/349/384/768 px, zatrzymuje deploy. */
.btn-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:8px;align-items:stretch;}
.btn-row.tight{grid-template-columns:repeat(auto-fit,minmax(min(104px,100%),1fr));gap:6px;}
.btn-row.wide{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));}
.btn-row > .btn{width:100%;min-width:0;}
/* Etykieta dłuższa niż kolumna nie ma prawa rozpychać siatki — przycisk zostaje w swoim polu. */
.btn-row > .btn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Zakładki Ustawień: zawijanie BEZWARUNKOWE, nie tylko na telefonie. Przy 768px pasek wystawał poza
   kartę, bo wrap włączał się dopiero w media query dla telefonu (znalezione przez guard, nie zgłoszone). */
.stabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--bd);margin-bottom:24px;}
.stabs::-webkit-scrollbar{display:none;}
.stab{padding:8px 14px;font-size:12px;font-weight:600;color:var(--tx3);border:0;background:transparent;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;}
.stab.on{color:var(--tx);border-bottom-color:var(--gold);}
.stab:hover:not(.on){color:var(--tx);}
.op-badge{display:inline-block;background:var(--err);color:#fff;font-size:10px;font-weight:700;padding:0 6px;border-radius:9px;min-width:16px;text-align:center;line-height:16px;margin-left:2px;}
/* BYOK key display */
.key-box{background:var(--bg2,var(--bg));border:1px solid var(--bd);border-radius:10px;padding:14px 16px;}
.key-masked{font-family:monospace;font-size:12px;letter-spacing:.5px;color:var(--tx);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.key-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;}
.key-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.set-info p{font-size:13px;font-weight:500;}
.set-info span{font-size:11px;color:var(--tx3);}

/* LOCKED */
.locked-wrap{position:relative;min-height:380px;}
.locked-blur{filter:blur(4px);opacity:.25;pointer-events:none;}
.locked-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;z-index:10;}
.locked-ov h3{font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--gold);}
.locked-ov p{color:var(--tx2);font-size:13px;max-width:280px;line-height:1.6;}

/* MODAL */
/* Warstwa ze skali w `:root` (zgł. `aeb48a0c`): okno dialogowe stoi NAD panelem bocznym, bo prawie
   każdy dialog otwiera się właśnie z panelu uczestnika. Wcześniej było odwrotnie (300 pod 620). */
/* ── OKNO PANELU BIERZE JEDNA Z TRZECH SZEROKOSCI, CZWARTEJ NIE MA (11.08) ────────────────────
   ⛔ ZMIERZONE 11.08: szesnascie okien panelu mialo DZIEWIEC roznych szerokosci (380, 420, 440,
   460, 520, 560, 680, 720, 820) — i zaden z tych numerow nie byl decyzja, kazdy powstal osobno
   przy swoim oknie. To dokladnie ta sama choroba, ktora strony bez logowania przeszly 10.08
   (siedem szerokosci na dziesieciu stronach). Tam wnioskiem byly DWIE swiadome szerokosci;
   tutaj sa TRZY, bo okno ma jeden przypadek wiecej niz strona:
     `--okno-waskie`   (440) = JEDNA DECYZJA albo krotki formularz. Potwierdzenie, wypisanie,
                               zaproszenie — czlowiek ma tu odpowiedziec na jedno pytanie.
     `--okno-zwykle`   (560) = FORMULARZ. Ta sama liczba co `--pub-waski` na stronach bez
                               logowania, wiec formularz w panelu i poza nim ma ten sam rytm.
     `--okno-szerokie` (820) = LISTA albo TABELA w oknie. Tu czlowiek POROWNUJE wiersze.
   ⛔ Okno, ktore wpisuje wlasna liczbe, zapala `test:okna-panelu-trzy-szerokosci`. */
:root{
  --okno-waskie:440px;
  --okno-zwykle:560px;
  --okno-szerokie:820px;
}
.okno--waskie{max-width:var(--okno-waskie);}
.okno--zwykle{max-width:var(--okno-zwykle);}
.okno--szerokie{max-width:var(--okno-szerokie);}

.modal-ov{display:none;position:fixed;left:0;right:0;top:var(--vvt,0px);height:var(--vvh,100%);background:rgba(0,0,0,.75);z-index:var(--z-modal);align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.modal-ov.open{display:flex;}
.modal{--modal-pad:28px;background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:var(--modal-pad);width:480px;max-width:95vw;max-height:90%;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 30px 80px rgba(0,0,0,.5);}
[data-theme="dark"] .modal{border-top-color:rgba(255,255,255,.1);}
.modal-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.modal-hdr h3{font-size:16px;font-weight:700;letter-spacing:-.4px;}
.modal-close{background:none;border:none;color:var(--tx3);font-size:16px;cursor:pointer;padding:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .15s;}
.modal-close:hover{color:var(--tx);background:var(--sf3);}
/* Pasek akcji modala przyklejony do dolu okna (18766731): na mobile klawiatura nie zaslania juz "Zapisz".
   Bleed na pelna szerokosc modala przez --modal-pad (28px desktop / 20px mobile), tlo + gorna kreska oddzielaja od scrollowanej tresci. */
.modal-foot{display:flex;gap:8px;justify-content:flex-end;position:sticky;bottom:calc(-1 * var(--modal-pad, 28px));margin:22px calc(-1 * var(--modal-pad, 28px)) calc(-1 * var(--modal-pad, 28px));padding:14px var(--modal-pad, 28px);background:var(--sf);border-top:1px solid var(--bd);}

/* FORM */
.fg{margin-bottom:14px;}
.fg label{display:block;font-size:9px;font-weight:700;color:var(--tx3);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em;}
/* POLE WYBORU KOLORU (05.08). Do dzis `input[type=color]` nie mial w platformie ZADNEJ reguly,
   wiec przegladarka rysowala goly prostokat bez ramki — na ekranie Wygladu wygladalo to jak
   przypadkowa plama obok etykiety. Probka ma wygladac jak probka: kwadrat z ramka i zaokragleniem,
   w jednej linii z etykieta. Reguly sa GLOBALNE, wiec obejmuja kazde pole koloru w platformie. */
.fg--kolor{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.fg--kolor label{margin:0;flex:1 1 auto;}
/* ROZMIAR tylko we wzorcu `.fg--kolor`, WYGLAD globalnie. Dwa starsze pola koloru (kolor zajec
   w „nowe zajecia" i w edycji) maja wlasna wysokosc przy elemencie i szerokosc z klasy `.fi`;
   globalna szerokosc 44px bylaby dla nich niezamowiona zmiana ukladu (ANTY-REGRESJA). Ramke,
   zaokraglenie i stan `focus` biora natomiast wszystkie — tego brakowalo im tak samo. */
.fg--kolor input[type=color]{width:44px;height:28px;flex:0 0 auto;}
input[type=color]{-webkit-appearance:none;appearance:none;padding:0;
  background:none;border:1px solid var(--bd);border-radius:8px;cursor:pointer;}
input[type=color]::-webkit-color-swatch-wrapper{padding:2px;}
input[type=color]::-webkit-color-swatch{border:none;border-radius:6px;}
input[type=color]::-moz-color-swatch{border:none;border-radius:6px;}
input[type=color]:hover{border-color:var(--gold);}
input[type=color]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.fi{width:100%;background:var(--sf2);border:1px solid var(--color-border-strong,var(--bd));border-radius:7px;padding:9px 13px;color:var(--tx);font-size:13px;outline:none;font-family:inherit;transition:all .18s;}
.reply-in,.field input,.field select,.field textarea,input[type=text].fi,select.fi{border-color:var(--color-border-strong,var(--bd));}
.fi:focus{border-color:var(--gold);background:var(--sf);box-shadow:0 0 0 3px var(--adim);}
select.fi{cursor:pointer;}
textarea.fi{resize:vertical;min-height:80px;}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* CHARTS */
.chart-row{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:12px;}
.chart-lbl{width:130px;color:var(--tx2);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chart-bw{flex:1;background:var(--sf3);border-radius:3px;height:4px;}
.chart-b{height:4px;border-radius:3px;background:var(--gold);}
.cb-rose{background:var(--gold);}
.cb-violet{background:var(--gold2);}
.cb-teal{background:#14b8a6;}
.cb-ok{background:var(--ok);}
.chart-v{width:28px;text-align:right;color:var(--tx3);flex-shrink:0;font-size:11px;font-variant-numeric:tabular-nums;}
.prog{background:var(--sf3);border-radius:20px;height:4px;overflow:hidden;}
.prog-b{height:4px;border-radius:20px;background:linear-gradient(90deg,var(--gold2),var(--gold));}
.sep{border:none;border-top:1px solid var(--bd);margin:14px 0;}

/* EVENTS */
.ev-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius);padding:18px;margin-bottom:10px;display:flex;gap:16px;transition:border-color .18s;}
.ev-card:hover{border-color:rgba(var(--brand-rgb),.4);}
[data-theme="dark"] .ev-card{border-top-color:rgba(255,255,255,.08);}
.ev-date{background:var(--adim);border-radius:8px;padding:10px 14px;text-align:center;flex-shrink:0;min-width:54px;border:1px solid rgba(var(--brand-rgb),.15);}
.ev-date .dd{font-size:22px;font-weight:700;color:var(--gold);line-height:1;letter-spacing:-.6px;}
.ev-date .mm{font-size:10px;font-weight:500;color:var(--tx2);text-transform:uppercase;letter-spacing:.04em;}

/* TOAST */
/* Potwierdzenie akcji MUSI być widoczne także nad otwartym dialogiem — inaczej „zapisano/nie udało się"
   ginie pod oknem, w którym człowiek właśnie kliknął (AGENTS §POTWIERDZAJ KAŻDĄ ZNACZĄCĄ AKCJĘ).
   Dlatego toast siedzi na szczycie skali warstw, a nie na stałej 450 sprzed podniesienia dialogu. */
/* NIEWIDOCZNY TOAST NIE MOZE LAPAC KLIKOW (zgl. `b30af3ef`, wlasciciel DI, telefon 349x594).
   `#app-toast` powstaje raz i ZOSTAJE w dokumencie na cala sesje — po pokazaniu znika tylko klasa
   `show`, wiec element dalej tam lezy. W stanie ukrytym `transform:translateY(70px)` zsuwa go
   z `bottom:72px` (telefon) na okolice `bottom:2px`, czyli DOKLADNIE NA pasek nawigacji, przy
   `width:calc(100vw - 24px)` i `--z-toast`=860 nad nawigacja (605). `opacity:0` chowa go dla oka,
   ale NIE wylacza trafien wskaznika — zmierzone na produkcji: wszystkie piec przyciskow dolnego
   paska dostawalo `DIV#app-toast` zamiast siebie, a realny klik nie przelaczal widoku.
   Dla wlasciciela wygladalo to na „nagle pole nie klikliwe", i tylko „czesto", bo gorne ~17 z 58 px
   paska zostawalo wolne. `pointer-events` sterowane TA SAMA klasa co widocznosc — jeden stan, nie dwa. */
.toast{position:fixed;bottom:24px;right:24px;background:var(--sf2);color:var(--tx);border:1px solid var(--bd);padding:11px 18px;border-radius:10px;font-size:12px;font-weight:500;z-index:var(--z-toast);transform:translateY(70px);opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:0 8px 32px rgba(0,0,0,.3);}
[data-theme="dark"] .toast{border-top-color:rgba(255,255,255,.1);}
/* `pointer-events:auto` tylko tu, bo `showToast(msg, wariant, clickHandler)` pozwala kliknac
   POKAZANY toast (np. „zobacz szczegoly"). Klikalny jest wiec dokladnie ten toast, ktory user WIDZI. */
.toast.show{transform:translateY(0);opacity:1;pointer-events:auto;}
/* Warianty potwierdzenia akcji (SSOT showToast): zielony sukces / czerwony blad / niebieski info.
   ⛔ TEN KOMENTARZ OPISYWAL TLO, KTOREGO NIE BYLO (naprawione 07.08, blok E). Stalo tu „akcentowana
   lewa krawedz + subtelne tlo", a regula miala WYLACZNIE `border-left:3px`. Dowod z produkcji
   zmierzyl `backgroundColor` sukcesu i bledu — obie wartosci identyczne, `rgb(244,245,247)`.
   Czyli platforma dokladala klase wariantu przy kazdym potwierdzeniu, kod tlumaczyl w komentarzu,
   ze „sukces jest zielony", a czlowiek widzial dwa takie same szare prostokaty z wloskiem koloru
   przy lewej krawedzi. Kanon §POTWIERDZAJ KAZDA ZNACZACA AKCJE mowi wprost: „nie neutralny szary".
   Teraz wariant maluje TLO, RAMKE i AKCENT TEKSTU, wiec „zrobione" widac katem oka. */
.toast--ok{border-color:color-mix(in srgb,var(--ok) 55%,var(--bd));border-left:3px solid var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--sf2));}
.toast--err{border-color:color-mix(in srgb,var(--err) 55%,var(--bd));border-left:3px solid var(--err);background:color-mix(in srgb,var(--err) 14%,var(--sf2));}
.toast--info{border-color:color-mix(in srgb,var(--info) 55%,var(--bd));border-left:3px solid var(--info);background:color-mix(in srgb,var(--info) 14%,var(--sf2));}
/* Ta sama arytmetyka co `.mob-more-sheet` i `.view-actions-trigger`: nad paskiem stoimy licząc jego
   REALNA wysokosc razem z paskiem gestow telefonu. Stale 72px = 58 + 14 dawalo dobra pozycje tylko
   tam, gdzie `env(safe-area-inset-bottom)` wynosi 0; na telefonie z paskiem gestow POKAZANY toast
   wchodzil na gorne kilkanascie px nawigacji. Bez safe-area wartosc wychodzi identyczna jak dotad. */
@media(max-width:600px){.toast{bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 14px);right:12px;left:12px;right:auto;width:calc(100vw - 24px);text-align:center;}}

@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr);}}

/* ── HAMBURGER ── */
.ham-btn{display:flex;width:34px;height:34px;border-radius:8px;border:1px solid var(--bd);background:var(--sf);color:var(--tx2);font-size:16px;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s;}
.ham-btn:hover{border-color:var(--gold);color:var(--gold);}
.mobile-avatar-btn{display:none;width:34px;height:34px;border-radius:9px;border:1px solid rgba(var(--brand-rgb),.25);background:var(--adim);color:var(--gold);font-size:10px;font-weight:700;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;}
.mobile-avatar-btn:hover{border-color:var(--gold);}
/* UX 1b (Jerzy 12.07): dostęp do KONTA z prawego górnego rogu na MOBILE — DODATEK obok bottom nav
   i lewego menu (nie zamiana). Konto w „standardowym miejscu" (prawy górny róg). */
/* A5 (real-check 26.07 — badge „9+" lądował w LEWYM GÓRNYM rogu ekranu u ownera): `position:relative`
   MUSI być w regule bazowej, nie tylko w `.client-family-dashboard .mob-acct-btn`. Bez niego badge
   `::before`/`::after` (position:absolute) liczy pozycję od initial containing block (viewport),
   bo żaden przodek w topbarze nie jest pozycjonowany -> `top:-5px;left:-6px` = róg EKRANU. */
.mob-acct-btn{display:none;position:relative;width:34px;height:34px;border-radius:9px;border:1px solid rgba(var(--brand-rgb),.25);background:var(--adim);color:var(--gold);font-size:10px;font-weight:700;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;}
.mob-acct-btn:hover{border-color:var(--gold);}
.mob-acct-btn.has-balance::after{content:attr(data-balance-badge);position:absolute;right:0;bottom:-6px;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 4px;border-radius:999px;background:var(--err);color:#fff;border:2px solid var(--sf);font-size:8px;font-weight:800;line-height:13px;font-variant-numeric:tabular-nums;}
.mob-acct-btn.has-notice::before{content:attr(data-notice-badge);position:absolute;top:-5px;left:-6px;min-width:14px;padding:0 3px;border-radius:999px;background:var(--warn);color:var(--color-on-warn,#17120a);border:2px solid var(--sf);font-size:8px;font-weight:800;line-height:13px;text-align:center;}
.client-family-dashboard .mob-acct-btn{display:flex;}
.mob-acct-sheet{position:fixed;top:calc(52px + env(safe-area-inset-top,0px) + 6px);right:10px;z-index:611;width:min(260px,calc(100vw - 20px));background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.4);display:none;max-height:min(72vh,540px);overflow-y:auto;}
.mob-acct-sheet.open{display:block;}
.mob-acct-head{display:flex;align-items:center;gap:9px;padding:8px 10px 10px;border-bottom:1px solid var(--bd);margin-bottom:4px;}
.mob-acct-head .uav{width:32px;height:32px;flex-shrink:0;}
.mob-acct-sheet .s-foot-menu.account-menu-top{display:block;position:static;inset:auto;width:auto;min-width:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;}
.sidebar-ov{display:none;position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);}
.mob-back-btn{display:none;background:transparent;border:none;color:var(--gold);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:6px;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}

/* ── BOTTOM NAV ── */
/* A1 (real-check 26.07): dolny pasek brał tło z HARDCODE `rgba(11,11,16,.92)` (#0B0B10) — to o wiele
   ciemniej niż powierzchnia apki `--sf` (#1D2027 dark), więc pasek wizualnie odklejał się od reszty
   shellu. Teraz jedna reguła na tokenach SSOT dla obu motywów (ten sam wzorzec co AdminSPACE). */
.mob-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:605;height:calc(58px + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);align-items:center;justify-content:space-around;border-top:1px solid var(--bd);background:color-mix(in srgb, var(--sf) 92%, transparent);backdrop-filter:blur(12px);}
body.sidebar-open .mob-bottom-nav{display:none!important;}
body.modal-open .mob-bottom-nav{display:none!important;}
.mbn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 10px;border-radius:10px;cursor:pointer;color:var(--tx3);font-size:9px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;transition:all .15s;border:none;background:transparent;min-width:54px;position:relative;font-family:inherit;}
.mbn-item.active{color:var(--gold);}
.mbn-item.active .mbn-ic{transform:scale(1.15);}
.mbn-ic{font-size:19px;line-height:1;transition:transform .15s;}
.mbn-badge{position:absolute;top:3px;right:6px;background:var(--err);color:#fff;font-size:8px;font-weight:700;padding:0 4px;border-radius:6px;min-width:14px;text-align:center;line-height:14px;}
.mob-more-sheet{position:fixed;left:10px;right:10px;bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 10px);z-index:610;background:var(--sf);border:1px solid var(--bd);border-radius:16px;padding:10px;box-shadow:0 -18px 46px rgba(0,0,0,.36);display:none;max-height:min(70vh,520px);overflow-y:auto;}
.mob-more-sheet.open{display:block;}
.mob-more-head{display:flex;align-items:center;justify-content:space-between;padding:3px 4px 10px;font-size:12px;font-weight:800;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em;}
.mob-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.mob-more-item{min-height:44px;border:1px solid var(--bd);border-radius:11px;background:var(--sf2);color:var(--tx2);font-family:inherit;font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px;padding:9px 10px;text-align:left;}
.mob-more-item.active{border-color:var(--gold);color:var(--gold);background:var(--adim);}
.mob-more-item .mbn-ic{font-size:16px;transform:none!important;}

/* ── BELL ── */
.bell-btn{width:30px;height:30px;border-radius:7px;border:1px solid var(--bd);background:transparent;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .18s;color:var(--tx3);position:relative;}
.bell-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--adim);}
.bell-cnt{position:absolute;top:-4px;right:-4px;background:var(--err);color:#fff;font-size:8px;font-weight:700;padding:0 4px;border-radius:8px;min-width:14px;text-align:center;line-height:14px;display:none;}
.bell-drop{position:absolute;top:42px;right:0;width:280px;background:var(--sf);border:1px solid var(--bd);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.3);z-index:500;overflow:hidden;display:none;}
.bell-drop.open{display:block;}
.bell-drop-hd{padding:10px 14px;border-bottom:1px solid var(--bd);font-size:11px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;}
.bell-row{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid var(--bd);cursor:pointer;transition:background .1s;}
.bell-row:hover{background:var(--sf2);}
.bell-row:last-child{border-bottom:none;}
.bell-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.bell-dot.r{background:var(--err);}
.bell-dot.w{background:var(--warn);}
.bell-dot.g{background:var(--ok);}
.bell-wrap{position:relative;}
/* #fc4f9491 (3. zgłoszenie tej samej rzeczy) — ROOT CAUSE: panel był kotwiczony do PRZYCISKU
   (`position:absolute;right:0` + sztywne `width:280px`), a dzwonek NIE stoi przy prawej krawędzi
   ekranu — po jego prawej są jeszcze motyw, konto i hamburger. Na telefonie 349px lewa krawędź
   panelu (prawa dzwonka − 280px) wychodziła POZA ekran, więc napisy były ucięte z lewej.
   Wcześniejsze podejścia poprawiały zawijanie tekstu WEWNĄTRZ panelu — to leczyło objaw, bo
   panel nadal wychodził poza ekran. Fix u źródła: na wąskim ekranie kotwiczymy do VIEWPORTU
   (`fixed` + left/right), więc panel nie ma jak wyjść poza ekran niezależnie od liczby przycisków
   obok dzwonka. `--vvt/--vvh` = realnie widoczny obszar na mobile (ten sam SSOT co modale). */
@media(max-width:600px){
  .bell-drop{position:fixed;top:calc(var(--vvt, 0px) + 50px);left:10px;right:10px;width:auto;max-width:none;max-height:calc(var(--vvh, 100dvh) - 66px);overflow:hidden auto;overscroll-behavior:contain;}
}

/* ── QUICK ACTIONS ── */
.quick-actions{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.qa-btn{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;background:var(--sf);border:1px solid var(--bd);color:var(--tx2);font-size:12px;font-weight:500;cursor:pointer;transition:all .18s;font-family:inherit;}
.qa-btn:hover{border-color:rgba(var(--brand-rgb),.4);color:var(--tx);background:var(--adim);}
.qa-ic{font-size:15px;}

/* ── EMPTY STATE ── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 16px;gap:10px;text-align:center;}
.empty-state .es-ic{font-size:32px;opacity:.5;}
.empty-state .es-title{font-size:13px;font-weight:600;color:var(--tx2);}
.empty-state .es-sub{font-size:11px;color:var(--tx3);line-height:1.5;}
.empty-state .es-btn{margin-top:4px;}

/* ── SKELETON (loader percepcyjny — zamiast pustego ekranu / golego "Ladowanie...") ── */
@keyframes skel-shimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
.skel{display:inline-block;background:var(--sf2);border-radius:6px;
  background-image:linear-gradient(90deg,rgba(var(--brand-rgb),0) 0,rgba(var(--brand-rgb),.10) 50%,rgba(var(--brand-rgb),0) 100%);
  background-size:420px 100%;background-repeat:no-repeat;animation:skel-shimmer 1.15s ease-in-out infinite;}
.skel-line{height:11px;width:100%;margin:5px 0;}
.skel-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--bd);border-radius:var(--radius);background:var(--sf);margin-bottom:8px;}
.skel-row > div{flex:1;min-width:0;}
.skel-av{width:28px;height:28px;border-radius:7px;flex-shrink:0;}
@media (prefers-reduced-motion: reduce){.skel{animation:none;}}

/* ── WIRTUALIZACJA LIST: "Pokaz wiecej" + sentinel auto-doladowania przy scrollu ── */
.list-more{padding:8px 0;}
.list-sentinel{display:block;height:1px;width:100%;}
.state-line{display:flex;align-items:center;justify-content:center;gap:8px;padding:18px 14px;color:var(--tx3);font-size:12px;text-align:center;}
.state-line.err{color:var(--err);}
.state-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12);}
.cmd-subbar{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid var(--bd);background:var(--sf2);}
.cmd-counts{display:flex;gap:5px;align-items:center;flex-wrap:wrap;}
.cmd-counts .chip{font-size:10px;padding:2px 7px;}
.conv-row-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;gap:8px;}
.conv-row-mid{display:flex;gap:5px;align-items:center;margin-bottom:5px;flex-wrap:wrap;}
.conv-preview{font-size:11px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4;}
.conv-actions{display:flex;gap:5px;align-items:center;margin-top:8px;flex-wrap:wrap;}
.conv-actions .btn{font-size:10px;padding:4px 8px;}
.conv-unread{min-width:16px;height:16px;border-radius:999px;background:var(--err);color:white;font-size:9px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;}
.channel-badge{font-size:9px;font-weight:800;border-radius:999px;padding:2px 6px;background:var(--sf2);border:1px solid var(--bd);color:var(--tx2);}
.channel-badge.www{color:var(--gold);border-color:rgba(var(--brand-rgb),.28);background:rgba(var(--brand-rgb),.08);}
.channel-badge.ig{color:#e879f9;border-color:rgba(232,121,249,.25);background:rgba(232,121,249,.08);}
.channel-badge.fb{color:#60a5fa;border-color:rgba(var(--info-rgb), .25);background:rgba(var(--info-rgb), .08);}
.channel-badge.email{color:#2dd4bf;border-color:rgba(45,212,191,.25);background:rgba(45,212,191,.08);}
.channel-badge.group,.channel-badge.int{color:#a78bfa;border-color:rgba(167,139,250,.25);background:rgba(167,139,250,.08);}
.channel-badge.client{color:#34d399;border-color:rgba(52,211,153,.28);background:rgba(52,211,153,.09);}
.sc-error{background:rgba(var(--error-rgb), .12);color:var(--err);border-color:rgba(var(--error-rgb), .28);}

/* RUN AA: Komunikacja omnichannel - jeden trójpanel na istniejącym silniku */
.kom-aa{display:flex;flex-direction:column;height:calc(100vh - 146px);min-height:580px;border:1px solid var(--bd);border-radius:14px;background:var(--sf);overflow:hidden;}
.kom-aa-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--bd);background:var(--sf);}
.kom-aa-seg{display:flex;gap:3px;padding:3px;border:1px solid var(--bd);border-radius:10px;background:var(--sf2);}
.kom-aa-seg button,.kom-aa-pill{border:0;background:transparent;color:var(--tx2);font:inherit;font-size:12px;font-weight:800;border-radius:8px;padding:7px 12px;cursor:pointer;white-space:nowrap;}
.kom-aa-seg button.active,.kom-aa-pill.active{background:var(--color-brand);color:var(--color-on-brand);}
.kom-aa-pill{border:1px solid var(--bd);background:var(--sf2);display:inline-flex;align-items:center;gap:6px;}
.kom-aa-pill .n{font-size:10px;font-weight:900;padding:0 6px;border-radius:999px;background:var(--sf3);color:var(--tx2);}
.kom-aa-select{height:32px;border:1px solid var(--bd);background:var(--sf2);color:var(--tx);border-radius:9px;padding:0 9px;font:inherit;font-size:12px;max-width:180px;}
/* #744addcd: grupy kontrolek naglowka Komunikacji. Na desktopie plyna w jednej linii (filtry po lewej,
   skroty odepchniete w prawo); na mobile kazda grupa lada w osobnym rzedzie (patrz media ≤900px). */
.kom-aa-filters,.kom-aa-selects{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;}
.kom-aa-tools{display:flex;align-items:center;gap:6px;margin-left:auto;}
.kom-aa-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(250px,350px) minmax(0,1fr) minmax(240px,310px);transition:grid-template-columns .18s ease;}
.kom-aa.q-collapsed .kom-aa-body{grid-template-columns:72px minmax(0,1fr) minmax(240px,310px);}
.kom-aa.ctx-collapsed .kom-aa-body{grid-template-columns:minmax(250px,350px) minmax(0,1fr) 34px;}
.kom-aa.q-collapsed.ctx-collapsed .kom-aa-body{grid-template-columns:72px minmax(0,1fr) 34px;}
.kom-aa-queue,.kom-aa-thread,.kom-aa-ctx{min-width:0;display:flex;flex-direction:column;overflow:hidden;}
.kom-aa-queue{border-right:1px solid var(--bd);background:var(--sf);}
.kom-aa-thread{background:var(--bg);min-height:0;}
.kom-aa-ctx{border-left:1px solid var(--bd);background:var(--sf);position:relative;}
.kom-aa-pane-head{min-height:44px;padding:9px 12px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:8px;}
.kom-aa-pane-head h3{font-size:13px;font-weight:800;margin:0;}
.kom-aa-collapse{width:28px;height:28px;border:1px solid var(--bd);background:var(--sf2);color:var(--tx2);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.kom-aa-list{flex:1;overflow-y:auto;}
/* #8b0be3c0: wyszukiwarka przy kolejce (lewa strona, tam gdzie grupy), żyje POZA .kom-aa-list,
   więc odświeżanie listy przy każdej literze nie niszczy inputu → focus/kursor zostają. */
.kom-aa-qsearch{flex:0 0 auto;padding:8px 10px;border-bottom:1px solid var(--bd);background:var(--sf);}
.kom-aa-qsearch input{width:100%;height:34px;border:1px solid var(--bd);background:var(--sf2);color:var(--tx);border-radius:9px;padding:0 10px 0 32px;font:inherit;font-size:12px;background:var(--sf2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 9px center;}
.kom-aa-qsearch input:focus{outline:none;border-color:var(--color-brand);}
.kom-aa.q-collapsed .kom-aa-qsearch{display:none;}
.kom-aa-row{width:100%;border:0;border-bottom:1px solid var(--bd);background:transparent;color:var(--tx);text-align:left;display:flex;gap:10px;padding:11px 12px;cursor:pointer;font:inherit;position:relative;}
.kom-aa-row:hover,.kom-aa-row.active{background:var(--sf2);}
.kom-aa-row.active{box-shadow:inset 3px 0 0 var(--gold);}
.kom-aa-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff;background:linear-gradient(145deg,rgba(var(--brand-rgb),.7),rgba(var(--brand-rgb),.25));flex-shrink:0;position:relative;}
.kom-aa-src{position:absolute;right:-3px;bottom:-3px;border:2px solid var(--sf);border-radius:6px;background:var(--sf2);font-size:7px;font-weight:900;padding:1px 3px;color:var(--tx2);}
.kom-aa-main{min-width:0;flex:1;}
.kom-aa-line{display:flex;align-items:center;gap:6px;min-width:0;}
.kom-aa-name{font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.kom-aa-time{margin-left:auto;font-size:10px;color:var(--tx3);white-space:nowrap;}
.kom-aa-preview{font-size:11px;color:var(--tx3);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kom-aa-tags{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:7px;}
.kom-aa-tag{font-size:10px;font-weight:700;border:1px solid var(--bd);border-radius:999px;padding:2px 7px;background:var(--sf2);color:var(--tx2);}
.kom-aa-forwarded{background:rgba(var(--info-rgb),.10);border-color:rgba(var(--info-rgb),.28);color:var(--info);}
.kom-aa-unread{width:8px;height:8px;border-radius:999px;background:var(--err);position:absolute;top:12px;right:10px;}
.kom-aa.q-collapsed .kom-aa-pane-head h3,.kom-aa.q-collapsed .kom-aa-row .kom-aa-main{display:none;}
.kom-aa.q-collapsed .kom-aa-row{justify-content:center;padding:10px 0;}
.kom-aa.q-collapsed .kom-aa-pane-head{justify-content:center;padding:9px 0;}
.kom-aa-thread-head{min-height:56px;padding:10px 14px;border-bottom:1px solid var(--bd);background:var(--sf);display:flex;align-items:center;gap:10px;}
.kom-aa-thread-title{font-size:15px;font-weight:900;}
.kom-aa-thread-sub{font-size:11px;color:var(--tx3);margin-top:2px;}
.kom-aa-thread-actions{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.kom-aa-mobile-actions{display:none;padding:8px 12px;border-bottom:1px solid var(--bd);background:var(--sf);gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.kom-aa-mobile-actions .btn{white-space:nowrap;min-height:34px;}
.kom-aa-forward-bar{padding:7px 14px;background:rgba(var(--info-rgb),.10);border-bottom:1px solid rgba(var(--info-rgb),.22);color:var(--info);font-size:12px;font-weight:800;display:flex;align-items:center;gap:7px;}
.kom-aa-history-note{margin:0 0 12px;padding:10px 12px;border:1px solid rgba(var(--info-rgb),.22);border-radius:10px;background:rgba(var(--info-rgb),.08);color:var(--tx2);font-size:12px;line-height:1.45;}
.kom-aa-history-note b{display:block;color:var(--info);margin-bottom:3px;font-size:12px;}
.kom-aa-transfer-cut{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--info);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;}
.kom-aa-transfer-cut:before,.kom-aa-transfer-cut:after{content:"";height:1px;background:rgba(var(--info-rgb),.28);flex:1;}
.kom-aa-msgs{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;}
/* af5bec36 — wiadomosci KOTWICZONE DO DOLU (jak w kazdym komunikatorze): krotka rozmowa lgnie do
   composera (pustka u gory), a scroll w GORE odslania historie. `margin-top:auto` na pierwszym dziecku
   (NIE `justify-content:flex-end` — to ucina gore i blokuje scroll-up w Chrome przy przepelnieniu):
   gdy tresc krotsza od kontenera, auto-margin spycha wszystko na dol; gdy dluzsza, margin=0 i scroll dziala
   normalnie. Dotyczy owner/recepcja (.kom-aa-msgs, klient+zespol) i klienta (.chat-msgs). */
.kom-aa-msgs>:first-child,.chat-msgs>:first-child{margin-top:auto;}
.kom-aa-composer{flex:0 0 auto;border-top:1px solid var(--bd);background:var(--sf);padding:10px 12px;position:sticky;bottom:0;z-index:2;}
.kom-aa-compose-tabs{display:flex;gap:5px;margin-bottom:8px;}
.kom-aa-compose-tabs button{border:1px solid var(--bd);background:var(--sf2);color:var(--tx2);border-radius:8px;padding:6px 10px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;}
.kom-aa-compose-tabs button.active{border-color:var(--gold);color:var(--gold);background:var(--adim);}
.kom-aa-compose-row{display:flex;gap:8px;align-items:flex-end;}
.kom-aa-compose-row textarea{flex:1;min-height:46px;max-height:130px;resize:vertical;border:1px solid var(--bd);background:var(--sf2);color:var(--tx);border-radius:11px;padding:10px 12px;font:inherit;}
.kom-aa-ctx-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px;}
.kom-aa.ctx-collapsed .kom-aa-ctx-body,.kom-aa.ctx-collapsed .kom-aa-ctx .kom-aa-pane-head h3{display:none;}
.kom-aa.ctx-collapsed .kom-aa-ctx .kom-aa-pane-head{justify-content:center;padding:9px 0;}
.kom-aa-team-card{margin:14px;border:1px solid var(--bd);border-radius:12px;background:var(--sf);padding:16px;display:flex;flex-direction:column;gap:10px;}
.kom-aa-sec{padding:9px 12px 5px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);background:var(--sf);}
.kom-aa-team-empty{padding:18px;color:var(--tx3);font-size:12px;text-align:center;}
/* #38d8d94e — paski akceptu/odrzucenia zgłoszenia (pływający na widoku + w Centrum wsparcia).
   Bazowo owijają się w słupek na wąskim ekranie; na mobile mają być w JEDNEJ LINII i mniejsze. */
.check-tkt-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;padding:8px 12px;}
.tkt-accept-bar{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
@media(max-width:900px){
  /* #38d8d94e: jedna linia + kompaktowe przyciski (na telefonie były „jeden pod drugim") */
  .check-tkt-bar{flex-wrap:nowrap;gap:5px;padding:6px 8px;max-width:calc(100vw - 16px);}
  .check-tkt-bar .ctb-lbl,.check-tkt-bar .ctb-full{display:none;}
  .check-tkt-bar .btn,.tkt-accept-bar .btn{padding:5px 9px;font-size:10px;white-space:nowrap;}
  .tkt-accept-bar{flex-wrap:nowrap;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .kom-aa{height:calc(var(--vvh, 100dvh) - 130px - env(safe-area-inset-bottom));min-height:0;border-radius:10px;}
  /* #744addcd: naglowek ZAWIJA (flex-wrap:wrap) i lada GRUPAMI w osobnych rzedach — zero poziomego
     scrolla, wszystkie kontrolki na ekranie 384px. Grupy: tryb (seg) / filtry (pigulki) / zawezanie
     (selecty) / skroty (tools). Kazda grupa = pelny rzad; kontrolki w grupie zawijaja miedzy soba. */
  .kom-aa-top{display:flex;flex-wrap:wrap;gap:8px;overflow:visible;align-items:stretch;}
  .kom-aa-top>*{flex:1 1 100%;min-width:0;}
  .kom-aa-seg button{flex:1;min-height:34px;}
  .kom-aa-filters .kom-aa-pill{flex:1 1 calc(50% - 3px);max-width:none;justify-content:center;min-height:34px;}
  .kom-aa-selects .kom-aa-select{flex:1 1 0;min-width:0;max-width:none;min-height:34px;height:34px;}
  .kom-aa-tools{margin-left:0;}
  .kom-aa-tools .btn{flex:1;min-height:34px;}
  .kom-aa-body,.kom-aa.q-collapsed .kom-aa-body,.kom-aa.ctx-collapsed .kom-aa-body,.kom-aa.q-collapsed.ctx-collapsed .kom-aa-body{display:block;position:relative;}
  .kom-aa-queue,.kom-aa-thread,.kom-aa-ctx{position:absolute;inset:0;border:0;background:var(--sf);}
  .kom-aa.mobile-thread .kom-aa-thread{position:fixed;left:0;right:0;top:0;bottom:0;z-index:650;height:var(--vvh,100dvh);display:flex;border-radius:0;background:var(--bg);}
  .kom-aa.mobile-thread .kom-aa-queue,.kom-aa.mobile-thread .kom-aa-ctx,.kom-aa.mobile-ctx .kom-aa-queue,.kom-aa.mobile-ctx .kom-aa-thread{display:none;}
  .kom-aa:not(.mobile-thread):not(.mobile-ctx) .kom-aa-thread,.kom-aa:not(.mobile-thread):not(.mobile-ctx) .kom-aa-ctx{display:none;}
  .kom-aa-queue .kom-aa-collapse,.kom-aa-ctx .kom-aa-collapse{display:none;}
  .kom-aa-thread-actions{display:none;}
  .kom-aa-mobile-actions{display:flex;}
  #kom-mobile-actions{display:inline-flex!important;margin-left:auto;}
  .kom-aa-msgs{padding:12px;}
  .kom-aa.mobile-thread .kom-aa-msgs{flex:1;min-height:0;overflow-y:auto;padding-bottom:12px;}
  .kom-aa.mobile-thread .kom-aa-composer{position:sticky;bottom:0;padding-bottom:calc(10px + env(safe-area-inset-bottom));z-index:3;}
  /* 768a987e: wejście w rozmowę = PEŁNY EKRAN (widzę tylko rozmówcę). Pasek filtrów kolejki chowamy
     w trybie wątku, a przycisk powrotu „‹" pokazujemy JUŻ od 900px (nie dopiero od 600), żeby na tablecie/
     dużym telefonie nie utknąć w rozmowie bez wyjścia do listy. Composer zostaje przyklejony na dole. */
  .kom-aa.mobile-thread .kom-aa-top{display:none;}
  .kom-aa.mobile-thread .mob-back-btn{display:flex;}
}

/* ── TABLET (≤ 960px) ── */
@media(max-width:960px){
  :root{--sw:200px;}
  /* A3 (zgł. 233d66ab/93e81cdb/0387188e, 25.07): koniec dwóch hamburgerów i dwóch „MW" na telefonie.
     Staff (owner/recepcja/instruktor) ma dolny pasek + „Więcej" = pełny dostęp -> sidebar/hamburger zbędny.
     Klient (user) ma pozycje poza paskiem (Płatności/Profil/Rezerwacja) -> zostaje JEDEN ☰ do menu.
     Awatar konta (roli/szkoły/wyloguj) zawsze w prawym górnym rogu (.mob-acct-btn). */
  .ham-btn{display:none;}
  .mobile-avatar-btn{display:none;}
  body[data-role="user"] .mobile-avatar-btn{display:flex;font-size:0;}
  body[data-role="user"] .mobile-avatar-btn::before{content:'\2630';font-size:20px;line-height:1;}
  .mob-acct-btn{display:flex;}
  /* A2+A4 (real-check 26.07, GLOBALNIE dla wszystkich ról): na telefonie topbar zostawia tylko to,
     czego user realnie używa. „Odśwież" = gest pull-to-refresh/przełączenie ekranu robi to samo;
     strzałka powrotu = systemowe „wstecz". Na desktopie oba przyciski ZOSTAJĄ. */
  #refresh-btn{display:none;}
  .back-btn.has-history{display:none;}
  #sidebar{
    /* Mobile: użyj WIDOCZNEGO obszaru (visualViewport --vvh), a nie 100vh — inaczej pasek belki
       przeglądarki wypycha stopkę .s-foot (konto + Motyw/Dokumenty/Zainstaluj/Zgłoś/Wyloguj) poza fold. */
    position:fixed;left:0;top:0;height:var(--vvh, 100dvh);z-index:300;
    transform:translateX(-105%);transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:none;
  }
  #sidebar.open{transform:translateX(0);box-shadow:8px 0 48px rgba(0,0,0,.55);}
  .sidebar-ov.open{display:block;}
  #main{width:100vw;}
  .role-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .g4{grid-template-columns:repeat(2,1fr);}
  .msgs-layout{grid-template-columns:300px minmax(0,1fr);}
  .mob-bottom-nav{display:flex;}
  .views{padding-bottom:calc(70px + env(safe-area-inset-bottom));}
}
@media(min-width:961px){
  body.sidebar-open #sidebar{display:none;}
  body.sidebar-open #main{width:100%;}
}

/* ── MOBILE (≤ 600px) ── */
@media(max-width:600px){
  .tb-left p{display:none;}
  .live-badge{display:none;}
  .tb-time{display:none;}
  .views>.view{padding:12px 10px!important;}
  .stats-grid{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .g3{grid-template-columns:1fr!important;}
  .g2{grid-template-columns:1fr!important;}
  .g4{grid-template-columns:1fr 1fr!important;}
  /* Na telefonie naglowek jest KOLUMNA, wiec `margin-left:auto` przestaje odpychac w prawo
     i zaczyna przesuwac element na drugiej osi — akcje odjechalyby do prawej krawedzi ekranu.
     Odpychanie dotyczy wylacznie ukladu poziomego, wiec tu je zdejmujemy. */
  .pg-head{flex-direction:column;align-items:flex-start;gap:8px;}
  .pg-head>h1,.pg-head>h1[hidden]+*{margin-left:0;margin-right:0;}
  /* Na telefonie „Szybka akcja" jest pelnej szerokosci w KAZDYM widoku — tak dziala Grafik,
     Uczestnicy, Zajecia i Wydarzenia. Zespol trzyma swoj pasek w `#prow-head-actions`, ktory
     w kolumnie kurczyl sie do tresci, wiec jako jedyny mial waski przycisk odsuniety od prawej
     o 235 px (zmierzone na produkcji v367). Rownamy to u zrodla, dla kazdego hosta akcji
     w naglowku, a nie dla jednego identyfikatora. */
  .pg-head>*:has(.quick-slot){width:100%;}
  .pg-head .context-quick{flex:1 1 auto;}
  .card{border-radius:10px;}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:11px;}
  table th,table td{padding:8px 6px;white-space:nowrap;}
  .topbar{padding:0 12px;height:46px;}
  .tb-left h2{font-size:12px;letter-spacing:.09em;}
  .demo-banner-txt{display:none;}
  .modal{--modal-pad:20px;padding:20px!important;width:calc(100vw - 32px)!important;}
  /* 18766731 (b): pasek akcji modala ciaśniej na telefonie — mniej pustego pola nad/pod przyciskami. */
  .modal-foot{margin-top:12px;padding-top:12px;padding-bottom:12px;}
  #modal-bug .card{padding:20px!important;margin:12px!important;}
  .role-bar{height:auto;min-height:36px;padding:5px 10px;flex-wrap:wrap;gap:3px;}
  .role-btn{padding:3px 9px;font-size:10px;}
  #view-uczniowie .students-table-wrap{display:none;}
  #students-cards{display:grid;gap:8px;}
  .stu-mobile-card{display:block;border:1px solid var(--bd);border-radius:8px;background:var(--sf);padding:10px;color:var(--tx);text-align:left;width:100%;box-sizing:border-box;font-family:inherit;}
  .stu-mobile-head{display:flex;align-items:center;gap:9px;min-width:0;}
  .stu-mobile-name{font-weight:700;font-size:13px;min-width:0;overflow-wrap:anywhere;}
  .stu-mobile-meta{font-size:11px;color:var(--tx3);margin-top:6px;line-height:1.4;overflow-wrap:anywhere;}
  .stu-mobile-groups{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
  .stu-mobile-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-top:10px;}
  #uczniowie-inst-list{gap:12px!important;}
  .inst-student-card{align-items:flex-start!important;flex-wrap:wrap!important;padding:9px 10px!important;}
  .inst-student-card .inst-student-name{flex:1 1 calc(100% - 44px);min-width:0;overflow-wrap:anywhere;line-height:1.25;}
  .inst-student-card .inst-student-phone{margin-left:36px;font-size:11px;color:var(--tx3);}
  .inst-student-card .btn{margin-left:auto;min-height:38px;}
  .inst-class-head{align-items:flex-start!important;}
  .inst-class-actions{margin-left:0!important;width:100%;justify-content:flex-start;}
  .inst-class-actions .btn{min-height:38px;}
  .dyspo-grid-wrap{overflow-x:visible!important;}
  .dyspo-grid{font-size:11px!important;}
  .dyspo-grid th:first-child{width:42px!important;}
  .dyspo-grid th{padding:3px 1px!important;font-size:10px!important;}
  .dyspo-grid td{padding:2px 1px!important;}
  .dyspo-cell{height:24px!important;border-radius:6px!important;}
  /* af5bec36/e308f662: klientowy inbox liczy wysokosc z WIDOCZNEGO obszaru (--vvh), nie 100vh —
     inaczej composer (.chat-reply, sticky) chowa sie za paskiem URL/klawiatura (jak bylo w .kom-aa). */
  .msgs-layout{grid-template-columns:1fr!important;height:calc(var(--vvh, 100dvh) - 130px - env(safe-area-inset-bottom));min-height:0;}
  .msgs-layout .chat-panel{display:none;}
  .msgs-layout.mob-panel .conv-wrap{display:none!important;}
  .msgs-layout.mob-panel .chat-panel{display:flex!important;}
  .mob-back-btn{display:flex!important;}
  .chat-hdr{align-items:flex-start;}
  .chat-title{flex-basis:calc(100% - 52px);}
  .chat-actions{width:100%;gap:6px;}
  .chat-msgs{padding:12px;}
  .msg-bbl{max-width:88%;}
  .cal-wrap{-webkit-overflow-scrolling:touch;}
  /* 93211c6e/3cac3587: mobilny tydzień „przewija do środy i dalej nic" (sobota/niedziela ucięte).
     ROOT (zmierzony na v71): kolumny `repeat(7,1fr)` NIE mogą zejść poniżej min-content treści kafli
     (~127px/dzień → grid potrzebował 938px), ale box był capnięty na min-width:840px z overflow:hidden
     → ostatnie ~100px (niedziela) obcinane i NIEOSIĄGALNE scrollem (.cal-wrap scrolluje tylko pudełko
     840, nie treść 938). Fix U ŹRÓDŁA: STAŁE kolumny 128px (≥ min-content, zero wewnętrznego ucięcia,
     czytelniejsze kafle) + min-width = dokładna suma 52+7×128=948 → grid = treść, .cal-wrap
     (overflow-x:auto, legalny kontener, guard RUN AJ) przewija DO KOŃCA (niedziela w pełni widoczna).
     04.08 (1d): ta para reguł STOI JUŻ W REGULE BAZOWEJ `.cal-grid` — bo dokładnie ten sam błąd
     wychodził na 601-948px, czyli poza tym breakpointem (zgłoszenie Jerzego o uciętej sobocie).
     Wpis zostaje jako jawne domknięcie telefonu; różnica jest tylko taka, że tu kolumna nie rośnie
     ponad 128px, bo na telefonie i tak nie ma na to miejsca. */
  .cal-grid{grid-template-columns:52px repeat(7,128px);min-width:948px;}
  .graf-global-search{position:sticky;top:-12px;z-index:30;background:var(--bg);padding:8px 0 4px;}
  /* 7078a8cc: „nie przewija w dol" na mobile — dolne wiersze grafiku chowaly sie za PLYWAJACYM (fixed)
     paskiem `.view-bottom-actions` + bottom-nav. Ta clearance (padding-bottom) byla ZBIJANA do 12px przez
     `.views>.view{padding:12px 10px!important}` (skrot padding resetuje tez padding-bottom). ID `#view-grafik`
     + `!important` wygrywa nad `.views>.view` (specyficznosc ID > 2 klas) -> ostatnie wiersze przewijaja sie
     NAD pasek (osiagalne). Tylko #view-grafik ma `.view-bottom-actions`, wiec fix jest scoped do grafiku. */
  #view-grafik{padding-bottom:calc(var(--mobile-nav-h) + var(--vba-h, 74px) + 16px + env(safe-area-inset-bottom))!important;}
  /* Plywajacy pasek akcji Grafiku. Historia w dwoch krokach:
     (1) mial zakaz zawijania plus przewijanie w poziomie, wiec 4-5 z 7 akcji bylo PRZEWINIETYCH POZA
         EKRAN — user ich nie widzial;
     (2) po naprawie zawijal sie w siatke `auto-fit`, ale przy DZIEWIECIU przyciskach i 349 px robilo
         to PIEC rzedow, czyli ~500 z 594 px ekranu — i jako element `fixed` przykrywalo caly grafik
         (zgloszenie 23b81fcb, wlasciciel DI, telefon 349x594).
     Teraz na telefonie pasek jest ARKUSZEM otwieranym jednym przyciskiem „Akcje". W arkuszu sa TE SAME
     wezly DOM co na desktopie (zero drugiego zestawu akcji, ktory po miesiacu ma o jeden przycisk mniej).
     Clearance widoku (`--vba-h`, mierzona w space-app-4.js) liczy sie z tego, co REALNIE stoi nad
     nawigacja — czyli z przycisku „Akcje", a nie z rozwinietego arkusza (arkusz jest nakladka na czas
     wyboru, nie stalym elementem ukladu).
     Chowanie paska jest PROGRESYWNE: schowek wlacza dopiero klasa `vba-sheet`, ktora space-app-4.js
     dodaje po tym, jak REALNIE zbudowal przycisk. Gdyby ten skrypt nie wstal, wlasciciel wroci do
     starego (brzydkiego) paska zamiast zostac bez zadnej akcji na telefonie. */
  .view-actions-trigger{display:flex;position:fixed;right:12px;bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 6px);z-index:120;box-shadow:0 8px 26px rgba(0,0,0,.28);}
  .view-actions-backdrop{position:fixed;inset:0;z-index:119;background:rgba(0,0,0,.45);}
  /* Ten sam warunek co dolna nawigacja (`.mob-bottom-nav`): przy otwartym modalu albo menu bocznym
     nic plywajacego nie zostaje na wierzchu. */
  body.modal-open .view-actions-trigger,body.sidebar-open .view-actions-trigger{display:none!important;}
  body.vba-sheet.vba-open .view-actions-backdrop{display:block;}
  body.vba-sheet.vba-open .view-actions-trigger{z-index:121;}
  .view-bottom-actions{position:fixed;left:12px;right:12px;bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 6px);z-index:120;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(104px,100%),1fr));gap:6px;justify-content:stretch;background:var(--sf);border:1px solid var(--bd);border-radius:12px;box-shadow:0 8px 26px rgba(0,0,0,.28);padding:7px;margin:0;max-height:min(62vh,420px);overflow-y:auto;}
  body.vba-sheet .view-bottom-actions{display:none;}
  body.vba-sheet.vba-open .view-bottom-actions{display:grid;}
  body.vba-sheet.vba-open .view-actions-sheet-head{display:block;grid-column:1/-1;padding:1px 3px 5px;font-size:10px;font-weight:800;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;}
  .view-bottom-actions .btn{min-height:34px;padding:6px 8px;font-size:10px;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .side-panel-foot{padding:9px 12px calc(9px + env(safe-area-inset-bottom));}
  .stabs{flex-wrap:wrap;overflow-x:visible;gap:4px;}
  .stab{font-size:10px;padding:6px 9px;flex:0 0 auto;}
  .card-title{font-size:8px;}
  .quick-actions{gap:6px;}
  .qa-btn{padding:8px 11px;font-size:11px;}
  .cmd-subbar{align-items:flex-start;}
  /* #744addcd (globalny sweep): stary inbox + filtry chatbota mialy TEN SAM anti-wzorzec co naglowek
     Komunikacji — nowrap+overflow-x chowal chipy filtrow poza ekran na telefonie. Dziedzicz bazowy
     flex-wrap:wrap (chipy zawijaja, wszystkie widoczne); przycisk „Wiecej" nadal chowa nadmiar. */
  .conv-filters .cf{white-space:nowrap;}
  .chat-reply{padding-bottom:calc(11px + env(safe-area-inset-bottom));}
  .conv-actions .btn{flex:1;min-width:84px;}
  /* Two-column panels: collapse on mobile */
  .team-layout{grid-template-columns:1fr!important;height:auto!important;}
  .t-sidebar{max-height:180px;overflow-y:auto;}
  .t-main{min-height:55vh;}
  .tkt-layout{grid-template-columns:1fr!important;}
  .tkt-wrap{max-height:50vh;overflow-y:auto;}
  /* Inline-expand (RUN AR 3fa78a82): gdy detal rozwinięty POD wierszem, lista przestaje być własnym
     scrollem 50vh, żeby detal płynął naturalnie dokładnie pod klikniętym zgłoszeniem, nie „kilka niżej". */
  .tkt-layout.detail-open .tkt-wrap{max-height:none;overflow:visible;}
  #tkt-detail{position:static;max-height:none;}
  .kb-layout{grid-template-columns:1fr!important;}
  .kb-catsidebar{flex-direction:row!important;flex-wrap:wrap;overflow-x:auto;max-height:none;}
  .ev-layout{grid-template-columns:1fr!important;}
  .set-grid{grid-template-columns:1fr!important;}
}
/* ── Feedback button & modal ─────────────────────────────────────────── */
.fb-btn{position:fixed;right:0;top:50%;transform:translateY(-50%);height:auto;min-height:44px;padding:10px 8px;border-radius:10px 0 0 10px;background:var(--sf);border:1px solid var(--bd);border-right:none;color:var(--tx2);font-size:11px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 14px rgba(0,0,0,.18);z-index:900;transition:background .15s,color .15s,border-color .15s;font-family:inherit;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.02em;}
.fb-btn:hover{background:var(--color-brand);color:var(--color-on-brand);border-color:var(--color-brand);}
/* Zglos MUSI byc dostepne w KAZDYM widoku i roli (feedback ownera DI 02.07: testerzy rol
   siedza glownie w czacie i nie mieli jak zglaszac). W czacie nie chowamy - podnosimy przycisk
   pod topbar, zeby nie nachodzil na pole wpisywania ani na wiadomosci. */
body[data-view="czat"] .fb-btn{top:96px;transform:none;}
/* ZAKLADKA „Zglos" JEST PRZYPIETA DO PRAWEJ KRAWEDZI EKRANU W POLOWIE WYSOKOSCI, wiec lezy nad
   prawa krawedzia tresci na KAZDYM widoku. Na Grafiku to nie jest kosmetyka: przykrywa kolumne
   dnia i mysz trafia w „Zglos" zamiast w komorke kalendarza. Do dzis bramka tego nie widziala
   przypadkiem — probkowala punkt 120 px pod gora siatki, ktory akurat wypadal NAD zakladka;
   gdy tresc zjechala nizej o wysokosc paska aktualizacji, kolizja wyszla na jaw (05.08).
   Siatka rezerwuje wiec szerokosc zakladki i przestaje pod nia wchodzic. Na telefonie zostaje
   bez zmian: tam kazdy piksel szerokosci jest potrzebny, a zakladka jest wezsza od kolumny. */
@media(min-width:601px){
  #view-grafik .cal-wrap{margin-right:34px;}
}
#fb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center;}
#fb-overlay.open{display:flex;}
#tkt-followup-overlay.open{display:flex;}
/* ⛔ max-height + overflow: BEZ nich okno rosnie razem z miniaturami zalacznikow i lista plikow
   odrzuconych, wiec na telefonie przycisk „Wyslij" wychodzi POD ekran i nie da sie go kliknac.
   Panel admina naprawil to u siebie 1:1 juz wczesniej, a panel SZKOLY zostal z bledem — czyli
   fix zyl w kopii, nie u zrodla. Tu jest zrodlo (`D-2026-08-10-SLOP-ZNALEZIONY-TO-SLOP-NAPRAWIONY`). */
#fb-modal{background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:20px;width:340px;max-width:92vw;max-height:90vh;overflow-y:auto;transition:box-shadow .15s,border-color .15s;}
#fb-modal.fb-dragover{border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.28);}
#fb-modal h3{font-size:15px;font-weight:700;margin:0 0 14px;}
.fb-types{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.fb-type-btn{border:1px solid var(--bd);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;background:var(--bg);color:var(--tx2);font-family:inherit;transition:border-color .15s;}
.fb-type-btn.sel{border-color:var(--gold);color:var(--gold);}
#fb-desc{width:100%;min-height:80px;resize:vertical;border:1px solid var(--bd);border-radius:8px;padding:8px;font-size:13px;font-family:inherit;background:var(--bg);color:var(--tx);margin-bottom:12px;box-sizing:border-box;}
.fb-context{font-size:11px;color:var(--tx3);background:var(--sf2);border:1px solid var(--bd);border-radius:8px;padding:8px 10px;margin-bottom:10px;line-height:1.45;}
.fb-file{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--sf2);border:1px solid var(--bd);border-radius:8px;padding:8px 10px;margin-bottom:12px;}
.fb-file span{font-size:11px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fb-footer{display:flex;gap:8px;justify-content:flex-end;}
.ticket-followup-box{background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:18px;width:min(430px,92vw);box-shadow:0 18px 60px rgba(0,0,0,.35);}
.ticket-followup-box h3{font-size:15px;font-weight:800;margin:0 0 6px;}
.ticket-followup-box textarea{width:100%;min-height:118px;resize:vertical;border:1px solid var(--bd);border-radius:9px;padding:10px 12px;font-size:13px;font-family:inherit;background:var(--bg);color:var(--tx);box-sizing:border-box;margin:12px 0 10px;}
.ticket-followup-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:12px;}
/* PRZYPOMNIENIE O ANKIECIE — pasek nad nawigacja, NIE nakladka na caly ekran.
   PO CO: do 27.07 `#survey-nudge` mial `position:fixed; inset:0` z przyciemnionym tlem, wiec lezal na
   CALYM ekranie — razem z dolna nawigacja. Zmierzone na produkcji (instruktor, 349x594): klik w „Grafik"
   trafial w `#survey-nudge`, a nie w przycisk. Pierwszy klik uzytkownika tylko zamykal przypomnienie
   zamiast zrobic to, co user chcial („zjedzony klik" — ta sama klasa bledu co modal ankiety 27.07).
   TERAZ: kontener nie lapie zdarzen (`pointer-events:none`), lapie je wylacznie sama karta, a pasek
   siedzi NAD dolna nawigacja, wiec jej nie zaslania. Widocznosc bez zmian: karta ma pelne tlo i cien. */
/* PASEK STOI NAD TYM, CO JUZ STOI NAD NAWIGACJA (04.08 — czwarty raz ta sama klasa na tym elemencie:
   27.07 dolna nawigacja, 02.08 tresc ekranu, 03.08 arkusz „Wiecej", teraz przycisk akcji widoku).
   Zmierzone na produkcji, recepcja 390x780: karta ankiety zajmowala 535-708 px, przycisk „Szybka akcja"
   682-716 px, a `elementFromPoint` w srodku przycisku oddawalo KARTE — czyli klik nie mial prawa dojsc.
   Dlatego offset nie jest juz stala: bierze `--vba-h`, czyli realna wysokosc tego, co pasek akcji
   zajmuje nad nawigacja (liczy ja `space-app-4.js`). Nowy element w tym pasie nie bedzie wymagal
   kolejnej poprawki tutaj — wystarczy, ze wliczy sie do tego samego pomiaru. */
#survey-nudge{position:fixed;left:0;right:0;bottom:calc(72px + var(--vba-h,0px) + env(safe-area-inset-bottom,0px));z-index:4000;display:flex;justify-content:center;padding:0 12px;pointer-events:none;}
/* Miejsce POD trescia, gdy pasek przypomnienia stoi na ekranie. Bez tego ostatni element listy
   (np. przycisk rezerwacji terminu) laduje pod paskiem i nie da sie go klilknac ani doscrollowac —
   zmierzone dowodem z produkcji 02.08 na 414x739. Wysokosc podaje JS, bo tresc paska bywa dluzsza;
   wartosc zapasowa dziala, gdyby pomiar nie zdazyl. */
body.has-survey-nudge .views{padding-bottom:calc(var(--survey-nudge-space, 150px) + 16px);}
#survey-nudge > .card{pointer-events:auto;max-width:460px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.45);padding:16px;}
/* PASEK USTEPUJE OTWARTEMU MENU I MODALOWI (03.08, dowod z produkcji: `test:mvp-role-flow-prod`).
   Naprawa z 27.07 zdjela pasek z dolnej nawigacji, a 02.08 z tresci ekranu — ale arkusz „Wiecej"
   (z-index 610) wysuwa sie DOKLADNIE w to miejsce, a pasek ma 4000, wiec klik w dolne pozycje menu
   trafial w przypomnienie o ankiecie. To ta sama regula, ktora `.view-actions-trigger` ma juz nizej:
   element plywajacy nie moze lezec na otwartym panelu nawigacji. */
body.mob-more-open #survey-nudge,body.sidebar-open #survey-nudge,body.modal-open #survey-nudge{display:none!important;}
/* PIATY RAZ TA SAMA KLASA — I DLATEGO TA REGULA NIE WYMIENIA JUZ ELEMENTU Z NAZWY (07.08).
   Zmierzone dowodem z produkcji: wlasciciel 390 i 1440, recepcja 349 i 390 — klik w pozycje menu
   „Szybka akcja" w Grafiku trafial w karte przypomnienia o ankiecie, a nie w pozycje. Playwright
   nazwal winowajce wprost: `<div class="card"> from <div id="survey-nudge"> intercepts pointer events`.
   Poprzednie cztery naprawy dokladaly po jednej klasie na `body` (`mob-more-open`, `sidebar-open`,
   `modal-open`) — a menu szybkich akcji to `<details>`, ktore ZADNEJ z nich nie ustawia, wiec pasek
   znowu lezal na wierzchu. Zamiast czwartej klasy pytamy o STAN: cokolwiek plywajacego jest otwarte,
   pasek ustepuje. Nowe menu tej klasy dostanie to za darmo, bez kolejnej poprawki tutaj. */
body:has(.context-quick[open]) #survey-nudge{display:none!important;}
/* SZOSTY RAZ TA SAMA KLASA — I TYM RAZEM PRZYCZYNA BYLA INNA NIZ W POPRZEDNICH PIECIU (07.08).
   Zmierzone na produkcji, rola prowadzacego, 390 px: przycisk „Zapisz dyspozycyjnosc" jest widoczny,
   wlaczony i w kadrze, a `document.elementFromPoint` nad jego srodkiem zwraca kartę z `#survey-nudge`
   (`position:fixed`, `z-index:4000`). ⛔ NIC NIE BYLO OTWARTE, wiec zadna z pieciu poprzednich regul
   („ustap menu", „ustap modalowi", „ustap czemukolwiek plywajacemu") nie miala prawa zadzialac.
   PRAWDZIWA PRZYCZYNA: `body.has-survey-nudge .views{padding-bottom:…}` chroni tresc PRZEWIJANA,
   ale NIE chroni paska PRZYKLEJONEGO do dolu — element `position:sticky;bottom:0` parkuje przy
   dolnej krawedzi swojego kontenera, czyli dokladnie POD przypomnieniem. Margines tresci nie
   przesuwa elementu przyklejonego.
   SKUTEK DLA CZLOWIEKA: prowadzacy na telefonie nie mogl zapisac wlasnej dyspozycyjnosci.
   NAPRAWA U ZRODLA: pasek akcji przyklejony do dolu dostaje KLASE (a nie styl wpisany przy
   elemencie, ktorego zaden arkusz nie dosiegnie — `feedback_styl_przy_elemencie_wygrywa_z_arkuszem`),
   a klasa ustepuje przypomnieniu o jego wlasna, MIERZONA wysokosc. Kazdy nastepny pasek tej klasy
   dostanie to za darmo. */
.sticky-actions{position:sticky;bottom:0;margin-top:14px;display:flex;gap:8px;justify-content:flex-end;align-items:center;padding:10px 2px 2px;background:linear-gradient(to top,var(--sf) 72%,transparent);z-index:1;}
body.has-survey-nudge .sticky-actions{bottom:calc(var(--survey-nudge-space, 150px) + 8px);}
@media(min-width:601px){
  #survey-nudge{bottom:16px;}
}

/* GRAFIK · LISTA — style wiersza w JEDNYM miejscu zamiast w kazdym wierszu z osobna.
   PO CO: `renderGrafLista()` sklejal HTML z pelnym `style="..."` przy KAZDYM zajeciu, wiec przy 300
   zajeciach przegladarka dostawala 300 kopii tych samych regul do sparsowania i przeliczenia.
   Pomiar mobile 390 / CPU 6x / 300 zajec (27.07): sam render Listy kosztowal 219 ms.
   Klasy sa 1:1 przepisane z tamtych stylow inline — wyglad ma sie NIE zmienic. */
.gl-day{margin-bottom:14px;}
/* Pasek zawezenia listy do dzisiaj (blok D). Styl w klasie, nie w atrybucie — bramka
   `test:perf-grafik-wejscie` pilnuje, zeby powtarzalna czesc listy nie niosla wlasnych regul. */
.gl-scope{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;background:var(--sf2);border:1px solid var(--bd);border-radius:var(--radius);}
.gl-scope-txt{font-size:12px;font-weight:600;}
.gl-day--scope{margin-bottom:10px;}
.gl-empty{padding:40px 24px;}
.gl-empty-act{margin-top:12px;}
.gl-day-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bd);}
.gl-day-h.is-today{color:var(--gold);}
.gl-day-h .gl-date{font-weight:500;}
.gl-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--bd);cursor:pointer;}
.gl-row.is-pending{border-left:3px dashed var(--gold);padding-left:8px;background:rgba(var(--brand-rgb),.06);}
.gl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--gold);}
.gl-time{font-size:11px;color:var(--tx3);width:96px;flex-shrink:0;font-variant-numeric:tabular-nums;}
.gl-main{flex:1;min-width:0;}
.gl-title{font-size:13px;font-weight:600;}
.gl-title .gl-instr{font-weight:400;color:var(--tx3);}
.gl-place{font-size:10px;color:var(--tx3);margin-top:2px;}

@media(min-width:601px){
  #students-cards{display:none;}
}
/* ══ SZYBKIE AKCJE — JEDEN PRZYCISK NA WIDOK (04.08) ══════════════════════════════════════
   Wlasciciel i recepcja mieli na kazdym ekranie inny pasek przyciskow, a czesc dzialan chowala
   sie pod „Wiecej". Teraz kazdy widok ma JEDEN przycisk, a w srodku wszystkie akcje tego widoku:
   najpierw cztery ulubione, potem reszta. Kolejnosc ustawia sobie kazde konto osobno.
   Rejestr akcji: `space-core.js` §QUICK_ACTIONS. */
.quick-slot{display:contents;}
/* Host z wlaczonym menu chowa stary pasek. Slot jest jego dzieckiem, wiec zostaje widoczny.
   Zadnego `!important` — reguly na kontenerze wystarczy, bo kod przelacza te przyciski
   wylacznie miedzy `display:none` a pustym stringiem (czyli oddaje je arkuszowi). */
.qa-on>:not(.quick-slot){display:none;}
.context-quick{position:relative;align-self:stretch;display:flex;}
/* 1c (Jerzy 04.08): „przycisk na tle innych jest za maly (…) on ma byc widoczny i ladnie wkomponowany".
   Do dzis to byl `btn btn-p btn-sm`, czyli NAJMNIEJSZY wariant, stojacy obok pol filtrow o wysokosci
   34-38 px — wygladal jak dodatek, a jest glowna akcja widoku. Wysokosc bierze sie z REGULY, nie
   z wpisanej liczby: `align-self:stretch` na `.context-quick` + `height:100%` tutaj znaczy „tyle,
   ile ma najwyzszy sasiad w tym samym rzedzie", wiec przycisk zostanie rowny takze wtedy, gdy
   kiedys zmienimy wysokosc pol. `min-height` jest tylko podloga na wypadek rzedu bez sasiadow. */
.context-quick>.qa-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:stretch;min-height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--color-brand);background:var(--color-brand);color:var(--color-on-brand);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:-.1px;white-space:nowrap;cursor:pointer;list-style:none;transition:filter .18s,box-shadow .18s;box-shadow:var(--shadow-sm);}
.context-quick>.qa-trigger:hover{filter:brightness(1.08);}
.context-quick>.qa-trigger:focus-visible{outline:2px solid var(--tx);outline-offset:2px;}
.qa-trigger-ic{font-size:13px;line-height:1;}
.qa-trigger-ar{font-size:10px;opacity:.75;margin-left:2px;}
.context-quick[open]>.qa-trigger{box-shadow:0 0 0 3px var(--adim);}
.context-quick>.qa-trigger::-webkit-details-marker{display:none;}
.context-quick>.qa-trigger::marker{content:"";}
/* 2b: pasek nawigacji kalendarza. Przycisk akcji idzie na sam koniec linii — `margin-left:auto`
   dziala niezaleznie od tego, ile przyciskow ma dany tryb (tydzien ma piec, miesiac trzy). */
/* 1c/2b: cala linia ma JEDNA wysokosc. Przyciski nawigacji kalendarza to `btn-sm` (~23 px na
   komputerze), wiec dopasowanie akcji glownej DO NICH znaczyloby powtorzenie bledu, ktory Jerzy
   zglosil („przycisk na tle innych jest za maly"). Zamiast tego podnosimy cala linie do wygodnej
   wysokosci i akcja jest jej ROWNA — czyli „widoczna i ladnie wkomponowana", a nie doklejona. */
.graf-navbar{display:flex;gap:6px;margin-bottom:10px;align-items:stretch;flex-wrap:wrap;}
.graf-navbar>.btn,.graf-navbar>span.btn{min-height:34px;}
/* UWAGA NA `display:contents` GNIAZDA: `.context-quick` jest w DRZEWIE dzieckiem `.quick-slot`,
   a nie paska — wiec selektor `>` od paska go NIE LAPIE, choc w ukladzie stoi tuz obok przyciskow.
   Pierwsza wersja tej reguly uzywala `>` i przycisk zostawal po LEWEJ (zglosil Jerzy 05.08). */
.graf-navbar .context-quick{margin-left:auto;}
/* 3a: linia Zajec — zakres z lewej, akcje z prawej. Jedna linia zamiast czterech zakladek plus
   osobnego przycisku nad nimi. */
.zaj-headbar{display:flex;gap:8px;margin-bottom:12px;align-items:stretch;flex-wrap:wrap;}
.zaj-headbar>.btn{min-height:34px;}
/* Lista zakresu Zajec — waska, bo ma cztery krotkie pozycje, i rownej wysokosci z akcja obok. */
.zaj-scope-sel{width:auto;min-width:150px;height:34px;padding:0 30px 0 12px;font-size:12px;}
.zaj-headbar .context-quick{margin-left:auto;}
/* 2d: nagłówek, którego CAŁA zawartość przeszła do menu, nie zostawia po sobie pustego paska. */
.pg-head.qa-on{display:none;}
/* 2c: naglowek Uczestnikow to jeden rzad — pole szukania rosnie, przycisk bierze tyle, ile potrzebuje.
   Ukryty tytul (`h1[hidden]`) nie zajmuje sciezki, wiec siatka ma realnie dwie kolumny. */
.stu-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;}
.stu-head .stu-search-big{margin:0;}
.stu-head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;align-self:stretch;}
@media(max-width:599px){
  /* Telefon: przycisk schodzi POD pole i bierze cala szerokosc — obok siebie zrobilyby sie dwa
     scisniete kikuty, a pole szukania jest tu wazniejsze od jednego klikniecia w menu. */
  .stu-head{grid-template-columns:minmax(0,1fr);}
  .stu-head-actions{width:100%;}
  .stu-head-actions .context-quick{flex:1 1 100%;}
  .context-quick>.qa-trigger{width:100%;}
  .graf-navbar .context-quick{flex:1 1 100%;margin-left:0;}
}
.context-quick>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.context-quick>summary::-webkit-details-marker{display:none;}
.context-quick>summary::marker{content:"";}
/* ZAMKNIETE MENU MA NIE ISTNIEC W UKLADZIE. Bez tego przegladarka i tak liczy dla niego pudelko:
   zmierzone przy 320 px — przyklejony do dolu prostokat 89 px, ktorego nikt nie widzi, a ktory
   ma wlasny obszar na ekranie. To ta sama klasa co „niewidoczny element lapie kliki". */
.context-quick:not([open]) .qa-menu{display:none;}
/* `max-height` jest po to, zeby menu ZAWSZE zmiescilo sie na ekranie — takze wtedy, gdy ani nad,
   ani pod przyciskiem nie ma dosc miejsca. Wtedy przewija sie w sobie, a nie wychodzi poza kadr. */
.qa-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:max(240px,100%);max-width:min(330px,92vw);max-height:72vh;overflow-y:auto;background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius);box-shadow:0 18px 44px rgba(0,0,0,.28);padding:8px;}
.context-quick--up .qa-menu{top:auto;bottom:calc(100% + 6px);}
/* KIERUNEK W POZIOMIE TEZ WYNIKA Z POMIARU (05.08, zrzut Jerzego z Zespolu). Menu jest przypiete
   PRAWA krawedzia do przycisku i rozciaga sie w LEWO. Gdy przycisk stoi blisko lewej krawedzi
   tresci, menu wchodzilo POD PASEK BOCZNY i polowa pozycji byla nieklikalna. Przy braku miejsca
   po lewej przypinamy je krawedzia LEWA — tak samo, jak `--up` robi to w pionie. */
.context-quick--left .qa-menu{right:auto;left:0;}
/* 05.08: naglowek menu stracil tytul i opis („Szybka akcja — najczestsze dzialania w tym widoku”).
   Zostal sam przycisk zamkniecia, dosuniety do prawej. Tlumaczenie oczywistego wydluzalo menu. */
.qa-head{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 2px 4px;}
.qa-head b{display:block;font-size:13px;}
.qa-head small{display:block;color:var(--tx3);font-size:10px;margin-top:2px;}
.qa-close{background:none;border:0;color:var(--tx3);font-size:18px;line-height:1;cursor:pointer;padding:0 4px;min-height:32px;}
.qa-group{color:var(--tx3);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:8px 6px 4px;}
.qa-group+.qa-group{padding-top:2px;}
/* Pozycja menu to JEDNA linia z etykieta. Bez zdania pod spodem (polecenie Jerzego 05.08). */
.qa-item{display:flex;align-items:center;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:9px 10px;min-height:38px;cursor:pointer;color:var(--tx);font-family:inherit;font-size:13px;font-weight:600;}
/* „Wszystkie akcje” rozwijaja sie na zadanie — ulubione widac od razu. */
.qa-more{border-top:1px solid var(--bd);margin-top:6px;padding-top:4px;}
.qa-more>summary{list-style:none;cursor:pointer;color:var(--tx3);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:7px 10px;display:flex;align-items:center;gap:6px;}
.qa-more>summary::-webkit-details-marker{display:none;}
.qa-more>summary::marker{content:"";}
.qa-more>summary::after{content:"▾";margin-left:auto;font-size:10px;}
.qa-more[open]>summary::after{content:"▴";}
.qa-more>summary:hover{color:var(--tx);}
.qa-item:hover,.qa-item:focus-visible{background:var(--sf2);}
/* Zostaja jako zabezpieczenie dla ewentualnej starej tresci w cache przegladarki; nowy render
   nie uzywa juz ani `b`, ani `small` — pozycja to jedna linia (polecenie Jerzego 05.08). */
.qa-item b{font-size:13px;font-weight:600;}
.qa-item small{display:none;}
.qa-empty{padding:10px 6px;font-size:11.5px;color:var(--tx3);}
/* Ustawienia kolejnosci (zakladka „Szybkie akcje") */
.qa-cfg-row{display:grid;grid-template-columns:18px 22px minmax(0,1fr);align-items:center;gap:8px;border:1px solid var(--bd);background:var(--sf2);border-radius:11px;padding:8px 9px;}
.qa-cfg-list{display:grid;gap:6px;margin:9px 0 16px;}
.qa-cfg-row b{font-size:12px;}
.qa-cfg-row>div{display:flex;gap:4px;}
.qa-star{color:var(--gold);font-size:14px;}
/* 06.08: uchwyt z LEWEJ i gwiazdka jako jedyny przelacznik ulubionych (polecenie Jerzego).
   `touch-action:none` na uchwycie jest warunkiem dzialania na telefonie — bez tego przegladarka
   uznaje ruch palcem za przewijanie strony i przeciagniecie nigdy sie nie zaczyna. */
.qa-grip{cursor:grab;color:var(--tx3);font-size:15px;line-height:1;user-select:none;touch-action:none;padding:2px 1px;}
.qa-grip:active{cursor:grabbing;}
.qa-star-btn{border:0;background:none;padding:0 2px;font-size:15px;line-height:1;cursor:pointer;color:var(--gold);}
.qa-star-btn.muted{color:var(--tx3);}
.qa-star-btn:hover{transform:scale(1.12);}
.qa-cfg-row{cursor:default;}
.qa-cfg-row:focus-visible{outline:2px solid var(--brand,#5b8cff);outline-offset:2px;}
.qa-cfg-row.qa-dragging{opacity:.65;border-color:var(--brand,#5b8cff);box-shadow:0 6px 18px rgba(0,0,0,.28);}
.qa-star.muted{color:var(--tx3);}
@media(max-width:599px){
  .context-quick>summary{width:100%;justify-content:center;}
  .context-quick[open]::before{content:"";position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.5);}
  /* ARKUSZ KONCZY SIE NAD DOLNA NAWIGACJA, nie pod nia (04.08 — CZWARTY raz ta sama klasa bledu:
     element lezacy na innym zjada klikniecie). Zmierzone: `#mob-bottom-nav` przechwytywal klik
     w OSTATNIA pozycje menu, wiec „Kategorie" w Zajeciach byly na telefonie nieklikalne — menu
     wygladalo na w pelni widoczne, a dolna pozycja po prostu nie reagowala. Zlapala to bramka
     (`test:course-families-play`), nie czlowiek. Nawigacji NIE chowamy: user ma widziec, gdzie
     jest — arkusz po prostu przestaje pod nia wchodzic. */
  .qa-menu{position:fixed;z-index:90;left:0;right:0;top:auto;bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));width:auto;max-width:none;max-height:70vh;overflow:auto;border:0;border-radius:20px 20px 0 0;padding:12px 12px 16px;}
  .context-quick--up .qa-menu{top:auto;bottom:0;}
  /* Na telefonie menu jest arkuszem na cala szerokosc, wiec kierunek poziomy nie ma znaczenia.
     Reguly zdejmujemy jawnie, bo klasa moze zostac po zmianie szerokosci okna. */
  .context-quick--left .qa-menu{left:0;right:0;}
  .qa-item{min-height:52px;border-bottom:1px solid var(--bd);border-radius:0;}
  .qa-item:last-child{border-bottom:0;}
  .qa-cfg-row{grid-template-columns:20px minmax(0,1fr);}
  .qa-cfg-row>div{grid-column:2;}
}
/* JEDNA WARSTWA ZWIJANIA, NIE DWIE (04.08). Grafik mial juz na telefonie wlasny arkusz: przycisk
   „Akcje" chowal caly pasek (`space-app-4.js`, zgloszenie 23b81fcb — dziewiec przyciskow zajmowalo
   500 z 594 px). Gdy widok ma szybkie akcje, to ONE sa tym zwinieciem — inaczej user musialby
   otworzyc arkusz, zeby zobaczyc przycisk, ktory otwiera menu. Pasek zostaje przypiety do dolu
   (tam jest w zasiegu kciuka), ale traci wyglad arkusza: to juz tylko jeden przycisk.
   Paski BEZ szybkich akcji dzialaja dokladnie jak dotad. */
/* 2b (04.08): od kiedy gniazdo przycisku stoi W LINII KALENDARZA, dolny pasek nie ma juz czego
   pokazywac — wszystkie jego pozycje sa w menu. Pusta, przyklejona do dolu ramka bylaby dokladnie
   tym balastem, ktory ten run zdejmuje, a na telefonie zabieralaby jeszcze miejsce nad nawigacja.
   Rola BEZ szybkich akcji (prowadzacy, klient) nie dostaje klasy `qa-on`, wiec widzi pasek jak dotad. */
.view-bottom-actions.qa-on{display:none;}
@media(max-width:600px){
  body.vba-sheet .view-bottom-actions.qa-on{display:none;}
}
@media print {
  .topbar,.sidebar,.bottom-nav,.modal-ov,.toast-wrap,#sp-ov,#stud-qp,#qp-ov,.bell-wrap,#fb-modal { display:none!important; }
  .main-content { margin:0!important; padding:0!important; }
  #view-content { overflow:visible!important; }
  button[onclick*="window.print"] { display:none!important; }
  body { background:#fff!important; color:#000!important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   KOLOR GRUPY I LOKALIZACJI — POLE Z PODGLĄDEM NA AKTUALNEJ PALECIE (08.08)
   ═══════════════════════════════════════════════════════════════════════════════════
   Kolor grupy to DANE szkoły, a nie motyw — ale ląduje na tle, które zmienia się razem z paletą
   człowieka. Pole mówi więc trzy rzeczy naraz: czy własny kolor w ogóle jest, jak wygląda TU
   I TERAZ, i czy da się go zobaczyć. Bez tego szkoła ustawia różowy balet, który znika na
   jasnym espresso, i dowiaduje się o tym od rodzica. */
.color-field .color-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx2);
  text-transform:none;letter-spacing:normal;cursor:pointer;margin:0 0 8px;}
.color-field input[type="color"]:disabled{opacity:.45;cursor:not-allowed;}
.color-preview{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px;min-height:20px;}
.color-swatch{width:34px;height:18px;border-radius:6px;border:1px solid var(--bd);flex:0 0 auto;}
.color-swatch--small{width:18px;height:12px;vertical-align:middle;margin-left:4px;}
.color-note{font-size:12px;color:var(--tx3);line-height:1.4;}
.color-warning{font-size:12px;color:var(--warn);line-height:1.4;flex:1 1 100%;}
.color-fix{background:none;border:0;border-bottom:1px solid var(--warn);color:var(--warn);
  font:inherit;font-size:12px;padding:0;cursor:pointer;}
.color-fix:hover{color:var(--tx);border-bottom-color:var(--tx);}

/* ═══════════════════════════════════════════════════════════════════════════════════
   WYBÓR PALETY — EKRAN WYGLĄDU (08.08, `D-2026-08-08-PALETA-PER-CZLOWIEK`)
   ═══════════════════════════════════════════════════════════════════════════════════
   Paleta jest wyborem CZŁOWIEKA, więc kafelki muszą pokazywać, co realnie dostanie: obie połowy
   (ciemną i jasną) obok siebie, na prawdziwych wartościach z arkusza. Opis słowem nie wystarcza —
   „Śliwka" nic nie znaczy, dopóki się jej nie zobaczy. */
.palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px;}
.palette-tile{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--sf2);
  border:1px solid var(--bd);border-radius:var(--radius);cursor:pointer;text-align:left;
  color:var(--tx);font:inherit;transition:border-color .15s ease;}
.palette-tile:hover{border-color:var(--color-border-strong);}
.palette-tile[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);}
.palette-pair{display:flex;height:34px;border-radius:6px;overflow:hidden;border:1px solid var(--bd);}
.palette-half{flex:1;display:flex;align-items:center;justify-content:center;}
.palette-dot{width:12px;height:12px;border-radius:50%;}
.palette-name{font-size:12px;font-weight:700;}
.palette-desc{font-size:12px;color:var(--tx3);line-height:1.35;}
.palette-flag{font-size:12px;color:var(--gold);}