/* ════════════════════════════════════════════════════════════════════════
   MOTYWY — POKAZ (25.09.2026). Barwy i ruch czterech motywów + panel
   „Mój wygląd". Silnik (motywy.js) przelicza barwy wpisane w ekranach;
   tu są wartości PODANE WPROST: paleta każdego motywu, kroje pisma, to,
   czego nie da się wyliczyć (ruch, obwódki, światło), i panel wyboru.

   WGRANE NA PRODUKCJĘ 25.09.2026. Kroje motywów leżą w `wspolne/fonty/`
   (wgraj.sh wysyła je razem z resztą fontów). Kontrast: MOTYWY-POKAZ/kontrast.py.

   Selektory zaczynają się od `html[data-motyw=…]` — to wygrywa z `html body`
   z motyw.css i z `#gz` grafiku bez wykrzykników tam, gdzie się da.
   Kontrast par tekst/tło sprawdzony wzorem WCAG (kontrast.py obok).
   ════════════════════════════════════════════════════════════════════════ */

/* ── KROJE ────────────────────────────────────────────────────────────── */
/* Atkinson Hyperlegible Next — Braille Institute, krój dla słabowidzących:
   każda litera inna od sąsiadki (I/l/1, b/d). SIL OFL.
   ⚠️ CYFRY z Source Sans 3 (krój panelu): Atkinson ma PRZEKREŚLONE ZERO,
   a w grafiku to „Ø9:ØØ" przy każdej godzinie — szum zamiast czytelności.
   Rozdział po `unicode-range`: litery Atkinson, cyfry 0–9 Source Sans.
   ⚠️ Wszystkie ściany MUSZĄ mieć identyczne font-weight/font-style — przy
   „200 900" dla cyfr przeglądarka wybrała samą ścianę cyfr, a litery
   poszły zastępczym Arialem (złapane na zrzucie 25.09). */
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonty/atkinson-hyperlegible-next-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-002F,U+003A-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}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonty/atkinson-hyperlegible-next-latin-ext-wght-normal.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:'Atkinson Hyperlegible Next';font-style:italic;font-weight:200 800;font-display:swap;
  src:url(fonty/atkinson-hyperlegible-next-latin-wght-italic.woff2) format('woff2');
  unicode-range:U+0000-002F,U+003A-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}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:italic;font-weight:200 800;font-display:swap;
  src:url(fonty/atkinson-hyperlegible-next-latin-ext-wght-italic.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:'Atkinson Hyperlegible Next';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonty/source-sans-3-latin-wght-normal.woff2) format('woff2');unicode-range:U+0030-0039}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:italic;font-weight:200 800;font-display:swap;
  src:url(fonty/source-sans-3-latin-wght-italic.woff2) format('woff2');unicode-range:U+0030-0039}
/* Plus Jakarta Sans — nowoczesny, elegancki grotesk (Tokotype). SIL OFL. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonty/plus-jakarta-sans-latin-wght-normal.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}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonty/plus-jakarta-sans-latin-ext-wght-normal.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:'Plus Jakarta Sans';font-style:italic;font-weight:200 800;font-display:swap;
  src:url(fonty/plus-jakarta-sans-latin-wght-italic.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}
@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:200 800;font-display:swap;
  src:url(fonty/plus-jakarta-sans-latin-ext-wght-italic.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}

/* Kąt obwódki „Dopaminy" — zmienna z typem, żeby dało się ją animować. */
@property --mo-kat{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ════════════════════════════════════════════════════════════════════════
   PALETY
   Grafik trzyma własny komplet zmiennych na `#gz` — w motywach dziedziczy je
   z góry (`inherit`), więc jedna paleta obsługuje cały panel.
   ════════════════════════════════════════════════════════════════════════ */
html[data-motyw="czytelny"] #gz,html[data-motyw="skupienie"] #gz,html[data-motyw="dopamina"] #gz{
  --plane:inherit;--plane-2:inherit;--surface:inherit;--surface-2:inherit;--ink:inherit;--ink2:inherit;
  --muted:inherit;--grid:inherit;--grid-2:inherit;--axis:inherit;--accent:inherit;--accent-deep:inherit;
  --accent-soft:inherit;--brass:inherit;--brass-tekst:inherit;--bazalt:inherit;--ochra:inherit;
  --ochra-tekst:inherit;--good:inherit;--good-tlo:inherit;--crit:inherit;--crit-tlo:inherit;--warn:inherit;
  --warn-tlo:inherit;--wolny:inherit;--wolny-tlo:inherit;--sans:inherit;--cien-1:inherit;--cien-2:inherit;
  --cien-3:inherit;--r-btn:inherit}

