/* ════════════════════════════════════════════════════════════════════════
   MOTYW „KAMIEŃ" — wygląd całego panelu w jednym pliku
   16.09.2026

   SKĄD: Dorota 16.09 na WhatsAppie, po obejrzeniu pierwszej wersji (beże
   i złoto): „Te beże. Złoto niekoniecznie musi być. Bardziej bym szła
   w takie surowe matowe jasne kolory, inspiracją kamieniem naturalnym".
   Paweł: „ekstraklasa w brandingu i grafice, ma być luxury, ale i ergonomia".

   CO ROBI: nakłada na istniejące ekrany jedną paletę — trawertyn, wapień,
   piaskowiec, bazalt — jeden zestaw krojów i jeden kształt przycisków.
   Wszystko MATOWE: płaskie wypełnienia, bez połysków i poświat. Jej znak „dd"
   w panelu jest w wersji kamiennej (`znak-maly.png`, pełny pierścień wycięty
   z `logo.png`; złota wersja obok: `znak-kolo-zloty.png`).
   NICZEGO nie zmienia w działaniu — to tylko wygląd.

   JAK DZIAŁA: każdy ekran ma swój blok <style> z barwami wpisanymi osobno.
   Ten plik wczytuje się PO nich, a jego reguły zaczynają się od `html`,
   więc wygrywają z regułami ekranów także wtedy, gdy ekran dokleja style
   później (listwa, pasek logowania, okienko).

   JAK COFNĄĆ: usunąć z ekranu linijkę <link … motyw.css> (i blok „PIERWSZA
   KLATKA" nad nią). Poprzednia wersja ze złotem: `motyw-szampan.css.bak-16-09`.

   ⚠️ KONTRAST: każda para tekst/tło sprawdzona wzorem WCAG AA (≥ 4,5:1).
      Zmieniasz barwę → puść `python3 WYGLAD-LUX/kontrast.py`.
   ════════════════════════════════════════════════════════════════════════ */

/* ── KROJE PISMA (z tego serwera — nagłówek bezpieczeństwa nie wpuszcza
      fontów z zewnątrz ani wklejonych w kod) ─────────────────────────── */