/* ── CZYTELNY — czerń na bieli, maksimum kontrastu ──────────────────────── */
html[data-motyw="czytelny"]:root{
  --plane:#F3F3F1;--plane-2:#E6E6E3;--surface:#FFFFFF;--surface-2:#F5F5F3;
  --ink:#0B0B0C;--ink2:#1F1F22;--muted:#38383D;
  --grid:#D6D6D3;--grid-2:#E4E4E1;--axis:#8A8A8A;--ring:rgba(0,0,0,.26);
  --accent:#16181D;--accent-deep:#000000;--accent-soft:#E7E8EC;
  --brass:#45454B;--brass-tekst:#2A2A2F;--bazalt:#16181D;
  --kamien-1:#EDEDEB;--kamien-2:#B3B3B0;--kamien-3:#666666;
  --ochra:#8A6300;--ochra-tekst:#6B4C00;
  --good:#1B6B32;--good-tlo:#E4F3E8;--crit:#B3122E;--crit-tlo:#FDE9EC;--warn:#6E4E00;--warn-tlo:#FFF3D1;
  --wolny:#A3242B;--wolny-tlo:#FBE9E7;
  --sans:'Atkinson Hyperlegible Next',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --display:var(--sans);--serif:var(--sans);
  --pasek-kamien:linear-gradient(90deg,#16181D,#4A4F5C);
  --ziarno:none;
  --cien-1:none;--cien-2:0 1px 2px rgba(0,0,0,.08);--cien-3:0 2px 6px rgba(0,0,0,.12)}

/* ── SKUPIENIE — ciepły grafit, jeden ton, zero ozdób ───────────────────── */
html[data-motyw="skupienie"]:root{
  color-scheme:dark;
  --plane:#1B1A18;--plane-2:#141312;--surface:#242220;--surface-2:#2C2A27;
  --ink:#EEEAE3;--ink2:#D3CDC4;--muted:#ADA69C;
  --grid:#34312D;--grid-2:#2E2B28;--axis:#4B4640;--ring:rgba(255,248,238,.09);
  --accent:#7B6D60;--accent-deep:#6C5F53;--accent-soft:#35312C;
  --brass:#A89A88;--brass-tekst:#C9BCA9;--bazalt:#5A534C;
  --kamien-1:#2E2B28;--kamien-2:#4B4640;--kamien-3:#7A7167;
  --ochra:#C4A56A;--ochra-tekst:#D8BD86;
  --good:#3F7A4C;--good-tlo:#1F2B22;--crit:#B8453D;--crit-tlo:#3A211E;--warn:#E2BF7C;--warn-tlo:#332A1B;
  --wolny:#E3978F;--wolny-tlo:#3A2320;
  /* te same barwy użyte jako NAPIS — jaśniejsze, żeby czytać na ciemnym */
  --good-fg:#93C79F;--crit-fg:#F0968C;--accent-fg:#D5C8B8;--accent-deep-fg:#E2D7C9;--bazalt-fg:#E9E3DA;
  --warn-fg:#E2BF7C;--ochra-fg:#DCC08A;--brass-fg:#C4B6A3;--kamien-3-fg:#ABA092;--kamien-2-fg:#8E8479;--wolny-fg:#E3978F;
  --ink-bg:#0F0E0D;--ink2-bg:#161513;--muted-bg:#3A3632;
  --pasek-kamien:linear-gradient(90deg,#7B6D60 0%,#B3A898 100%);
  --ziarno:none;
  --cien-1:0 1px 1px rgba(0,0,0,.35);
  --cien-2:0 1px 2px rgba(0,0,0,.35),0 10px 24px -18px rgba(0,0,0,.75);
  --cien-3:0 2px 4px rgba(0,0,0,.4),0 18px 36px -24px rgba(0,0,0,.85)}

/* ── DOPAMINA — perła, śliwka, złoto ────────────────────────────────────── */
html[data-motyw="dopamina"]:root{
  --plane:#FBF7F9;--plane-2:#F3E9F0;--surface:#FFFFFF;--surface-2:#FBF3F8;
  --ink:#24172B;--ink2:#45314F;--muted:#6B5876;
  --grid:#F1E4EE;--grid-2:#F7EDF4;--axis:#E3CCDC;--ring:rgba(122,50,120,.12);
  --accent:#8E2C6E;--accent-deep:#6E1F55;--accent-soft:#F8E3F0;
  --brass:#B76E79;--brass-tekst:#8A4B5A;--bazalt:#2E1A38;
  --kamien-1:#F7EDF3;--kamien-2:#E8CFE0;--kamien-3:#C79AB6;
  --ochra:#C8A15A;--ochra-tekst:#86621F;
  --good:#1E7A4C;--good-tlo:#E5F6EC;--crit:#C62A4B;--crit-tlo:#FDE8EE;--warn:#8A5A00;--warn-tlo:#FFF3DA;
  --wolny:#B3244A;--wolny-tlo:#FDE8EE;
  --sans:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --display:var(--sans);--serif:var(--sans);
  --pasek-kamien:linear-gradient(90deg,#8E2C6E,#C86B98 55%,#E0B872);
  --ziarno:none;
  --r-karta:20px;--r-btn:13px;
  --cien-1:0 1px 2px rgba(80,24,70,.06);
  --cien-2:0 1px 2px rgba(80,24,70,.05),0 14px 32px -20px rgba(122,40,110,.30);
  --cien-3:0 2px 4px rgba(80,24,70,.06),0 26px 48px -26px rgba(122,40,110,.40);
  /* barwy ruchu */
  --mo-zloto:#E2B864;--mo-szampan:#F1D9A7;--mo-roz:#EFA3C3;--mo-liliowy:#B69CFF;
  --mo-grad:linear-gradient(120deg,#5E1A4B 0%,#9C2F76 38%,#6F2C8F 68%,#5E1A4B 100%)}

/* ════════════════════════════════════════════════════════════════════════
   PIERWSZA KLATKA — tło i pas pod listwę w kolorach motywu (ekrany mają je
   wpisane w <head> na sztywno, silnik dochodzi chwilę później)
   ════════════════════════════════════════════════════════════════════════ */
html[data-motyw="czytelny"],html[data-motyw="czytelny"] body{background:#F3F3F1}
html[data-motyw="skupienie"],html[data-motyw="skupienie"] body{background:#1B1A18}
html[data-motyw="dopamina"],html[data-motyw="dopamina"] body{background:#FBF7F9}
@media(min-width:901px){
  html[data-motyw="czytelny"]::before{background:#E9E9E6;box-shadow:inset -1px 0 0 #8A8A8A}
  html[data-motyw="skupienie"]::before{background:#171614;box-shadow:inset -1px 0 0 #34312D}
  html[data-motyw="dopamina"]::before{background:rgba(255,255,255,.55);box-shadow:inset -1px 0 0 #EAD6E4}
  html[data-motyw="czytelny"] body .pulpit{background:linear-gradient(90deg,#E9E9E6 0,#E9E9E6 111px,#8A8A8A 111px,#8A8A8A 112px,rgba(0,0,0,0) 112px)}
  html[data-motyw="skupienie"] body .pulpit{background:linear-gradient(90deg,#171614 0,#171614 111px,#34312D 111px,#34312D 112px,rgba(0,0,0,0) 112px)}
  html[data-motyw="dopamina"] body .pulpit{background:linear-gradient(90deg,rgba(255,255,255,.5) 0,rgba(255,255,255,.5) 111px,#EAD6E4 111px,#EAD6E4 112px,rgba(0,0,0,0) 112px)}
}
html[data-motyw="czytelny"] body::before,html[data-motyw="skupienie"] body::before{background:var(--plane)}

/* Płynna zmiana motywu (0,5 s), tylko w chwili przełączenia. */
html.mo-przejscie,html.mo-przejscie *,html.mo-przejscie *::before,html.mo-przejscie *::after{
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease,stroke .45s ease!important}

/* ════════════════════════════════════════════════════════════════════════
   CZYTELNY — to, czego nie da się wyliczyć z barw
   ════════════════════════════════════════════════════════════════════════ */
html[data-motyw="czytelny"] body{line-height:1.6;font-weight:420}
html[data-motyw="czytelny"] :focus-visible{outline:3px solid #1558D6!important;outline-offset:2px!important}
html[data-motyw="czytelny"] body :is(.karta,.krok,.os,.rez,.kafel,.lista-karta,.miesiac,.zgoda,.wybor){
  border:1.5px solid #9A9A9A;box-shadow:none}
html[data-motyw="czytelny"] body :is(.btn,.b-glowny,.ok-btn,.mini,.btn2,.b-drugi,.log-kto button){font-weight:700}
html[data-motyw="czytelny"] body :is(.btn.btn2,.btn2,.b-drugi,.mini,.rez-btn,.op-btn,.ok-btn:not(.glowny),.wstecz,.strzalka){border-color:#6E6E6E}
html[data-motyw="czytelny"] body .wrap :is(p,li,td) a:not([class]){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
html[data-motyw="czytelny"] body .listwa a{color:#1F1F22}
html[data-motyw="czytelny"] body .listwa a.tu{box-shadow:0 0 0 2px #0B0B0C;background:#FFFFFF}
html[data-motyw="czytelny"] body .listwa a.tu::before{background:#0B0B0C;width:4px}
html[data-motyw="czytelny"] body .log-kto{border-bottom:1.5px solid #8A8A8A}
html[data-motyw="czytelny"] body :is(.karta,.krok,.os,.rez,.kafel,.wiz,.sd,.tk,.mds){animation:none}
html[data-motyw="czytelny"] body input::placeholder,html[data-motyw="czytelny"] body textarea::placeholder{color:#4A4A50}
html[data-motyw="czytelny"] ::selection{background:#FFE066;color:#000}

/* ════════════════════════════════════════════════════════════════════════
   SKUPIENIE — cisza: bez ruchu, bez ziarna, listwa przygaszona
   ════════════════════════════════════════════════════════════════════════ */
html[data-motyw="skupienie"]{scrollbar-color:#4B4640 #1B1A18}
html[data-motyw="skupienie"] body :is(.karta,.krok,.os,.rez,.kafel,.wiz,.sd,.tk,.mds,.komunikat,.ok-panel,.log-karta){animation:none!important}
html[data-motyw="skupienie"] body ul.dzien .kropka.trwa{animation:none!important;box-shadow:0 0 0 3px rgba(233,227,218,.18)}
html[data-motyw="skupienie"] body .listwa{background:#171614;border-right-color:#34312D}
html[data-motyw="skupienie"] body .listwa a:not(.tu){color:#948B81}
html[data-motyw="skupienie"] body .listwa a:not(.tu) svg{opacity:.8}
html[data-motyw="skupienie"] body .listwa a:not(.tu):hover{color:#EEEAE3}
html[data-motyw="skupienie"] body .listwa a.tu{background:#2C2A27;border-color:#4B4640;color:#EEEAE3}
html[data-motyw="skupienie"] body .listwa a.tu::before{background:#B3A898}
html[data-motyw="skupienie"] body .karta-glowa::before{opacity:.3}
html[data-motyw="skupienie"] body .karta.teraz{background:linear-gradient(165deg,#2A2825 0%,#23211F 100%);border-color:#4B4640}
/* „Przycisk chwili" i wybrane odpowiedzi — na ciemnym nie mogą być ciemne. */
html[data-motyw="skupienie"] body :is(.teraz-akcje .btn:not(.btn2),.b-start:not([disabled]),.log-btn),
html[data-motyw="skupienie"] body .odp button.wybrane,
html[data-motyw="skupienie"] body :is(.dni .dzien.on,.godz.on){background:#E6DFD4;border-color:#E6DFD4;color:#1B1A18}
html[data-motyw="skupienie"] body :is(.teraz-akcje .btn:not(.btn2),.b-start,.log-btn) svg{color:#3F3A35}
html[data-motyw="skupienie"] body :is(.teraz-akcje .btn:not(.btn2),.b-start:not([disabled]),.log-btn):hover{background:#F3EEE6;border-color:#F3EEE6;color:#111}
html[data-motyw="skupienie"] body .b-start[disabled]{background:#2C2A27;color:#8E867C;border-color:#3A3632}
html[data-motyw="skupienie"] #gz :is(.btn-dobry,.zd-przyciski .byla,.okno .wo-btn){background:#3F7A4C;border-color:#3F7A4C;color:#fff}
html[data-motyw="skupienie"] body .z-PLATINUM,html[data-motyw="skupienie"] body .mono.m-PLATINUM{box-shadow:inset 0 0 0 1px #6E665D}
html[data-motyw="skupienie"] ::selection{background:#4B4640;color:#fff}

/* ════════════════════════════════════════════════════════════════════════
   DOPAMINA — elegancki ruch
   Zasady: ruch tam, gdzie jest dotyk (przycisk żyje, gdy go dotykasz), tło
   oddycha powoli (38 s), nic nie miga. Barwy: perła, śliwka, szampan, róż.
   Ruch jest częścią wyboru — dlatego działa także przy systemowym „ogranicz
   ruch" (motyw.css wyłącza wtedy animacje; tu wykrzyknik je przywraca).
   ════════════════════════════════════════════════════════════════════════ */

/* Tło: zorza z trzech miękkich plam, przesuwa się jak światło przez firankę. */
html[data-motyw="dopamina"] body::before{inset:-22%;
  background:
    radial-gradient(38% 34% at 18% 24%,rgba(239,163,195,.42),rgba(239,163,195,0) 70%),
    radial-gradient(34% 30% at 82% 18%,rgba(182,156,255,.30),rgba(182,156,255,0) 70%),
    radial-gradient(44% 38% at 72% 86%,rgba(226,184,100,.24),rgba(226,184,100,0) 70%),
    radial-gradient(30% 28% at 30% 80%,rgba(247,198,218,.30),rgba(247,198,218,0) 70%),
    #FBF7F9;
  animation:mo-zorza 38s ease-in-out infinite alternate!important;will-change:transform}
@keyframes mo-zorza{
  0%{transform:translate3d(0,0,0) rotate(0) scale(1)}
  50%{transform:translate3d(-4%,3%,0) rotate(7deg) scale(1.07)}
  100%{transform:translate3d(3%,-2%,0) rotate(-5deg) scale(1.03)}}

/* Szkło: pasek u góry i listwa przepuszczają zorzę. */
/* Plus Jakarta Sans przy tej samej wielkości ma o 12% wyższe małe litery i jest
   o 17% szerszy od Source Sans (zmierzone na napisach panelu). `font-size-adjust`
   zrównuje wysokość małych liter z dzisiejszym panelem — litery wyglądają na tak
   samo duże jak teraz, a paski przycisków mieszczą się w jednym rzędzie. */
/* ⚠️ Na KAŻDYM elemencie i z wykrzyknikiem: skrót `font:` (ekrany używają go
   w przyciskach) zeruje font-size-adjust, więc samo `body` nie wystarcza —
   zmierzone 25.09: „Porównanie" spadało do drugiego rzędu. */
html[data-motyw="dopamina"] *{font-size-adjust:.478!important}
html[data-motyw="dopamina"] body .log-kto{background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:saturate(170%) blur(16px);backdrop-filter:saturate(170%) blur(16px);border-bottom-color:rgba(142,44,110,.12)}
html[data-motyw="dopamina"] body .listwa{background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);border-right-color:rgba(142,44,110,.12)}
@media(max-width:900px){
  html[data-motyw="dopamina"] body .listwa{background:rgba(255,255,255,.78);border-top-color:rgba(142,44,110,.14)}
}

/* Karty: biała perła, cień w odcieniu śliwki, sprężyste wejście. */
html[data-motyw="dopamina"] body :is(.karta,.krok,.os,.rez,.wrap > div.dzien,.miesiac,.zgoda,.lista-karta,.kafel){
  border-color:rgba(142,44,110,.10)}
html[data-motyw="dopamina"] body :is(.karta,.krok,.os,.rez,.kafel,.wiz,.sd,.tk,.mds){
  animation:mo-wejscie .6s cubic-bezier(.22,1.25,.36,1) backwards!important}
/* Kaskada: karty i kafle wchodzą jedna po drugiej, co 50 ms. */
html[data-motyw="dopamina"] body :is(.karta,.krok,.os,.rez,.kafel):nth-child(2){animation-delay:.05s!important}
html[data-motyw="dopamina"] body :is(.karta,.krok,.os,.rez,.kafel):nth-child(3){animation-delay:.10s!important}
html[data-motyw="dopamina"] body :is(.karta,.krok,.os,.rez,.kafel):nth-child(4){animation-delay:.15s!important}
html[data-motyw="dopamina"] body :is(.karta,.krok,.os,.rez,.kafel):nth-child(5){animation-delay:.20s!important}
html[data-motyw="dopamina"] body :is(.karta,.krok,.os,.rez,.kafel):nth-child(6){animation-delay:.25s!important}
html[data-motyw="dopamina"] body :is(.karta,.krok,.os,.rez,.kafel):nth-child(n+7){animation-delay:.30s!important}
@keyframes mo-wejscie{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
html[data-motyw="dopamina"] body :is(.lista li,.wybor,.dzialy li,.zasady li){
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,border-color .3s ease!important}
html[data-motyw="dopamina"] body :is(.lista li,.wybor):hover{transform:translateY(-2px);
  box-shadow:0 14px 28px -18px rgba(122,40,110,.45);border-color:rgba(183,110,121,.45)}

/* Nagłówki: tusz śliwkowy przechodzący w jagodę. */
html[data-motyw="dopamina"] body :is(.wrap > h1,.ekran-glowa h1){
  background:linear-gradient(100deg,#24172B 10%,#8E2C6E 60%,#6F2C8F);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
html[data-motyw="dopamina"] body :is(.wrap > h1,.ekran-glowa h1) *{-webkit-text-fill-color:currentColor}
html[data-motyw="dopamina"] body .ekran-glowa h1 em{color:#B76E79}
/* Duże liczby: śliwka → jagoda; kolory znaczeń (zysk/strata) zostają. */
html[data-motyw="dopamina"] body :is(.kafel:not(.dobry):not(.zly):not(.uwaga) .w,.liczba:not(.uwaga) b,.duza,.teraz-godz){
  background:linear-gradient(120deg,#3B1B4F,#9C2F76 55%,#B76E79);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

/* ── PRZYCISK GŁÓWNY: jagodowy aksamit, obwódka z szampana i różu, która
      obiega przycisk, błysk co kilka sekund, światło pod kursorem, sprężyna. */
html[data-motyw="dopamina"] body :is(.btn:not(.btn2):not(#gz .btn),.b-glowny,.ok-btn.glowny,.log-btn,.b-start,.teraz-akcje .btn:not(.btn2),.mo-gotowe):not(:disabled),
html[data-motyw="dopamina"] #gz :is(.btn-glowny,.btn-dobry,.glowna-droga):not(:disabled){
  position:relative;isolation:isolate}
html[data-motyw="dopamina"] body :is(.btn:not(.btn2):not(#gz .btn),.b-glowny,.ok-btn.glowny,.log-btn,.b-start,.teraz-akcje .btn:not(.btn2),.mo-gotowe):not(:disabled),
html[data-motyw="dopamina"] #gz :is(.btn-glowny,.btn-dobry,.glowna-droga,.fab):not(:disabled){
  color:#FFFFFF!important;border-color:transparent!important;text-shadow:0 1px 1px rgba(40,6,34,.25);
  background:var(--mo-grad)!important;background-size:260% 100%!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px -10px rgba(122,40,110,.6)!important;
  transform:translate(var(--mo-dx,0px),var(--mo-dy,0px));
  animation:mo-plyn 9s ease-in-out infinite!important;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease!important}
/* „Była" i „Przyjmij" to sukces — szmaragd zamiast jagody. */
html[data-motyw="dopamina"] #gz :is(.btn-dobry,.zd-przyciski .byla){
  background:linear-gradient(120deg,#0E5E3E 0%,#1C8A5B 45%,#0F6B6A 75%,#0E5E3E 100%)!important;background-size:260% 100%!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px -10px rgba(14,94,62,.6)!important}
/* obwódka */
html[data-motyw="dopamina"] body :is(.btn:not(.btn2):not(#gz .btn),.b-glowny,.ok-btn.glowny,.log-btn,.b-start,.teraz-akcje .btn:not(.btn2),.mo-gotowe):not(:disabled)::before,
html[data-motyw="dopamina"] #gz :is(.btn-glowny,.btn-dobry,.glowna-droga,.fab):not(:disabled)::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.6px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--mo-kat),#F1D9A7,#EFA3C3,#B69CFF,#FFFFFF,#E2B864,#F1D9A7);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.85;animation:mo-obrot 4.5s linear infinite!important;transition:opacity .3s ease!important}
/* błysk + światło pod kursorem */
html[data-motyw="dopamina"] body :is(.btn:not(.btn2):not(#gz .btn),.b-glowny,.ok-btn.glowny,.log-btn,.b-start,.teraz-akcje .btn:not(.btn2),.mo-gotowe):not(:disabled)::after,
html[data-motyw="dopamina"] #gz :is(.btn-glowny,.btn-dobry,.glowna-droga,.fab):not(:disabled)::after{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:
    radial-gradient(150px circle at var(--mo-x,50%) var(--mo-y,0%),rgba(255,255,255,.26),rgba(255,255,255,0) 62%),
    linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 60%);
  background-size:100% 100%,260% 100%;background-repeat:no-repeat;
  animation:mo-blysk 5.2s cubic-bezier(.45,0,.2,1) infinite!important}
html[data-motyw="dopamina"] body :is(.btn:not(.btn2):not(#gz .btn),.b-glowny,.ok-btn.glowny,.log-btn,.b-start,.teraz-akcje .btn:not(.btn2),.mo-gotowe):not(:disabled):hover,
html[data-motyw="dopamina"] #gz :is(.btn-glowny,.btn-dobry,.glowna-droga,.fab):not(:disabled):hover{
  transform:translate(var(--mo-dx,0px),calc(var(--mo-dy,0px) - 2px));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 16px 32px -12px rgba(150,45,120,.62),0 0 0 4px rgba(239,163,195,.2)!important}
html[data-motyw="dopamina"] body :is(.btn:not(.btn2):not(#gz .btn),.b-glowny,.ok-btn.glowny,.log-btn,.b-start,.teraz-akcje .btn:not(.btn2),.mo-gotowe):not(:disabled):hover::before,
html[data-motyw="dopamina"] #gz :is(.btn-glowny,.btn-dobry,.glowna-droga,.fab):not(:disabled):hover::before{opacity:1}
html[data-motyw="dopamina"] body :is(.btn:not(.btn2):not(#gz .btn),.b-glowny,.ok-btn.glowny,.log-btn,.b-start,.teraz-akcje .btn:not(.btn2),.mo-gotowe):not(:disabled):active,
html[data-motyw="dopamina"] #gz :is(.btn-glowny,.btn-dobry,.glowna-droga,.fab):not(:disabled):active{
  transform:scale(.955)!important;transition-duration:.09s!important;
  box-shadow:inset 0 3px 12px rgba(40,6,34,.42),inset 0 0 0 1px rgba(255,255,255,.18),0 3px 10px -6px rgba(122,40,110,.5)!important}
html[data-motyw="dopamina"] body :is(.btn,.b-glowny,.ok-btn,.log-btn,.b-start,.mo-gotowe) svg,
html[data-motyw="dopamina"] #gz :is(.btn,.fab) .ik{transition:transform .5s cubic-bezier(.34,1.56,.64,1)!important}
html[data-motyw="dopamina"] body :is(.btn,.b-glowny,.ok-btn,.b-start,.mo-gotowe):hover svg,
html[data-motyw="dopamina"] #gz :is(.btn,.fab):hover .ik{transform:rotate(-8deg) scale(1.14)}
/* .fab stoi na position:fixed — nie przestawiamy mu pozycji, tylko wygląd */
html[data-motyw="dopamina"] #gz .fab{isolation:isolate}

/* ── PRZYCISKI DRUGIE: perła; pod kursorem złoto-różowa ramka i uniesienie ── */
html[data-motyw="dopamina"] body :is(.btn.btn2,.btn2,.b-drugi,.mini,.rez-btn,.op-btn,.ok-btn:not(.glowny):not(.wyjscie),.wstecz,.strzalka,.karnet-zab,.log-kto button,.okruszki a),
html[data-motyw="dopamina"] #gz :is(.btn-jasny,.ikbtn,.btn-przyjmij,.btn-zly){
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,border-color .3s ease,background-color .3s ease!important}
html[data-motyw="dopamina"] body :is(.btn.btn2,.btn2,.b-drugi,.mini,.rez-btn,.op-btn,.ok-btn:not(.glowny):not(.wyjscie),.wstecz,.strzalka,.karnet-zab,.log-kto button,.okruszki a):hover,
html[data-motyw="dopamina"] #gz :is(.btn-jasny,.ikbtn,.btn-przyjmij,.btn-zly):hover{
  transform:translateY(-1.5px);border-color:transparent!important;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(120deg,#E2B864,#EFA3C3 50%,#B69CFF) border-box!important;
  box-shadow:0 12px 24px -16px rgba(122,40,110,.55)!important}
html[data-motyw="dopamina"] body :is(.btn.btn2,.btn2,.b-drugi,.mini,.rez-btn,.op-btn,.ok-btn:not(.glowny),.wstecz,.strzalka,.karnet-zab,.log-kto button,.okruszki a):active,
html[data-motyw="dopamina"] #gz :is(.btn-jasny,.ikbtn,.btn-przyjmij,.btn-zly):active{transform:scale(.95)!important;transition-duration:.09s!important}
html[data-motyw="dopamina"] body :is(.btn2,.mini,.op-btn,.strzalka,.wstecz,.log-kto button) svg{transition:transform .5s cubic-bezier(.34,1.56,.64,1)!important}
html[data-motyw="dopamina"] body :is(.btn2,.mini,.op-btn,.strzalka,.wstecz,.log-kto button):hover svg{transform:rotate(-10deg) scale(1.15)}
html[data-motyw="dopamina"] #gz .btn-zly:hover{background:linear-gradient(#FFF5F7,#FFF5F7) padding-box,linear-gradient(120deg,#F29CB0,#C62A4B) border-box!important}

/* ── WYBÓR W SEGMENTACH: wybrana opcja „wskakuje" i dostaje złotą kreskę ─ */
html[data-motyw="dopamina"] body :is(.pas button.on,.przel button.on,.przyciski button.wybrany),
html[data-motyw="dopamina"] #gz :is(.segment button.wyb,.przelacznik button[aria-selected="true"],.chip.wyb){
  animation:mo-wyskok .5s cubic-bezier(.34,1.56,.64,1) backwards!important;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 8px 18px -12px rgba(122,40,110,.55),0 0 0 1px rgba(226,184,100,.55)!important}
html[data-motyw="dopamina"] #gz .chip.wyb{background:var(--mo-grad)!important;background-size:260% 100%!important;border-color:transparent!important;color:#fff!important}
html[data-motyw="dopamina"] body :is(.godz.on,.dni .dzien.on,.odp button.wybrane){
  background:var(--mo-grad)!important;background-size:260% 100%!important;border-color:transparent!important;color:#fff!important;
  animation:mo-wyskok .5s cubic-bezier(.34,1.56,.64,1) backwards,mo-plyn 9s ease-in-out infinite!important}
@keyframes mo-wyskok{0%{transform:scale(.9)}55%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ── LISTWA: ikona podskakuje, aktywna ma złoto-jagodową poświatę ─────── */
html[data-motyw="dopamina"] body .listwa a{transition:color .25s ease,background .25s ease!important}
html[data-motyw="dopamina"] body .listwa a svg{transition:transform .55s cubic-bezier(.34,1.56,.64,1)!important}
html[data-motyw="dopamina"] body .listwa a:hover svg{transform:translateY(-2px) rotate(-8deg) scale(1.14)}
html[data-motyw="dopamina"] body .listwa a:active svg{transform:scale(.88);transition-duration:.08s!important}
html[data-motyw="dopamina"] body .listwa a.tu{color:#6E1F55;background:linear-gradient(160deg,#FFFFFF,#FBEFF6);
  border-color:rgba(226,184,100,.45);box-shadow:0 10px 22px -16px rgba(122,40,110,.55)}
html[data-motyw="dopamina"] body .listwa a.tu svg{color:#9C2F76}
html[data-motyw="dopamina"] body .listwa a.tu::before{background:linear-gradient(180deg,#E2B864,#C0267E,#6F2C8F);
  box-shadow:0 0 12px rgba(192,38,126,.5);animation:mo-puls 2.8s ease-in-out infinite!important}
@keyframes mo-puls{0%,100%{box-shadow:0 0 6px rgba(192,38,126,.35)}50%{box-shadow:0 0 16px rgba(226,184,100,.7)}}

/* ── PASKI POSTĘPU: płynąca śliwka → róż → szampan ───────────────────── */
html[data-motyw="dopamina"] body :is(.postep-dnia .tor i,.karta-glowa .pasek i,.mag-pasek i),
html[data-motyw="dopamina"] #gz .zd-postep i{
  background:linear-gradient(90deg,#8E2C6E,#E08AB5,#E2B864,#8E2C6E)!important;background-size:300% 100%!important;
  animation:sz-pasek .9s cubic-bezier(.2,.7,.2,1) both,mo-plyn 6s linear infinite!important;
  box-shadow:0 0 10px rgba(226,138,181,.45)}

/* ── OKIENKA I KOMUNIKATY: sprężyste wejście, złota nitka u góry ─────── */
html[data-motyw="dopamina"] body .ok-panel{animation:mo-okno .55s cubic-bezier(.22,1.3,.36,1) both!important;border-color:rgba(142,44,110,.14)}
html[data-motyw="dopamina"] body .ok-panel::before{height:3px;background:linear-gradient(90deg,#E2B864,#C0267E,#6F2C8F)}
html[data-motyw="dopamina"] body .ok-tlo{background:rgba(46,20,48,.34);-webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%)}
@keyframes mo-okno{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
html[data-motyw="dopamina"] body .komunikat{animation:mo-okno .5s cubic-bezier(.22,1.3,.36,1) both!important}
html[data-motyw="dopamina"] body .k-ok::before{background-color:#1E7A4C;box-shadow:0 0 0 4px rgba(30,122,76,.16);animation:mo-wyskok .6s cubic-bezier(.34,1.56,.64,1) .1s both!important}
html[data-motyw="dopamina"] body .log-karta{border-color:rgba(142,44,110,.14);box-shadow:0 30px 70px -36px rgba(122,40,110,.5)}
html[data-motyw="dopamina"] :focus-visible{outline:2px solid #C0267E!important;outline-offset:2px!important;box-shadow:0 0 0 6px rgba(192,38,126,.16)}
html[data-motyw="dopamina"] ::selection{background:#F6CFE3;color:#24172B}
html[data-motyw="dopamina"] body input:focus,html[data-motyw="dopamina"] body select:focus,html[data-motyw="dopamina"] body textarea:focus{
  border-color:#B76E79!important;box-shadow:0 0 0 4px rgba(239,163,195,.28)!important}
html[data-motyw="dopamina"] body input[type=checkbox],html[data-motyw="dopamina"] body input[type=radio]{accent-color:#8E2C6E}

@keyframes mo-plyn{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes mo-obrot{to{--mo-kat:360deg}}
@keyframes mo-blysk{0%{background-position:0 0,160% 0}55%,100%{background-position:0 0,-60% 0}}

/* Fala pod palcem i płótno na iskry — nakładki, nie ruszają przycisków. */
.mo-fala{position:fixed;z-index:2147483600;pointer-events:none;overflow:hidden}
.mo-fala i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(156,47,118,.20) 0,rgba(156,47,118,.10) 45%,rgba(156,47,118,0) 70%);
  transform:scale(0);animation:mo-fala .7s cubic-bezier(.2,.7,.2,1) forwards}
.mo-fala.jasna i{background:radial-gradient(circle,rgba(255,255,255,.55) 0,rgba(255,240,248,.25) 45%,rgba(255,255,255,0) 70%)}
@keyframes mo-fala{0%{transform:scale(0);opacity:1}70%{opacity:.85}100%{transform:scale(1);opacity:0}}
.mo-plotno{position:fixed;left:0;top:0;z-index:2147483601;pointer-events:none}

/* ════════════════════════════════════════════════════════════════════════
   PRZYCISK „WYGLĄD" W PASKU I ZNACZEK POKAZU
   ════════════════════════════════════════════════════════════════════════ */
html body .log-kto .mo-przycisk{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
html body .log-kto .mo-przycisk svg{width:17px;height:17px}
html body .log-kto .mo-pokaz{margin-left:14px;padding:4px 11px;border-radius:999px;white-space:nowrap;
  font:700 11px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:#7A2E4F;background:#FBE7EF;border:1px solid #F0C7D8}
html[data-motyw="skupienie"] body .log-kto .mo-pokaz{color:#F3C5D6;background:#3A2530;border-color:#5A3A48}
@media(max-width:760px){ html body .log-kto .mo-pokaz{display:none} }
@media(max-width:560px){ html body .log-kto .mo-przycisk span{display:none} html body .log-kto .mo-przycisk{padding:0 13px} }

/* ════════════════════════════════════════════════════════════════════════
   PANEL „MÓJ WYGLĄD"
   Barwy z palety AKTYWNEGO motywu (panel sam wygląda jak wybrany motyw),
   miniatury — każda we własnych barwach.
   ════════════════════════════════════════════════════════════════════════ */
html body .mo-tlo{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:16px;
  background:rgba(24,18,20,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s ease}
html body .mo-tlo.otwarte{opacity:1}
html body .mo-okno{width:min(900px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;
  background:var(--surface);color:var(--ink);border:1px solid var(--axis);border-radius:24px;
  box-shadow:0 30px 80px -30px rgba(20,10,16,.55);padding:26px 26px 20px;font-family:var(--sans);
  transform:translateY(14px) scale(.975);transition:transform .45s cubic-bezier(.22,1.25,.36,1)}
html body .mo-tlo.otwarte .mo-okno{transform:none}
html body .mo-tlo.zamyka .mo-okno{transform:translateY(8px) scale(.98)}
html body .mo-glowa{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
html body .mo-glowa h2{margin:0;font:700 27px/1.15 var(--display,var(--sans));letter-spacing:-.012em;color:var(--ink);
  -webkit-text-fill-color:currentColor;background:none}
html body .mo-glowa p{margin:6px 0 0;font-size:15.5px;line-height:1.5;color:var(--muted)}
html body .mo-zamknij{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--axis);background:var(--surface);color:var(--ink2);cursor:pointer}
html body .mo-zamknij svg{width:20px;height:20px}
html body .mo-zamknij:hover{background:var(--surface-2);color:var(--ink)}
html body .mo-siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:20px 0 6px}
html body .mo-kafel{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:6px;
  padding:10px 10px 15px;border-radius:19px;border:1.5px solid var(--axis);background:var(--surface);color:var(--ink);
  cursor:pointer;transition:border-color .2s ease,box-shadow .25s ease,transform .45s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color:transparent}
html body .mo-kafel:hover{border-color:var(--ink2);transform:translateY(-2px);box-shadow:0 14px 30px -22px rgba(0,0,0,.45)}
html body .mo-kafel:active{transform:scale(.985)}
html body .mo-kafel:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
html body .mo-kafel[aria-checked="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink),0 16px 34px -24px rgba(0,0,0,.5)}
html body .mo-nazwa{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:8px 6px 0;font:750 18px/1.2 var(--sans);color:var(--ink)}
html body .mo-nazwa small{font:700 11.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  padding:4px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--grid)}
html body .mo-opis{margin:0 6px;font-size:14.5px;line-height:1.45;color:var(--ink2)}
html body .mo-znacznik{position:absolute;top:18px;right:18px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--surface);box-shadow:0 0 0 3px var(--surface);
  opacity:0;transform:scale(.5);transition:opacity .2s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
html body .mo-znacznik svg{width:17px;height:17px}
html body .mo-kafel[aria-checked="true"] .mo-znacznik{opacity:1;transform:none}
html body .mo-info{margin:10px 0 0;padding:12px 15px;border-radius:14px;background:var(--surface-2);border:1px solid var(--grid);
  font-size:15px;line-height:1.5;color:var(--ink2)}
html body .mo-info b{color:var(--ink)}
html body .mo-stopka{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--grid)}
html body .mo-kto{font-size:14.5px;color:var(--muted)}
html body .mo-kto b{color:var(--ink)}
html body .mo-gotowe{min-height:48px;padding:0 26px;border-radius:13px;border:1px solid var(--accent);
  background:var(--accent);color:#FFFFFF;font:700 15.5px var(--sans);cursor:pointer}
html body .mo-gotowe:hover{background:var(--accent-deep)}
@media(max-width:560px){
  html body .mo-okno{padding:20px 16px 16px;border-radius:20px}
  html body .mo-glowa h2{font-size:23px}
  html body .mo-siatka{grid-template-columns:1fr}
  html body .mo-podglad{height:96px}
}

/* ── MINIATURY ─────────────────────────────────────────────────────────── */
html body .mo-podglad{position:relative;display:flex;height:122px;border-radius:13px;overflow:hidden;isolation:isolate}
html body .mo-p-listwa{flex:0 0 22%;display:flex;flex-direction:column;align-items:center;gap:9px;padding-top:14px}
html body .mo-p-listwa i{width:15px;height:15px;border-radius:5px;display:block}
html body .mo-p-karta{position:relative;flex:1;margin:14px 14px 14px 12px;border-radius:11px;padding:11px 13px;
  display:flex;flex-direction:column;gap:7px;overflow:hidden}
html body .mo-p-karta b{font-size:26px;line-height:1;font-weight:700;letter-spacing:-.01em}
html body .mo-p-karta i{display:block;height:6px;border-radius:4px}
html body .mo-p-karta i.l1{width:84%} html body .mo-p-karta i.l2{width:58%}
html body .mo-p-karta em{position:absolute;right:11px;bottom:11px;font:700 11.5px/1 var(--sans);font-style:normal;
  padding:7px 11px;border-radius:8px;color:#fff}
/* Kamień */
.mo-p-kamien{background:#ECE8E1}
.mo-p-kamien .mo-p-listwa{background:#E4DFD7;box-shadow:inset -1px 0 0 #D5CEC3}
.mo-p-kamien .mo-p-listwa i{background:#B9AE9F}
.mo-p-kamien .mo-p-karta{background:#FAF8F5;box-shadow:0 0 0 1px rgba(84,74,62,.13),0 8px 16px -12px rgba(46,42,38,.4)}
.mo-p-kamien .mo-p-karta b{color:#2E2A26;font-family:'Source Sans 3',sans-serif}
.mo-p-kamien .mo-p-karta i{background:#D5CEC3}
.mo-p-kamien .mo-p-karta em{background:#6B5E52}
/* Czytelny */
.mo-p-czytelny{background:#F3F3F1}
.mo-p-czytelny .mo-p-listwa{background:#E9E9E6;box-shadow:inset -1.5px 0 0 #8A8A8A}
.mo-p-czytelny .mo-p-listwa i{background:#38383D}
.mo-p-czytelny .mo-p-karta{background:#FFFFFF;box-shadow:0 0 0 1.5px #8A8A8A}
.mo-p-czytelny .mo-p-karta b{color:#0B0B0C;font-family:'Atkinson Hyperlegible Next',sans-serif;font-size:30px}
.mo-p-czytelny .mo-p-karta i{background:#38383D;height:7px}
.mo-p-czytelny .mo-p-karta em{background:#16181D;font-family:'Atkinson Hyperlegible Next',sans-serif;font-size:12.5px}
/* Skupienie */
.mo-p-skupienie{background:#1B1A18}
.mo-p-skupienie .mo-p-listwa{background:#171614;box-shadow:inset -1px 0 0 #34312D}
.mo-p-skupienie .mo-p-listwa i{background:#4B4640}
.mo-p-skupienie .mo-p-listwa i:first-child{background:#B3A898}
.mo-p-skupienie .mo-p-karta{background:#242220;box-shadow:0 0 0 1px #34312D}
.mo-p-skupienie .mo-p-karta b{color:#EEEAE3;font-family:'Source Sans 3',sans-serif}
.mo-p-skupienie .mo-p-karta i{background:#4B4640}
.mo-p-skupienie .mo-p-karta em{background:#7B6D60}
/* Automatycznie — pół na pół, słońce i księżyc */
.mo-p-auto{background:linear-gradient(115deg,#ECE8E1 0 50%,#1B1A18 50% 100%)}
.mo-p-auto .mo-p-listwa{background:linear-gradient(115deg,#E4DFD7 0 50%,#171614 50%);opacity:.9}
.mo-p-auto .mo-p-listwa i{background:#8E857A}
.mo-p-auto .mo-p-karta{background:linear-gradient(115deg,#FAF8F5 0 46%,#242220 46% 100%);box-shadow:0 0 0 1px rgba(120,110,100,.35)}
.mo-p-auto .mo-p-karta b{background:linear-gradient(115deg,#2E2A26 0 42%,#EEEAE3 42%);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:'Source Sans 3',sans-serif}
.mo-p-auto .mo-p-karta i{background:linear-gradient(90deg,#D5CEC3 0 45%,#4B4640 45%)}
.mo-p-auto .mo-p-karta em{background:#6B5E52}
.mo-p-slonce,.mo-p-ksiezyc{position:absolute;z-index:2;width:22px;height:22px;border-radius:50%}
.mo-p-slonce{left:9px;bottom:10px;background:#E8B45A;box-shadow:0 0 0 5px rgba(232,180,90,.25),0 0 18px rgba(232,180,90,.6)}
.mo-p-ksiezyc{right:12px;top:11px;background:transparent;box-shadow:inset -7px -2px 0 0 #E9E3DA}
/* Dopamina — żywa miniatura: zorza, obwódka, błysk, mrugające iskry */
.mo-p-dopamina{background:
  radial-gradient(60% 70% at 15% 20%,rgba(239,163,195,.55),rgba(239,163,195,0) 70%),
  radial-gradient(55% 60% at 90% 15%,rgba(182,156,255,.45),rgba(182,156,255,0) 70%),
  radial-gradient(60% 60% at 70% 100%,rgba(226,184,100,.40),rgba(226,184,100,0) 70%),#FBF7F9;
  background-size:160% 160%;animation:mo-plyn 12s ease-in-out infinite!important}
.mo-p-dopamina .mo-p-listwa{background:rgba(255,255,255,.55);box-shadow:inset -1px 0 0 #EAD6E4}
.mo-p-dopamina .mo-p-listwa i{background:#E8CFE0}
.mo-p-dopamina .mo-p-listwa i:first-child{background:linear-gradient(135deg,#E2B864,#C0267E)}
.mo-p-dopamina .mo-p-karta{background:#FFFFFF;box-shadow:0 0 0 1px rgba(142,44,110,.1),0 12px 24px -16px rgba(122,40,110,.5)}
.mo-p-dopamina .mo-p-karta b{font-family:'Plus Jakarta Sans',sans-serif;background:linear-gradient(100deg,#24172B,#9C2F76 60%,#B76E79);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mo-p-dopamina .mo-p-karta i{background:#F1E4EE}
.mo-p-dopamina .mo-p-karta em{font-family:'Plus Jakarta Sans',sans-serif;isolation:isolate;overflow:hidden;
  background:linear-gradient(120deg,#5E1A4B,#9C2F76 38%,#6F2C8F 68%,#5E1A4B);background-size:260% 100%;
  box-shadow:0 6px 14px -6px rgba(122,40,110,.7);animation:mo-plyn 6s ease-in-out infinite!important}
.mo-p-dopamina .mo-p-karta em::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;z-index:-1;
  background:conic-gradient(from var(--mo-kat),#F1D9A7,#EFA3C3,#B69CFF,#FFFFFF,#E2B864,#F1D9A7);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:mo-obrot 3.5s linear infinite!important}
.mo-p-dopamina .mo-p-karta em::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%);
  background-size:260% 100%;animation:mo-blysk-1 3.4s cubic-bezier(.45,0,.2,1) infinite!important}
@keyframes mo-blysk-1{0%{background-position:160% 0}55%,100%{background-position:-60% 0}}
.mo-p-iskra{position:absolute;z-index:3;width:10px;height:10px;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);background:#E2B864;
  animation:mo-mig 2.4s ease-in-out infinite!important}
.mo-p-iskra.i1{left:30%;top:14%} .mo-p-iskra.i2{right:8%;top:36%;width:8px;height:8px;animation-delay:-.8s!important;background:#EFA3C3}
.mo-p-iskra.i3{left:46%;bottom:10%;width:7px;height:7px;animation-delay:-1.6s!important}
@keyframes mo-mig{0%,100%{transform:scale(.3) rotate(0);opacity:0}45%{transform:scale(1) rotate(45deg);opacity:1}70%{transform:scale(.6) rotate(70deg);opacity:.6}}

/* Panel w samej Dopaminie — perła z nitką złota */
html[data-motyw="dopamina"] body .mo-okno{border-color:rgba(142,44,110,.14);
  box-shadow:0 40px 90px -40px rgba(122,40,110,.6),0 0 0 1px rgba(226,184,100,.25)}
html[data-motyw="dopamina"] body .mo-kafel[aria-checked="true"]{border-color:transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(120deg,#E2B864,#C0267E 50%,#6F2C8F) border-box;
  box-shadow:0 18px 36px -24px rgba(122,40,110,.65)}
html[data-motyw="dopamina"] body .mo-kafel[aria-checked="true"] .mo-znacznik{background:linear-gradient(135deg,#E2B864,#C0267E 55%,#6F2C8F);color:#fff}

/* ════════════════════════════════════════════════════════════════════════
   DOPAMINA — dopiski 25.09 po „ma naprawdę robić wrażenie" + dźwięki
   ════════════════════════════════════════════════════════════════════════ */
/* Liczba po odliczeniu: przez złoty połysk przechodzi raz światło. */
html[data-motyw="dopamina"] body :is(.kafel:not(.dobry):not(.zly):not(.uwaga) .w,.liczba:not(.uwaga) b,.duza).mo-lsni{
  background-image:linear-gradient(110deg,#3B1B4F 0%,#9C2F76 38%,#F1D9A7 50%,#9C2F76 62%,#B76E79 100%);
  background-size:260% 100%;animation:mo-lsnienie 1.3s cubic-bezier(.4,0,.2,1) both!important}
@keyframes mo-lsnienie{from{background-position:100% 0}to{background-position:0 0}}

/* Awatar w pasku: złoto-różowa obwódka powoli obiega inicjał. */
html[data-motyw="dopamina"] body .log-kto .awatar{position:relative;isolation:isolate;background:#FFFFFF;
  box-shadow:none;color:#6E1F55;font-weight:700}
html[data-motyw="dopamina"] body .log-kto .awatar::before{content:'';position:absolute;inset:-3px;border-radius:50%;padding:2px;z-index:-1;
  background:conic-gradient(from var(--mo-kat),#E2B864,#EFA3C3,#B69CFF,#E2B864);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:mo-obrot 6s linear infinite!important}

/* Aureola po wciśnięciu przycisku głównego — nakładka, przycisku nie rusza. */
.mo-halo{position:fixed;z-index:2147483599;pointer-events:none;animation:mo-halo .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes mo-halo{
  from{box-shadow:0 0 0 0 rgba(226,184,100,.7),0 0 0 0 rgba(239,163,195,.5)}
  to{box-shadow:0 0 0 12px rgba(226,184,100,0),0 0 0 26px rgba(239,163,195,0)}}

/* Głośnik w pasku — tylko w Dopaminie (w innych motywach dźwięków nie ma). */
html body .log-kto .mo-dzwiek{display:none}
html[data-motyw="dopamina"] body .log-kto .mo-dzwiek{display:inline-grid;place-items:center;width:44px;padding:0}
html body .log-kto .mo-dzwiek svg{width:19px;height:19px}
html body .log-kto .mo-dzwiek[aria-pressed="true"]{color:var(--muted);border-style:dashed}

/* Przełącznik dźwięków w panelu „Mój wygląd". */
html body .mo-dzwieki{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin:12px 0 0;padding:14px 16px;
  border-radius:16px;background:var(--surface-2);border:1px solid var(--grid)}
html body .mo-dzwieki[hidden]{display:none}
html body .mo-dz-opis{flex:1 1 280px;display:flex;flex-direction:column;gap:3px}
html body .mo-dz-opis b{font:750 16px/1.3 var(--sans);color:var(--ink)}
html body .mo-dz-opis span{font-size:14px;line-height:1.45;color:var(--ink2)}
html body .mo-przel-dzw{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:0 6px;font:700 14.5px var(--sans);color:var(--ink);-webkit-tap-highlight-color:transparent}
html body .mo-przel-dzw i{position:relative;width:50px;height:30px;border-radius:999px;background:var(--axis);transition:background .3s ease}
html body .mo-przel-dzw i::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#FFFFFF;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
html body .mo-przel-dzw[aria-checked="true"] i{background:linear-gradient(120deg,#8E2C6E,#6F2C8F)}
html body .mo-przel-dzw[aria-checked="true"] i::after{transform:translateX(20px)}
html body .mo-przel-dzw:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:12px}
html body .mo-posluchaj{min-height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--axis);background:var(--surface);
  color:var(--ink);font:700 14.5px var(--sans);cursor:pointer}

/* Zmiana motywu: nowy wygląd rozlewa się kołem od miejsca kliknięcia. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ⚠️ 25.09, test w silniku Safari: `filter` (rozjaśnienie przycisku pod kursorem) +
   kliknięcie myszą wywracał kartę Safari na Macu (iPad/iPhone palcem — OK). Rozjaśnienie
   robi teraz nakładka światła ::after, a motywy nie używają `filter` wcale. */
html[data-motyw="dopamina"] body :is(.btn:not(.btn2):not(#gz .btn),.b-glowny,.ok-btn.glowny,.log-btn,.b-start,.teraz-akcje .btn:not(.btn2),.mo-gotowe):not(:disabled):hover::after,
html[data-motyw="dopamina"] #gz :is(.btn-glowny,.btn-dobry,.glowna-droga,.fab):not(:disabled):hover::after{
  background:
    radial-gradient(170px circle at var(--mo-x,50%) var(--mo-y,0%),rgba(255,255,255,.34),rgba(255,255,255,0) 62%),
    linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 60%),
    linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06));
  background-size:100% 100%,260% 100%,100% 100%;background-repeat:no-repeat}

/* ════════════════════════════════════════════════════════════════════════
   ŻARÓWKA — opisy na żądanie (27.09.2026, Paweł)
   Klasa `opis-ekranu` na ekranach = tekst, który tłumaczy ekran. Zgaszona żarówka
   chowa wszystkie naraz; liczby, ostrzeżenia i błędy tej klasy nie mają.
   ════════════════════════════════════════════════════════════════════════ */
html.mo-bez-opisow .opis-ekranu{display:none!important}
html.mo-opisy-wracaja .opis-ekranu{animation:mo-opis-wraca .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes mo-opis-wraca{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

html body .log-kto button.mo-zarowka{margin-left:auto;width:44px;height:44px;min-height:44px;padding:0;border:0;
  border-radius:50%;display:inline-grid;place-items:center;background:transparent;overflow:hidden;flex:0 0 auto;
  box-shadow:0 1px 2px rgba(58,44,34,.16),0 0 0 1px rgba(58,44,34,.07);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}
html body .log-kto .mo-zarowka + .mo-przycisk{margin-left:0}
html body .log-kto button.mo-zarowka img{grid-area:1/1;width:44px;height:44px;border-radius:50%;display:block;
  pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .45s ease}
html body .log-kto button.mo-zarowka[aria-pressed="true"] .z-off,
html body .log-kto button.mo-zarowka[aria-pressed="false"] .z-on{opacity:0}
html body .log-kto button.mo-zarowka:hover{transform:translateY(-1px);
  box-shadow:0 7px 18px -6px rgba(176,128,64,.6),0 0 0 1px rgba(58,44,34,.08)}
html body .log-kto button.mo-zarowka[aria-pressed="false"]:hover{box-shadow:0 6px 14px -7px rgba(58,44,34,.45),0 0 0 1px rgba(58,44,34,.08)}
html body .log-kto button.mo-zarowka:active{transform:scale(.94)}
html body .log-kto button.mo-zarowka:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.mo-dymek{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 74px);z-index:9999;
  transform:translate(-50%,-6px);opacity:0;pointer-events:none;max-width:calc(100vw - 32px);width:max-content;
  padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--surface);text-align:center;
  font:600 14px/1.35 var(--sans);box-shadow:0 10px 30px -12px rgba(0,0,0,.45);
  transition:opacity .25s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.mo-dymek.widac{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion: reduce){
  html body .log-kto button.mo-zarowka,html body .log-kto button.mo-zarowka img,.mo-dymek{transition:none}
  html.mo-opisy-wracaja .opis-ekranu{animation:none}
}