/* ⚠️ 19.09.2026, Paweł: „czcionka nie jest nieczytelna bo jest mała,
   tylko chujowa". Wybrał Source Sans 3 (porównanie pięciu krojów).
   Panel miał dwa kroje: Manrope w tekście i szeryfowy Noto Serif Display
   w nagłówkach — ten drugi ma cienkie, ozdobne kreski i to on męczył oczy.
   Teraz JEDEN krój na wszystko: spokojny, mocny, dobrze trzyma liczby.
   ⛔ Strona salonu dla klientek ma własne kroje (Gabinet Text/Display
   w `demo/`) i ta zmiana jej NIE dotyczy — o niej decyduje Dorota. */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;
  src:url(fonty/source-sans-3-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;
  src:url(fonty/source-sans-3-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:200 900;font-display:swap;
  src:url(fonty/source-sans-3-latin-wght-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:200 900;font-display:swap;
  src:url(fonty/source-sans-3-latin-ext-wght-italic.woff2) format('woff2');
  unicode-range:U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}

/* ── PALETA „KAMIEŃ" ──────────────────────────────────────────────────────
   Nazwy zmiennych te same, których używają ekrany — dzięki temu ekrany
   przejmują nowe barwy bez żadnej zmiany w ich kodzie. */
html:root{
  --plane:#ECE8E1;          /* tło strony — wapień */
  --plane-2:#E3DDD3;        /* tor przełączników, wgłębienia */
  --surface:#FAF8F5;        /* karty — jasny trawertyn */
  --surface-2:#F3F0EA;      /* pola i wiersze pod kursorem */
  --ink:#2E2A26;            /* bazalt */
  --ink2:#544D47;           /* grafit ciepły */
  --muted:#625B54;          /* szary kamień */
  --grid:#E7E2DA;           /* linie wewnątrz kart */
  --axis:#D5CEC3;           /* ramki pól i przycisków */
  --ring:rgba(84,74,62,.13);
  --accent:#6B5E52;         /* czynność: przyciski — taupe */
  --accent-deep:#5C5046;
  --accent-soft:#ECE6DD;    /* wybrane / pod kursorem */
  --brass:#9D8F7E;          /* piaskowiec — ikony, ozdoby, postęp */
  --brass-tekst:#665848;    /* piaskowiec do tekstu (≥ 5:1) */
  --bazalt:#3F3A35;         /* przycisk chwili, Platinum */
  --kamien-1:#E9E3D9; --kamien-2:#CFC6B8; --kamien-3:#A89C8C;
  --ochra:#A88A52;          /* matowa ochra — „złota ramka" ważnych pytań */
  --good:#3E6B48; --good-tlo:#E9EFE7;
  /* Czerwień alarmowa zostaje pełna (jak dotąd w panelu) — zaległe pieniądze
     i błędy mają być widoczne od razu; to kolor funkcyjny, nie ozdoba. */
  --crit:#C23B3B; --crit-tlo:#FBF0ED;
  --warn:#76571A; --warn-tlo:#F3EDE1;

  --sans:'Source Sans 3',-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:'Source Sans 3',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --r-karta:16px; --r-btn:10px;
  --cien-1:0 1px 1px rgba(46,42,38,.04);
  --cien-2:0 1px 2px rgba(46,42,38,.05),0 10px 24px -20px rgba(46,42,38,.28);
  --cien-3:0 1px 2px rgba(46,42,38,.06),0 18px 36px -26px rgba(46,42,38,.34);
  --pasek-kamien:linear-gradient(90deg,#8C7F70 0%,#B3A898 100%);
  /* Ziarno kamienia — bardzo delikatne, żeby płaszczyzna nie była „plastikowa". */
  --ziarno:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .28 0 0 0 0 .24 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── PODSTAWA ─────────────────────────────────────────────────────────── */
html body{
  font-family:var(--sans);color:var(--ink);background:var(--plane);
  font-feature-settings:'kern' 1,'lnum' 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* Tło: wapień z ledwie widocznym ziarnem i jaśniejszym światłem od góry.
   Osobna, przyklejona warstwa — na iPadzie `background-attachment:fixed`
   potrafi szarpać przy przewijaniu, a warstwa `fixed` chodzi płynnie. */
html body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    var(--ziarno),
    radial-gradient(1200px 560px at 70% -10%,#F5F2ED 0%,rgba(245,242,237,0) 60%),
    var(--plane)}
/* Jasny pas pod listwę malujemy SAMYM ARKUSZEM, zanim ruszy JavaScript —
   pierwsza klatka strony ma być już docelowa (bez błysku przy zmianie modułu). */
@media(min-width:901px){
  html::before{content:'';position:fixed;left:0;top:0;bottom:0;width:112px;z-index:-1;
    background:#E4DFD7;box-shadow:inset -1px 0 0 #D5CEC3}
}
/* Miejsce na pasek „kto pracuje" wygląda jak pasek, zanim się wypełni. */
html body .log-kto-miejsce:empty{background:rgba(250,248,245,.9);border-bottom:1px solid #DCD5CA}
html ::selection{background:#DDD5C8;color:#2E2A26}
html :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html body h1{font-family:var(--display);font-weight:700;letter-spacing:-.015em;color:var(--ink)}
html body h2,html body h3{font-family:var(--display);font-weight:650;letter-spacing:-.008em}
html body .wrap > h1{font-size:34px;line-height:1.12;margin:6px 0 6px}
html body .wrap > .pod,html body .pod{color:var(--muted);font-size:14.5px;line-height:1.6}
html .wrap{padding-top:22px}
/* Rama w tym samym miejscu na każdym module. Karta klientki miała własną,
   węższą kolumnę (760 px) i przy przejściu na „Przyjmij" okruszki i tytuł
   skakały w bok. Teraz kolumna ma szerokość jak wszędzie, a węższy zostaje
   tylko sam formularz — wygodny do czytania przy fotelu. */
@media(min-width:901px){
  html body .pulpit-tresc .wrap.wrap-karta{max-width:1080px;padding-left:18px;padding-right:18px}
  html body .wrap.wrap-karta > #komunikat,
  html body .wrap.wrap-karta > #widok{max-width:760px}
}

/* Liczby w kolumnach mają równą szerokość — kwoty stoją jedna pod drugą. */
html .kwota,html .liczba b,html .kafel .w,html .duza,html td.pr,html .r-wiersz b,
html .teraz-godz,html .godz,html .wiz-godz,html .os-godz,html .tdz-u{font-variant-numeric:tabular-nums lining-nums}

/* Na ekranie „Dziś" nagłówek „Panel gabinetu" dublował powitanie. */
html .wrap:has(#widok .ekran-glowa) > h1,
html .wrap:has(#widok .ekran-glowa) > .pod{display:none}

/* ── BEZ BŁYSKU PRZY WEJŚCIU NA EKRAN ────────────────────────────────────
   Listwę modułów dokleja JavaScript na końcu strony. Treść czeka
   (przezroczysta) do chwili, gdy rama jest gotowa, i wchodzi miękko.
   Tło zostaje widoczne cały czas. Bezpiecznik: klasę zdejmuje też
   `setTimeout` — nawet gdyby skrypt padł. */
html.wczytywanie .wrap,
html.wczytywanie .okruszki,
html.wczytywanie .log-kto-miejsce{opacity:0}
html .wrap,html .okruszki{transition:opacity .2s ease}

/* ── RUCH — delikatny, jednorazowy; wyłączony, gdy system prosi o spokój ── */
@keyframes sz-wejscie{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes sz-puls{0%{box-shadow:0 0 0 0 rgba(107,94,82,.35)}70%{box-shadow:0 0 0 8px rgba(107,94,82,0)}100%{box-shadow:0 0 0 0 rgba(107,94,82,0)}}
@keyframes sz-okno{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sz-pasek{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html .karta,html .krok,html .os,html .rez,html .kafel,html .wiz,html .sd,html .tk,html .mds{
  animation:sz-wejscie .34s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion: reduce){
  html *,html *::before,html *::after{animation:none!important;transition:none!important}
}

/* ════════════════════════════════════════════════════════════════════════
   RAMA PANELU — pasek u góry, listwa modułów, okruszki
   ════════════════════════════════════════════════════════════════════════ */

/* Pasek „kto pracuje" — jasny trawertyn, cienka linia u dołu. */
html body .log-kto{
  background:rgba(250,248,245,.9);
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid #DCD5CA;
  font-family:var(--sans);color:var(--ink2);padding-left:20px;padding-right:18px}
html body .log-kto .kto{gap:10px}
html body .log-kto .awatar{width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font:500 16px/1 var(--display);color:var(--ink);
  background:var(--kamien-1);box-shadow:inset 0 0 0 1px var(--kamien-2)}
html body .log-kto .imie{font-weight:700;color:var(--ink);font-size:14px;letter-spacing:.005em}
html body .log-kto .kropka{width:7px;height:7px;background:#6E9474;
  box-shadow:0 0 0 3px rgba(110,148,116,.16)}
html body .log-kto .data-dzis{color:var(--muted);font-weight:500;font-size:12.5px;
  padding-left:10px;margin-left:2px;border-left:1px solid var(--axis)}
@media(max-width:560px){ html body .log-kto .data-dzis{display:none} }
html body .log-kto button{border-radius:999px;background:var(--surface);
  border:1px solid var(--axis);color:var(--ink2);font:600 13px var(--sans);
  padding:0 16px 0 14px;display:inline-flex;align-items:center;gap:8px;
  transition:border-color .15s,color .15s,background .15s}
html body .log-kto button svg{width:16px;height:16px}
html body .log-kto button:hover{border-color:var(--kamien-3);color:var(--ink);background:var(--surface-2)}
html body .log-kto button:active{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}

/* Listwa modułów — jaśniejszy kamień, bez połysków. */
html body .listwa{
  background:#E4DFD7;border-right:1px solid #D5CEC3;box-shadow:none;padding-top:16px}
html body .listwa .listwa-znak{display:block;width:56px;height:58px;margin:2px auto 12px;
  min-height:0;padding:0;border:0;border-radius:50%;
  background:url(znak-maly.png) center/contain no-repeat;filter:none}
/* ⚠️ Tu MUSI być pełny skrót z obrazkiem. `.listwa a:hover` niżej ustawia
   `background: rgba(...)`, co kasuje background-image — a że jest bardziej
   szczegółowa niż reguła bazowa monogramu, przy najechaniu znak po prostu
   znikał (zgłoszenie Pawła 19.09.2026). */
html body .listwa .listwa-znak:hover,
html body .listwa .listwa-znak:focus-visible{
  background:url(znak-maly.png) center/contain no-repeat;opacity:.85}
html body .listwa a{color:var(--muted);font:650 11.5px/1.18 var(--sans);letter-spacing:.01em;
  border-radius:12px;position:relative;transition:color .15s,background .15s,border-color .15s}
html body .listwa a svg{stroke-width:1.6}
html body .listwa a.praca{color:var(--ink2)}
html body .listwa a:hover{color:var(--ink);background:rgba(250,248,245,.6)}
html body .listwa a.tu{color:var(--ink);border-color:#D5CEC3;background:var(--surface);box-shadow:var(--cien-1)}
html body .listwa a.tu::before{content:'';position:absolute;left:-7px;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent)}
html body .listwa a:focus-visible{outline-color:var(--accent)}
html body .listwa-kreska{background:#D5CEC3}
@media(max-width:900px){
  html body .listwa{background:rgba(236,232,225,.97);border-right:0;border-top:1px solid #D5CEC3;
    box-shadow:0 -8px 22px -18px rgba(46,42,38,.45);padding-top:6px}
  html body .listwa .listwa-znak{display:none}
  html body .listwa a.tu::before{left:24%;right:24%;top:-7px;bottom:auto;width:auto;height:3px;border-radius:0 0 3px 3px}
  html body .listwa a{font-size:10.5px}
}
/* Kamień pod listwą sięga do dołu strony. */
@media(min-width:901px){
  html body .pulpit{background:linear-gradient(90deg,#E4DFD7 0,#E4DFD7 111px,#D5CEC3 111px,#D5CEC3 112px,rgba(0,0,0,0) 112px)}
}

/* Okruszki — płaskie kamienne pigułki. */
html body .okruszki a,html body .okruszki .teraz{
  border-color:var(--axis);color:var(--ink2);font:650 12.5px var(--sans);
  background:var(--surface);box-shadow:none}
html body .okruszki a:hover{border-color:var(--kamien-3);color:var(--ink);transform:none}
html body .okruszki .teraz{color:var(--ink);border-color:#CFC6B8;background:var(--accent-soft);box-shadow:none}
html body .okruszki .sep{color:var(--muted)}
html body .okruszki{margin-bottom:18px}

/* ════════════════════════════════════════════════════════════════════════
   ELEMENTY WSPÓLNE
   ════════════════════════════════════════════════════════════════════════ */

/* Karty */
html body .karta,html body .krok,html body .os,html body .rez,html body .wrap > div.dzien,
html body .miesiac,html body .zgoda,html body .lista-karta{
  background:var(--surface);border:1px solid var(--ring);border-radius:var(--r-karta);
  box-shadow:var(--cien-2)}
html body .karta h2,html body .krok > h2{font-size:23px;line-height:1.25;color:var(--ink)}
html body .karta h3{font-size:21px;color:var(--ink)}
html body .karta h3 svg{color:var(--brass)}
html body .karta h3 em{font:700 12.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
html body .karta p.wyj,html body .wyj{color:var(--muted)}

/* Przycisk główny — taupe, płaski, matowy */
html body .btn,html body .b-glowny,html body .ok-btn.glowny{
  background:var(--accent);color:#FFFFFF;
  border:1px solid var(--accent);border-radius:var(--r-btn);box-shadow:none;
  font-family:var(--sans);font-weight:700;letter-spacing:.01em;text-shadow:none;gap:8px;
  transition:background .15s ease,border-color .15s ease,transform .12s ease}
html body .btn:hover,html body .b-glowny:hover,html body .ok-btn.glowny:hover{
  background:var(--accent-deep);border-color:var(--accent-deep);color:#FFFFFF;box-shadow:none}
html body .btn:active,html body .b-glowny:active{transform:translateY(1px)}
/* Ikona w przycisku ma stały wymiar — bez tego plus w „Wpisz wizytę" rósł
   do rozmiaru domyślnego SVG i łamał przycisk w dwie linie. */
html body .btn svg{width:17px;height:17px;flex:0 0 auto;color:currentColor;opacity:.9}

/* Przycisk drugi — trawertyn z cienką ramką */
html body .btn.btn2,html body .btn2,html body .b-drugi,html body .mini,html body .rez-btn,
html body .op-btn,html body .ok-btn,html body .r-wroc,html body .karnet-zab{
  background:var(--surface);color:var(--ink2);
  border:1px solid var(--axis);box-shadow:none;
  font-family:var(--sans);transition:border-color .15s,color .15s,background .15s}
html body .btn.btn2 svg{color:var(--brass)}
html body .btn.btn2:hover,html body .btn2:hover,html body .b-drugi:hover,html body .mini:hover,
html body .rez-btn:hover,html body .op-btn:hover,html body .ok-btn:hover,html body .karnet-zab:hover{
  border-color:var(--kamien-3);color:var(--ink);background:var(--surface-2);box-shadow:none}
html body .mini{border-radius:10px;font-weight:650}
html body .mini.pilne{border-color:#C9BCA8;color:#584A3A;background:#F1ECE3}
html body .mini.pilne:hover{background:#EAE3D8}
html body .ok-btn.wyjscie{background:none;border-color:transparent;box-shadow:none;color:var(--muted)}
html body .ok-btn.wyjscie:hover{background:var(--surface-2);border-color:var(--axis);color:var(--ink)}

/* Przycisk „chwili" — bazalt. Tylko tam, gdzie zaczyna się coś ważnego
   (przyjęcie klientki, start zabiegu, wejście do panelu). */
html body .teraz-akcje .btn:not(.btn2),html body .b-start,html body .log-btn{
  background:var(--bazalt);color:#F7F4EF;border:1px solid var(--bazalt);
  box-shadow:none;text-shadow:none}
html body .teraz-akcje .btn:not(.btn2) svg,html body .b-start svg{color:#E4DDD2}
html body .teraz-akcje .btn:not(.btn2):hover,html body .b-start:not([disabled]):hover,
html body .log-btn:hover{background:#2E2A26;border-color:#2E2A26;color:#FFFFFF;box-shadow:none}
html body .b-start[disabled]{background:#DCD6CD;color:#6E665F;border-color:#D2CBC0;box-shadow:none}

/* Powrót i strzałki — płaskie */
html body .wstecz{background:var(--surface);border-color:var(--axis);color:var(--ink2);box-shadow:none}
html body .wstecz:hover{border-color:var(--kamien-3);color:var(--ink);background:var(--surface-2)}
html body a.wstecz{color:var(--brass-tekst)}
html body .strzalka{width:44px;height:44px;display:inline-grid;place-items:center;
  background:var(--surface);border:1px solid var(--axis);color:var(--ink);box-shadow:none;transition:all .15s}
html body .strzalka:hover{border-color:var(--kamien-3);background:var(--surface-2);color:var(--ink)}
html body .strzalka svg{width:20px;height:20px}

/* Zakładki i przełączniki — płaskie segmenty */
html body .pas,html body .przel{background:var(--plane-2);border-radius:13px;padding:4px;gap:4px;
  box-shadow:inset 0 0 0 1px rgba(84,74,62,.08)}
html body .pas button,html body .przel button{border:1px solid transparent;background:transparent;
  color:var(--ink2);font:650 13.5px var(--sans);border-radius:10px;min-height:44px;
  transition:background .15s,color .15s}
html body .pas button:hover,html body .przel button:hover{color:var(--ink);background:rgba(250,248,245,.55)}
html body .pas button.on,html body .przel button.on{background:var(--surface);color:var(--ink);
  border-color:var(--axis);box-shadow:var(--cien-1)}
html body .pas button svg{color:var(--brass)}

/* Pola formularzy */
html body input[type=text],html body input[type=number],html body input[type=date],
html body input[type=time],html body input[type=tel],html body input[type=email],
html body input[type=password],html body input[type=search],html body select,html body textarea,
html body .pole input,html body .pole select,html body .pole textarea,html body .log-pole input,
html body .szukaj-pas input,html body .rez-tresc,html body .cen-szukaj,html body .szukaj{
  background-color:#FCFBF9;border:1px solid var(--axis);border-radius:10px;color:var(--ink);
  font-family:var(--sans);box-shadow:none;
  transition:border-color .15s,box-shadow .15s,background-color .15s}
html body input:focus,html body select:focus,html body textarea:focus{
  outline:none!important;border-color:var(--accent)!important;background-color:#FFFFFF;
  box-shadow:0 0 0 3px rgba(107,94,82,.16)!important}
/* Podpowiedź w pustym polu też była za jasna (#8F877F ≈ 3:1). */
html body input::placeholder,html body textarea::placeholder{color:#6E675F}
/* ⚠️ 19.09.2026, Paweł: „te czcionki są nieczytelne". Podpisy pól stały
   na 10,5 px WERSALIKAMI z rozstrzeleniem .13em i w piaskowcu — najgorszy
   możliwy zestaw dla oczu: małe, rozsunięte, bez kształtu wyrazu i w słabym
   kontraście. Teraz 13 px, ciaśniej i w grafitowym (≈ 8:1 na tle panelu).
   Wielkie litery zostają — to jest ROZPOZNAWALNY podpis pola, ale mają
   rozmiar, przy którym da się je przeczytać bez wysiłku. */
html body .pole label,html body .log-pole label,html body .wiz-lab,html body label.et{
  font:700 13px/1.35 var(--sans);letter-spacing:.055em;color:var(--ink2)}

/* Znaki statusu — perłowy kamień, piaskowiec, bazalt (płasko) */
html body .znak{font:800 11.5px/1.5 var(--sans);letter-spacing:.05em;text-transform:uppercase;
  padding:3px 10px 2px;border-radius:999px;border:1px solid transparent;vertical-align:middle;box-shadow:none}
html body .z-SILVER{background:#E8E7E4;color:#4A4845;border-color:#D6D4D0}
html body .z-GOLD{background:#E9DFCF;color:#54452F;border-color:#D7C9B3}
html body .z-PLATINUM{background:var(--bazalt);color:#F2EEE8;border-color:var(--bazalt)}
html body .z-BRAK{background:#EFEBE5;color:var(--muted);border-color:#E0DAD1}
html body .z-w{background:var(--good-tlo);color:var(--good);border-color:#CFDCCC}

/* Komunikaty */
html body .komunikat{border-radius:12px;padding:13px 16px 13px 46px;position:relative;
  box-shadow:none;animation:sz-wejscie .3s ease both}
html body .komunikat::before{content:'';position:absolute;left:15px;top:13px;width:20px;height:20px;
  border-radius:50%;background-position:center;background-repeat:no-repeat;background-size:12px}
html body .k-ok{background:var(--good-tlo);border:1px solid #CFDCCC;color:#325A3B}
html body .k-ok::before{background-color:#3E6B48;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html body .k-zle{background:var(--crit-tlo);border:1px solid #E6CCC5;color:#873A2E}
html body .k-zle::before{background-color:#9E4436;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.8v3.9M6 9.1h.01' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")}
html body .ostrz,html body .brak-info{background:var(--warn-tlo);border:1px solid #E1D5BD;color:#6A4F17;border-radius:12px}
html body .pusto{color:var(--muted)}
html body p.pusto,html body .pusto:is(p,div){border-radius:14px}

/* Listy i wiersze */
html body .lista li:hover{background:var(--surface-2)}
html body .wiersz,html body .lista li,html body .dzien li,html body .zostalo li,html body .wnioski li,
html body .dzieje li,html body .zasady li,html body .dzialy li{border-bottom-color:var(--grid)}
html body th{color:var(--ink2);font:750 12.5px var(--sans);letter-spacing:.05em;border-bottom-color:var(--axis)}
html body td{border-bottom-color:var(--grid)}
html body tbody tr:hover td{background:rgba(236,230,221,.5)}

/* Okienko z pytaniem */
html body .ok-tlo{background:rgba(46,42,38,.38);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html body .ok-panel{background:var(--surface);border-radius:20px;border:1px solid var(--axis);
  box-shadow:0 24px 60px -24px rgba(46,42,38,.45);font-family:var(--sans);
  animation:sz-okno .22s cubic-bezier(.2,.8,.2,1) both;position:relative;overflow:hidden}
html body .ok-panel::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--kamien-2)}
html body .ok-panel h2{font:400 25px/1.25 var(--display);color:var(--ink)}
html body .ok-panel p{color:var(--ink2)}
html body .ok-btn{border-radius:12px}

/* ── LOGOWANIE — jasny kamień, jej znak, cisza ─────────────────────────── */
html body .log-tlo{
  background:
    var(--ziarno),
    radial-gradient(900px 520px at 50% 0%,#F6F3EE 0%,rgba(246,243,238,0) 65%),
    #E6E1D9;
  align-content:center;gap:0}
html body .log-karta{border-radius:20px;border:1px solid var(--axis);background:var(--surface);
  font-family:var(--sans);box-shadow:0 30px 70px -40px rgba(46,42,38,.45);
  padding:34px 32px 26px;position:relative;animation:sz-okno .4s cubic-bezier(.2,.8,.2,1) both}
html body .log-znak{width:104px;height:108px;margin:-170px auto 44px;
  background:url(znak-maly.png) center/contain no-repeat;filter:none}
html body .log-marka{text-align:center;margin:0 0 18px}
html body .log-marka b{display:block;font:500 12px var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--brass-tekst)}
html body .log-karta h2{font:400 30px/1.2 var(--display);text-align:center;color:var(--ink)}
html body .log-karta p.pod{text-align:center;color:var(--muted)}
html body .log-pole input{min-height:50px;background:#FFFFFF}
html body .log-btn{min-height:52px;font-size:15.5px;margin-top:10px;border-radius:12px}
html body .log-zapomn{color:var(--brass-tekst);font:600 13.5px var(--sans);text-underline-offset:3px}
html body .log-zapomn:hover{color:var(--ink)}
html body .log-blad{background:var(--crit-tlo);border-color:#E6CCC5;color:#873A2E;border-radius:10px}

/* ════════════════════════════════════════════════════════════════════════
   EKRAN „DZIŚ"
   ════════════════════════════════════════════════════════════════════════ */
html body .ekran-glowa{margin:4px 0 22px}
html body .ekran-glowa h1{font-size:40px;line-height:1.08;letter-spacing:-.018em}
html body .ekran-glowa h1 em{font-style:italic;color:var(--brass-tekst)}
html body .ekran-glowa p{font:650 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brass-tekst);margin-top:8px}

html body .karta.teraz{position:relative;overflow:hidden;border:1px solid #D9D2C7;
  background:linear-gradient(165deg,#FBFAF7 0%,#F1EDE6 100%);
  box-shadow:var(--cien-3);padding:24px 26px 24px 30px}
html body .karta.teraz::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--kamien-3)}
html body .teraz-nag{font:750 12.5px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);
  display:flex;align-items:center;gap:10px}
html body .teraz-za{font:650 12px var(--sans);letter-spacing:.02em;text-transform:none;color:#584A3A;
  background:#ECE6DD;border:1px solid #D5CEC3;padding:3px 10px;border-radius:999px}
html body .teraz-za.spozn{color:#873A2E;background:var(--crit-tlo);border-color:#E6CCC5}
html body .teraz-godz{font:400 64px/1 var(--display);color:var(--ink);letter-spacing:-.03em}
html body .teraz-kto b{font:500 26px/1.2 var(--display);letter-spacing:-.005em}
html body .teraz-kto span{font-size:14px;color:var(--ink2)}
html body .teraz-akcje .btn{min-height:50px;padding:13px 22px;border-radius:12px}

/* Liczby dnia + pasek postępu */
html body .liczba b{font:400 38px/1.1 var(--display);color:var(--ink);letter-spacing:-.01em}
html body .liczba span{font:650 12.5px var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
html body .liczba.uwaga b{color:#8A6420}
html body .postep-dnia{margin-top:18px}
html body .postep-dnia .tor{height:8px;border-radius:99px;background:var(--plane-2);overflow:hidden}
html body .postep-dnia .tor i{display:block;height:100%;border-radius:99px;background:var(--pasek-kamien);
  transform-origin:left;animation:sz-pasek .9s cubic-bezier(.2,.7,.2,1) both}
html body .postep-dnia p{margin:8px 0 0;font-size:13px;color:var(--ink2)}
html body .postep-dnia p b{color:var(--ink)}

/* Dzień po kolei — oś z nitką łączącą kropki */
html body ul.dzien{position:relative}
html body ul.dzien li{position:relative;border-bottom-color:var(--grid)}
html body ul.dzien li::after{content:'';position:absolute;left:6px;top:0;bottom:0;width:1px;
  background:#DDD6CB;z-index:0}
html body ul.dzien .kropka{position:relative;z-index:1;width:11px;height:11px;margin-left:1px;
  background:var(--surface);border:1.5px solid #C4BAAC}
html body ul.dzien .kropka.zrobione{background:#8C7F70;border-color:#8C7F70}
html body ul.dzien .kropka.trwa{background:var(--bazalt);border-color:var(--bazalt);animation:sz-puls 2.2s ease-out infinite}
html body ul.dzien .kropka.pusta{border-style:dashed;border-color:#B9AE9F;background:var(--surface)}
html body ul.dzien .godz{color:var(--ink);font-weight:700}
html body ul.dzien .kto b{font-weight:700;font-size:15px}
html body ul.dzien li.teraz-wiersz{background:#F1ECE4;border-radius:10px}
html body ul.dzien li.wolne .kto b{color:var(--brass-tekst)}
html body .zostalo li > svg,html body .dzieje li > svg{color:var(--brass)}
html body .zostalo-czysto svg{color:var(--good)}

/* ════════════════════════════════════════════════════════════════════════
   GRAFIK
   ════════════════════════════════════════════════════════════════════════ */
html body .wrap > div.dzien{padding:12px 14px;border-radius:16px}
html body .dzien-nazwa{font:400 26px/1.15 var(--display);letter-spacing:-.01em}
html body .dzien-nazwa small{font:750 12px var(--sans);letter-spacing:.08em;color:var(--ink2);margin-top:4px}
html body .kafel{background:var(--surface);border:1px solid var(--ring);border-radius:14px;box-shadow:var(--cien-1)}
html body .kafel .l{font:750 12.5px var(--sans);letter-spacing:.06em;color:var(--ink2)}
html body .kafel .w{font:400 30px/1.15 var(--display);color:var(--ink)}
html body .kafel.uwaga .w{color:#8A6420}
html body .grupa{color:var(--brass-tekst);letter-spacing:.14em}
html body .grupa::before{background:var(--kolor-osoby,var(--kamien-3))}

/* Lista dnia (widok „Dzień") */
html body .wiz{border-radius:14px;box-shadow:var(--cien-1);border-color:var(--ring);
  border-left:4px solid var(--kolor-osoby,var(--kamien-3))}
html body .wiz.zrobiona{background:#F3F0EA;border-color:#DED8CE}
html body .wiz.pusta{background:var(--crit-tlo);border-color:#E6CCC5;border-left-color:#9E4436}
html body .wiz.odwolana{opacity:1;background:repeating-linear-gradient(135deg,#F7F5F1 0 10px,#F0ECE6 10px 20px);
  border-style:dashed;border-left-style:solid;border-left-color:#B9AE9F}
html body .wiz-kto{font:700 16.5px var(--sans)}
html body .wiz-godz{font:400 22px/1 var(--display);color:var(--ink)}
/* ⚠️ 20.09.2026, Paweł: „graficznie fatalnie wygląda". Trzy decyzje wieczorne
   („Była / Nie przyszła / Odwołała") zlewały się w jeden beżowy pas: tor bez
   obwódki, przyciski bez krawędzi i bez przegródek. Zostaje segmentowy układ
   (jedna decyzja z trzech), ale widać, że to trzy osobne przyciski. */
html body .przyciski{gap:0;background:var(--plane-2);padding:4px;border-radius:12px;box-shadow:none;
  border:1px solid var(--grid)}
html body .przyciski button+button{box-shadow:inset 1px 0 0 var(--grid)}
html body .przyciski button.wybrany+button,html body .przyciski button:has(+.wybrany){box-shadow:none}
html body .przyciski button{border:1px solid transparent;background:transparent;border-radius:9px;
  font-weight:650;color:var(--ink2);
  color:var(--ink2);font:650 13.5px var(--sans);display:inline-flex;align-items:center;justify-content:center;gap:7px}
html body .przyciski button:hover{background:rgba(250,248,245,.7);color:var(--ink);border-color:transparent}
html body .przyciski button.wybrany{background:var(--surface);color:var(--ink);border-color:var(--axis);box-shadow:var(--cien-1)}
html body .przyciski button[data-stan=zrealizowana].wybrany{color:#325A3B}
html body .przyciski button[data-stan=nieobecnosc].wybrany{color:#873A2E}
html body .przyciski button[data-stan=odwolana].wybrany{color:#584A3A}
html body .przyciski button.wybrany::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
html body .stan-opis{color:var(--muted)}

/* Lista rezerwowa */
html body .rez h2{font:400 23px/1.25 var(--display)}
html body .rez-poz{background:var(--surface-2);border-color:var(--grid);border-radius:12px}
html body .rez-godz{font:400 24px/1.05 var(--display);color:var(--ink);background:#ECE6DD;border:1px solid #D5CEC3}
html body .rez-godz small{font:750 9.5px var(--sans);letter-spacing:.12em;color:var(--brass-tekst)}
html body .rez-kto small a{color:var(--brass-tekst)!important}
html body .rez-alarm{background:#ECE6DD;border:1px solid #CFC6B8}
html body .rez-alarm b.t{color:#584A3A}
html body .rez-dodaj > summary{list-style:none}
html body .rez-dodaj > summary::-webkit-details-marker{display:none}

/* ════════════════════════════════════════════════════════════════════════
   KARTA KLIENTKI — dokument z kamienia
   Jasny kamień dla Silver i bez statusu, piaskowiec dla Gold, bazalt
   (czarny marmur) dla Platinum. Ekran karty ma własne barwy dla ciemnej
   wersji, więc tu nadpisujemy je wszystkie.
   ════════════════════════════════════════════════════════════════════════ */
html body .karta-glowa{
  --karta-zloto:#665848;--karta-cien:#625B54;--karta-tekst:#2E2A26;
  background:linear-gradient(155deg,#F2EFEA 0%,#E6E2DB 100%);color:var(--karta-tekst);
  border:1px solid #D5CEC3;border-radius:20px;box-shadow:var(--cien-3)}
html body .karta-glowa::after{display:none}
html body .karta-glowa::before{content:'';position:absolute;right:26px;top:24px;width:62px;height:64px;z-index:1;
  background:url(znak-maly.png) center/contain no-repeat;opacity:.95}
html body .karta-glowa.st-GOLD{background:linear-gradient(155deg,#F3EDE3 0%,#E6DCCB 100%);border-color:#D7C9B3}
html body .karta-glowa h1,html body .karta-glowa .staty .wart,html body .karta-glowa .postep b{color:var(--ink)}
html body .karta-glowa h1{font:400 44px/1.04 var(--display);padding-right:78px}
html body .karta-glowa .eyebrow{letter-spacing:.24em;color:var(--karta-zloto)}
html body .karta-glowa .staty .et{color:var(--muted)}
html body .karta-glowa .staty .wart{font-family:var(--display)}
html body .karta-glowa .postep{color:var(--ink2)}
html body .karta-glowa .pasek{height:8px;background:rgba(46,42,38,.09)}
html body .karta-glowa .pasek i{background:var(--pasek-kamien);box-shadow:none;
  transform-origin:left;animation:sz-pasek 1s cubic-bezier(.2,.7,.2,1) both}
html body .karta-glowa .kreska-z{border-top-color:rgba(46,42,38,.12)}
html body .karta-glowa .przyw li{color:var(--ink2)}
html body .karta-glowa .przyw li::before{color:var(--kamien-3)}
html body .karta-glowa .stopka-k{color:var(--muted)}
/* Platinum — bazalt z jasnym pismem */
html body .karta-glowa.st-PLATINUM{--karta-zloto:#CFC6B8;--karta-tekst:#F2EEE8;
  background:linear-gradient(155deg,#47423C 0%,#2F2B27 100%);border-color:#3F3A35}
html body .karta-glowa.st-PLATINUM h1,html body .karta-glowa.st-PLATINUM .staty .wart,
html body .karta-glowa.st-PLATINUM .postep b{color:#FAF8F5}
html body .karta-glowa.st-PLATINUM .staty .et,html body .karta-glowa.st-PLATINUM .postep,
html body .karta-glowa.st-PLATINUM .stopka-k{color:#CFC6B8}
html body .karta-glowa.st-PLATINUM .przyw li{color:#ECE8E1}
html body .karta-glowa.st-PLATINUM .pasek{background:rgba(255,255,255,.14)}
html body .karta-glowa.st-PLATINUM .pasek i{background:linear-gradient(90deg,#B3A898,#E4DDD2)}
html body .karta-glowa.st-PLATINUM .kreska-z{border-top-color:rgba(255,255,255,.16)}
html body .karta-glowa.st-PLATINUM::before{background-image:url(znak-kolo-jasny.png)}

html body .nr{background:var(--accent);color:#FFFFFF;box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--kamien-2);font-family:var(--sans)}
html body .krok{border-radius:18px;padding:24px 24px 26px}
html body .odp button{border-radius:10px;border-color:var(--axis);background:var(--surface)}
html body .odp button:hover{border-color:var(--kamien-3)}
html body .odp button.wybrane{background:var(--bazalt);border-color:var(--bazalt);color:#F7F4EF}
/* Ważne pytania wywiadu — „złota ramka" (decyzja Pawła 12.09) zostaje jako
   MATOWA OCHRA: znaczenie to samo, bez połysku. */
html body .odp button.wybrane.uwaga{box-shadow:0 0 0 3px rgba(168,138,82,.45)}
html body .pyt.ostrzega{border-color:var(--ochra);background:#F7F3EB;box-shadow:0 0 0 3px rgba(168,138,82,.12)}
html body .zgoda.zaznaczona{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,var(--cien-1)}
html body .zgoda>details>summary::after{color:var(--brass-tekst)}
html body .wymagana-znak{color:#584A3A;background:#ECE6DD}
html body .podpis-ramka{background:#FCFBF9;border-color:#CFC6B8;border-radius:14px}
html body .r-suma b,html body .r-suma input,html body .suma b{color:var(--ink)}
html body .r-podp{color:#584A3A;background:#ECE6DD}
html body .karnet-zab.wybrany{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
html body .lista li{border-color:var(--ring)}
html body .lista li:hover{border-color:var(--kamien-3);box-shadow:var(--cien-2)}
html body .b-start{border-radius:14px;min-height:68px;font-size:17px;letter-spacing:.03em}

/* Monogram przy nazwisku (wiersze klientek) */
html body .mono{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:inline-grid;place-items:center;
  font:500 15px/1 var(--display);color:#54452F;letter-spacing:.02em;
  background:#E9DFCF;box-shadow:inset 0 0 0 1px #D7C9B3}
html body .mono.m-PLATINUM{background:var(--bazalt);color:#F2EEE8;box-shadow:none}
html body .mono.m-SILVER{background:#E8E7E4;color:#4A4845;box-shadow:inset 0 0 0 1px #D6D4D0}
html body .mono.m-BRAK{background:#EFEBE5;color:var(--muted);box-shadow:inset 0 0 0 1px #E0DAD1}
html body .z-monogramem{display:flex;align-items:center;gap:13px;min-width:0}

/* ════════════════════════════════════════════════════════════════════════
   FINANSE
   ════════════════════════════════════════════════════════════════════════ */
html body .miesiac-nazwa{font:400 26px var(--display);text-transform:none}
/* Nazwa miesiąca w nagłówku wielką literą — tylko wizualnie. W zdaniach
   („liczę styczeń–wrzesień") zostaje mała, jak po polsku. */
html body .miesiac-nazwa::first-letter{text-transform:uppercase}
html body .duza{font:400 52px/1.02 var(--display);letter-spacing:-.02em}
html body .kafel{border-left-width:1px}
html body .kafel.dobry,html body .kafel.zly,html body .kafel.uwaga{border-left-width:4px}
html body .kafel.dobry{border-left-color:#6E9474}
html body .kafel.zly{border-left-color:#A8574A}
html body .kafel.uwaga{border-left-color:var(--ochra)}
html body .kafel.dobry .w{color:#325A3B}
html body .wnioski li.w-szansa svg{color:#5A8062}
html body .wnioski li.w-uwaga svg{color:var(--ochra)}
html body .pp1{background:#8C7F70} html body .pp2{background:#B3A898}
html body .pasekProg{border-radius:10px;border-color:var(--ring);box-shadow:none}
html body .z-gora{background:var(--good-tlo);color:#325A3B}
html body .z-dol{background:var(--crit-tlo);color:#873A2E}

/* ════════════════════════════════════════════════════════════════════════
   PRZYWILEJE · POLECENIA · MÓJ GABINET · AKTUALNOŚCI
   ════════════════════════════════════════════════════════════════════════ */
html body .rozklad{border-radius:99px;height:12px;box-shadow:none}
html body .r-PLATINUM{background:var(--bazalt)!important}
html body .r-GOLD{background:#CBB89A!important}
html body .r-SILVER{background:#C9C6C0!important}
html body .legenda i{border-radius:50%}
html body .zasady li:hover,html body .dzialy li:hover{background:var(--surface-2)}
html body .zasady svg,html body .dzialy li > svg{color:var(--brass)}
html body .osoba{background:var(--surface-2);border:1px solid var(--grid);border-radius:14px}
html body .liczby b{font-family:var(--display);font-weight:400}
html body .mag-pasek{border-radius:99px;background:var(--plane-2)}
html body .mag-pasek i{background:var(--pasek-kamien)}
html body .cen-grupa-tyt svg{color:var(--brass)}
html body .cen-cena{font-family:var(--display);font-weight:400}
html body .akt-podglad{border-radius:14px;background:var(--surface-2)}
html body .akt-podglad .belka{background:#ECE6DD;color:var(--brass-tekst)}
html body .akt-podglad h4{font-family:var(--display)}
/* Lista wpisów stoi NAD formularzem i rośnie po wczytaniu — bez rezerwy
   spychała formularz o ~80 px w chwili, gdy Dorota zaczynała pisać. */
html body #akt-lista{min-height:168px}

/* ════════════════════════════════════════════════════════════════════════
   STRONY KLIENTKI — rezerwacja, zaproszenie, wizyta
   ════════════════════════════════════════════════════════════════════════ */
html body .kroki div{border-radius:99px;background:var(--plane-2)}
html body .kroki div.zrobiony{background:var(--accent)}
html body .wybor{background:var(--surface);border:1px solid var(--ring);border-radius:14px;
  box-shadow:var(--cien-1);transition:border-color .15s,box-shadow .15s}
html body .wybor:hover{border-color:var(--kamien-3);box-shadow:var(--cien-2)}
html body .wybor .cena{font:500 19px var(--display);color:var(--ink)}
html body .wybor i{color:var(--brass-tekst);font-style:normal;letter-spacing:.08em}
html body .dni .dzien{border-radius:14px;background:var(--surface);border-color:var(--axis)}
html body .dni{gap:8px}
html body .dni .dzien.on,html body .godz.on{background:var(--bazalt);color:#F7F4EF;border-color:var(--bazalt)}
html body .godz{border-radius:10px;font-weight:700;background:var(--surface);border-color:var(--axis)}
html body .godz:hover{border-color:var(--kamien-3);background:var(--surface-2)}
html body .podsum{background:#ECE6DD;border:1px solid #D5CEC3;border-radius:14px}
html body .marka-znak{width:74px;height:77px;margin:4px auto 10px;
  background:url(znak-maly.png) center/contain no-repeat}
html body .ozdoba{background:var(--kamien-2);height:1px;width:64px}
html body .od{color:var(--brass-tekst);letter-spacing:.22em}
html body .gotowe .tyt,html body .prezent{font-family:var(--display)}